.navigation
    margin: 0
    padding: 0

    width: 3.5rem
    height: 100%
    height: 100dvh

    display: flex
    flex-direction: column
    justify-content: space-between

    position: fixed
    top: 0
    left: 0

    background-color: RGB($bg-100)
    color: RGB($fg-white)

    z-index: 69

    .logo
        margin: 0
        padding: 0

        width: 3.5rem
        height: 3.5rem
        min-height: 3.5rem

        display: flex
        flex-direction: row
        align-items: center

.navigation-spacer
    height: 100%

.navigation-item
    margin: 0
    padding: 0

    width: 3.5rem
    height: 3.5rem
    min-height: 3.5rem

    position: relative

    display: flex
    flex-direction: row
    justify-content: center
    align-items: center

    background-color: transparent
    border: none

    text-decoration: none

    > svg
        margin: 0
        padding: 0.5rem
        
        width: 2.5rem
        height: 2.5rem

        color: RGB($fg-white)
        border-radius: $rad-inner
        
        transition: color 0.2s ease-out, transform 0.2s ease-out

    span
        margin: 0
        padding: 0.35rem 0.7rem

        display: block

        position: absolute
        top: 50%
        left: 3rem
        transform: translateY(-50%)

        font-size: 0.9rem
        font-weight: 700

        background-color: #000000
        color: RGB($fg-white)
        opacity: 0
        border-radius: $rad-inner

        transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)

        pointer-events: none

        svg
            margin: 0
            font-size: 1rem

            width: 0.75rem
            height: 0.75rem

            display: block

            position: absolute
            top: 50%
            left: -0.45rem
            transform: translateY(-50%)

            color: #000000

    &:hover
        > svg
            background: RGB($bg-300)

        span
            opacity: 1
            left: 3.9rem

    &.selected::before
        content: ''
        display: block

        position: absolute
        top: 3px
        left: 0

        width: 3px
        height: calc(100% - 6px)

        background-color: RGB($primary)
        border-radius: $rad-inner

@media (max-width: $breakpoint)
    .navigation
        width: 100vw
        height: 3.5rem
    
        flex-direction: row
        justify-content: space-around
    
        position: fixed
        top: unset
        bottom: 0
        left: 0

        > span
            display: none

        .logo
            display: none

    .navigation-item
        margin: 0.25rem
        padding: 0

        width: 3rem
        height: 3rem
        min-height: 3rem

        span
            display: none

        &.selected::before
            top: unset
            bottom: 0
            left: 0

            width: 100%
            height: 3px