/*
 * Interaction states, as M3 draws them.
 *
 * The opacities are M3's state tokens (md.sys.state.*): the content colour laid over an
 * element at 8% on hover, 10% on focus and press, 16% while dragged; disabled content at 38%
 * and a disabled container at 12%.
 *
 * The classes that draw them are foundation/interaction.css (`md-state-layer`, `md-focus-ring`,
 * `md-touch-target`, `md-link`), and utilities.css for the components still written in Tailwind.
 * The tokens sit in `material.tokens`, so an application's own unlayered declaration wins.
 */

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

@layer material.tokens {
    :root {
        --md-sys-state-hover-state-layer-opacity: 0.08;
        --md-sys-state-focus-state-layer-opacity: 0.1;
        --md-sys-state-pressed-state-layer-opacity: 0.1;
        --md-sys-state-dragged-state-layer-opacity: 0.16;
        --md-sys-state-disabled-content-opacity: 0.38;
        --md-sys-state-disabled-container-opacity: 0.12;
    }
}