/**
 * Classes de bouton prêtes à l'emploi — à inclure séparément de
 * `themes/ariane.css` (fichier indépendant, même s'il consomme les
 * mêmes tokens `--ar-button-*`).
 *
 * Contrairement aux tokens/`::part()` de `themes/ariane.css`, qui
 * stylisent le contrat intrinsèque des composants `ar-*`, ces classes
 * habillent du HTML consommateur ordinaire (un `<button>` que vous
 * écrivez vous-même, par exemple en slot d'un `ar-dropdown-item`).
 * Opt-in : rien n'est appliqué sans poser explicitement la classe.
 *
 * Usage :
 *   <link rel="stylesheet" href="presets/buttons.css">
 *
 *   <button class="ar-btn ar-btn-primary">Valider</button>
 */
@layer ariane.presets {
    .ar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        padding: 0 var(--ar-button-padding-x);
        min-height: var(--ar-button-height);
        border: 1px solid transparent;
        border-radius: var(--ar-button-border-radius);
        font-family: inherit;
        font-size: var(--ar-font-size-sm);
        font-weight: var(--ar-button-font-weight);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color var(--ar-button-transition-duration),
            color var(--ar-button-transition-duration),
            border-color var(--ar-button-transition-duration);

        &:disabled,
        &[aria-disabled='true'] {
            background-color: var(--ar-button-disabled-bg) !important;
            border-color: var(--ar-button-disabled-border) !important;
            color: var(--ar-button-disabled-color) !important;
            cursor: not-allowed;
        }

        &:not(:disabled):not([aria-disabled='true']):active,
        &:not(:disabled):not([aria-disabled='true'])[aria-expanded='true'] {
            transform: scale(0.985);
        }

        &:focus-visible {
            outline: 2px solid var(--ar-button-focus-ring-color);
            outline-offset: 2px;
        }
    }

    .ar-btn-primary {
        background-color: var(--ar-button-primary-bg);
        border-color: var(--ar-button-primary-border-color);
        color: var(--ar-button-primary-color);

        &:not(:disabled):not([aria-disabled='true']):hover {
            background-color: var(--ar-button-primary-bg-hover);
            border-color: var(--ar-button-primary-bg-hover);
        }

        &:not(:disabled):not([aria-disabled='true']):active {
            background: var(--ar-button-primary-bg-active);
            border-color: var(--ar-button-primary-bg-active);
            color: var(--ar-color-white);
        }
    }

    .ar-btn-secondary {
        background-color: var(--ar-button-secondary-bg);
        border-color: var(--ar-color-border-strong);
        color: var(--ar-color-text);

        &:not(:disabled):not([aria-disabled='true']):hover {
            border-color: var(--ar-button-secondary-border-hover);
        }

        &:not(:disabled):not([aria-disabled='true']):active,
        &:not(:disabled):not([aria-disabled='true'])[aria-expanded='true'] {
            border-color: var(--ar-button-secondary-border-hover);
        }
    }

    .ar-btn-danger {
        background-color: var(--ar-button-danger-bg);
        border-color: var(--ar-button-danger-bg);
        color: var(--ar-button-danger-color);

        /* Pas de token --ar-button-danger-bg-hover dédié (jamais consommé jusqu'ici,
        cf. #200) : repli direct sur une valeur déjà publique de la palette brute,
        plutôt qu'introduire un token dont le calibrage sera revu par #201. */
        &:not(:disabled):not([aria-disabled='true']):hover {
            background-color: var(--ar-color-danger-40);
            border-color: var(--ar-color-danger-40);
        }
    }

    .ar-btn-tertiary {
        background-color: var(--ar-button-tertiary-bg);
        border-color: transparent;
        color: var(--ar-color-text);

        &:not(:disabled):not([aria-disabled='true']):hover {
            background-color: var(--ar-button-tertiary-bg-hover);
        }

        &:not(:disabled):not([aria-disabled='true']):active {
            background-color: var(--ar-button-tertiary-bg-active);
            box-shadow: inset var(--ar-button-tertiary-active-shadow);
        }

        &:focus-visible {
            background-color: var(--ar-button-tertiary-bg-focus);
        }
    }
}