@import '../base.scss';

.emojiPicker {

    nav ~ .barWrapper {
        margin-top: $height_nav_item;
        // border-top: 1px solid $border_main;
    }

    nav {
        flex-direction: row;
        min-height: $height_nav_item;
        background-color: $bg_nav;
        display: flex;
        justify-content: space-between;
        position: fixed;
        z-index: 1;
        box-sizing: border-box;
        padding-left: $padding_category_name;
        padding-right: $padding_category_name;
        width: 100%;
        border-bottom: 1px solid #eeeeee;

        a {
            position: relative;
            transition: filter .2s;
            text-decoration: none;
            outline : none;
            

            &.active {
                &:after {
                    opacity: 1;
                    // background-color: $color_nav_underline_hover;
                }

                i {
                    opacity: 1;
                }
            }

            i {
                content: '';
                display: block;
                height: $height_nav_item;
                width: $width_nav_item;
                background-size: 18px auto;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                opacity: .4;
                text-decoration: none;
                outline : none;
                // transition: opacity .3s;
                // transition-delay: .2s;
            }

            &.people i   { background-image: url($bg_img_people); }
            &.foods i    { background-image: url($bg_img_foods); }
            &.nature i   { background-image: url($bg_img_nature); }
            &.activity i { background-image: url($bg_img_activity); }
            &.objects i  { background-image: url($bg_img_objects); }
            &.places i   { background-image: url($bg_img_places); }
            &.flags i    { background-image: url($bg_img_flags); }
            &.symbols i  { background-image: url($bg_img_symbols); }
        }
    }

    nav a:after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
        height: 2px;
        border-radius: 5px;
        background-color: $color_nav_underline_active;
        opacity: 0;
        // transition-delay: 1s;
        // transition: opacity .4s, background .2s;
    }

    // &.people   nav .people   { i {opacity: 1;} &:after { opacity: 1; } }
    // &.foods    nav .foods    { i {opacity: 1;} &:after { opacity: 1; } }
    // &.nature   nav .nature   { i {opacity: 1;} &:after { opacity: 1; } }
    // &.activity nav .activity { i {opacity: 1;} &:after { opacity: 1; } }
    // &.objects  nav .objects  { i {opacity: 1;} &:after { opacity: 1; } }
    // &.places   nav .places   { i {opacity: 1;} &:after { opacity: 1; } }
    // &.flags    nav .flags    { i {opacity: 1;} &:after { opacity: 1; } }
    // &.symbols  nav .symbols  { i {opacity: 1;} &:after { opacity: 1; } }
}