$block = ".autocomplete";

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

$fadeInAnimation = .2s fadein; // @stylint ignore

{$block} {
  position: relative;
  outline: 0;

  &__pill-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    >:last-child {
      flex: 1;
    }

    .badge {
      align-self: flex-start;
      margin-bottom: 2px;
      padding-top: 1px;
      // Override badge style to prevent size change when badges are added.
      padding-bottom: 1px;
    }
  }

  .autocomplete__input-field {
    margin-right: 4px;
    min-width: 16px;

    &:not(:first-child) {
      margin-left: 4px;
    }

    &:empty::before {
      color: $c-gray-base;
      content: attr(placeholder);
    }
  }

  .autocomplete__input-field-placeholder:not(:first-child) {
    width: 4px;
    transition: width 60ms;
  }

  .autocomplete__input-field-placeholder:not(.autocomplete--disabled):not(:first-child) {
    cursor: text;
  }

  .autocomplete__input-field-placeholder:not(.autocomplete--disabled):hover {
    width: 16px;
  }

  &__suggestions {
    position: absolute;
    left: 0;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 2px 0 0;
    margin-top: -16px;
    padding: 0;
    min-width: 100%;
    max-height: 300px;
    border: 1px solid $c-white-darker;
    border: 1px solid $c-gray-base;
    background-color: $c-white-base;
    box-shadow: 0 4px 8px -1px rgba($c-gray-dark, .5);
    list-style-type: none;
    word-break: break-word;
    font-size: $font-size-medium;
    animation: $fadeInAnimation;

    &:focus {
      outline: 0;
    }
  }

  &__suggestion {
    padding: 10px;

    &--active {
      background-color: $c-gray-lighter;
    }
  }

  &__input {
    flex: 1 0 50px;

    input {
      min-width: 100px;
    }

    &--hidden {
      input {
        width: 1px;
        opacity: 0;

        &:hover {
          cursor: default;
        }
      }
    }
  }
}