@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-text{
        @apply text-xs;
    }
    .aside-single-item {
        @apply aside-text w-full flex items-center pl-2 pr-4 py-2 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;
    }
    .filter-input-label {
        @apply block mb-2 text-xs font-semibold text-gray-800 sm:mb-0;
    }
    .rich-select-trigger{
        @apply bg-gray-200 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 relative flex items-center justify-between w-full focus:z-10 cursor-pointer text-sm transition duration-100 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed px-4 py-2.5;
    }
    .rich-select-search-input{
        @apply inline-block focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 w-full  text-sm px-4 py-2.5 text-gray-700 placeholder-gray-500/60 border-0 rounded-lg bg-gray-200;
    }
    .rich-select-selected-highlighted-option{
        @apply font-semibold bg-teal-600 focus:outline-none text-white;
    }
    
}
