.locale-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.locale-switcher__option {
    position: relative;
    color: var(--brand-ink);
    opacity: 0.55;
    text-decoration: none;
    transition: opacity var(--transition-fast) var(--easing-standard);
}

/* Hover: an underline that grows left→right (and shrinks back right→left
   on leave) — the same effect as the header-menu links (`menu.css`). */
.locale-switcher__option::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width var(--transition-medium) ease;
}

.locale-switcher__option:hover {
    opacity: 1;
}

.locale-switcher__option:hover:not(.is-active)::after {
    width: 100%;
}

.locale-switcher__option.is-active {
    opacity: 1;
    font-weight: var(--font-weight-bold);
    cursor: default;
}

.locale-switcher__sep {
    opacity: 0.35;
    font-size: 0.75rem;
}

/* `--field` modifier: the per-translatable-field locale tabs on the admin
   edit page (dynamic-content i18n, §26.10). Same component, same look —
   only the footer-context bottom margin is dropped (mirrors how
   `.header-locale` resets it for the header). */
.locale-switcher--field {
    margin-bottom: 0;
}