/*
 * The interaction classes every interactive component shares, and an application's own control
 * can use: M3's state layer, its focus indicator, its minimum target, and a link in running text.
 *
 * `md-state-layer` lays the content colour over an element at M3's state opacities
 * (tokens/state.css): hover 8%, focus and press 10%, dragged 16%. Hover only where the pointer
 * can hover, because a touch screen keeps the last hover after a tap; `data-md-dragged` (or the
 * older `data-dragged`) on the element draws the dragged layer; a disabled element has none. The
 * layer is a ::before, so the element becomes `position: relative` and `isolation: isolate`.
 *
 * `md-focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
 * focus. The site gives no thickness or offset; the values are @material/web's focus ring tokens
 * (Apache-2.0, © Google LLC).
 *
 * `md-touch-target` extends an element's pointer target to M3's 48×48 minimum without changing
 * what is drawn: a ::after centred on it, at least `space600` (48px) each way. M3 gives the web
 * target as "48 × 48 CSS pixels", so the size is px and does not grow with the text. It is
 * `::after`-based, so a component that already draws with ::after wraps its control in an element
 * carrying it.
 *
 * `md-link` is a link in running text: underlined in the colour of the words around it, because
 * M3 never lets colour alone mark a link (docs/reference/m3/styles.md § Typography); give it
 * `md-ink-primary` where it should also read as primary.
 *
 * The same declarations as the `state-layer`, `focus-ring`, `touch-target` and `link` utilities
 * (tokens/utilities.css) the components still written in Tailwind use; `md-touch-target` alone
 * differs, in px where the utility reads 3rem. In `material.base`, so a component's own rules,
 * the text classes and an application's rules all outrank them.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.base {
    .md-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: var(--md-sys-state-hover-state-layer-opacity);
            }
        }

        &:focus-visible::before {
            opacity: var(--md-sys-state-focus-state-layer-opacity);
        }

        &:active::before {
            opacity: var(--md-sys-state-pressed-state-layer-opacity);
        }

        &:is([data-md-dragged], [data-dragged])::before {
            opacity: var(--md-sys-state-dragged-state-layer-opacity);
        }

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

    .md-focus-ring {
        outline: none;

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

    .md-touch-target {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            min-width: var(--md-sys-measurement-space600);
            min-height: var(--md-sys-measurement-space600);
            transform: translate(-50%, -50%);
        }
    }

    .md-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;
        }
    }
}