.fi-fo-select {
    & .fi-hidden {
        @apply hidden;
    }

    & .fi-fo-select-ctn {
        @apply relative;
    }

    & div[x-ref='select'] {
        @apply min-h-9;
    }

    & .fi-fo-select-btn {
        @apply flex min-h-9 w-full rounded-lg py-1.5 ps-3 pe-8 text-start text-base text-gray-950 focus:ring-0 focus:outline-none sm:text-sm sm:leading-6 dark:text-white;

        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;

        :dir(rtl) & {
            background-position: left 0.5rem center;
        }
    }

    & .fi-fo-select-value-ctn {
        @apply flex w-full items-center;
    }

    & .fi-fo-select-value-badges-ctn {
        @apply flex flex-wrap gap-1.5;
    }

    & .fi-fo-select-value-label {
        @apply flex-1;
    }

    & .fi-fo-select-value-remove-btn {
        @apply text-gray-500 hover:text-gray-600 focus-visible:text-gray-600 focus-visible:outline-none dark:hover:text-gray-300 dark:focus-visible:text-gray-300;
    }

    & .fi-dropdown-panel {
        @apply max-h-60 max-w-full!;
    }

    & .fi-fo-select-options-ctn {
        @apply divide-y divide-gray-100 dark:divide-white/5;
    }

    & .fi-fo-select-option-group {
        @apply divide-y divide-gray-100 dark:divide-white/5;
    }

    & .fi-fo-select-search-ctn {
        @apply sticky top-0 z-10 bg-white dark:bg-gray-900;
    }

    & .fi-disabled {
        @apply cursor-not-allowed opacity-70;
    }

    & .fi-fo-select-message {
        @apply px-3 py-2 text-sm text-gray-500 dark:text-gray-400;
    }
}