//- 💫 CSS > COMPONENTS > SIDEBAR

//- Sidebar container

.c-sidebar
    overflow-y: auto

    @include breakpoint(min, md)
        @include position(fixed, top, left, 0, 0)
        @include size($sidebar-width, calc(100vh - 3px))
        @include scroll-shadow($color-back, $color-front, $nav-height)
        flex: 0 0 $sidebar-width
        padding: calc(#{$nav-height} + 1.5rem) 0 0
        z-index: 10

    @include breakpoint(max, sm)
        flex: 100%
        width: 100%
        margin-top: $nav-height
        display: flex
        flex-flow: row wrap
        width: 100%


//- Sidebar section

.c-sidebar__section
    & > *
        padding: 0 2rem 0.35rem

    @include breakpoint(max, sm)
        flex: 1 1 0
        padding: 1.25rem 0
        border-bottom: 1px solid $color-subtle
        margin: 0

        &:not(:last-child)
            border-right: 1px solid $color-subtle

.c-sidebar__item
    color: $color-theme

    &:hover
        color: $color-theme-dark

    & > .is-active
        font-weight: bold
        color: $color-dark
        margin-top: 1rem


//- Sidebar subsections

$crumb-bullet: 14px
$crumb-bar: 2px

.c-sidebar__crumb
    display: block
    padding-top: 1rem
    padding-left: 1rem
    position: relative

.c-sidebar__crumb__item
    margin-bottom: $crumb-bullet / 2
    position: relative
    padding-left: 2rem
    color: $color-theme
    font-size: 1.2rem

    &:hover
        color: $color-theme-dark

    &:after
        @include size($crumb-bullet)
        @include position(absolute, top, left, $crumb-bullet / 4, 0)
        content: ""
        border-radius: 50%
        background: $color-theme
        z-index: 10

    &:not(:last-child):before
        @include size($crumb-bar, 100%)
        @include position(absolute, top, left, $crumb-bullet, ($crumb-bullet - $crumb-bar) / 2)
        content: ""
        background: $color-subtle

    &:first-child:before
        height: calc(100% + #{$crumb-bullet * 2})
        top: -$crumb-bullet / 2

    &.is-active
        color: $color-dark

        &:after
            background: $color-dark