/*
 * Language picker.
 *
 * The custom flag dropdown that replaces the old native select in the header, the auth footer and the
 * admin topbar. The server renders both faces of it: the button and menu a script drives, and a native
 * select inside `<noscript>` for a reader without scripts. The CSS keeps them apart the same way the
 * script does — until the script marks the form `--enhanced`, the custom controls stay hidden and the
 * fallback select is the control.
 *
 * Everything here reads design tokens from `core/variables.css`, so dark mode and reduced motion arrive
 * for free. Logical properties (`inset-inline-end`, `text-align: start`) keep the dropdown correct in
 * right-to-left locales.
 */

.lang-select {
    position: relative;
    display: inline-block;
}

/* ---- The trigger button --------------------------------------------------------------------------- */

.lang-select__button {
    display: none; /* shown once the script marks the form enhanced */
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-full);
    background: var(--colour-surface);
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing),
                box-shadow var(--duration-fast) var(--easing),
                background-color var(--duration-fast) var(--easing);
}

.lang-select--enhanced .lang-select__button {
    display: inline-flex;
}

.lang-select__button:hover {
    border-color: var(--colour-border-strong);
    background: var(--colour-surface-sunken);
}

.lang-select__button:focus-visible {
    outline: none;
    border-color: var(--colour-border-focus);
    box-shadow: 0 0 0 var(--focus-width) color-mix(in srgb, var(--colour-focus) 25%, transparent);
}

.lang-select__caret {
    flex: none;
    color: var(--colour-ink-quiet);
    transition: transform var(--duration-fast) var(--easing);
}

.lang-select--open .lang-select__caret {
    transform: rotate(180deg);
}

/* ---- Flags ---------------------------------------------------------------------------------------- */

/* Every flag is drawn at 3:2; the fixed ratio keeps ragged edges from appearing when a browser rounds
   the height differently per language. The hairline ring is what separates a pale flag from the button
   behind it. */
.lang-select__flag {
    flex: none;
    width: 1.375rem;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--colour-border);
}

/* ---- The menu ------------------------------------------------------------------------------------- */

.lang-select__menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    inset-inline-end: 0;
    z-index: var(--layer-overlay);
    min-width: 13rem;
    max-height: min(22rem, 70vh);
    overflow-y: auto;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-md);
    background: var(--colour-surface-raised);
    box-shadow: var(--shadow-lg);
    animation: lang-select-open var(--duration-fast) var(--easing);
}

@keyframes lang-select-open {
    from {
        opacity: 0;
        transform: translateY(calc(-1 * var(--space-1)));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-select__item {
    margin: 0;
}

.lang-select__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing);
}

.lang-select__option:hover,
.lang-select__option:focus-visible {
    outline: none;
    background: var(--colour-surface-sunken);
}

.lang-select__name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The check mark is rendered for every option and shown for the chosen one, so the column of names keeps
   its alignment whether or not an option is active. */
.lang-select__check {
    flex: none;
    color: var(--colour-primary);
    visibility: hidden;
}

.lang-select__option--active {
    background: var(--colour-primary-surface);
    font-weight: var(--weight-medium);
}

.lang-select__option--active .lang-select__check {
    visibility: visible;
}

/* ---- No-script fallback --------------------------------------------------------------------------- */

/* The fallback only exists where scripts do not, so it needs no rule to hide it; it simply borrows the
   look of a regular field. */
.lang-select__fallback {
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-sm);
    background: var(--colour-surface);
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.lang-select__fallback:focus-visible {
    outline: var(--focus-width) solid var(--colour-focus);
    outline-offset: var(--focus-offset);
}

.lang-select__fallback-submit {
    margin-inline-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-sm);
    background: var(--colour-surface);
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
}

.lang-select__fallback-submit:hover {
    background: var(--colour-surface-sunken);
}

/* ---- Variants ------------------------------------------------------------------------------------- */

/* The auth footer centres its row, so the dropdown aligns with it rather than hanging to one side. */
.lang-select--inline {
    display: inline-flex;
    align-items: center;
}