/* =========================================================
   Text Highlighter – highlighter.css
   Shared by both the shortcode and the Gutenberg block.
   ========================================================= */

/* ----- Base mark reset ----- */
.th-highlight {
    /* CSS custom properties set inline by PHP */
    --th-color : #FFE066;
    --th-alpha : 0.80;

    background-color : transparent;
    background-image : none;
    color            : inherit;
    padding          : 0.05em 0.15em;
    border-radius    : 0.2em;
    box-decoration-break        : clone;
    -webkit-box-decoration-break: clone;

    /* Build an rgba() background from the hex + alpha vars using a clever
       gradient trick that works without color-mix() for broader support.    */
    background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--th-color) calc(var(--th-alpha) * 100%), transparent),
        color-mix(in srgb, var(--th-color) calc(var(--th-alpha) * 100%), transparent)
    );
}

/* Fallback for browsers without color-mix support */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .th-highlight {
        background-image: none;
        background-color: var(--th-color);
        opacity: var(--th-alpha);
    }
}

/* ----- Animated sweep variant ----- */
.th-highlight--animated {
    background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--th-color) calc(var(--th-alpha) * 100%), transparent) 0%,
        color-mix(in srgb, var(--th-color) calc(var(--th-alpha) * 100%), transparent) 100%
    );
    background-size    : 0% 100%;
    background-repeat  : no-repeat;
    background-position: left center;
    animation          : th-sweep 0.6s ease-out forwards;
}

@keyframes th-sweep {
    from { background-size: 0%   100%; }
    to   { background-size: 100% 100%; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .th-highlight--animated {
        animation: none;
        background-size: 100% 100%;
    }
}

/* ----- Colour presets (used by Gutenberg block preview) ----- */
.th-preset-yellow { --th-color: #FFE066; }
.th-preset-green  { --th-color: #A8F0C6; }
.th-preset-blue   { --th-color: #A0D4FF; }
.th-preset-pink   { --th-color: #FFB3DE; }
.th-preset-orange { --th-color: #FFD0A0; }
.th-preset-purple { --th-color: #D4AAFF; }
.th-preset-red    { --th-color: #FFB3B3; }