/*
  segmented.css — apparence COMMUNE des choix segmentés d'une carte de réglages
  (langue, devise). Une seule déclaration, consommée par les deux sélecteurs : le style de
  l'option retenue — fond bleu de marque — ne peut donc plus diverger de l'un à l'autre.

  Pourquoi ici et non dans un `.razor.css` : le style de composant est isolé par son attribut de
  portée et ne peut pas être partagé entre deux composants. Le mettre dans l'un des deux et le
  recopier dans l'autre, c'est exactement la double déclaration qui se désynchronise en silence.

  Aucune valeur en dur : tout vient de tokens.css.
*/

.kk-segmented {
    /* Occupe toute la largeur de la carte de réglages, sous le libellé — comme les boutons
       d'apparence. Ignoré hors d'un conteneur en grille, donc sans effet ailleurs. */
    grid-column: 1 / -1;
    display: grid;
    /* La grille s'adapte au nombre d'options : les langues sont fixées à trois, mais une
       organisation peut autoriser plus de devises, et la liste se replie alors sur plusieurs
       lignes sur écran étroit. */
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: .4rem;
    margin-top: .3rem;
}

.kk-segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-2);
    padding: .5rem .4rem;
    background: var(--kk-color-control-soft-bg);
    border: 1px solid var(--kk-color-control-soft-border);
    border-radius: var(--kk-radius-sm);
    color: var(--kk-color-text-muted);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

/* L'option retenue : fond bleu de marque, identique pour la langue et pour la devise. */
.kk-segmented__option--current {
    background: var(--kk-color-brand);
    border-color: var(--kk-color-brand);
    color: var(--kk-color-on-brand);
}

.kk-segmented__option:focus-visible {
    outline: 2px solid var(--kk-color-focus);
    outline-offset: 2px;
}

/* Le texte secondaire d'une option — le symbole d'une devise — s'efface derrière son code, sauf
   sur l'option retenue où il se lit sur le fond bleu. */
.kk-segmented__option-muted { color: var(--kk-color-text-muted); }
.kk-segmented__option--current .kk-segmented__option-muted { color: inherit; }