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

    display: flex
    flex-direction: column

    position: fixed
    top: 0
    left: 0

    background-color: transparent
    color: inherit

    z-index: 69

.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
    color: inherit
    border: none

    text-decoration: none

    > i
        padding: 0.5rem
        font-size: 1.3rem
        border-radius: calc(var(--rad) / 2)
        color: inherit

    > .nav-pfp
        padding: 0.4rem
        width: 2.3rem
        height: 2.3rem
        border-radius: calc(var(--rad) / 2)

        img
            width: 100%
            height: 100%
            object-fit: cover
            border-radius: calc(var(--rad) / 2)

    &:hover
        > i, .nav-pfp
            background: var(--white-transparent)

    &.selected
        color: var(--primary)

        &::before
            content: ''
            display: block

            position: absolute
            top: 0.5rem
            left: 0.2rem

            width: 3px
            height: calc(100% - 1rem)

            background-color: currentColor
            border-radius: calc(var(--rad) / 2)

@media (max-width: 800px)
    nav
        width: 100vw
        height: 3.5rem
    
        flex-direction: row
        justify-content: space-around
    
        position: fixed
        top: unset
        bottom: 0
        left: 0

        background-color: var(--background-100)

        > 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