<div class="overlay"></div>

<!-- begin nav -->
    <div class="nav">
        <ul class="tabs">
            <li class="tabs_item tab tab__bookmark tab__is-active"> 
                <div class="tab_circle"></div>
                <i class="fa fa-bookmark tab_icon"></i>
                <span class="tab_name"> Bookmark</span>
            </li>

            <li class="tabs_item tab tab__bell"> 
                <div class="tab_circle"></div>
                <i class="fa fa-bell tab_icon"></i>
                <span class="tab_name"> Bell</span>
            </li>

            <li class="tabs_item tab tab__burn"> 
                <div class="tab_circle"></div>
                <i class="fa fa-cloud-upload tab_icon"></i>
                <span class="tab_name"> Upload</span>
            </li>

            <li class="tabs_item tab tab__clipboard"> 
                <div class="tab_circle"></div>
                <i class="fa fa-clipboard tab_icon"></i>
                <span class="tab_name"> Clipboard</span>
            </li>

            <li class="tabs_item tab tab__comment"> 
                <div class="tab_circle"></div>
                <i class="fa fa-comment tab_icon"></i>
                <span class="tab_name"> Comment</span>
            </li>
        </ul>
    </div>
    <!-- end nav -->

@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic');
body{
    // background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    transition: 0.5s;
    overflow: hidden;
}

.overlay{
    height: 200vw;
    width: 200vw;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // transition: 0.3s ease;
}

.nav{
    background: white;
    padding: 22px 45px;
    border-radius: 15px;
    box-shadow: 3px 3px 15px rgba(179, 179, 179, 0.185);
    position: relative;
    z-index: 1000;
}

.tabs{
    display: flex;
    width: 390px;
    justify-content: space-around;
    list-style-type: none;
}

.tab{
    padding: 13px 23px;
    background: #e0efff;
    color: #58a6ff;
    margin-right: 15px;
    border-radius: 55px;
    text-align: center;
    white-space: nowrap;
    transition: 0.3s ease;
    overflow: hidden;
    max-width: 0px;
    cursor: pointer;
    position: relative;
    flex-basis: 120px;
    &__is-active{
        max-width: 100px;
        box-shadow: 7px 7px 15px rgba(124, 124, 124, 0.096);
        .tab_name{
            opacity: 1;
        }
    }

    &_circle{
        position: absolute;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 2px solid #58a6ff;
        z-index: 10;
        opacity: 0;
        left: 30px;
        pointer-events: none;
    }

    &_icon{
        margin-right: 1px;
        font-size: 16px;
        vertical-align: middle;
        position: relative;
        right: 6.7px;
        top: -1px;
    }

    &_name{
        font-family: 'Ubuntu', sans-serif;
        font-size: 15px;
        font-weight: 500;
        position: relative;
        transition: 0.3s ease;
        top: 1px;
        opacity: 0;
    }

    &__bookmark{
        background: #cffcff;
        color: #00a8b5;
    }
    &__burn{
        background: #f1ddff;
        color: #774898;
    }
    &__clipboard{
        background: #ffddeb;
        color: #de4383;
    }
    &__comment{
        background: #ffeed5;
        color: #f3ae4b;
    }
}

let tabs = document.querySelectorAll('.tab')
let overlay = document.querySelector('.overlay')


let firstActive = document.querySelector(".tab__is-active")
let activeColor = getComputedStyle(firstActive).color; 
overlay.style.background = activeColor;
document.body.style.background = activeColor;


tabs.forEach(tab => {
    tab.addEventListener('click', function () {
        let tl = new TimelineLite();

        let accentColor = getComputedStyle(this).color;
        document.body.style.background = accentColor;
        this.children[0].style.borderColor = accentColor;

        

        if(!this.classList.contains('tab__is-active')){
            tl.fromTo(this.children[0], 0.4, {scale: 0, opacity: 1}, {scale: 3, opacity: 0}, "0")
            overlay.style.background = accentColor;
            tl.fromTo(overlay, 1, {scale: 0, opacity: 0},{scale: 1, opacity: 1}, "0");
        }
        tabs.forEach(tab => tab.classList.remove("tab__is-active"));
        this.classList.add("tab__is-active");
    })
})