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

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

        &:hover {
            @apply text-primary-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-primary-800;
            }
        }

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

            span,
            svg {
                @apply text-primary-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;
}