:host {
  @apply block bg-white shadow-input rounded-autocomplete;

  &.autocomplete-opend {
    @apply rounded-b-none;
  }
}

.ui-searchbox-input-wrapper {
  @apply flex flex-row h-14  rounded-full;

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

  input {
    @apply flex-grow text-xl font-bold px-8 border-none outline-none bg-transparent;
    caret-color: #f70400;
  }

  input::placeholder {
    @apply text-active-branch;
  }

  .search-button {
    @apply flex flex-grow-0 h-14 w-14 border-none outline-none bg-transparent items-center justify-center rounded-full;

    &.scan {
      @apply bg-brand;

      ui-icon {
        @apply text-white;
      }
    }

    &.search {
      ui-icon {
        @apply text-brand;
      }

      &:focus {
        @apply bg-brand;

        ui-icon {
          @apply text-white;
        }
      }
    }
  }

  .clear-button {
    @apply bg-transparent border-none outline-none text-inactive-customer -ml-3;
  }

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

  .load-indicator {
    @apply h-14 w-14 origin-center animate-spin grid place-content-center text-ucla-blue;
  }
}
