filament/packages/forms/resources/css/components/select.css

.choices {
    @apply relative;
}

.choices:focus {
    @apply outline-none;
}

.choices:last-child {
    @apply mb-0;
}

.choices.is-open {
    @apply overflow-visible;
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
    @apply select-none;
}

.choices.is-disabled .choices__item {
    @apply pointer-events-none cursor-not-allowed opacity-70;
}

.choices [hidden] {
    display: none !important;
}

.choices[data-type*='select-one'] {
    @apply cursor-pointer;
}

.choices[data-type*='select-one'] .choices__input {
    @apply m-0 block w-full border-b p-2;
}

.dark .choices[data-type*='select-one'] .choices__input {
    @apply bg-gray-700;
}

.choices[data-type*='select-multiple'] .choices__inner {
    @apply cursor-text;
}

.choices__inner {
    @apply inline-block w-full rounded-lg border border-gray-300 bg-white bg-no-repeat py-2 px-3 align-top shadow-sm transition duration-75;
    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-size: 1.5em 1.5em;
}

.dark .choices__inner {
    @apply border-gray-600 bg-gray-700 text-white;
}

.has-prefix .choices__inner {
    @apply rounded-l-none;
}

.has-suffix .choices__inner {
    @apply rounded-r-none;
}

.choices--error .choices__inner {
    @apply border-danger-600 ring-danger-600;
}

[dir='rtl'] .choices__inner {
    background-position: left 0.5rem center;
}

.is-focused .choices__inner,
.is-open .choices__inner {
    @apply border-primary-500 ring-1 ring-inset ring-primary-500;
}

.choices__list {
    @apply m-0 list-none pl-0;
}

.choices__list--single {
    @apply inline-block w-full pr-12;
}

[dir='rtl'] .choices__list--single {
    @apply pl-12 pr-0;
}

.choices__list--single .choices__item {
    @apply w-full;
}

.choices__list--multiple {
    @apply flex flex-wrap gap-1 pr-6;
}

[dir='rtl'] .choices__list--multiple {
    @apply pl-6 pr-0;
}

.choices__list--multiple:not(:empty) {
    @apply mb-1 flex;
}

.choices__list--multiple .choices__item {
    @apply box-border inline-flex cursor-pointer items-center justify-between gap-2 space-x-1 break-all rounded-lg bg-primary-500/10 px-2 py-0.5 text-sm font-medium tracking-tight text-primary-700;
}

.dark .choices__list--multiple .choices__item {
    @apply text-primary-500;
}

[dir='rtl'] .choices__list--multiple .choices__item {
    @apply space-x-reverse break-normal;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    @apply invisible absolute top-full z-[1] mt-2 w-full overflow-hidden break-words rounded-lg border border-gray-300 bg-white shadow-sm will-change-[visibility];
}

.dark .choices__list--dropdown,
.dark .choices__list[aria-expanded] {
    @apply border-gray-600 bg-gray-700;
}

.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] {
    @apply visible z-10;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    @apply relative max-h-60 overflow-auto will-change-scroll;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    @apply relative px-3 py-2;
}

[dir='rtl'] .choices__list--dropdown .choices__item,
[dir='rtl'] .choices__list[aria-expanded] .choices__item {
    @apply text-right;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    @apply bg-primary-600 text-white;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
    @apply opacity-70;
}

.choices__item {
    @apply cursor-default;
}

.choices__item--selectable {
    @apply cursor-pointer;
}

.choices__item--disabled {
    @apply pointer-events-none cursor-not-allowed select-none opacity-70;
}

.choices__placeholder {
    @apply opacity-70;
}

.choices__button {
    @apply cursor-pointer appearance-none border-0 bg-transparent bg-center bg-no-repeat;
    text-indent: -9999px;
}

.choices__button:focus {
    @apply outline-none;
}

.choices[data-type*='select-one'] .choices__button {
    @apply absolute right-0 mr-9 h-4 w-4 p-0 opacity-60;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
    background-size: 0.7em 0.7em;
    top: calc(50% - 0.55em);
}

.dark .choices[data-type*='select-one'] .choices__button {
    @apply opacity-30;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
}

[dir='rtl'] .choices[data-type*='select-one'] .choices__button {
    @apply left-0 right-auto ml-9 mr-0;
}

.choices[data-type*='select-one'] .choices__button:hover,
.choices[data-type*='select-one'] .choices__button:focus {
    @apply opacity-75;
}

.dark .choices[data-type*='select-one'] .choices__button:hover,
.dark .choices[data-type*='select-one'] .choices__button:focus {
    @apply opacity-60;
}

.choices[data-type*='select-one']
    .choices__item[data-value='']
    .choices__button {
    @apply hidden;
}

.choices[data-type*='select-multiple'] .choices__button {
    @apply inline-block h-3 w-3 text-primary-700 opacity-60;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
    background-size: 0.6em 0.6em;
}

.dark .choices[data-type*='select-multiple'] .choices__button {
    @apply opacity-75;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==');
}

.choices[data-type*='select-multiple'] .choices__button:hover,
.choices[data-type*='select-multiple'] .choices__button:focus {
    @apply opacity-75;
}

.dark .choices[data-type*='select-multiple'] .choices__button:hover,
.dark .choices[data-type*='select-multiple'] .choices__button:focus {
    @apply opacity-100;
}

/* !important is used to override default Tailwind input styling */

.choices__list--dropdown .choices__input {
    padding: 0.5rem 0.75rem !important;
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    border-color: rgb(209 213 219) !important;
}

.dark .choices__list--dropdown .choices__input {
    @apply placeholder-gray-300;
    border-color: rgb(75 85 99) !important;
}

.choices__input {
    @apply inline-block max-w-full border-none;
    border-color: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.choices__input:focus {
    outline-color: transparent !important;
    box-shadow: var(--tw-ring-inset) 0 0 0
        calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
}

.choices__input::-webkit-search-decoration,
.choices__input::-webkit-search-cancel-button,
.choices__input::-webkit-search-results-button,
.choices__input::-webkit-search-results-decoration {
    @apply hidden;
}

.choices__input::-ms-clear,
.choices__input::-ms-reveal {
    @apply hidden h-0 w-0;
}