.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%); */
    top: -5px;
    bottom: var(--lang-switcher-popup-bottom, unset);
    overflow: hidden;
    /* visibility: hidden; */
    visibility: visible;
    right: 10px;
    /* 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;
    display: none;
}
.lang-switcher-select::after {
    font-family: 'IcoMoon';
    content: "\e909";
    transform: rotate(90deg); */
    display: inline-flex;
    transition: transform .3s;
}
.lang-switcher-languages:focus-within .lang-switcher-select::after {
    transform: rotate(0deg);
}

.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;
}

.lang-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}