:host {
  @apply inline-block bg-surface text-surface-content rounded;
  box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
}

.searchbox-input-wrapper {
  @apply flex flex-row h-14 items-stretch;
}

.searchbox-input {
  @apply w-full bg-transparent outline-none pl-4 flex-shrink flex-grow text-lg caret-brand font-bold;
}

.searchbox-search-btn,
.searchbox-scan-btn {
  @apply w-14 h-14 bg-brand text-white rounded grid items-center justify-center flex-shrink-0 flex-grow-0;
}

.searchbox-clear-btn {
  @apply w-14 h-14 bg-transparent text-black rounded grid items-center justify-center flex-shrink-0 flex-grow-0;
}

.searchbox-load-indicator {
  @apply animate-spin w-14 h-14 grid items-center justify-center flex-shrink-0 flex-grow-0;
}

.searchbox-hint-wrapper {
  @apply flex-grow flex items-center relative self-stretch;
}

.searchbox-hint {
  @apply absolute flex items-center right-0 top-0 bottom-0 bg-white text-warning text-xl font-bold px-4 cursor-pointer;
}
