/**
 * SELECT COMPONENT WITH ACCESSIBLE AUTOCOMPLETE
 *
 *
*/
@layer components {
   .rtds-input-field .autocomplete__input {
    @apply rtds-w-full rtds-py-2 rtds-pl-3 rtds-pr-9 rtds-border rtds-border-input rtds-rounded-lg rtds-bg-no-repeat;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon"%3E%3Cpath fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"/%3E%3C/svg%3E');
    background-position: right theme('spacing.2') top theme('spacing.2');
    background-size: theme('spacing.5') theme('spacing.5');
   }

   .rtds-select--sm .autocomplete__input {
        @apply rtds-h-8 rtds-py-0.5 rtds-pl-2 rtds-pr-7;
        background-size: theme('spacing.4') theme('spacing.4');
    }

    .rtds-select--lg .autocomplete__input {
        @apply rtds-h-12 rtds-py-3 rtds-pl-3 rtds-pr-9;
        background-position: right theme('spacing.[2.5]') top theme('spacing.[2.5]');
        background-size: theme('spacing.6') theme('spacing.6');
    }

     .rtds-autocomplete .has-error .rtds-icon {
        @apply rtds-top-2;
    }

    .rtds-autocomplete .rtds-select--sm.has-error .rtds-icon {
        @apply rtds-top-1.5;
    }

    .rtds-autocomplete .rtds-select--lg.has-error .rtds-icon {
        @apply rtds-top-2.5;
    }


   .has-error .autocomplete__input {
    @apply rtds-border-2 rtds-border-error-dark;
   }



   .rtds-select :where(div:not([class])) {
    @apply rtds-w-full;
   }

   .rtds-input-field .autocomplete__dropdown-arrow-down-wrapper {
    @apply rtds-absolute rtds-right-2 rtds-top-2 rtds-content-placeholder rtds-w-5 rtds-h-5;
   }

    .rtds-input-field .autocomplete__menu {
        @apply rtds-border rtds-border-input rtds-rounded-lg;
    }

    .rtds-input-field .autocomplete__hint, .rtds-input-field .autocomplete__input, .rtds-input-field .autocomplete__option {
        @apply rtds-text-sm rtds-font-medium rtds-content-03;
    }

    .rtds-input-field .autocomplete__option {
        @apply rtds-px-3 rtds-py-2 rtds-border-b rtds-border-t-0 rtds-border-input last:rtds-border-b-0 hover:rtds-background-secondary hover:rtds-content-inverse focus:rtds-background-secondary focus:rtds-content-inverse;
    }

    .rtds-input-field .autocomplete__option--focused {
        @apply rtds-background-secondary rtds-content-inverse;
    }

    .rtds-input-field .autocomplete__option--odd {
        @apply rtds-bg-white;
    }
}