.ui-search-bar {
  @apply bg-isa-white rounded-full;

  .ui-search-bar__action__close {
    display: inline-flex;
  }

  &:has(input[type="text"]:placeholder-shown) {
    .ui-search-bar__action__close {
      display: none;
    }
  }

  input[type="text"] {
    appearance: none;
    flex-grow: 1;

    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25rem; /* 142.857% */
    background-color: inherit;

    &::placeholder {
      @apply text-isa-neutral-500;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.25rem; /* 142.857% */

      &:hover,
      &:focus {
        @apply text-isa-neutral-900;
      }
    }

    @apply focus:outline-none;
  }
}

.ui-search-bar__actions {
  @apply flex items-center gap-4 shrink-0;
}

.ui-search-bar__action__close {
  @apply inline-flex justify-center items-center shrink-0 text-2xl cursor-pointer;
}

.ui-search-bar__main {
  @apply flex justify-between items-center shrink-0 w-[31.75rem] isa-desktop:w-[32.5rem] h-[3.75rem] pr-2 pl-6;
}

.ui-search-bar__results {
  @apply flex justify-between items-center shrink-0 w-[21.25rem] h-[3.25rem];

  .ui-search-bar__action__close {
    @apply pr-4;
  }

  &:has(input[type="text"]:placeholder-shown) {
    @apply pl-0;

    button[prefix][uiIconButton] {
      @apply inline-flex;
    }
  }

  &:has(input[type="text"]) {
    @apply pl-4;

    input[type="text"] {
      @apply pr-4 whitespace-nowrap overflow-hidden overflow-ellipsis;
    }

    button[prefix][uiIconButton] {
      @apply hidden;
    }
  }
}
