@import "../variables";

// Autocomplete styles.
.cr-autocomplete {
  z-index: 9999;
  background-color: $WHITE;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 2px solid $brand-tertiary;
  border-top: 0 none;
  border-radius: 0 0 4px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  left: -2px;

  &__list-item {
    cursor: pointer;
    font-size: $font-size-large;
    padding: 10px 30px 10px 12px;
    position: relative;
  }

  &__list-item:hover,
  &__list-item:focus {
    background: $gray-5;
  }

  &__list-item--selected {
    background-color: $gray-5;

    &::after {
      width: 13px;
      height: 13px;
      position: absolute;
      top: 50%;
      right: 13px;
      margin-top: -6.5px;
      background-color: $brand-secondary;
      border-radius: 50%;
      content: "";
    }
  }
}