.searchInput {
  @apply w-full bg-inv-4 fg-inv-1;

  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Archivo", sans-serif;
  line-height: 132%;

  &::placeholder {
    @apply fg-def-4;
  }

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

  &[data-invalid] {
    @apply outline-semantic-error-4;
  }

  &[data-disabled] {
    @apply outline-def-2 fg-def-4 cursor-not-allowed;
  }

  &[data-readonly] {
    @apply outline-none border-none bg-inherit p-0 cursor-auto resize-none;
  }
}

.searchHeader {
  @apply flex gap-2 items-center p-2 rounded-t-md z-50;
  @apply px-3 pt-3 pb-2;
}

.inputContainer {
  @apply flex items-center gap-2 bg-inv-4 rounded-md px-1 w-full;

  :has :focus-visible {
    @apply bg-def-1;
  }
}

.searchItem {
  @apply flex flex-col justify-center overflow-hidden;

  &.hasDivider {
    box-shadow: 0 1px 0 0 theme(colors.border.inv.2);
  }

  /* Next element is hovered */
  &:has(+ &:hover) {
    box-shadow: unset;
  }

  &:not([aria-disabled="true"])[data-highlighted],
  &:not([aria-disabled="true"]):focus,
  &:not([aria-disabled="true"]):focus-visible,
  &:not([aria-disabled="true"]):hover {
    @apply bg-inv-acc-2 rounded-md;
    box-shadow: unset;
  }

  &:not([aria-disabled="true"]):active {
    @apply bg-inv-acc-3 rounded-md;
    box-shadow: unset;
  }

  &[aria-disabled="true"] {
    @apply cursor-not-allowed;
  }
}

.searchContainer {
  @apply bg-gradient-to-b from-bg-inv-3 to-bg-inv-4;

  @apply rounded-lg;

  border: 1px solid #2b4647;

  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(
      180deg,
      theme(colors.bg.inv.2) 0%,
      theme(colors.bg.inv.3) 100%
    );

  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.listbox {
  @apply px-3 pt-3.5;
}

@keyframes contentHide {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
