@import "../vars";
@import "../modules/mixins";

[bs-section-nav] {

    @include sidebar-style;

    position: absolute;
    width: 100%;
    transform: translateX(-200%) translateY(20px) scale(1.2);
    transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
    transition: all .3s;
    opacity: 0;
    z-index: 5;

    ul {
        margin-bottom: 0;
    }

    [bs-button] {

        text-transform: none;
        color: $grey-text;
        width: 100%;
        border-radius: 0;
        text-align: left;
        border: 0;
        position: relative;
        background: transparent;
        display: block;
        height: auto;
        padding: 11px 0 11px $icon-gutter;
        border-bottom: 1px solid $sidebar-hover;
        @include font-size(16px);
        margin-bottom: 0;
        box-shadow: 0 0 0 0;

        [bs-svg-icon] {
            top:    14px;
            width:  20px;
            height: 20px;
            @include svg-shadow(1px);
        }

        &.active {
            background: $sidebar-hover;
            z-index: 5;
            color: $white;

            [bs-svg-icon] {
                color: $red;
            }
        }

        &:hover {
            color: $white;
            background: $sidebar-hover;
        }
        &:active {
            color: $white;
            box-shadow: 0px 1px 2px 0 rgba(black, .1) inset;
            background: darken($sidebar-hover, 5%);
        }
    }

    @include media-query(min, $lap-start) {
        &.ready {
            opacity: 1;
        }
        position: relative;
        transform: translateX(0) translateY(0) scale(1);
    }

    &.active {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
    }
}
