
/* ASIDE */
/* ===================================== */
#container
    #aside-container
        padding: 0 20px
        position: relative
        top: 0
        z-index: 3
        .nano-content
            position: static
            outline: none


    #aside
        .list-link li a:not(.btn)
            color: darken($aside-dark-color,18%)
            &:hover
                color: $aside-dark-color


        .badge-stat
            color: $aside-dark-bg

        .text-main
            color: $aside-dark-color


    &.aside-float.aside-in #aside-container
        box-shadow: 0 0 5px 6px rgba(0,0,0,.15)



#aside
    background-color: $aside-dark-bg
    color: $aside-dark-color
    overflow: hidden
    -webkit-transform-style: preserve-3d
    -webkit-backface-visibility: hidden
    -webkit-perspective: 1000
    -webkit-transform: translateZ(0)
    a:not(.btn):not(.btn-link)
        color: inherit

    &.aside-xs-in
        max-height: none
        overflow: hidden
        margin-bottom: 70px

    .bord-all,
    .bord-top,
    .bord-btm,
    .bord-left,
    .bord-rgt,
    .bord-hor,
    .bord-ver,
    .list-divider
        border-color: lighten($aside-dark-bg,3%)

    .btn-link
        color: $aside-dark-color

    .text-muted
        color: lighten($aside-dark-bg,35%)

    hr
        border-color: rgba(0,0,0,0.15)




@if $aside-tabs

    /* Aside with tabs */
    /* ===================================== */
    #aside
        #aside-container &
            .nav-tabs
                &.nav-justified > li
                    display: table-cell
                    width: 1%

                li
                    border-bottom: 1px solid darken($aside-dark-bg, 5%)
                    > a
                        border-radius: 0
                        border: 0
                        background-color: $aside-dark-bg
                        padding: .9em 0
                        margin: 0
                        > i
                            font-size: 1.35em
                            vertical-align: sub

                        &:before
                            content: ''
                            display: block
                            background: $state-active-bg
                            height: 2px
                            position: absolute
                            bottom: -1px
                            left: 50%
                            right: 50%
                            transition: left .05s, right .05s


                    &:first-child > a
                        border-left: 0

                    &:last-child > a
                        border-right: 0

                    &:not(.active) a
                        opacity: .5


                .active
                    a:before
                        left: 0
                        right: 0
                        transition: left .15s, right .15s



            .tab-content
                padding: 5px 0


        #container.aside-bright &
            .nav-tabs
                li
                    border-bottom: 1px solid darken($aside-bright-bg, 5%)
                    > a
                        background-color: $aside-bright-bg








/* ASIDE - RESPONSIVE LAYOUT */
/* ===================================== */
@media (max-width: 760px)
    #container > div > #aside-container
        top: $navbar-height


    #container.aside-left.aside-in #aside-container
        left: 0
        right: auto

    #container.aside-left
        #aside-container
            left: 0 - $aside-width
            right: auto


    #container.aside-left.mainnav-sm #content-container,
    #container.aside-left.mainnav-sm #footer
        padding-left: 0



@media (min-width: 768px)
    #container.mainnav-sm.aside-left.aside-in
        #aside-container
            left: $mainnav-sm-width
            right: auto

        #content-container, #footer
            padding-left: $mainnav-lg-width


    div#container.mainnav-lg.aside-left.aside-in
        #content-container, #footer
            padding-left: $mainnav-lg-width
            text-align: left






#aside
    padding-top: $navbar-height
    background-color: $aside-dark-bg
    height: 100%


#container
    #aside-container
        padding: 0
        position: absolute
        width: $aside-width
        height: auto
        left: auto
        right: -$aside-width
        top: 0
        bottom: 0
        min-height: 100vh
        overflow: hidden
        z-index: 3
        .nano-content
            position: absolute


    #content-container, #footer
        padding-right: 0

    &.mainnav-in
        &:not(.slide) #footer, & #content-container
            padding-right: 0




@media (min-width: 1024px)
    #container.aside-in
        #aside
            padding-top: $navbar-height

        &:not(.aside-float) #content-container
            padding-right: $aside-width

        &.aside-left
            &:not(.aside-float) #content-container, &:not(.aside-float) #footer
                padding-left: $aside-width
                padding-right: 0


        &:not(.aside-float) #content-container, &:not(.aside-float) #footer
            padding-right: $aside-width

        &.aside-left
            &:not(.aside-float) #content-container, &:not(.aside-float) #footer
                padding-left: $aside-width
                padding-right: 0

            &.mainnav-lg
                &:not(.aside-float) #content-container, &:not(.aside-float) #footer
                    padding-left: $mainnav-lg-width+$aside-width
                    padding-right: 0

                #aside-container
                    left: $mainnav-lg-width
                    right: auto


            &.mainnav-sm
                &:not(.aside-float) #content-container, &:not(.aside-float) #footer
                    padding-left: $mainnav-sm-width+$aside-width
                    padding-right: 0

                #aside-container
                    left: $mainnav-sm-width
                    right: auto


            &.mainnav-in
                #aside-container
                    left: $mainnav-lg-width
                    right: auto








/* ASIDE - TOGGLE HIDE/SHOW */
/* ===================================== */
#container
    &.aside-in
        #aside-container
            left: auto
            right: 0

        &.aside-left
            &.mainnav-in
                #aside-container
                    left: $mainnav-lg-width
                    right: auto







@media (min-width: 768px)
    #container
        &.aside-left #aside-container, &.aside-in.aside-left #aside-container
            left: 0
            right: auto

        &.aside-left
            &.mainnav-sm
                #aside-container
                    left: (0 - $aside-width) + $mainnav-sm-width

                &:not(.aside-float) #content-container, &:not(.aside-float) #footer
                    padding-left: $mainnav-sm-width


            &.mainnav-out
                &:not(.aside-in) #aside-container
                    left: -$mainnav-lg-width






/* ASIDE - FIXED POSITION */
/* ===================================== */
#container
    &.aside-fixed
        #aside-container
            position: fixed

        #aside
            height: 100%
            .nano-content
                position: absolute


        &:not(.navbar-fixed)
            #aside-container.affix
                top: 0 - $navbar-height
                position: fixed
                &-top
                    top: 0
                    position: absolute








/* ASIDE - BRIGHT COLOR THEMES */
/* ===================================== */
#container
    &.aside-bright
        #aside
            background-color: $aside-bright-bg
            border: 1px solid darken($body-bg, 5%)
            color: $aside-bright-color
            @if lightness($mainnav-bg) >= 70%
                border: 1px solid darken($body-bg, 5%)

            @if lightness($body-bg) >= 95%
                border: 1px solid darken($body-bg, 5%)

            .badge-stat
                color: $aside-bright-bg

            .text-main
                color: $body-main-color

            .text-light
                color: $body-color

            hr
                border-color: $border-color-base

            .bord-all,
            .bord-top,
            .bord-btm,
            .bord-lft,
            .bord-rgt,
            .bord-hor,
            .bord-ver,
            .list-divider
                border-color: darken($body-bg, 7.5%)

            .text-muted
                color: $text-muted

            .progress
                background-color: darken($aside-bright-bg, 10%)

            .list-link li a:not(.btn)
                color: lighten($aside-bright-color,5%)
                &:hover
                    color: $aside-bright-color


            a:not(.btn)
                color: $aside-bright-color
                &:hover, &:focus
                    color: darken($aside-bright-color,10%)


            .btn-link
                color: $aside-bright-color






