@layer components {

    .nav-item {
        @apply flex items-center gap-3 w-full px-3 py-2.5 rounded-xl text-[13.5px] font-medium text-gray-600 transition-all duration-150;
    }

    .nav-icon {
        @apply flex items-center justify-center w-9 h-9 rounded-lg text-gray-400;
        font-size: 20px;
        line-height: 1;
    }

    .nav-item:hover {
        @apply bg-gray-100 text-gray-900;
    }

    .nav-item:hover .nav-icon {
        @apply text-gray-600;
    }

    .nav-item-active {
        @apply bg-blue-50 text-blue-600;
    }

    .nav-item-active .nav-icon {
        @apply text-blue-600;
    }

    .sidebar-group {
        @apply px-3 mt-6 mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400;
    }

}