$nav-height: 40px;
$nav-second-level-height: 40px;
%first-level{
    padding: 0 15px;
    height: $nav-height;
    line-height: $nav-height;
    overflow: hidden;
    @extend %perspective;
    &:after{
        content: '';
        display: inline-block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: $color_white;
        z-index: -1;
        @include animation(scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both);
    }
    &:before{
        display: block;
        position: absolute;
        width: 100%;
        height: 10px;
        background-color: rgba(197, 184, 184, 1);
        left: 0;
        top: 50%;
        @include transform(translateY(-50%));
        z-index: -1;
    }
    &:hover,
    &:focus-within{
        &:after{
            @include animation( scale-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both);
        }
    }
}

%second-level{
    position: absolute;
    top: 110%;
    left: 0;
    width: 220px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background-color: $color_white;
    opacity: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    @include transition(all,1s,ease);
    z-index: 3;
    a{
        display: block;
        padding: 10px 15px;
        color: $text_color;
        text-transform: capitalize;
        width: 100%;
        position: relative;
        &:visited{
            color: $text_color;
        }
       
    }
}