.autocomplete {
  .twitter-typeahead {
    width: 100%;
  }

  &__menu {
    width: 100%;
    background: $white;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 1px 2px 0 $black-transparent30;
  }

  &__dataset {
    padding: 0 15px;
  }

  &__dataset-suggestions {
    .autocomplete__suggestion {
      display: block;
      line-height: 2rem;
      color: $gray-dark;
      text-decoration: none;

      &:hover,
      &.autocomplete__cursor {
        color: $blue;
      }

      &:first-child {
        margin-top: 10px;
      }

      &:last-child {
        margin-bottom: 10px;
      }
    }
  }

  &__dataset-products {
    .autocomplete__suggestion {
      padding: 10px 0;
      border-bottom: 1px solid $gray-light;

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

      &:hover,
      &.autocomplete__cursor {
        .autocomplete__suggestion-title {
          color: $blue;
        }
      }
    }
  }

  &__dataset-header {
    @include primary-text;
    position: relative;
    padding-top: 10px;

    &::before {
      content: '';
      background: $gray-light;
      position: absolute;
      height: 1px;
      top: 0;
      left: -15px;
      right: -15px;
    }
  }

  &__suggestion-img {
    max-width: 64px;
    max-height: 64px;

    &-outer {
      min-width: 64px;
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;

    }
  }

  &__suggestion-info {
    padding-left: 15px;
    overflow: hidden;
  }

  &__suggestion-link {
    display: flex;
    overflow: hidden;

    &,
    &:hover {
      text-decoration: none;
    }
  }

  &__suggestion-title {
    @include heading-6;
    margin-bottom: 5px;
    font-weight: 500;
    color: $gray-dark;
  }

  &__suggestion-price {
    @include heading-4;
    color: $blue-dark;
  }
}

@include media-breakpoint-down(sm) {
  .autocomplete {
    &__menu {
      max-height: 50vh;
      overflow-y: auto;
    }

    &__suggestion-price {
      font-weight: bold;
    }
  }
}