.ab-dropdownitem__items {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 0;
  max-height: calc(8 * 1em); // we show max 4 items
  // note that the value is `scroll` and not `auto` because it depends on the
  // v-auto-overflow-scroll directive.
  overflow-y: scroll;

  &::before,
  &::after {
    content: '';
    display: block;
    height: 4px;
    width: 100%;
  }

  .select-items {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

.ab-dropdownitem__items--empty {
  padding: 2em 1em;
  white-space: normal;
  text-align: center;
  color: color-mix(
    in srgb,
    var(--input-text-color, $color-neutral-900),
    var(--input-text-color-complement, gray) 50%
  );
}

.ab-dropdownitem__items-loading {
  position: relative;
  height: 32px;

  &::after {
    content: '';
    margin-top: -7px;
    margin-left: -7px;

    @include loading(14px);
    @include absolute(50%, auto, 0, 50%);
  }
}

.ab-dropdownitem__item-active-icon {
  text-align: center;
  font-size: var(--input-font-size, 13px);
  font-weight: var(--input-font-weight, 400);
  color: var(--input-text-color, $color-neutral-900);
  position: absolute;
  top: calc(50% - var(--input-font-size, 13px) / 2);
  right: var(--input-vertical-padding, 8px);
  display: none;

  .ab-dropdownitem__item.disabled &,
  .ab-dropdownitem__item-link:active & {
    color: $palette-neutral-400;
  }
}

.ab-dropdownitem__item {
  position: relative;
  margin: 0 4px 3px;
  user-select: none;
  border-radius: var(--input-border-radius, 0);
  font-family: var(--input-font-family, Inter);
  font-weight: var(--input-font-weight, 400);

  &:last-child {
    margin-bottom: 0;
  }

  &:hover,
  &.hover {
    background-color: color-mix(
      in srgb,
      var(--input-background-color, $palette-neutral-100),
      var(--input-background-color-complement, white) 10%
    );
  }

  &--indented {
    margin-left: 20px;
  }

  &.ab-dropdownitem__item--loading::before {
    content: ' ';

    @include loading(14px);
    @include absolute(9px, 9px, auto, auto);
  }

  &.active:not(.ab-dropdownitem__item--loading) {
    background-color: color-mix(
      in srgb,
      var(--input-background-color, $palette-neutral-100),
      var(--input-background-color-complement, white) 20%
    );

    .ab-dropdownitem__item-active-icon {
      display: block;
    }

    &:not(.ab-dropdownitem__item--no-options):hover {
      .ab-dropdownitem__item-active-icon {
        display: none;
      }
    }
  }

  &.disabled {
    background-color: transparent;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
    }
  }
}

.ab-dropdownitem__item-link {
  display: block;
  padding: var(--input-vertical-padding, 8px)
    var(--input-horizontal-padding, 12px);
  color: var(--input-text-color, $color-neutral-900);

  &:hover {
    text-decoration: none;
  }

  .ab-dropdownitem__item.disabled & {
    color: $palette-neutral-700;

    &:hover {
      cursor: inherit;
    }
  }
}

.ab-dropdownitem__item-name {
  display: flex;
  align-items: center;
  font-weight: 500;
  line-height: 120%;
  gap: 0.5em;

  @extend %ellipsis;

  .ab-dropdownitem__item-link:active & {
    color: color-mix(
      in srgb,
      var(--input-text-color, $palette-neutral-100),
      var(--input-text-color-complement, white) 20%
    );
  }
}
