/* 
^ Styling the drop-down menu for language switcher
* Auther : Fadi Nouh
* URL : https://bluebit.dev
* Repository: https://github.com/bluebits-academy/language-switcher
*/

@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css');

 
body {
    font-family: 'Didact Gothic', sans-serif;
    color: #333;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

header {
    background-color: #fff;
    height: 35px;
    padding: 1px 0;
}

nav {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}


.lang-menu {
    width: 100px;
    text-align: right;
    font-weight: bold;
    margin-top: 2px;
    position: relative;
}

    .lang-menu .selected-lang {
        display: flex;
        justify-content: space-between;
        line-height: 2;
        cursor: pointer;
    }

        .lang-menu .selected-lang:before {
            content: '';
            display: inline-block;
            width: 32px;
            height: 32px;
            background-image: url(https://www.countryflags.io/us/flat/32.png);
            background-size: contain;
            background-repeat: no-repeat;
        }

    .lang-menu ul {
        margin: 0;
        padding: 0;
        display: none;
        background-color: #fff;
        border: 1px solid #f8f8f8;
        position: absolute;
        top: 30px;
        left: 0px;
        width: 125px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    }


        .lang-menu ul li {
            list-style: none;
            text-align: left;
            display: flex;
            justify-content: space-between;
        }

            .lang-menu ul li a {
                text-decoration: none;
                width: 125px;
                padding: 15px 10px;
                display: block;
            }

            .lang-menu ul li:hover {
                background-color: #f2f2f2;
            }

            .lang-menu ul li a:before {
                content: '';
                display: inline-block;
                width: 25px;
                height: 25px;
                vertical-align: middle;
                margin-right: 10px;
                background-size: contain;
                background-repeat: no-repeat;
            }

.en:before {
    background-image: url(https://www.countryflags.io/us/flat/32.png);
}

.ar:before {
    background-image: url(https://www.countryflags.io/kw/flat/32.png);
}

.lang-menu:hover ul {
    display: block;
}