// Prime NG
// https://www.primefaces.org/primeng/#/autocomplete

// Set default customise component variables here,
// Override it in theme variables files
$x-ui-autocomplete-max-height:      15rem !default; // Match the max-height of ng-select

.ui-autocomplete {
  position: relative;
  display: block;

  .ui-autocomplete-panel {
    min-width: 100%;
  }
}

.ui-autocomplete-input {
  @extend %form-control;
}

.ui-autocomplete-panel {
  position: absolute;

  .ui-autocomplete-items {
    @extend .py-0,
            .overflow-auto,
            %list-group,
            %list-group-flush,
            .dropdown-menu;

    max-height: $x-ui-autocomplete-max-height;
    width: 100%;
  }

  .ui-autocomplete-list-item {
    @extend %white-space-normal,
            .dropdown-item,
            %list-group-item,
            %list-group-item-action,
            %px-3;
  }
}


// Style for Google Place Auto Complete
.pac-container {
  @extend %py-0,
          %overflow-auto,
          %list-group,
          %list-group-flush,
          .dropdown-menu;

  &.pac-logo:after {
    @extend %m-2;
  }
  .pac-item {
    @extend .dropdown-item,
            %list-group-item,
            %list-group-item-action,
            %px-2;

    &.pac-item-selected {
      @extend %bg-primary-transparent;
    }

    &:last-child {
      @extend .border-bottom;
    }

    .pac-item-query {
      @extend .pr-1;
      font-size: $font-size-base;
    }

    .pac-matched {
      @extend .text-primary;
    }
  }
}