.lang-switcher-languages {
    position: relative;
    max-width: max-content;
}

.lang-switcher-languages ul {
    min-width: max-content;
    width: 100%;
    max-height: clamp(150px, 30vh, 300px);
    background-color: var(--lang-switcher-popup-background-color, var(--color-surface, var(--light, #ffffff)));
    color: var(--lang-switcher-popup-color, var(--color-surface, var(--dark, #000000)));
    overflow-y: auto;
    margin-bottom: 0;
}

.lang-switcher-popover {
    position: absolute;
    top: var(--lang-switcher-popup-top, 100%);
    bottom: var(--lang-switcher-popup-bottom, unset);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--language-switcher-z-index, 1000000);
    border-radius: var(--lang-switcher-border-radius, var(--base-border-radius-limited, 4px));
    box-shadow: var(--lang-switcher-box-shadow, var(--base-box-shadow, 4px 4px 1rem #00000033));
}

.lang-switcher-languages:focus-within .lang-switcher-popover {
    visibility: visible;
    pointer-events: all;
}

.lang-switcher-languages a, .lang-switcher-select {
    display: flex;
    align-items: center;
    gap: var(--lang-switcher-spacing, .5rem);
    text-decoration: none;
    padding: var(--lang-switcher-spacing, .5rem);
    transition: color .3s, background-color .3s;
}

.lang-switcher-languages a {
    background-color: var(--lang-switcher-link-background-color, var(--color-surface, var(--light, #ffffff)));
    color: var(--lang-switcher-link-color, var(--color-surface-text, var(--dark, #000000)));
}

.lang-switcher-select {
    border-radius: var(--lang-switcher-border-radius, var(--base-border-radius-limited, 4px));
    background-color: var(--lang-switcher-button-background-color, var(--color-surface, var(--light, #ffffff)));
    color: var(--lang-switcher-button-color, var(--color-surface-text, var(--dark, #000000)));
}

.lang-switcher-languages a:hover, 
.lang-switcher-languages a:focus {
    background-color: var(--lang-switcher-link-background-color-focus, var(--color-surface-elevated, var(--dark, #000000)));
    color: var(--lang-switcher-link-color-focus, var(--color-surface-elevated-text, var(--light, #ffffff)));
}

.lang-switcher-select:hover, 
.lang-switcher-select:focus, 
.lang-switcher-languages:focus-within .lang-switcher-select {
    background-color: var(--lang-switcher-button-background-color-focus, var(--color-surface-elevated, var(--dark, #000000)));
    color: var(--lang-switcher-button-color-focus, var(--color-surface-elevated-text, var(--light, #ffffff)));
}

.lang-switcher-select {
    cursor: pointer;
    display: flex;
    gap: var(--lang-switcher-spacing, .5rem);
    align-items: center;
}
.lang-switcher-select::after {
    content:">";
    transform: rotate(90deg);
    display: inline-flex;
    transition: transform .3s;
}
.lang-switcher-languages:focus-within .lang-switcher-select::after {
    transform: rotate(0);
}

.lang-switcher-languages li.active a {
    font-weight: 800;
    background-color: var(--lang-switcher-link-background-color-active, var(--color-primary, var(--primary, #0070e8)));
    color: var(--lang-switcher-link-color-active, var(--color-primary-text, var(--light, #ffffff)));
}

.lang-switcher-languages img {
    width: var(--lang-switcher-img-width, 30px);
    margin-bottom: 0;
}