/* 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(--button-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: var(--button-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);
    }
}