/* Bouton — modèle canonique ; son emploi : canon_button.md. */

@layer components {
    .button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .button {
        border-style: solid;
        border-color: currentColor;
    }

    .button {
        text-decoration: none;
    }

    .button {
        cursor: pointer;
    }
    .button:disabled {
        cursor: default;
    }
    .button[aria-busy="true"] {
        cursor: progress;
    }
}

@layer components {
    .button--structure-wide {
        padding: var(--button-padding, 15px 25px);
    }
    .button--structure-classic {
        padding: var(--button-padding, 12px 29px);
    }
    .button--structure-tight {
        padding: var(--button-padding, 8px 21px);
    }
    .button--structure-slim {
        padding: var(--button-padding, 4px 21px);
    }
    .button--structure-icon {
        width: var(--button-icon-side, var(--canon-size-icon-target));
        height: var(--button-icon-side, var(--canon-size-icon-target));
        display: inline-flex;
        padding: 0;
    }
    .button--structure-row {
        width: 100%;
        justify-content: var(--button-row-justify, space-between);
        align-items: var(--button-row-align, center);
        gap: var(--button-row-space, var(--canon-space-3));
        padding: var(--button-row-padding, var(--canon-space-3) 0);
    }

    .button--structure-wide,
    .button--structure-classic,
    .button--structure-tight,
    .button--structure-slim,
    .button--structure-icon,
    .button--structure-row {
        border-width: var(--button-line-width, var(--canon-line-width));
        border-radius: var(--button-radius, var(--canon-radius-control));
    }

    .button--structure-wide,
    .button--structure-classic,
    .button--structure-tight,
    .button--structure-slim {
        font-size: var(--canon-size-control);
    }
    .button--structure-wide,
    .button--structure-classic {
        font-weight: var(--button-weight, var(--canon-weight-label));
    }
    .button--structure-tight,
    .button--structure-slim {
        font-weight: var(--button-weight-quiet, var(--canon-weight-quiet));
    }
    .button--structure-row {
        font-size: inherit;
        text-align: start;
    }
    .button--structure-wide:hover,
    .button--structure-wide[aria-current="true"],
    .button--structure-classic:hover,
    .button--structure-classic[aria-current="true"] {
        font-weight: var(--button-weight-hover, var(--button-weight, var(--canon-weight-label)));
    }
    .button--structure-tight:hover,
    .button--structure-tight[aria-current="true"],
    .button--structure-slim:hover,
    .button--structure-slim[aria-current="true"] {
        font-weight: var(--button-weight-hover, var(--button-weight-quiet, var(--canon-weight-quiet)));
    }
}

@layer components {
    .button--style-fill {
        background-color: var(--button-fill-surface, var(--button-color, var(--canon-theme-action)));
        border-color: var(--button-fill-surface, var(--button-color, var(--canon-theme-action)));
    }
    .button--style-outline {
        background-color: transparent;
        border-color: var(--button-color, var(--canon-theme-action));
    }
    .button--style-toggle {
        background-color: var(--button-toggle-surface, var(--canon-theme-surface));
        border-color: var(--button-toggle-line, var(--canon-theme-control-boundary));
    }
    .button--style-toggle[aria-pressed="true"] {
        background-color: var(--button-toggle-surface-pressed, var(--canon-theme-surface-selected));
        border-color: var(--button-toggle-line-pressed, var(--button-color, var(--canon-theme-action)));
    }
    .button--style-quiet {
        background-color: var(--button-quiet-surface, transparent);
        border-color: var(--button-quiet-line, transparent);
        box-shadow: var(--button-quiet-shadow, none);
        backdrop-filter: var(--button-quiet-backdrop, none);
    }
    .button--style-quiet[aria-pressed="true"],
    .button--style-quiet[aria-expanded="true"] {
        background-color: var(--button-quiet-surface-pressed, color-mix(in oklab, var(--button-color, var(--canon-theme-action)) 12%, transparent));
        box-shadow: var(--button-quiet-shadow-pressed, none);
        backdrop-filter: var(--button-quiet-backdrop-pressed, var(--button-quiet-backdrop, none));
    }
    .button--style-fill:hover {
        background-color: var(--button-fill-surface-hover, var(--button-color-hover, var(--canon-theme-action-hover)));
        border-color: var(--button-fill-line-hover, var(--button-fill-surface-hover, var(--button-color-hover, var(--canon-theme-action-hover))));
        box-shadow: var(--button-fill-shadow-hover, none);
        backdrop-filter: var(--button-fill-backdrop-hover, none);
    }
    .button--style-fill[aria-current="true"] {
        background-color: var(--button-fill-surface-current, var(--button-color, var(--canon-theme-action)));
        border-color: var(--button-fill-line-current, var(--button-fill-surface-current, var(--button-color, var(--canon-theme-action))));
    }
    .button--style-outline:hover {
        background-color: var(--button-color-hover, var(--canon-theme-action-hover));
        border-color: var(--button-color-hover, var(--canon-theme-action-hover));
    }
    .button--style-quiet:hover {
        background-color: var(--button-quiet-surface-hover, color-mix(in oklab, var(--button-color, var(--canon-theme-action)) 12%, transparent));
        border-color: var(--button-quiet-line-hover, var(--button-quiet-line, transparent));
        box-shadow: var(--button-quiet-shadow-hover, none);
        backdrop-filter: var(--button-quiet-backdrop-hover, var(--button-quiet-backdrop, none));
    }
    .button--style-fill:active {
        background-color: var(--button-fill-surface-active, var(--button-color-active, var(--canon-theme-action-active)));
        border-color: var(--button-fill-surface-active, var(--button-color-active, var(--canon-theme-action-active)));
    }
    .button--style-outline:active {
        background-color: var(--button-color-active, var(--canon-theme-action-active));
        border-color: var(--button-color-active, var(--canon-theme-action-active));
    }
    .button--style-quiet:active {
        background-color: var(--button-quiet-surface-active, var(--button-quiet-surface-hover, color-mix(in oklab, var(--button-color, var(--canon-theme-action)) 12%, transparent)));
    }
    .button--style-fill:disabled,
    .button--style-outline:disabled {
        background-color: var(--canon-theme-disabled);
        border-color: var(--canon-theme-disabled);
        opacity: var(--button-opacity-disabled, 1);
    }
    .button--style-quiet:disabled {
        background-color: var(--button-quiet-surface, transparent);
        border-color: var(--button-quiet-line, transparent);
        box-shadow: none;
        opacity: var(--button-quiet-opacity-disabled, 0.5);
    }

    .button--style-fill {
        color: var(--button-fill-ink, var(--canon-theme-on-action));
    }
    .button--style-outline {
        color: var(--button-color, var(--canon-theme-action));
    }
    .button--style-toggle {
        color: var(--button-toggle-ink, var(--canon-theme-ink));
    }
    .button--style-toggle[aria-pressed="true"] {
        color: var(--button-toggle-ink-pressed, var(--button-toggle-ink, var(--canon-theme-ink)));
    }
    .button--style-quiet {
        color: var(--button-quiet-ink, var(--canon-theme-ink));
        text-shadow: var(--button-quiet-ink-shadow, none);
    }
    .button--style-quiet[aria-pressed="true"],
    .button--style-quiet[aria-expanded="true"] {
        color: var(--button-quiet-ink-pressed, var(--button-quiet-ink, var(--canon-theme-ink)));
    }
    .button--style-fill:hover {
        color: var(--button-fill-ink-hover, var(--button-fill-ink, var(--canon-theme-on-action)));
    }
    .button--style-fill[aria-current="true"] {
        color: var(--button-fill-ink, var(--canon-theme-on-action));
    }
    .button--style-outline:hover {
        color: var(--canon-theme-on-action);
    }
    .button--style-quiet:hover {
        color: var(--button-quiet-ink-hover, var(--button-color, var(--canon-theme-ink)));
        text-shadow: var(--button-quiet-ink-shadow-hover, var(--button-quiet-ink-shadow, none));
    }
    .button--style-fill:disabled,
    .button--style-outline:disabled {
        color: var(--button-ink-disabled, inherit);
    }

    .button--style-fill {
        transition: all var(--canon-duration-state);
    }
    .button--style-outline {
        transition: all var(--canon-duration-state) ease-in-out;
    }
    .button--style-toggle {
        transition: background-color var(--canon-duration-state) ease, border-color var(--canon-duration-state) ease;
    }
    .button--style-quiet {
        transition: background-color var(--canon-duration-state) ease, border-color var(--canon-duration-state) ease,
            color var(--canon-duration-state) ease, box-shadow var(--canon-duration-state) ease,
            text-shadow var(--canon-duration-state) ease;
    }
}

@layer components {
    .button--color-danger {
        --button-color: var(--canon-theme-danger);
        --button-color-hover: var(--canon-theme-danger-hover);
        --button-color-active: var(--canon-theme-danger-active);
    }
    .button--color-success {
        --button-color: var(--canon-theme-success);
        --button-color-hover: var(--canon-theme-success-hover);
        --button-color-active: var(--canon-theme-success-active);
    }
    .button--color-info {
        --button-color: var(--canon-theme-info);
        --button-color-hover: var(--canon-theme-info-hover);
        --button-color-active: var(--canon-theme-info-active);
    }
    .button--color-neutral {
        --button-color: var(--canon-theme-neutral);
        --button-color-hover: var(--canon-theme-neutral-hover);
        --button-color-active: var(--canon-theme-neutral-active);
    }
}

/* Part locale — le bouton du hub : la pilule, son filet, sa graisse, et le sombre de son rôle neutre ;
   ses variantes, sur les styles du canon. */

@layer components {
    .button {
        --button-radius: 999px;
        --button-line-width: 2px;
        --button-weight: 600;
        --button-weight-quiet: 450;
    }
    .button--color-neutral {
        --button-color: var(--local-color-identity-dark);
        --button-color-hover: var(--local-color-identity-dark-hover);
        --button-color-active: var(--local-color-identity-dark);
    }
    /* Les variantes du hub, sur les styles du canon (exvae #42) : halo, le plein qu'un verre blanc lumineux couvre au survol,
       l'encre sombre et grasse, et qui marque la vue courante d'un trait blanc ; frost, le sans fond
       cerclé de verre, pressé d'un verre plus dense. */
    .button--style-halo {
        --button-fill-ink: var(--raw-color-white-90);
        --button-fill-surface-hover: var(--local-color-decor-app-button-style-halo-hover-surface);
        --button-fill-line-hover: var(--raw-color-white-90);
        --button-fill-ink-hover: var(--local-color-decor-app-button-style-halo-hover-ink);
        --button-fill-shadow-hover: var(--local-shadow-app-button-style-halo-hover);
        --button-fill-backdrop-hover: brightness(1.03) saturate(3);
        --button-fill-surface-current: var(--button-color-hover);
        --button-fill-line-current: var(--raw-color-white-90);
        --button-weight-hover: 900;
    }
    .button--style-frost {
        --button-quiet-line: var(--raw-color-white-50);
        --button-quiet-backdrop: brightness(1.01);
        --button-quiet-ink: var(--canon-theme-faint);
        --button-quiet-surface-hover: var(--local-color-decor-app-button-style-frost-hover-surface);
        --button-quiet-line-hover: var(--raw-color-white-90);
        --button-quiet-shadow-hover: var(--local-shadow-app-button-style-frost-hover);
        --button-quiet-backdrop-hover: brightness(1.03) saturate(3);
        --button-quiet-ink-hover: var(--local-color-decor-app-button-style-halo-hover-ink);
        --button-quiet-surface-pressed: var(--local-color-decor-app-button-style-frost-surface);
        --button-quiet-backdrop-pressed: brightness(1.04) saturate(3);
        --button-quiet-ink-pressed: var(--local-color-decor-app-button-style-frost-ink-2);
    }
    /* snow, la paire blanche du hub (exvae #56) : posée sur fill, le plein blanc opaque à encre sombre, qui se
       soulève au survol ; posée sur quiet, le sans fond, un blanc laiteux qui floute l'image qu'il couvre.
       Le filet garde 2 px en haut et en bas et s'éteint le long de l'arrondi. Le rôle reste le sombre
       d'identité ; le blanc du plein passe par ses fonds, jugés sur son encre. Elle sert le carrousel de
       l'accueil et les îlots sombres, où elle a remplacé neon. La conversation d'un essai passée au
       sombre : halo et frost à l'encre claire. */
    .button--style-snow {
        --button-line-width: 2px 0;
        --button-color: var(--local-color-identity-dark);
        --button-fill-surface: var(--raw-color-white);
        --button-fill-surface-hover: var(--raw-color-white);
        --button-fill-surface-active: var(--local-color-decor-app-button-style-snow-active-surface);
        --button-fill-ink: var(--local-color-identity-dark);
        --button-fill-shadow-hover: var(--local-shadow-app-button-style-snow-hover);
        --button-quiet-surface: var(--local-color-decor-app-button-style-snow-surface);
        --button-quiet-backdrop: blur(6px) saturate(1.6);
        --button-quiet-line: var(--raw-color-white);
        --button-quiet-ink: var(--local-color-identity-dark);
        --button-quiet-surface-hover: var(--raw-color-white-90);
        --button-quiet-line-hover: var(--raw-color-white);
        --button-quiet-ink-hover: var(--local-color-identity-dark);
        --button-quiet-shadow-hover: var(--local-shadow-app-button-style-snow-hover-2);
        --button-quiet-backdrop-hover: blur(10px) saturate(2);
        --button-quiet-surface-active: var(--raw-color-white);
        --button-quiet-surface-pressed: var(--local-color-decor-app-button-style-snow-surface);
    }
    /* Sans filet de côté, la jointure d'un bouton segmenté s'effacerait : la flèche la trace du même
       filet blanc, à son bord de début (le téléchargement de XV131). */
    .button--style-snow.menu-button-trigger {
        --button-line-width: 2px 0 2px 2px;
    }
    .button--style-snow.menu-button-trigger:dir(rtl) {
        --button-line-width: 2px 2px 2px 0;
    }
    .chat[data-theme="noxus"] .button--style-halo {
        --button-fill-ink: var(--local-color-decor-essay-button-style-halo-ink);
        --button-fill-surface-hover: var(--local-color-decor-essay-button-style-halo-hover-surface);
        --button-fill-shadow-hover: var(--local-shadow-essay-button-style-halo-hover);
        --button-fill-ink-hover: var(--local-color-decor-essay-button-style-halo-hover-ink);
    }
    .chat[data-theme="noxus"] .button--style-frost {
        --button-quiet-line: var(--local-color-decor-essay-button-style-frost-line);
        --button-quiet-ink: var(--local-color-decor-essay-button-style-frost-ink);
        --button-quiet-surface-hover: var(--local-color-decor-essay-button-style-frost-hover-surface);
        --button-quiet-line-hover: var(--local-color-decor-essay-button-style-frost-hover-line);
        --button-quiet-shadow-hover: var(--local-shadow-essay-button-style-frost-hover);
        --button-quiet-ink-hover: var(--local-color-decor-essay-button-style-frost-hover-ink);
    }
}

@layer tokens {
    :root {
        --button-color: var(--local-color-identity-action);
        --button-color-hover: var(--local-color-identity-action-hover);
    }
}

@layer page {
    .glossary-filter-button {
        --button-color: var(--glossary-fields-color, var(--local-color-identity-action));
    }
}