@layer components {
    /* ===== BUTTONS ===== */
    .btn {
        @apply 
        h-[52px] px-5 flex justify-center items-center gap-x-2.5 
        rounded-c-radius outline-0 duration-100
        font-medium text-sm hover:text-c-blue
    }
    
    .btn-border {
        @apply 
        btn border border-c-gray-400 bg-c-white text-c-black
        hover:border-c-blue 
    }
    
    .btn-bg {
        @apply btn bg-c-blue text-c-gray-100 hover:text-c-gray-100
    }
    /* ===== BUTTONS ===== */
}


/* ===== BUTTONS ===== */
.btn.active {
    @apply text-c-blue
}

.btn-border.active {
    @apply border-c-blue text-c-blue
}
.btn-border:hover .filled-icon,
.btn-border.active .filled-icon{
    @apply bg-c-blue
}

.btn-bg.inactive {
    @apply bg-c-gray-400 text-c-gray-100
}
/* ===== BUTTONS ===== */


/* ===== SELECTOR ===== */
.selector {
    @apply sm:w-auto w-full inline-block relative
}
.selector-btn {
    @apply w-full flex justify-between items-center gap-x-1.5 text-sm font-medium outline-0 cursor-pointer select-none hover:text-c-blue;
}
.selector .chevron {
    @apply sm:ml-0 min-w-6 w-6 h-6 ml-auto
}
.selector-list {
    @apply min-w-full h-0 absolute top-full -left-2 z-10 rounded-c-radius bg-c-white overflow-y-hidden overflow-x-auto;
}
.selector-list-btn {
    @apply w-full py-1 px-6 text-left text-sm font-medium cursor-pointer text-nowrap hover:text-c-blue;
}

.selector:focus-within > .selector-btn > span {
    @apply text-c-gray-500;
}
.selector:focus-within .chevron {
    @apply rotate-180
}
.selector > button:hover + hr,
.selector:focus-within hr {
    @apply h-0.5 bg-c-blue
}
.selector-list.opened,
.selector:focus-within .selector-list {
    @apply h-auto visible py-2.5 shadow-[0px_1px_3px_0px_#0000004D,_0px_4px_8px_3px_#00000026]
}

/* ----- Without HR ----- */
.selector.hr-none > hr {
    @apply hidden
}
/* ----- Without HR ----- */
/* ===== SELECTOR ===== */


/* ===== HINT ===== */
.hint:hover > .hint-text,
.hint > .hint-text:hover {
    @apply block visible;
    /* animation-delay: 1s;
    animation-duration: .01s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-name: show-hint; */
}

@keyframes show-hint {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}
/* ===== HINT ===== */