/****************************
 * Language Switcher
*****************************/
.vii-language-switcher ul {list-style:none; margin:0;}
.vii-language-switcher ul > li {padding:0;}

.vii-language-switcher-item {
    white-space:nowrap; display:flex; align-items:center;
    color:var(--vii-color-blue); font-weight:700;
}
.vii-language-switcher-item.text-code {text-transform:uppercase;}
img.vii-language-switcher-item__flag {width:25px; height:auto; background-color:#ccc;}
a.vii-language-switcher-item:hover,
a.vii-language-switcher-item:focus {color:var(--vii-color-primary); text-decoration:none;}


/****************************
 * Language Switcher > List
*****************************/
.vii-language-switcher.list ul {display:flex;}
.vii-language-switcher.list ul > li:not(:last-child) {margin-right:10px;}
.vii-language-switcher.list .vii-language-switcher-item.active {color:var(--vii-color-primary);}
.vii-language-switcher.list .vii-language-switcher-item {
    text-transform:uppercase;
}
.vii-language-switcher.list li {display:flex;}
.vii-language-switcher.list ul > li:not(:last-child):after {
    content:"|"; margin-left:10px;
    transform:translateY(-1px);
}

/* has flag */
.vii-language-switcher.list .vii-language-switcher-item.has-flag {transition:opacity .3s ease;}
.vii-language-switcher.list .vii-language-switcher-item.has-flag:not(.active):not(:hover) {opacity:0.3}


/****************************
 * Language Switcher > Hover
*****************************/
/* hover */
.vii-language-switcher.hover {position:relative;}
.vii-language-switcher.hover:not(:hover) .vii-language-switcher-dropdown {opacity:0; visibility:hidden;}

.vii-language-switcher.hover > .vii-language-switcher-item:after {
    content:"\e915"; font-family:var(--vii-font-icomoon); font-size:.6em;
    margin-left:6px; display:inline-block;
    transition:transform .3s ease;
}
.vii-language-switcher.hover:hover > .vii-language-switcher-item:after {transform:rotate(180deg);}

/* dropdown */
.vii-language-switcher-item.text-name:not(.has-flag) + .vii-language-switcher-dropdown {min-width:calc(100% + 20px);}
.vii-language-switcher-dropdown {
    position:absolute; top:100%; left:-10px; padding-top:4px;
    transition:all .3s ease;
}
.vii-language-switcher-dropdown ul {
    background:#fff;
    box-shadow:0 -3px 15px 5px rgb(0 0 0 / 10%); border-radius:4px;
}
.vii-language-switcher-dropdown ul li:not(:last-child) {border-bottom:1px solid var(--vii-color-gray);}
.vii-language-switcher-dropdown ul .vii-language-switcher-item {padding:7px 10px;}