/* Choix segmenté — modèle canonique ; son emploi : canon_segmented.md. */

@layer components {
    .segmented {
        display: inline-flex;
    }
    .segmented > .button + .button {
        margin-inline-start: calc(-1 * var(--segmented-line-width, var(--button-line-width, var(--canon-line-width))));
    }
    .segmented > .button--structure-slim {
        padding: var(--segmented-padding, 4px 21px);
    }
    .segmented > .button[aria-pressed="true"] {
        z-index: 1;
    }
    .segmented > .button:focus-visible {
        z-index: 2;
    }

    .segmented > .button {
        border-width: var(--segmented-line-width, var(--button-line-width, var(--canon-line-width)));
        border-radius: var(--segmented-radius, var(--button-radius, var(--canon-radius-control)));
    }
    .segmented > .button:not(:first-child) {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }
    .segmented > .button:not(:last-child) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }
    .segmented > .button--style-toggle {
        background-color: var(--segmented-surface, var(--canon-theme-surface));
        border-color: var(--segmented-line, var(--canon-theme-control-boundary));
    }
    .segmented > .button--style-toggle:hover {
        background-color: var(--segmented-surface-hover, var(--segmented-surface, var(--canon-theme-surface)));
        border-color: var(--segmented-line-hover, var(--segmented-line, var(--canon-theme-control-boundary)));
    }
    .segmented > .button--style-toggle[aria-pressed="true"] {
        background-color: var(--segmented-current, var(--canon-theme-surface-selected));
        border-color: var(--segmented-current-line, var(--button-color, var(--canon-theme-action)));
    }

    .segmented > .button--structure-slim {
        font-size: var(--canon-size-control);
        font-weight: var(--segmented-weight, var(--button-weight-quiet, var(--canon-weight-quiet)));
    }
    .segmented > .button--style-toggle {
        color: var(--segmented-ink, var(--canon-theme-ink));
    }
    .segmented > .button--style-toggle:hover {
        color: var(--segmented-ink-hover, var(--segmented-ink, var(--canon-theme-ink)));
    }
    .segmented > .button--style-toggle[aria-pressed="true"] {
        font-weight: var(--segmented-current-weight, var(--segmented-weight, var(--button-weight-quiet, var(--canon-weight-quiet))));
        color: var(--segmented-current-ink, var(--segmented-ink, var(--canon-theme-ink)));
    }
}

@layer components {
    .segmented--structure-apart {
        flex-wrap: wrap;
        gap: var(--segmented-space, var(--canon-space-1));
    }
    .segmented--structure-apart > .button + .button {
        margin-inline-start: 0;
    }

    .segmented--structure-apart > .button:not(:first-child, :last-child),
    .segmented--structure-apart > .button:first-child,
    .segmented--structure-apart > .button:last-child {
        border-radius: var(--segmented-radius, var(--button-radius, var(--canon-radius-control)));
    }
}