@use "00-base/configure" as *;

.react-autowhatever__container {
  position: relative;
}

.react-autowhatever__input {
  height: 30px;
  padding: 10px 20px;
  font-weight: $fonts-light;
  font-size: $fonts-medium;
  border: 2px solid $c-gray-light;
  -webkit-appearance: none;

  &--focused {
    outline: none;
  }

  &::-ms-clear {
    display: none;
  }
}

.react-autowhatever__items-container {
  display: none;

  &--open {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    max-height: 15em;
    overflow: scroll;
    overflow-y: auto;
    box-shadow: 0 0.25rem 0.5rem rgba(1,1,1,0.2);
    background: $c-white;
  }
}

.react-autowhatever__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.react-autowhatever__item {
  cursor: pointer;
  padding: 10px 20px;

  &--highlighted {
    background-color: $c-gray-lightest;
  }
}