/**
 * Shared Title Link & Underline Styles
 *
 * Applied via the .cdswerx-title-link class used by Link_Mode_Trait.
 * Works across Section, Banner, Icon Box, Info Box, and any future widget
 * that adopts the trait.
 *
 * DRAW EFFECT — the draw is animated with `transform: scaleX()`, never by
 * writing `width`. This matters: the Underline Width control writes `width` on
 * the same pseudo-element, so a width-based draw rule competes with it at equal
 * specificity — and on a specificity tie the winner is decided by stylesheet
 * load order, which is not deterministic between the editor and the front end.
 * That tie was the original defect. Animating `transform` leaves `width`
 * entirely to the control.
 *
 * The MECHANISM matches the button underline (button-widget.css:469-506); the
 * CHOREOGRAPHY deliberately does not — see the draw section below for why.
 *
 * CENTRE ALIGNMENT — centred via `margin-inline: auto`, deliberately NOT via
 * `transform: translateX(-50%)`. The draw animates `transform`, so a
 * transform-based centring would be overwritten the moment the draw runs and
 * the bar would jump to the left edge mid-animation.
 *
 * WRAPPING — .cdswerx-title-link is inline-block, so on a title that wraps to
 * multiple lines the bar sits at the bottom of the whole box rather than
 * following each line. Unchanged from the previous implementation and matches
 * button behaviour. For wrap-following underlines the multiline
 * (background-size) keyframes in cdswerx-underline.css are the alternative.
 *
 * @since 2.16.0
 */

/* Base Title Link */
.cdswerx-title-link {
    display: inline-block;
    color: inherit;
    position: relative;
    transition: color 0.25s ease-in-out;
}

/* Underline pseudo-element (shared base) */
.cdswerx-title-link.cdswerx-title-link--underline:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out;
    backface-visibility: hidden;
}

/* Underline alignment: right */
.cdswerx-title-link.cdswerx-title-link--right:after {
    left: auto;
    right: 0;
}

/* Underline alignment: centre — margin-based so `transform` stays free for the
   draw animation (see header note). */
.cdswerx-title-link.cdswerx-title-link--center:after {
    left: 0;
    right: 0;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Draw effect — hidden at rest, draws in on hover
 *
 * MECHANISM is shared with the button (animate `transform`, never `width`), but
 * the CHOREOGRAPHY intentionally differs, because the two have different
 * resting states:
 *
 *   button : bar visible at rest  → wipes out and redraws on hover
 *   title  : bar HIDDEN at rest   → draws in on hover
 *
 * The title's hidden-at-rest behaviour is the pre-existing contract (previously
 * expressed as `width: 0`) and is preserved here as `scaleX(0)`. Reusing the
 * button's cds-animate-underline-from-* keyframes would NOT be parity — those
 * start at scaleX(1), which would leave every draw-mode title underline
 * permanently visible.
 *
 * `width` is untouched throughout, so the Underline Width control keeps sole
 * ownership of it and the old specificity tie is gone.
 * ------------------------------------------------------------------------ */

.cdswerx-title-link.cdswerx-title-link--underline.cdswerx-title-link--draw:after {
    transform: scaleX(0);
    transition: transform 0.36s cubic-bezier(0.51, 0.5, 0.07, 0.99),
                background-color 0.25s ease-in-out;
}

/* Draw origin follows the alignment. */
.cdswerx-title-link.cdswerx-title-link--draw.cdswerx-title-link--left:after {
    transform-origin: left;
}

.cdswerx-title-link.cdswerx-title-link--draw.cdswerx-title-link--right:after {
    transform-origin: right;
}

.cdswerx-title-link.cdswerx-title-link--draw.cdswerx-title-link--center:after {
    transform-origin: center;
}

/* Draw in on hover. */
.cdswerx-title-link.cdswerx-title-link--underline.cdswerx-title-link--draw:hover:after {
    transform: scaleX(1);
}