/* 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: 15px 25px;
    }
    .button--structure-classic {
        padding: 12px 29px;
    }
    .button--structure-tight {
        padding: 8px 21px;
    }
    .button--structure-slim {
        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-wide,
    .button--structure-classic,
    .button--structure-tight,
    .button--structure-slim,
    .button--structure-icon {
        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));
    }
}

@layer components {
    .button--style-fill {
        background-color: var(--button-color, var(--canon-theme-action));
        border-color: 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(--canon-theme-surface);
        border-color: var(--canon-theme-control-boundary);
    }
    .button--style-toggle[aria-pressed="true"] {
        background-color: var(--canon-theme-surface-selected);
        border-color: var(--button-color, var(--canon-theme-action));
    }
    .button--style-fill:hover,
    .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-fill: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-fill:disabled,
    .button--style-outline:disabled {
        background-color: var(--canon-theme-disabled);
        border-color: var(--canon-theme-disabled);
    }

    .button--style-fill {
        color: var(--canon-theme-on-action);
    }
    .button--style-outline {
        color: var(--button-color, var(--canon-theme-action));
    }
    .button--style-toggle {
        color: var(--canon-theme-ink);
    }
    .button--style-outline:hover {
        color: var(--canon-theme-on-action);
    }
    .button--style-fill:disabled,
    .button--style-outline:disabled {
        color: 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;
    }
}

@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);
    }
}