/* Sélecteur — composant canonique ; son emploi : canon_select.md. */

@layer components {
    .select-list {
        --popover-offset: var(--select-list-offset, 0px);
    }

    .select-source[aria-hidden="true"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
    }
    .select-trigger {
        display: flex;
        align-items: center;
        gap: var(--canon-space-2);
        padding: var(--select-trigger-padding, var(--canon-space-2) var(--canon-space-3));
    }
    .select-trigger::before,
    .select-trigger::after {
        flex: none;
        order: 1;
        width: var(--select-arrow-size, 0.4em);
        aspect-ratio: 1;
    }
    .select-trigger::before {
        margin-inline-end: calc(-1 * var(--select-arrow-size, 0.4em) - var(--canon-space-2));
        transform: translateY(-30%) rotate(-135deg);
    }
    .select-trigger::after {
        margin-inline-end: 0.3em;
        transform: translateY(30%) rotate(45deg);
    }
    .select-value {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .select-trigger.field-control--compact {
        display: inline-flex;
        width: auto;
        padding: 4px 12px;
    }
    .select-trigger.field-control--compact .select-value {
        flex: auto;
    }
    .select-list {
        display: flex;
        flex-direction: column;
        padding: var(--select-list-padding, var(--canon-space-2));
    }
    .select-title {
        padding: var(--canon-space-2) var(--canon-space-3) var(--canon-space-1);
    }
    .select-option {
        display: flex;
        align-items: center;
        gap: var(--canon-space-3);
        padding: var(--select-option-padding, var(--canon-space-2) var(--canon-space-3));
    }
    .select-option::after {
        flex: none;
        width: 0.35em;
        height: 0.7em;
        margin-inline-start: auto;
        visibility: hidden;
        transform: translateY(-10%) rotate(45deg);
    }
    .select-option[aria-selected="true"]::after {
        visibility: var(--select-check, visible);
    }

    .select-source[aria-hidden="true"] {
        border: 0;
        clip-path: inset(50%);
    }
    .select-source:focus-visible + .select-trigger {
        outline: var(--canon-focus-width) var(--canon-focus-style) var(--canon-theme-focus);
        outline-offset: var(--canon-focus-offset);
        box-shadow: var(--select-trigger-shadow, 0 0 #0000), var(--canon-focus-halo);
    }
    .select-trigger {
        border-width: var(--select-trigger-line-width, var(--field-line-width, var(--canon-line-width)));
        border-radius: var(--select-trigger-radius, var(--field-radius, var(--canon-radius-control)));
        background-color: var(--select-trigger-surface, var(--canon-theme-field));
        box-shadow: var(--select-trigger-shadow, none);
    }
    .select-trigger[aria-expanded="true"] {
        border-color: var(--canon-theme-action);
    }
    .select-trigger[aria-disabled="true"] {
        border-color: var(--canon-theme-line);
    }
    .select-trigger.field-control--compact {
        border-width: var(--button-line-width, var(--canon-line-width));
        border-radius: var(--button-radius, var(--canon-radius-control));
        background-color: var(--canon-theme-surface);
    }
    .select-trigger::before,
    .select-trigger::after {
        border-block-end: var(--select-arrow-width, 2px) solid var(--select-arrow-color, currentColor);
        border-inline-end: var(--select-arrow-width, 2px) solid var(--select-arrow-color, currentColor);
        border-end-end-radius: var(--select-arrow-radius, 0);
        border-start-end-radius: var(--select-arrow-round, 0);
        border-end-start-radius: var(--select-arrow-round, 0);
    }
    .select-list {
        border-color: var(--select-list-line, var(--canon-theme-line));
        border-radius: var(--select-list-radius, var(--canon-radius-control));
        background-color: var(--select-list-surface, var(--canon-theme-raised));
        box-shadow: var(--select-list-shadow, var(--canon-shadow-overlay, none));
        backdrop-filter: var(--select-list-blur, none);
    }
    .select-option {
        border-radius: var(--select-option-radius, var(--canon-radius-control));
        box-shadow: inset 0 -1px 0 var(--select-option-line, #0000);
    }
    .select-option[aria-selected="true"] {
        background-color: var(--select-option-selected, transparent);
    }
    .select-option:hover,
    .select-option[data-select-current] {
        background-color: var(--select-option-hover, var(--canon-theme-highlight));
    }
    .select-option[aria-selected="true"]:hover,
    .select-option[aria-selected="true"][data-select-current] {
        background-color: var(--select-option-selected-hover, var(--select-option-hover, var(--canon-theme-highlight)));
    }
    .select-option[aria-disabled="true"] {
        background-color: transparent;
    }
    .select-option::after {
        border-block-end: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
    }
    @media (forced-colors: active) {
        .select-option[data-select-current] {
            outline: 2px solid currentColor;
            outline-offset: -2px;
        }
    }

    .select-source[aria-hidden="true"] {
        white-space: nowrap;
    }
    .select-trigger {
        font-family: inherit;
        font-size: var(--canon-size-field);
        font-weight: var(--select-trigger-weight, var(--canon-weight-body));
        color: var(--select-ink, var(--canon-theme-ink));
    }
    .select-trigger:hover {
        font-weight: var(--select-trigger-weight-hover, var(--select-trigger-weight, var(--canon-weight-body)));
    }
    .select-trigger::before,
    .select-trigger::after {
        content: "";
    }
    .select-trigger[aria-disabled="true"] {
        color: var(--canon-theme-faint);
    }
    .select-trigger.field-control--compact {
        font-size: var(--canon-size-control);
        font-weight: var(--button-weight-quiet, var(--canon-weight-quiet));
        line-height: inherit;
    }
    .select-value {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .select-list {
        font-family: inherit;
        font-size: var(--canon-size-field);
    }
    .select-title {
        font-size: var(--canon-size-note);
        font-weight: var(--canon-weight-label);
        color: var(--canon-theme-muted);
    }
    .select-option {
        color: var(--select-ink, var(--canon-theme-ink));
    }
    .select-option[aria-selected="true"] {
        font-weight: var(--select-option-selected-weight, var(--canon-weight-label));
        color: var(--select-option-selected-ink, var(--select-ink, var(--canon-theme-ink)));
    }
    .select-option[aria-disabled="true"] {
        color: var(--canon-theme-faint);
    }
    .select-option::after {
        content: "";
    }

    .select-source[aria-hidden="true"] {
        pointer-events: none;
    }
    .select-trigger {
        cursor: pointer;
        user-select: none;
    }
    .select-trigger[aria-disabled="true"] {
        cursor: default;
    }
    .select-option {
        cursor: pointer;
        user-select: none;
    }
    .select-option[aria-disabled="true"] {
        cursor: default;
    }
}

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

@layer components {
    .select-trigger {
        --select-arrow-size: 6px;
        --select-arrow-color: var(--raw-color-black-60);
        --select-trigger-padding: 8px 10px 8px 16px;
        --select-trigger-line-width: 0px;
        --select-trigger-radius: 8px;
        --select-trigger-surface: transparent;
        --select-trigger-weight: 400;
        --select-trigger-weight-hover: 600;
    }
    .select-list {
        --select-list-padding: 1px 0;
        --select-list-radius: 8px;
        --select-list-blur: blur(25px);
        --select-list-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
        --select-list-surface: rgb(255 255 255 / 0.3);
        --select-list-line: var(--raw-color-white-90);
        --select-ink: var(--raw-color-black-85);
        --select-option-padding: 5px 16px;
        --select-option-radius: 0px;
        --select-option-hover: rgb(0 0 255 / 0.1);
        --select-option-selected: var(--local-color-identity-action);
        --select-option-selected-hover: var(--local-color-identity-action);
        --select-option-selected-ink: rgb(255 255 255);
        --select-option-selected-weight: 500;
        --select-check: hidden;
    }
    .listing-sort .select-trigger,
    .listing-sort .select-list {
        --select-ink: var(--raw-color-black-90);
    }
    .listing-sort .select-trigger {
        --select-trigger-padding: 2px 10px 2px 16px;
        --select-trigger-radius: 0px;
        --select-trigger-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.05);
        --select-trigger-weight-hover: 400;
    }
    .listing-sort .select-list {
        --select-list-padding: 7px 0 20px;
        --select-list-radius: 7px 7px 20px 20px;
        --select-list-blur: none;
        --select-list-shadow: none;
        --select-list-surface: var(--raw-color-pearl-2);
        --select-option-padding: 4px 16px;
        --select-option-hover: var(--raw-color-pearl-1);
        --select-option-selected: var(--raw-color-pearl-1);
        --select-option-selected-hover: var(--raw-color-pearl-1);
        --select-option-selected-ink: var(--raw-color-black-90);
        --select-option-selected-weight: 400;
    }
    .glossary-sort .select-trigger,
    .glossary-sort .select-list,
    .essay-head-tools .select-trigger,
    .essay-head-tools .select-list {
        --select-ink: var(--raw-color-black-80);
    }
    .glossary-sort .select-trigger,
    .essay-head-tools .select-trigger {
        --select-trigger-padding: 5px 11px;
        --select-trigger-radius: 6px;
        --select-trigger-surface: var(--raw-color-pearl-1);
    }
    .glossary-sort .select-list,
    .essay-head-tools .select-list {
        --select-list-padding: 8px 0;
        --select-list-radius: 6px;
        --select-list-blur: none;
        --select-list-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
        --select-list-surface: var(--raw-color-pearl-1);
        --select-list-line: rgb(0 0 0 / 0.12);
        --select-option-padding: 5px 11px;
        --select-option-hover: rgb(0 0 0 / 0.04);
        --select-option-selected-hover: var(--local-color-identity-action);
    }
}