.sidebar .language-selector-form {
    // The ! important is because otherwise select2 will changes the select on
    // oscar dashboard pages.
    select[name="language"] {
        border: 1px solid #999 !important;
        background: none;
        color: #ccc;
        border-radius: 0;
        font-size: 1em;
        font-weight: 600;
        padding: .8em 2.5em .8em 1em !important;
        display: block !important;
        height: auto !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
        clip-path: unset !important;
        &:hover, &:focus{
            color: var(--w-color-text-label-menus-active);
            text-shadow: -1px -1px 0 var(--w-color-black-35);
        }
        &:focus-visible {
            outline:none !important;
        }
    }
    &.sidebar-search--slim {
        select[name="language"] {
            width: 100%;
            padding: .8em 1.1em .8em 1.1em !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

}


.language-selector-form {
    padding: 0 1em 1em;
}

#language_selector span.select2 {
    display: none;
}

// ocyanextralanguages is defined in sassfunctions.py
// for each extra language define color overrides for the dashboard.
$languages: ocyanextralanguages();
$numlanguages: length($languages);

$color-primary-hue: 254.3;
$color-secondary-hue: 180.5;

@if $numlanguages >= 1 {
    @for $i from 1 through $numlanguages {
        $lang: nth($languages, $i);
        $hue-adjust: (360 / ($numlanguages + 1)) * $i;
        $primary: ($color-primary-hue + $hue-adjust) % 360;
        $secondary: ($color-secondary-hue + $hue-adjust) % 360;

        html[lang=#{$lang}] {
            --w-color-primary-hue: #{$primary};
            --w-color-secondary-hue: #{$secondary};
        }
    }
}
