/* Language switcher — scoped under .zds-v1, BEM prefix zls-. */

.zds-v1 .zls-switcher {
    position: relative;
    display: inline-flex;
}

.zds-v1 .zls-trigger {
    justify-content: center;
    padding: 0 8px;
    gap: 11px;
    width: 67px;
    /* Slower than the global .btn transition (0.15s, zds-v1.css). */
    transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

/* .btn-primary.btn-white-dark-bg's confirmed :focus state includes a cream
   border — not wanted for this dropdown trigger, only its own toggled
   .is-open state matters visually. Matches the specificity of
   `.btn-primary:focus:not([disabled]):not([aria-disabled="true"])`
   exactly, so source order (this file loads after zds-v1.css) decides. */
.zds-v1 .zls-trigger:focus:not([disabled]):not([aria-disabled="true"]) {
    border-color: transparent;
    box-shadow: none;
}

.zds-v1 .zls-trigger__code {
    /* Font/color come from .btn/.btn-primary/.btn-white-dark-bg; line-height
       overridden tighter here (see nudge note below). */
    line-height: 1;
    /* .zls-trigger centers this as a flex item, which centers the line box,
       not the glyph ink — Axiforma's ascent is taller than its descent, so
       the visible text sits above true center even at line-height:1.
       Empirical nudge, not a Figma value. */
    position: relative;
    top: 2px;
}

.zds-v1 .zls-trigger__icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--zds-radius-sm);
    flex-shrink: 0;
    --zds-icon-color: var(--zds-color-cream);
}

.zds-v1 .zls-trigger__icon .zds-icon {
    flex-shrink: 0;
}

.zds-v1 .zls-dropdown {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 117px;
    background: var(--zds-overlay-cream-10);
    box-shadow: var(--zds-shadow-popover);
    border-radius: var(--zds-radius-md);
    /* Above the mega-menu dropdown (z-index:999/1000 in mega-menu.css) so
       the switcher's own dropdown isn't hidden underneath it when both are
       open at once (header context). */
    z-index: 1001;
    list-style: none;
    margin: 0;
}

.zds-v1 .zls-switcher.is-open .zls-dropdown {
    display: flex;
}

/* Header instance only (mobile overlay and footer both already override
   with their own solid background) — the base rule's translucent
   rgba(255,251,237,0.1) lets the header's border-bottom seam (::after,
   z-index:1000 in mega-menu.css) show through where the dropdown overlaps
   it. Solid blend of that overlay over the header's deep-green background. */
.zds-v1.zds-header .zls-dropdown {
    background: #293833;
}

.zds-v1 .zls-option__link {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
    width: 117px;
    height: 38px;
    text-decoration: none;
}

.zds-v1 .zls-option--active .zls-option__link {
    background: var(--zds-color-mint);
}

.zds-v1 .zls-option__code,
.zds-v1 .zls-option__name {
    font-family: var(--zds-font-family-heading);
    font-weight: var(--zds-font-weight-regular);
    font-size: 14px;
    line-height: 1;
    /* Same Axiforma ascent/descent nudge as .zls-trigger__code above. */
    position: relative;
    top: 2px;
    color: var(--zds-color-cream);
}

.zds-v1 .zls-option--active .zls-option__code,
.zds-v1 .zls-option--active .zls-option__name {
    color: var(--zds-color-deep-green);
}