nav {
    background-color: $mediumDark;
    height: 100vh;
    width: 15rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
    transition: width $transition-delay;

    &.small {
        width: 5.5rem;
    }

    hr {
        width: 90%;
        border-radius: 1px;
        border: 1px solid $dark;
    }

    .nav-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: $light;
        padding-top: 1rem;
        padding-bottom: 1rem;

        span {
            overflow: hidden;
        }

        svg {
            margin: 0 1rem;
            width: 3rem;
            transition: fill 0.2s;
            fill: $light;
        }

        &:hover {
            color: $dark;
            background-color: $light;
            transition: color 0.2s, background-color 0.2s;

            svg {
                fill: $dark;
                transition: fill 0.2s;
            }
        }

        //&:visited {
        //    color: $dark;
        //}
    }
}

.site-logo {
    width: 3rem;
    fill: $light;
    transition: fill 0.2s;

    &:hover {
        fill: $dark;
        transition: fill 0.2s;
    }
}

.navhidden {
    width: 0;
}


.site-logo-main {
    @extend .site-logo;
    display: block;
    margin: 1rem;
    width: 13rem;
    transition: width $transition-delay;

    svg {

        width: 100%;
    }

    &.small {
        //padding-bottom: 10rem;
        width: 3.5rem;
    }
}

.nav-toggle {
    @extend .site-logo;
    align-self: center;

    svg {
        transition: transform $transition-delay;
    }

    svg.small {
            transform: rotate(-180deg);
    }
}