/* Variantes de Careevia sur les objets du canon — le bouton discret de son chrome, le champ figé et le
   champ numérique borné — et le symbole de son bouton de thème. */

@layer components {
    /* Bouton discret : le chrome de la plateforme, sans fond ni limite au repos. */

    .field-control--quantity {
        inline-size: 100%;
        max-inline-size: 12rem;
    }
    .theme-symbol {
        width: 18px;
        height: 18px;
    }
    .button--style-toggle[aria-pressed="true"] .theme-symbol {
        transform: scale(0.62);
    }

    .button--style-quiet {
        background-color: transparent;
        border-color: transparent;
    }
    .button--style-quiet:hover {
        background-color: var(--canon-theme-surface-selected);
    }
    .field-control--static {
        border-color: var(--canon-theme-line);
    }
    .theme-symbol {
        border: 2px solid currentColor;
        border-radius: var(--local-radius-round);
    }
    .button--style-toggle[aria-pressed="true"] .theme-symbol {
        background-color: currentColor;
        box-shadow: var(--local-shadow-pressed);
    }

    .button--style-quiet {
        color: var(--canon-theme-ink);
    }
    .field-control--static {
        color: var(--canon-theme-muted);
    }
    .field-control--quantity {
        font-variant-numeric: tabular-nums;
    }

    .button--style-quiet {
        transition: background-color var(--canon-duration-state) ease;
    }
    .theme-symbol {
        transition: transform var(--canon-duration-reveal) ease, background-color var(--canon-duration-state) ease;
    }
}