@use "design";
@use "m";

.autocomplete {
  position: relative;
}

.autocompleteItem {
  display: block;
  width: 100%;

  padding-left: calc(design.$card-h-padding - 10px);
  padding-right: design.$card-h-padding;
  padding-top: design.$space-75;
  padding-bottom: design.$space-75;

  display: flex;
  align-items: center;

  &:not(:last-child) {
    border-bottom: 1px solid design.$card-border-color;
  }

  &.empty,
  &.loading {
    color: design.$text-grey;
  }

  &.error {
    color: design.$color-error;
  }

  &:not(.empty):not(.loading) {
    cursor: pointer;

    &.selected {
      font-weight: design.$weight-display-bold;
      background-color: design.$color-surface-active;
    }
  }
}

.autocompleteMenuWrap {
  @include m.handheld {
    padding: 0 0 10px 10px;
  }

  &:not(.isOpen) {
    display: none;
  }
}

.autocompleteMenu {
  @include m.desktop {
    position: absolute;
  }

  @include m.handheld {
    position: relative;
  }

  box-sizing: content-box;
  width: 100%;

  margin-top: -3px;
  border-radius: 5px;

  min-height: 30px;

  background-color: design.$color-page-background;
  color: design.$color-on-page-background;

  box-shadow: 0 0 9px 0 design.$color-neutral-shadow;
  border: 1px solid design.$card-border-color;

  max-height: 210px;
  overflow-y: auto;

  z-index: 2;
}