@layer components {
    .tabs-underline{
        @apply flex gap-4 border-b border-custom-grey-100 bg-base-white overflow-x-scroll no-scrollbar;
    }
    .tabs-btn-underline {
        @apply bg-transparent inline-block pt-[3px] pb-[12px] px-2 text-custom-grey-500 font-semibold text-sm;
    }
    .tabs-btn-underline.active {
        @apply border-b-[2px] border-custom-orange-700 text-custom-orange-600;
    }

    .tabs {
        @apply flex gap-2 justify-center bg-custom-grey-50 rounded-[8px] w-full lg:w-max items-center p-[8px];
    }
    .tabs-btn-box {
        @apply bg-transparent inline-block py-[8px] px-[12px] text-custom-grey-500 font-semibold text-sm rounded-[6px] min-w-[84px];
    }
    /* button.tabs-btn-box:hover,button.tabs-btn-box:focus,  */

     button.tabs-btn-box.active {
        @apply text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px];
    }

    a.tabs-btn-box:focus, a.tabs-btn-box:hover , a.tabs-btn-box.active{
        @apply text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px];
    }

    .tabs-btn-update {
        @apply bg-custom-grey-50 inline-block w-max py-[4px] px-[12px] text-custom-grey-500 font-medium text-[16px] leading-6 rounded-[36px];
    }
    .tab-bar {
        @apply w-full bg-base-white rounded-lg inline sticky z-[50];
    }
    .tab-bar-full {
        @apply top-[80px] md:top-[280px] lg:top-[230px];
    }
    .tab-bar-fixed {
        @apply top-[200px] md:top-[180px] lg:top-[120px] ;
    }
    .tab-content-wrapper {
        @apply w-full p-[24px] pt-[8px] md:pt-0 bg-base-white rounded-lg;
    }
}