:host {
  @apply relative flex flex-col box-border;
}

.ui-searchbox-wrapper {
  @apply flex flex-row rounded-autocomplete bg-white shadow-input;

  height: 60px;

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

.ui-searchbox-input-wrapper {
  @apply relative flex flex-row flex-grow px-5 items-center;

  ::ng-deep input {
    @apply flex-grow flex-shrink border-0 bg-transparent font-bold text-black;
    font-size: 21px;

    &::placeholder {
      @apply text-inactive-customer;
    }

    &:focus {
      @apply outline-none;
    }
  }

  ::ng-deep ui-searchbox-warning {
    @apply absolute;
  }
}

.ui-searchbox-wrapper ::ng-deep [uiSearchboxSearchButton],
.ui-searchbox-wrapper ::ng-deep [uiSearchboxClearButton] {
  @apply flex flex-row justify-center items-center rounded-full border-0 text-center bg-white;
  height: 60px;
  width: 60px;
}

.ui-searchbox-wrapper ::ng-deep [uiSearchboxSearchButton]:disabled {
  @apply text-inactive-customer;
}

.ui-searchbox-wrapper ::ng-deep [uiSearchboxClearButton] {
  @apply mr-2;
  width: auto;
}

:host ::ng-deep ui-searchbox-autocomplete {
  @apply absolute left-0 right-0 z-dropdown;
  top: 60px;
}
