@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    html {
        @apply h-full bg-layout;
    }
    body {
        @apply h-full;
    }
    #app {
        @apply h-full;
    }
    /* NavBar */
    .menu-item {
        @apply w-full text-left block px-4 py-3 text-base text-gray-800;
    }
    .menu-item-active {
        @apply bg-gray-100 w-full text-left block px-4 py-3 text-base text-gray-800;
    }
    .container-menu-item {
        @apply absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
    }
    .container-menu-profile {
        @apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
    }
    /* Aside */
    .aside-single-item {
        @apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
    }
    .aside-single-item-active {
        @apply aside-single-item bg-primary-500 text-white font-bold;
    }
    .aside-single-item-inactive {
        @apply aside-single-item font-semibold text-gray-600 group-hover:text-white group-hover:bg-primary-500;
    }
    .aside-single-item-icon{
        @apply h-6 w-6;
    }
    .aside-single-item-icon-active{
        @apply aside-single-item-icon stroke-white;
    }
    .aside-single-item-icon-inactive{
        @apply aside-single-item-icon text-aside group-hover:stroke-white;
    }
    .custom-table-column {
        @apply !align-middle text-sm font-medium text-primary-800;
    }
}