.autosuggest {
  $autosugget-item-padding: -2;

  position: relative;
  width: 100%;

  &__input[type="text"], &__input[type="search"] {
    margin-bottom: 0;

    .form__field & {
      max-width: none;
    }
  }

  &__suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: $z-index-navigation;
    margin: 0;
    background-color: color("background");
    box-shadow: $shadow-style-front color("shadow");

    &--open {
      display: block;
    }

    &__list {
      margin-top: 0;
      margin-bottom: 0;
      max-width: none;

      &__item {
        padding: spacing($autosugget-item-padding);
        background-repeat: no-repeat;
        background-image: linear-gradient(color("border"), color("border"));
        background-size: spacing($autosugget-item-padding, $times: -2, $add: 100%) $width-border-slim;
        background-position: spacing($autosugget-item-padding) top;
        line-height: line-height("single");
        margin-top: 0;
        margin-bottom: 0;

        &::before {
          content: none;
        }

        &:first-of-type {
          background-image: none;
        }

        /* This should probably be handled in a another way... */
        &:nth-of-type(n+21) {
          display: none;
        }
      }

      /* Might be a bug in the React Autosuggest plugin that the --highlighted modifier is added to the ul selector... */
      &--highlighted {
        background-color: color("background-secondary");
      }
    }
  }
}