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

.ma__input-typeahead {
  font-size: $fonts-medium;

  .highlight {
    color: var(--mf-c-primary-alt);
    font-weight: bold;
  }

  input {

    @include input-base;
    width: 100%;
    -webkit-appearance: none;

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

  ul {
    width: 100%;
    margin: 0px;
    padding: 0px;

    li {
      border: 1px solid var(--mf-c-gray-light);
      width: 100%;
      padding: 0px 18px;
    }
  }

  &--boxed {
    border: 1px solid var(--mf-c-gray-light);

    input {
      margin: .75rem;
      width: calc(100% - 1.5rem);
    }
  }

  &--disabled {
    color: var(--mf-c-gray);

    input {
      background-color: var(--mf-c-gray-lightest);
      color: var(--mf-c-gray);
    }
  }
}

input[type=search] {
  -webkit-appearance: none;

  &::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    }
}

.react-autosuggest {

  &__container {
    width: 100%;
    position: relative;
  }

  &__input--focused {
    outline: none;
  }

  &__suggestion {
    cursor: pointer;

    &-list {
      list-style-type: none;
    }

    &--highlighted {
      background-color: var(--mf-c-gray-lightest);
    }
  }

  &__suggestions {

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