@import 'slick.css';

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

@layer components {

    .main-navigation .menu-item a {
        @apply hover:!text-primary-900 ;
    }

    .main-navigation .submenu .menu-item a {
        @apply hover:!text-whitely-50 hover:!bg-primary-700 hover:!no-underline;
    }

    p{
        @apply p-0 m-0;
    }

    .no-container{
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .no-container-ar{
        margin-right: 50% !important;
        transform: translateX(50%);
    }

    .customscrollbar::-webkit-scrollbar {
        width: 10px;
    }

    .customscrollbar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgb(171, 171, 171);
        border-radius: 10px;
    }

    .customscrollbar::-webkit-scrollbar-thumb {
        background: #466786;
        border-radius: 10px;
    }

    .tab-link[aria-selected="true"] {
        @apply text-whitely-50 border-primary-400 bg-primary-600;
    }

    .tab-pills .tab-link:hover{
        @apply bg-primary-300 text-whitely-50;
    }

    .my-profile-tab-container .tab-link[aria-selected="true"] {
        @apply text-primary-600 border-none !bg-ehs-light-blue rounded-xl;
    }

    .my-profile-tab-container .tab-link{
        @apply !bg-transparent;
    }
        
    .step-completed .step-badge{
        @apply !bg-primary-600;
    }

    .vertical-stepper .step-current .step-badge{
        @apply !bg-primary-700 !border-primary-600 !shadow-primary-700 !border-0;
    }

    .vertical-stepper .step-completed .step-badge{
        @apply !bg-primary-100 text-primary-600 !border-none;
    }

    .vertical-stepper .step-completed .step-badge {
        background-image: url("../images/tick.svg") !important;
        background-size: auto;
    } 

    .logged-user-info .aegov-link{
        @apply hover:!bg-primary-700;
    }

    .logged-user-info .aegov-btn:hover{
        @apply !shadow-none;
    }

    .user-card-details .aegovs-slider-style .slick-dots {
        margin-right: 20%;
        justify-content: end;
    }
    
    [dir="rtl"] .user-card-details .aegovs-slider-style .slick-dots {
        margin-left: 20%;
    }

    .main-navigation .menu-item.menu-item-has-children .submenu-btn{
        @apply inline;
    }

    .aegovs-slider-style .aegov-slider-prev svg, .aegovs-slider-style .aegov-slider-next svg {
        @apply w-6 h-6 fill-aered-500 hover:fill-aered-800
    }
    .aegovs-slider-style .alertNumbers {
        @apply font-medium
    }
    .aegovs-slider-style .header-alert-close {
        @apply fill-aered-500 hover:fill-aered-800
    }

    .login-bg{
        @apply py-5 md:py-16 lg:py-20 ;
     }

     .login-form .form-control-input{
        @apply !bg-ehs-form-input ;
     }

     .aegov-form-control .form-control-input{
        @apply !shadow-none ring-ehs-form-input-border;
     }

     .login-form .aegov-form-control .form-control-input:has(:disabled){
        @apply opacity-90;
     }

     .aegov-form-control .form-control-input:has(:disabled){
        @apply opacity-90 !bg-ehs-form-input ;
     }


/* 

Note: 
For slider direction in arabic we need to enable below css and make the rtl true in home.js file.
    e.g   // rtl: true or false,

        .slick-slider .slick-track, .slick-slider .slick-list {
                direction: inherit;
        }
            
        [dir="rtl"] .slick-slider .slick-slide {
            direction: inherit;
        }

*/

}