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

.lang-switcher-languages ul {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    position: relative;
    min-width: max-content;
    width: 100%;
    max-height: clamp(150px, 30vh, 300px);
    overflow-y: hidden;
    margin-bottom: 0;
}

.lang-switcher-popover {
    z-index: var(--language-switcher-z-index, 1000000);
}

.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;
    text-transform: uppercase;
    transition: color .3s, background-color .3s;
}
.lang-switcher-select{
    display: none !important;
}

.lang-switcher-languages a {
    /* background-color: var(--lang-switcher-link-background-color, var(--color-surface, var(--light, #ffffff))); */
    color: #ffffff;
    transition: .3s all;
}

.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: #ffffff;
    opacity: .38;
}

.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: #171D27;
    opacity: .38;
}

.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:first-of-type {
    position: relative;
}

.lang-switcher:before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50% + 1px);
    width: 1px;
    height: 26px;
    background-color: #ffffff;
    opacity: 0.3;
    transform: translate(-50%, -50%);
}

.lang-switcher-languages li.active a {
    font-weight: 600;
    color:  #ffffff;
    opacity: 1;
}

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