btu-search-input {
  @apply inline-block;
}

.SearchInput {
  @apply relative w-full;
}

.SearchInput label {
  @apply pointer-events-none absolute bottom-0 left-4 top-0 my-auto size-5 overflow-hidden before:btu-icon before:btu-icon-search;
}

.SearchInput btu-input {
  @apply [position:initial] before:content-none;
}

.SearchInput input[type] {
  @apply w-full border-transparent bg-gray-100 pl-[calc(theme(iconSize.md)+theme(spacing.6))] focus:border-primary-600;

  &:hover:not(:focus-visible) {
    @apply border-gray-300;
  }
}

.SearchInput :is(button, input[type='submit']) {
  @apply hidden;
}
