/*
 * The language switch (overnight item 6): one component, x-language-switch,
 * in the bar or the footer of every layout that speaks more than one
 * language. A globe that opens a short glass list of flags and codes, the
 * same at every width. Colours come from whatever palette the page already set.
 */

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

.lang-switch-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
/* Half the size it was (owner, 7 October), and easier to tap than it looks.
   A block, so no line box sits round it and it centres beside the others. */
.lang-switch-button::after { content: ""; position: absolute; inset: -.25rem; }
.lang-switch-button .icon { width: .625rem; height: .625rem; }
.lang-switch-button::-webkit-details-marker { display: none; }
.lang-switch-button::marker { content: ""; }
.lang-switch-button:hover, .lang-switch[open] .lang-switch-button { background: var(--surface-2); }
.lang-switch-button:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }

.lang-code { letter-spacing: .04em; }

.lang-switch-list {
    position: absolute;
    top: calc(100% + var(--space-2, .5rem));
    right: 0;
    z-index: 30;
    display: grid;
    gap: 1px;
    min-width: 7.5rem;
    margin: 0;
    padding: var(--space-1, .25rem);
    list-style: none;
    background-color: var(--glass-bg);
    background-image: var(--glass-image);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
    border-radius: var(--glass-radius);
}
.lang-switch-list form { margin: 0; }
.lang-switch-list a,
.lang-switch-list button {
    display: flex;
    align-items: center;
    gap: var(--space-2, .5rem);
    width: 100%;
    padding: var(--space-2, .5rem) var(--space-3, .75rem);
    border: 0;
    border-radius: var(--radius-sm, 10px);
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.lang-switch-list a:hover,
.lang-switch-list button:hover { background: var(--surface-2); }
.lang-switch-list [aria-current] { color: var(--accent-text, var(--text)); }
.lang-switch-list img { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
.lang-tick { margin-inline-start: auto; }

/* In a footer the page ends under the switch, so it opens upwards. */
.lang-switch.opens-up .lang-switch-list { top: auto; bottom: calc(100% + var(--space-2, .5rem)); left: 0; right: auto; }