/* Bouton à menu segmenté, action et flèche — module canonique ; son emploi : canon_menu-button-split.md. */

@layer components {
    .menu-button--split > .menu-button-action {
        min-height: var(--button-icon-side, var(--canon-size-icon-target));
    }
    .menu-button--split > .menu-button-trigger {
        height: auto;
        margin-inline-start: calc(-1 * var(--button-line-width, var(--canon-line-width)));
    }
    .menu-button--split > :focus-visible {
        z-index: 1;
    }

    .menu-button--split > .menu-button-action {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        clip-path: inset(-100vmax 0 -100vmax -100vmax);
    }
    .menu-button--split > .menu-button-trigger {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        clip-path: inset(-100vmax -100vmax -100vmax 0);
    }
    .menu-button--split:dir(rtl) > .menu-button-action {
        clip-path: inset(-100vmax -100vmax -100vmax 0);
    }
    .menu-button--split:dir(rtl) > .menu-button-trigger {
        clip-path: inset(-100vmax 0 -100vmax -100vmax);
    }
    .menu-button--split > :focus-visible {
        clip-path: none;
    }
}