//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);
//    }
//}

nav {
    @apply w-48;
    transition: width 0.3s;

    svg {
        @apply fill-current text-orange-600 w-12 p-2;
        transition: color 0.3s;

        &:hover {
            @apply text-orange-800;
        }
    }

    .logo {
        @apply block;

        svg {
            @apply w-40 m-2;
            transition: width 0.3s, color 0.3s;
        }
    }

    .nav-item {
        @apply flex items-center;


        span {
            @apply font-bold text-xl ml-2 overflow-hidden truncate;
            transition: width 0.3s;

            &:hover {
                @apply text-orange-800;
            }
        }

        &:hover {
            @apply bg-orange-500;

            span,
            svg {
                @apply text-orange-800;
            }
        }
    }

    .nav-toggle svg {
        transition: transform 0.3s;
    }
}

nav.small {
    @apply w-16;

    .logo {
        @apply w-16 p-0;

        svg {
            @apply w-16 m-0;
        }
    }

    .nav-item span {
        @apply w-0;
    }

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

.app {
    //min-width: 100%;
    width: initial;
}