Language Switch

<div class="region--language">
    <div class="overlay__language">Language <i class="fas fa-globe-americas"></i></div>

    <div class="language-switch active">  

        <div class="language-switch__item">
            <label for="English">
                <input type="radio" value="en_US" id="English" checked="">
                <span class="language-switch__label">English</span>
            </label>
        </div>          
        <div class="language-switch__item">
            <label for="中文简体">
                <input type="radio" value="zh-cn" id="中文简体">
                <span class="language-switch__label">中文简体</span>
            </label>
        </div>        
        <div class="language-switch__item">
            <label for="中文繁體">
                <input type="radio" value="zh-tw" id="中文繁體">
                <span class="language-switch__label">中文繁體</span>
            </label>
        </div>        
        <div class="language-switch__item">
            <label for="日本語">
                <input type="radio" value="ja" id="日本語">
                <span class="language-switch__label">日本語</span>
            </label>
        </div>        
        <div class="language-switch__item">
            <label for="Português">
                <input type="radio" value="pt" id="Português">
                <span class="language-switch__label">Português</span>
            </label>
        </div>        
        <div class="language-switch__item">
            <label for="Español">
                <input type="radio" value="es" id="Español">
                <span class="language-switch__label">Español</span>
            </label>
        </div>        
        <div class="language-switch__item">
            <label for="Polskie">
                <input type="radio" value="pl" id="Polskie">
                <span class="language-switch__label">Polskie</span>
            </label>
        </div>        
        <div class="language-switch__item">
            <label for="Pусский">
                <input type="radio" value="ru" id="Pусский">
                <span class="language-switch__label">Pусский</span>
            </label>
        </div>  

    </div>
</div>

.region--logo,
.region--user {
    width: 35rem;
}
.region--nav {
    width: calc(100% - 70rem);
}

.region--language {
    position: relative;
    cursor: pointer;
}
.overlay__language:hover,
.hasHeader .overlay__language:hover {
  color: #ababab;
}

.overlay__language {
  position: relative;
  font-size: var(--font-size-2);
  font-weight: 900;
  text-transform: uppercase;
  transition: none;
}

.language-switch {
  position: absolute;
  top: calc(100% + var(--spacing-1));
  left: -1.8rem;
  width: 18rem;
  padding: 1.8rem;
  background: rgba(199, 199, 199, 0.3019607843);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border-radius: var(--border-radius);
  display: none;
}
.language-switch.active {
  display: block;
}
.language-switch__item {
  margin-bottom: var(--spacing-1);
}
.language-switch__item:last-of-type {
  margin: 0;
}
.language-switch__item a {
  color: inherit;
}
.language-switch__label {
  color: inherit;
}
.language-switch__label:hover, .language-switch__label:focus {
  font-weight: var(--bold);
  text-decoration: none;
  color: inherit;
}
.language-switch label {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  cursor: pointer;
}
.language-switch input {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: var(--spacing-1);
}
.language-switch input:checked + .language-switch__label {
  font-weight: var(--bold);
}
@media only screen and (max-width: 1024px) {
    .region--logo,
    .region--user {
        width: 22rem;
    }
    .region--nav {
        width: calc(100% - 44rem);
    }

    .region--language .overlay__language,
    .region--search .overlay__search {
        font-size: 0;
    }
}
@media only screen and (max-width: 480px) {
    .js-nav-toggle {
        top: 18px;
        left: 28px;
    }
    .region--logo {
        order: 1;
        width: calc(50% - 1.8rem);
    }
    .region--nav {
        width: 2.4rem;
    }
    .region--user {
        order: 2;
        width: calc(50% - 1.8rem);
    }
}

var languageSelect;

function languageSwitchText() {
    if (languageSelect == 'English') {
        jQuery('.overlay__language').append('<i class="fas fa-globe-americas"></i>');
    }
    if (languageSelect == 'Português' || languageSelect == 'Español' || languageSelect == 'Polskie' || languageSelect == 'Pусский') {
        jQuery('.overlay__language').append('<i class="fas fa-globe-europe"></i>');                
    }
    if (languageSelect == '中文简体' || languageSelect == '中文繁體' || languageSelect == '日本語') {
        jQuery('.overlay__language').append('<i class="fas fa-globe-asia"></i>');
    }
}

jQuery(function ($) {    

    languageSelect = jQuery('.language-link.is-active').text();
    $('.overlay__language').text(languageSelect); 
    languageSwitchText();    

    $('.language-link').each(function() {
        $(this).addClass('language-switch__label');
    });

    $(document).mouseup(function (e){
        var overlayLang = $('.overlay__language');

        if ( !overlayLang.is(e.target) && overlayLang.has(e.target).length === 0 ) {
            $('.language-switch').removeClass('active');
        }
    });
    
    $('.overlay__language, .language-switch__item').on('click', function (){
        if ($('.language-switch').hasClass('active')) {
            $('.language-switch').removeClass('active');
        } else {
            $('.language-switch').addClass('active');
        }
    });

    $('.language-switch__label').on('click', function() {
        languageSelect = $(this).text();
        $('.overlay__language').text(languageSelect);

        $('.language-switch__item input').prop('checked', false);
        $(this).prev('input').prop('checked', true);
        
        languageSwitchText();
    });  


    $('.language-switch__item input').click(function() {
        var languageHref = $(this).next('a').attr('href');

        $(this).next('.language-link').trigger('click');        
        window.location.href = languageHref;
    });

    var keyEsc = 27;
    $(window.document).keyup(function (e) {
        if (e.keyCode === keyEsc) {
            $('.overlay__language').trigger('click');
        }
    });

    $(document).on('change', function (e) {
        if ($('.language-switch__item input').hasClass('is-active') ) {
            $(this).prop('checked', true);
        }
    });
    jQuery(window).on("load", function (e) {        
        jQuery('.language-switch__item input').prop('checked', false);
        jQuery('.language-link.is-active').prev('input').prop('checked', true);
    });

});