.overlay__language:hover,
.hasHeader .overlay__language:hover {
    color: var(--grey);
}

.overlay__language {
    position: relative;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    transition: none;    
    cursor: pointer;          
}
.language-switch {
    position: absolute;
    top: calc(100% + var(--spacing-2));
    left: calc(var(--spacing-3) * -1);
    width: 18rem;
    padding: var(--spacing-3);
    background: #c7c7c74d;
    backdrop-filter: blur(var(--blur));
    border-radius: var(--border-radius);
    display: none;

    @include mq-768 {
        left: initial;
        right: calc(var(--spacing-3) * -1);
    }

    &.active {
        display: block;
    }

    &__item {
        margin-bottom: var(--spacing-2);
        
        &:last-of-type {
            margin: 0;
        }

        a {
            width: calc(100% - var(--spacing-3));
            padding-left: var(--spacing-2);
            color: inherit;
        }
    }
    
    &__label {
        color: inherit;   
        cursor: pointer;     
        
        &:hover,
        &:focus {
            font-weight: var(--font-weight-black);
            text-decoration: none;
            color: inherit;
        }
    }
    label {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;        
    }
    input {
        width: var(--spacing-3);
        height: var(--spacing-3);
        cursor: pointer;
    
        &:hover + .language-switch__label,
        &:focus + .language-switch__label,
        &:checked + .language-switch__label {
            font-weight: var(--font-weight-black);
        }   
    }
}