@import "../_colors";
@import "../_queries";
@import "../_sizes";
@import "../mixins";

.ui-autocomplete {
  display: inline-flex;

  & input {
    font-size: 14px !important;
  }

  .ui-autocomplete-multiple-container {
    max-height: 320px;
    overflow: auto !important;
  }

  .ui-autocomplete-dropdown.ui-button {
    background-color: $default-color;
    border: 1px solid $input-border-color;
    border-left: none;
    color: $primary-dark-text-color;
    height: auto;
    width: $input-trigger-size;

    &:focus,
    &:hover {
      background-color: highlight($default-primary-color) !important;
    }

    &:enabled:active {
      background-color: active($default-primary-color);
    }
  }

  .ui-autocomplete-emptymessage {
    color: $secondary-dark-text-color;
    font-size: 13px;
    font-style: italic;
  }

  .ui-autocomplete-loader {
    right: 10px;

    &::before {
      content: "\f1ce";
    }
  }

  .ui-autocomplete-input-token {
    margin: 0;
  }

  &.ui-autocomplete-dd {
    .ui-autocomplete-loader {
      right: 44px;
    }
  }

  .ui-autocomplete-token {
    max-width: 100%;

    .ui-autocomplete-token-label {
      max-width: 50ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.ui-fluid {
  .ui-autocomplete {
    .ui-autocomplete-dropdown.ui-button {
      width: $input-trigger-size;
    }

    &.ui-autocomplete-dd {
      .ui-autocomplete-input,
      .ui-autocomplete-multiple-container {
        width: calc(100% - #{$input-trigger-size});
      }
    }
  }
}

.ui-autocomplete-panel {
  max-width: calc(100vw - 32px);

  .ui-autocomplete-list-item {
    span {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

body .ui-autocomplete-items .ui-state-highlight {
  background-color: $default-primary-color;
  color: $primary-dark-text-color;
}

@include border-state("ui-autocomplete", "ui-autocomplete-dropdown");
@include border-state("s-lookup", "ui-autocomplete-dropdown");
@include border-state("s-lookup", "button-addon");