/* The language switcher next to the project name in the sidebar and in the mobile header. */
.language-switcher-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* The project name keeps its line. When the switcher does not fit next to it (with the language
   name it does not in the sidebar's 15em), the switcher moves under it, to the right. */
.language-switcher-brand .sidebar-brand {
    flex: 1 0 auto;
    max-width: 100%;
}

.language-switcher-sidebar {
    flex: none;
    margin: -0.5rem var(--sidebar-item-spacing-horizontal, 1rem) 0.25rem auto;
}

.language-switcher {
    position: relative;
    display: inline-flex;
}

.language-switcher-button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem;
    color: var(--color-foreground-secondary);
    font: inherit;
    font-size: var(--font-size--small);
    line-height: 1.2;
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    cursor: pointer;
}

.language-switcher-button:focus-visible {
    border-color: var(--color-brand-primary);
    outline: none;
}

.language-switcher-button:hover,
.language-switcher.open .language-switcher-button {
    color: var(--color-foreground-primary);
}

.language-switcher-button .language-switcher-globe {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.language-switcher-button .language-switcher-arrow {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.15s;
}

.language-switcher.open .language-switcher-arrow {
    transform: rotate(180deg);
}

/* In the mobile header the button sits between the title and the icons: keep it small, and on
   the narrowest screens leave out the arrow. */
.language-switcher-header .language-switcher-button {
    padding: 0.25rem;
    font-size: var(--font-size--small--2);
}

@media (max-width: 26em) {
    .language-switcher-header .language-switcher-arrow {
        display: none;
    }
}

.language-switcher-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 9rem;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border);
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.language-switcher.open .language-switcher-menu {
    display: block;
}

.language-switcher-menu a {
    display: block;
    padding: 0.35rem 0.85rem;
    color: var(--color-foreground-primary);
    text-decoration: none;
    white-space: nowrap;
}

.language-switcher-menu a:hover {
    background: var(--color-background-hover);
}

.language-switcher-menu a.current {
    font-weight: 600;
    pointer-events: none;
}