@kanton-basel-stadt/designsystem/dist/assets/css/components/form-elements/autocomplete.css

Unplugin to install the digital design system of the canton of Basel-Stadt

@import './../icons/icon-animations.css';

@tailwind components;

@layer components {
  /* Many of these nested elements stem from formkit. Once Pro elements can be exported, we'd need to rethink that structure. */
  /* Related GH issue: https://github.com/formkit/formkit/issues/412 */
  .autocomplete {
    /* Wrapper */
    & .autocomplete-wrapper {
      @apply min-h-[90px] relative h-auto;

      /* Inner */
      & .autocomplete-inner {
        /* Manually setting the height ensures consistent look&feel for all browsers. */
        @apply border border-blue-900 bg-white rounded p-10 text-base text-gray-900 transition-all ease-in-out duration-250 h-[46px];
        @apply hover:border-blue-500;
        @apply focus:outline-none focus:shadow-purple-600 focus:border-purple-600;
        @apply focus-within:outline-none focus-within:shadow-purple-600 focus-within:border-purple-600;

        @apply disabled:border-gray-300 disabled:bg-gray-300 disabled:text-gray-800 disabled:cursor-default;

        &::placeholder {
          @apply text-gray-500;
        }

        &:disabled::placeholder {
          @apply text-gray-800;
        }

        &[type='date'] {
          /* Fix issues on iOS Safari. */
          @apply appearance-none;
          &::-webkit-date-and-time-value {
            @apply text-left;
          }
        }

        @apply h-auto p-0 absolute top-[26px] w-full my-10;

        & .autocomplete-input {
          @apply w-full p-10 outline-0 bg-transparent;
        }

        & .autocomplete-listbox-button {
          @apply absolute top-[10px] right-[10px];

          &:after {
            @apply content-[""] w-20 h-20 block;
            @apply transition-all ease-in-out duration-250;
            @apply has-symbol-caret;
            @apply rotate-0;
          }
        }

        & .autocomplete-dropdown-wrapper {
          @apply !static;
        }
      }

      & .autocomplete-list-item {
        @apply p-10 text-blue-700 hover:text-blue-900 cursor-pointer;
      }
    }

    &[data-disabled='true'] {
      & .autocomplete-inner {
        @apply border-gray-300 bg-gray-300;

        & .placeholder {
          @apply text-gray-800;
        }
      }
    }

    &[data-expanded='true'] {
      & .autocomplete-inner {
        @apply z-10;

        & .autocomplete-listbox-button:after {
          @apply rotate-180;
        }
      }
    }
  }
}