/* 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)));
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .glossary-views {
        --segmented-padding: 7px 23px;
        --segmented-line-width: 1px;
        --segmented-radius: 8px;
        --segmented-weight: 600;
        --segmented-surface: var(--raw-color-pearl-1);
        --segmented-surface-hover: var(--raw-color-pearl-2);
        --segmented-line: rgb(0 0 0 / 0.1);
        --segmented-ink: var(--raw-color-black-60);
        --segmented-current: var(--local-color-identity-action);
        --segmented-current-line: rgb(0 0 0 / 0.1);
        --segmented-current-ink: rgb(255 255 255);
    }
    /* Le tri du lexique de l'essai : sur la palette de l'essai, qui a son propre mode sombre ; resserré
       comme la rangée qui le porte ; l'option pressée à la teinte de l'essai. */
    .fields-sort-options {
        --segmented-padding: 4px 12px;
        --segmented-surface: transparent;
        --segmented-surface-hover: transparent;
        --segmented-line: var(--essay-line);
        --segmented-ink: var(--essay-ink);
        --segmented-current: var(--essay-color);
        --segmented-current-line: var(--essay-color);
        --segmented-current-ink: var(--local-color-decor-essay-fields-sort-button-ink);
    }
    @media (max-width: 800px) {
        .glossary-views {
            --segmented-padding: 5px 15px;
        }
    }
}