.LanguageSwitcher {
    .pagetitle & {
        border-right: $border;
        @include small-medium {
            display: none;
        }
    }
    .Nav & {
        @include large {
            display: none;
        }
    }
    .Home__Wrapper & {
        padding: $spacing/2 $spacing;
    }
    .Sidebar & {
        margin-bottom: $spacing;
        @include border;
    }
}

.LanguageSwitcher__Inner {
    position: relative;
    .Sidebar & {
        padding: 8px 12px;
    }
}

.LanguageSwitcher__Toggle {
    @include flex-center;
    font-size: $medium-font;
    cursor: pointer;
    span {
        display: block;
        margin-right: $spacing/4;
    }
    svg {
        display: block;
        width: 12px;
        position: relative;
        polygon {
            fill: $text-color;
        }
    }
    &:hover,
    .pagetitle .LanguageSwitcher--open & {
        // background: $teal-light;
    }
    .pagetitle & {
        padding: $spacing;
    }
}
.LanguageSwitcher__Options {
    position: absolute;
    width: 300px;
    left: 50%;
    border: $border2;
    background: $bg-color;
    padding: $spacing;
    transform: translateX(-50%);
    z-index: 10000;
    @include xsmall {
        max-width: 90vw;
    }
    .LanguageSwitcher--closed & {
        @include sr-only;
    }
    &:after,
    &:before {
        left: 50%;
        border: solid transparent;
        content: ' ';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    &:after {
        border-color: rgba(136, 183, 213, 0);
        border-width: 10px;
        margin-left: -10px;
    }
    &:before {
        border-color: rgba(194, 225, 245, 0);
        border-width: 12px;
        margin-left: -12px;
    }
    .LanguageSwitcher--bottom & {
        top: 130%;
        &:after,
        &:before {
            bottom: 100%;
        }
        &:after {
            border-bottom-color: $bg-color;
        }
        &:before {
            border-bottom-color: $border-color;
            border-style: dashed;
        }
    }
    .LanguageSwitcher--top & {
        bottom: 160%;
        &:after,
        &:before {
            top: 100%;
        }
        &:after {
            border-top-color: $bg-color;
        }
        &:before {
            border-top-color: $border-color;
            border-style: dashed;
        }
    }
}

.Locales {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: $spacing;
    grid-row-gap: $spacing;
}

.Locales__Item {
    text-align: center;
    @include font-regular;
    @include small-medium {
        font-size: $small-font;
    }
    @include large {
        font-size: $medium-font;
    }
    &--current {
        @include font-bold;
    }
}

.LanguageSwitcher__Help {
    font-size: $small-font;
    padding-top: $spacing;
    margin-top: $spacing;
    border-top: $border;
}
