/*
 * Interaction states, as M3 draws them.
 *
 * `state-layer` puts M3's state layer on an element: its content colour laid over it at 8%
 * on hover, 10% on focus and press. Hover only where the pointer can hover, because a touch
 * screen keeps the last hover after a tap. The layer is a ::before, so the element becomes
 * `position: relative` and `isolation: isolate`; never pass `static` or a z-index to it.
 *
 * `focus-ring` is M3's focus indicator — 3px in secondary, 2px out — drawn only for keyboard
 * focus. `link` is a link in running text: underlined in the colour of the words around it.
 */

@utility state-layer {
    position: relative;
    isolation: isolate;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: currentColor;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
    }

    @media (hover: hover) {
        &:hover::before {
            opacity: 0.08;
        }
    }

    &:focus-visible::before,
    &:active::before {
        opacity: 0.1;
    }

    &:disabled::before,
    &[aria-disabled='true']::before {
        display: none;
    }
}

@utility focus-ring {
    outline: none;

    &:focus-visible {
        outline: 3px solid var(--md-sys-color-secondary);
        outline-offset: 2px;
    }
}

@utility link {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
    border-radius: var(--md-sys-shape-corner-xs);

    &:focus-visible {
        outline: 3px solid var(--md-sys-color-secondary);
        outline-offset: 2px;
    }
}

[x-cloak] {
    display: none !important;
}