// SECONDARY NAV
.secondary-nav{
    margin-top: 1.5rem;
    background: $grey--light;

    // general
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a{
        position: relative;
        display: block;
        color: $grey--dark;

        // border
        &:after{
            content: '';
            pointer-events: none;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(black, 0.1);
        }
    }

    // first level
    > ul > li {

    }
    > ul > li > a {
        padding: 0.75rem 1.5rem;
    }

    // second level
    ul ul{
        display: none;
    }
    ul ul a{
        padding: 0.375rem 1.5rem 0.375rem 1.25rem;
        font-size: 0.875rem;
        color: white;
        background: lighten($grey--dark, 5%);
    }
    ul ul a span{
        display: inline-block;
        padding: 0 0.75rem;
        margin-right: 0.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        color: $grey--dark;
        background: white;
        border-radius: 0.75rem;
    }

    // current
    li.current_page_ancestor{

        > a{
            color: white;
            background: lighten($grey--dark, 5%);
        }
        ul{
            display: block;
        }
    }
    li.current_page_item > a{
        color: white;
        background: $grey--dark;
    }

    @include desktop{

        a{
            @include transition;
        }
        a:hover{
            color: white;
            background: $grey--dark !important;
        }
    }
}

// colors
.secondary-nav--main{

    ul ul a{
        background: lighten($main, 5%);
    }
    ul ul a span{
        color: $main;
    }
    // current
    li.current_page_ancestor > a{
        background: lighten($main, 5%);
    }
    li.current_page_item > a{
        background: $main;
    }
    @include desktop{

        a:hover{
            background: $main !important;
        }
    }
}
.secondary-nav--secondary{

    ul ul a{
        background: lighten($secondary, 5%);
    }
    ul ul a span{
        color: $secondary;
    }
    //
    // current
    li.current_page_ancestor > a{
        background: lighten($secondary, 5%);
    }
    li.current_page_item > a{
        background: $secondary;
    }
    @include desktop{

        a:hover{
            background: $secondary !important;
        }
    }
}