/* =============================================================================
   Indeso Design System - styles des composants de texte
   -----------------------------------------------------------------------------
   Complete components.css. Le decoupage suit les familles de composants, pour
   qu'un fichier reste lisible a mesure que la bibliotheque grandit.
   ============================================================================= */


/* =============================================================================
   MyHighlightText
   ============================================================================= */

.my-highlight {
    display: inline;
    white-space: pre;
}

/* Le fond reste transparent : surligner en couleur pleine sur une ligne de
   tableau deja survolee produit trois couches de couleur superposees. La graisse
   et la couleur d'action suffisent a reperer le terme. */
.my-highlight-match {
    background: transparent;
    color: var(--my-action-primary);
    font-weight: var(--my-font-weight-bold);
}


/* =============================================================================
   MyExpandableText
   ============================================================================= */

.my-expandable-text {
    position: relative;
}

.my-expandable-text-wrapper {
    position: relative;
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Neuf lignes : assez pour juger si le texte merite d'etre lu en entier, assez
   peu pour ne pas repousser le reste de l'ecran. La hauteur est exprimee en
   multiples de l'interlignage pour que la coupe tombe entre deux lignes. */
.my-expandable-text-wrapper--clamped {
    max-height: calc(1.85em * 9);
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-expandable-text-content {
    margin: 0;
    color: var(--my-text-body);
    font-size: var(--my-font-size-md);
    line-height: 1.85;
    white-space: pre-line;
}

/* Degrade d'estompe : signale que le texte continue. Il part vers la couleur de
   surface et non vers du blanc en dur, sinon il laisse une bande claire visible
   des que la carte a un fond teinte. */
.my-expandable-text-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--my-surface-card));
    pointer-events: none;
}

.mud-button-root.my-expandable-text-toggle {
    align-self: flex-start;
    margin-top: var(--my-space-sm);
    padding: var(--my-space-xs) 10px;
    min-width: 0;
    min-height: 0;
    font-weight: var(--my-font-weight-bold);
    letter-spacing: 0.3px;
    text-transform: none;
}


/* =============================================================================
   MyIconLink
   ============================================================================= */

/* inline-flex et largeur ajustee au contenu : sans cela le lien occupe toute la
   largeur de sa cellule et devient cliquable bien au-dela de son texte. */
.mud-link.my-icon-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

/* L'ecart de 5px etait porte par la classe dense-gap de l'original. */
.mud-link.my-icon-link .my-icon-link-corps {
    gap: 5px;
}