/*
 * Docs: /Docs/Features/LocalizationPlugin.md
 * vaMicrosites Localization Plugin  -  language selector component styles.
 *
 * WHY: Plugin-owned CSS so microsites never need to duplicate selector layout rules.
 * All visual customization (colors, font-size, spacing) is deferred to microsite-level
 * CSS via the documented class names, following the same extensibility contract as NavMenu.
 */

/* ── Container ────────────────────────────────────────────────────────────── */

.va-lang-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    /* WHY: No hard-coded colors here  -  microsite CSS controls palette. */
}

/* ── Option buttons / links ───────────────────────────────────────────────── */

.va-lang-selector__option {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
    /* WHY: Inherit color and font from the surrounding context (topbar, footer, etc.) so the
       selector adapts to its placement without overriding microsite branding. */
    color: inherit;
    font-family: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.va-lang-selector__option:hover,
.va-lang-selector__option:focus-visible {
    /* WHY: Visible focus indicator for WCAG 2.1 SC 2.4.7  -  use outline rather than box-shadow
       so it works on dark and light backgrounds alike. Microsite CSS can override. */
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* WHY: aria-pressed="true" state marks the active language visually; the class is kept on the
   button so microsite CSS can style it without knowing the internal attribute. */
.va-lang-selector__option[aria-pressed="true"] {
    font-weight: 600;
    border-color: currentColor;
}

/* ── Flag image ──────────────────────────────────────────────────────────── */

.va-lang-selector__flag {
    width: 1.25em;
    height: auto;
    /* WHY: Vertical-align prevents flag images from shifting the baseline on mixed icon+text lines. */
    vertical-align: middle;
    border-radius: 2px;
}

/* ── Label text ──────────────────────────────────────────────────────────── */

.va-lang-selector__label {
    /* WHY: Prevent the label from wrapping inside the compact selector button. */
    white-space: nowrap;
}