.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

    > i
        padding: 0.5rem
        font-size: 1.3rem
        border-radius: $rad-inner
        color: RGB($fg-white)

    > .nav-pfp
        padding: 0.4rem
        width: 2.3rem
        height: 2.3rem
        border-radius: $rad-inner

        img
            width: 100%
            height: 100%
            object-fit: cover
            border-radius: $rad-inner

    .tool-tip
        padding: 0.4rem 0.7rem

        display: block

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

        font-size: 0.9rem
        font-weight: 500

        background-color: RGB($bg-100)
        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

        > i
            display: block

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

            color: RGB($bg-100)

    &:hover
        > i, .nav-pfp
            background: RGBA($fg-white, 0.1)

        span
            opacity: 1
            left: 3.9rem

    &.selected
        > i
            color: RGB($primary)

        &::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

        .tool-tip
            display: none

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

            width: 100%
            height: 3px