nav
    padding-bottom: 1rem

    position: fixed
    right: 0
    left: 0

    width: 100%
    height: calc(100vh + 1rem)

    display: none
    flex-direction: column
    justify-content: center
    align-items: center

    border-radius: 0
    background-color: $dark

    opacity: 0
    transform: translateY(-1rem)
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
    z-index: 9998

    a
        margin: 0 0 1rem 0
        padding: 0.3rem 1rem

        position: relative

        text-decoration: none
        font-weight: bold
        font-size: 1.5rem

        color: $light

        transition: color 0.1s ease-in-out

        &::before
            content: ""
            display: block

            position: absolute
            bottom: 0
            left: 0

            width: 100%
            height: 0

            background-color: $accent
            border-radius: $radius

            z-index: -1
            transition: height 0.1s ease-in-out

        &:hover, &:focus-visible
            color: $dark
            border: 0 solid transparent
            outline: 0 solid transparent

            &::before
                height: 100%

    &.open
        opacity: 1
        transform: translateY(0)

.nav-toggle
    margin: 0
    padding: 0

    position: fixed
    left: 1.3rem
    bottom: 1.3rem

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

    width: 3rem
    height: 3rem

    outline: 0.5rem solid $light
    border: 0 solid transparent
    border-radius: 50%
    background: $dark
    color: $light

    transition: transform 0.2s ease-in-out, outline-color 0.2s ease-in-out
    cursor: pointer
    z-index: 9999

    svg
        display: block
        width: 1.4rem
        height: 1.4rem
        color: inherit
        transition: transform 0.2s ease-in-out

    &.open
        outline-color: $dark
        background: $light
        color: $dark

    &:hover, &:focus-visible
        text-decoration: none
        transform: translateY(-0.2rem)

@media (prefers-color-scheme: dark)
    .nav-toggle
        outline-color: $dark
        background-color: $light
        color: $dark