/* Bouton à menu — socle canonique ; son emploi : canon_menu-button.md. */

@layer components {
    .menu-button {
        display: inline-flex;
    }
    .menu-button-trigger {
        gap: var(--canon-space-2);
    }
    .menu-button-arrow {
        flex: none;
        width: 0.5em;
        aspect-ratio: 1;
        transform: translateY(-25%) rotate(45deg);
    }
    [aria-expanded="true"] > .menu-button-arrow {
        transform: translateY(25%) rotate(-135deg);
    }
    .menu-button-menu {
        display: flex;
        flex-direction: column;
        min-width: var(--menu-button-menu-width, 12.5rem);
    }
    .menu-button-title {
        padding: var(--canon-space-2) var(--canon-space-3) var(--canon-space-1);
    }
    .menu-button-head {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--menu-button-head-padding, var(--canon-space-2) var(--canon-space-3));
    }
    .menu-button-group {
        display: flex;
        flex-direction: column;
    }
    .menu-button-item {
        display: flex;
        align-items: center;
        gap: var(--canon-space-3);
        width: 100%;
        padding: var(--menu-button-item-padding, var(--canon-space-2) var(--canon-space-3));
    }
    .menu-button-item-icon {
        flex: none;
        display: inline-flex;
        width: var(--menu-button-icon-side, 1rem);
        aspect-ratio: 1;
    }
    .menu-button-item-text {
        flex: 1;
        display: grid;
        min-width: 0;
    }
    .menu-button-item-title {
        overflow: hidden;
    }
    .menu-button-item-end {
        flex: none;
    }
    .menu-button-divider {
        flex: none;
        height: 0;
        margin: var(--canon-space-1) var(--canon-space-2);
    }
    .menu-button-content {
        padding: var(--canon-space-2) var(--canon-space-3);
    }

    .menu-button-arrow {
        border-block-end: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
    }
    .menu-button-item {
        border: 0;
        border-radius: var(--menu-button-item-radius, var(--canon-radius-control));
        background-color: transparent;
    }
    .menu-button-item:hover,
    .menu-button-item[aria-expanded="true"] {
        background-color: var(--menu-button-item-surface-hover, var(--canon-theme-highlight));
    }
    .menu-button-item[aria-current="page"] {
        box-shadow: var(--menu-button-item-shadow-current, none);
    }
    .menu-button-item:focus-visible {
        outline-offset: calc(-1 * var(--canon-focus-width));
    }
    .menu-button-item[aria-disabled="true"] {
        background-color: transparent;
    }
    .menu-button-divider {
        border: 0;
        border-block-start: var(--canon-line-width) solid var(--canon-theme-line);
    }

    .menu-button-title,
    .menu-button-item-note,
    .menu-button-item-end {
        font-size: var(--canon-size-note);
        color: var(--canon-theme-muted);
    }
    .menu-button-title {
        font-weight: var(--canon-weight-label);
    }
    .menu-button-head-title {
        font-size: var(--canon-size-control);
        font-weight: var(--canon-weight-title);
    }
    .menu-button-head-note {
        font-size: var(--canon-size-fine);
        color: var(--canon-theme-faint);
    }
    .menu-button-item {
        font-size: inherit;
        font-weight: var(--menu-button-item-weight, inherit);
        text-align: start;
        text-decoration-line: none;
        color: var(--menu-button-item-ink, var(--canon-theme-ink));
    }
    .menu-button-item:hover {
        color: var(--menu-button-item-ink-hover, var(--menu-button-item-ink, var(--canon-theme-ink)));
    }
    .menu-button-item[aria-current="page"] {
        font-weight: var(--menu-button-item-weight-current, var(--menu-button-item-weight, inherit));
    }
    .menu-button-item[aria-disabled="true"] {
        color: var(--canon-theme-faint);
    }
    .menu-button-item-title {
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .menu-button-arrow {
        transition: transform var(--canon-duration-reveal);
    }
    .menu-button-item {
        cursor: pointer;
        user-select: none;
    }
    .menu-button-item[aria-disabled="true"] {
        cursor: default;
    }
}