/* Contrôles propres à Careevia — le champ composé, le champ à termes et l'interrupteur, que le canon
   ne porte pas ; le groupe de radios. Leur boîte suit celle de `field-control`. */

@layer base {
    /* Une saisie logée dans une boîte qui est elle-même le contrôle n'a pas son anneau : la boîte le
       porte (`:focus-within`), et deux anneaux imbriqués se liraient comme deux contrôles. */

    .field-composite-input:focus-visible,
    .field-terms-input:focus-visible {
        outline: none;
    }
}

@layer components {
    /* Champ composé — une valeur dont une part est constante (`@`, `https://`) ou déjà connue d'un
       autre champ. Les parts partagent une boîte : une limite, un focus, un état invalide. */

    .field-composite,
    .field-terms {
        display: flex;
        align-items: stretch;
        gap: var(--canon-space-1);
        padding: var(--canon-space-2) var(--canon-space-3);
    }
    .field-composite-input,
    .field-terms-input {
        min-width: 0;
        padding: 0;
    }
    .field-composite-input {
        flex: 1 1 0;
    }
    .field-composite-constant {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
    }
    .field-terms {
        flex-wrap: wrap;
        align-items: center;
        padding: var(--canon-space-1) var(--canon-space-3);
    }
    .field-terms-input {
        flex: 1 1 12ch;
        min-width: 12ch;
    }
    .field-term {
        display: inline-flex;
        align-items: center;
        gap: var(--canon-space-1);
        padding: 0 var(--canon-space-1) 0 var(--canon-space-2);
    }
    .field-term--suggested {
        padding-left: var(--canon-space-1);
    }
    .field-term-origin {
        padding: 0 var(--canon-space-1);
    }
    .field-term-remove,
    .field-term-accept {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
    }
    .radio-group {
        display: grid;
        gap: var(--canon-space-3);
    }
    .switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--canon-space-3);
        min-height: var(--canon-size-icon-target);
    }
    .switch input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
    }
    .switch-track {
        display: flex;
        align-items: center;
        width: 44px;
        height: 24px;
        padding: 2px;
    }
    .switch-track::after {
        display: block;
        width: 18px;
        height: 18px;
    }
    .switch input:checked + .switch-track::after {
        transform: translateX(20px);
    }

    .field-composite,
    .field-terms {
        background-color: var(--canon-theme-field);
        border: var(--canon-line-width) solid var(--canon-theme-control-boundary);
        border-radius: var(--canon-radius-control);
    }
    .field-composite:hover,
    .field-terms:hover {
        border-color: var(--canon-theme-ink);
    }
    .field-composite:focus-within,
    .field-terms:focus-within {
        border-color: var(--canon-theme-action);
        outline: var(--canon-focus-width) solid var(--canon-theme-focus);
        outline-offset: var(--canon-focus-offset);
    }
    .field-composite[aria-invalid="true"],
    .field-terms[aria-invalid="true"] {
        border-color: var(--canon-theme-danger);
        background-color: var(--canon-theme-danger-surface);
    }
    .field-composite-input,
    .field-terms-input {
        border: 0;
        background-color: transparent;
    }
    .field-term {
        background-color: var(--canon-theme-surface-selected);
        border-radius: var(--local-radius-small);
    }
    .field-term--suggested {
        background-color: var(--canon-theme-warning-surface);
        border: var(--canon-line-width) dashed var(--canon-theme-warning);
    }
    .field-term-origin {
        border-radius: var(--local-radius-small);
        background-color: var(--canon-theme-warning);
    }
    .field-term-remove,
    .field-term-accept {
        border: 0;
        border-radius: var(--local-radius-small);
        background-color: transparent;
    }
    .radio-group {
        border: 0;
    }
    .switch input {
        clip-path: inset(50%);
    }
    .switch-track {
        border: var(--canon-line-width) solid var(--canon-theme-control-boundary);
        border-radius: var(--canon-radius-pill);
        background-color: var(--canon-theme-raised);
    }
    .switch-track::after {
        border-radius: var(--local-radius-round);
        background-color: var(--canon-theme-muted);
    }
    .switch input:checked + .switch-track {
        background-color: var(--canon-theme-action);
        border-color: var(--canon-theme-action);
    }
    .switch input:checked + .switch-track::after {
        background-color: var(--canon-theme-on-action);
    }
    .switch input:focus-visible + .switch-track {
        outline: var(--canon-focus-width) solid var(--canon-theme-focus);
        outline-offset: var(--canon-focus-offset);
    }

    .field-composite-input,
    .field-terms-input {
        font-size: var(--canon-size-field);
        line-height: var(--canon-leading-body);
        color: var(--canon-theme-ink);
    }
    .field-composite-input::placeholder,
    .field-terms-input::placeholder {
        color: var(--canon-theme-faint);
    }
    .field-composite-constant {
        font-size: var(--canon-size-field);
        line-height: var(--canon-leading-body);
        color: var(--canon-theme-ink);
        white-space: nowrap;
    }
    .field-composite-constant[data-pending="true"] {
        color: var(--canon-theme-muted);
    }
    .field-term {
        font-size: var(--canon-size-control);
        line-height: var(--canon-leading-body);
        color: var(--canon-theme-ink);
    }
    .field-term-origin {
        color: var(--canon-theme-surface);
        font-size: var(--canon-size-note);
        line-height: var(--canon-leading-body);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .field-term-remove,
    .field-term-accept {
        color: var(--canon-theme-muted);
        font-size: var(--canon-size-control);
    }
    .field-term-remove:hover {
        color: var(--canon-theme-danger);
    }
    .field-term-accept:hover {
        color: var(--canon-theme-success);
    }
    .switch-track::after {
        content: "";
    }

    .field-composite,
    .field-terms {
        transition: border-color var(--canon-duration-state);
    }
    .field-term-remove,
    .field-term-accept {
        cursor: pointer;
    }
    .switch {
        cursor: pointer;
    }
    .switch-track {
        transition: background-color var(--canon-duration-state) ease, border-color var(--canon-duration-state) ease;
    }
    .switch-track::after {
        transition: transform var(--canon-duration-reveal) cubic-bezier(0.2, 0.8, 0.2, 1), background-color var(--canon-duration-state) ease;
    }
}