.ui-dropdown {
  display: inline-flex;
  height: 3rem;
  padding: 0rem 1.5rem;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 3.125rem;
  justify-content: space-between;

  ng-icon {
    @apply min-w-5 size-5 mt-[0.125rem];
  }

  &.disabled {
    @apply text-isa-white bg-isa-neutral-400 border-isa-neutral-400 cursor-default;

    &:hover {
      @apply bg-isa-neutral-400 border-isa-neutral-400;
    }

    &:active {
      @apply border-isa-neutral-400;
    }
  }
}

.ui-dropdown__accent-outline {
  @apply text-isa-accent-blue isa-text-body-2-bold border border-solid border-isa-accent-blue;

  &:hover {
    @apply bg-isa-neutral-100 border-isa-secondary-700;
  }

  &:active {
    @apply border-isa-accent-blue;
  }

  &.open {
    @apply border-transparent;
  }
}

.ui-dropdown__grey {
  @apply text-isa-neutral-600 isa-text-body-2-bold bg-isa-neutral-400 border border-solid border-isa-neutral-400;

  &:hover {
    @apply bg-isa-neutral-500;
  }

  &:active,
  &.has-value {
    @apply border-isa-accent-blue text-isa-accent-blue;
  }

  &.open {
    @apply border-isa-neutral-900 text-isa-neutral-900 bg-isa-white;
  }
}

.ui-dropdown__text {
  @apply overflow-hidden text-ellipsis whitespace-nowrap;
}

.ui-dropdown__options {
  @apply inline-flex flex-col items-start p-1 w-full max-h-80 overflow-hidden overflow-y-auto;
  @apply rounded-[1.25rem] bg-isa-white shadow-[0px_0px_16px_0px_rgba(0,0,0,0.15)];

  &:has(.ui-dropdown__filter) {
    @apply pt-0;
  }

  .ui-dropdown__filter {
    @apply sticky top-0 px-4 pt-6 pb-5 bg-isa-white list-none w-full;
    z-index: 1;
  }

  .ui-dropdown-option {
    display: flex;
    width: 10rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0rem 1.5rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1rem;
    word-wrap: none;
    white-space: nowrap;
    cursor: pointer;
    width: 100%;

    @apply isa-text-body-2-bold;

    &.active,
    &:focus,
    &:hover {
      @apply bg-isa-neutral-200;
    }

    &.selected {
      @apply text-isa-accent-blue;
    }

    &.disabled {
      @apply text-isa-neutral-400;

      &.active,
      &:focus,
      &:hover {
        @apply bg-isa-white;
      }
    }

    &.filtered {
      display: none;
    }
  }
}
