.v-autocomplete {
  font-size:                                                $font-size-base * 0.9;
  .v-autocomplete-input-group {
    height:                                                 100%;
    .v-autocomplete-input {
      border-radius:                                        0.25rem;
      padding:                                              7px 10px;
      box-shadow:                                           none;
      border:                                               1px solid $gray-400;
      width:                                                100%;
      height:                                               calc(2rem + 2px);
      outline:                                              none;
      &::placeholder {
        color :                                             $gray-400;
      }
    }
  }
  .v-autocomplete-list {
    width:                                                  100%;
    text-align:                                             left;
    border:                                                 none;
    border-top:                                             none;
    max-height:                                             400px;
    position:                                               absolute;
    z-index:                                                100010;
    overflow-y:                                             auto;
    border-bottom:                                          1px solid $gray-400;
    right:                                                  0px;

    .v-autocomplete-list-item {
      -webkit-animation-name:                               zoomIn;
      animation-name:                                       zoomIn;
      -webkit-animation-duration:                           .5s;
      animation-duration:                                   .5s;
      -webkit-animation-fill-mode:                          both;
      animation-fill-mode:                                  both;
      cursor:                                               pointer;
      padding:                                              10px;
      background-color:                                     $white;
      border-bottom:                                        1px solid $light;
      color:                                                $black;


      @for $i from 1 through 15 {
        &:nth-of-type(#{$i}) {
          animation-delay:                                  #{0.05+($i)/14}s;
        }
      }

      &:last-child {
        border-bottom:                                      none;
      }
      &:hover {
        background-color:                                   $light;
      }
    }
    @include                                                media-breakpoint-down(sm) {
      left:                                                 0px;
    }
  }
  &.absolute-autocomplete {
    height:                                                 33px; // Change to input variable height

    .v-autocomplete-list {
      position:                                             absolute;
      left:                                                 0;
      overflow:                                             hidden;
    }
  }
  .v-autocomplete-list-wrapper {
    min-height:                                             400px;


    .vb-dragger {
      -webkit-animation-name:                               fadeIn;
      animation-name:                                       fadeIn;
      -webkit-animation-duration:                           .5s;
      animation-duration:                                   .5s;
      -webkit-animation-fill-mode:                          both;
      animation-fill-mode:                                  both;
      animation-delay:                                      1s;
      z-index:                                              1000;
    }
  }
  @each $color, $value in $theme-colors {
    &.#{$color} {
      .v-autocomplete-list-item {
        background-color:                                   lighten($value, 10%);
        border-bottom:                                      1px solid lighten($value, 20%);
        @if (lightness($value) > 50) {
          color:                                            $black;
        } @else {
          color:                                            $white;
        }
        &:hover {
          background-color:                                 $value;
        }
      }
    }
  }
}

.dashboard {
  .v-autocomplete {
    .v-autocomplete-input-group {
      .v-autocomplete-input {
        height:                                                 100%;
        border-radius:                                          0px;
        border-right:                                           none;
      }}}
}
