.async-autocomplete {
  .input-async-autocomplete {
    input[type="text"]:focus {
      border-bottom: 2px solid $edt-dark-blue !important;
    }

    &.loading {
      @include fonticon();

      &::after {
        content: '\e85a';
        position: absolute;
        right: 10px;
        color: $edt-dark-blue;
        animation: spinner 1.25s linear infinite;
      }
    }
  }

  .scroll.drop-down {
    overflow-y: scroll;
    display: block;

    li:hover {
      background-color: $edt-dark-blue;
    }
  }

  .drop-down.empty {
    display: block;
  }

  .drop-down {
    top: 80%;
    max-height: 200px;
    width: 100%;
    display: none;
  }
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

@include keyframes(spinner) {
  to {
    transform: rotate(360deg);
  }
}