@use '@angular/cdk';
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;

// Even though we don't use the MDC styles, we need to keep the classes in the
// DOM for the Gmat versions to work. We need to bump up the specificity here
// so that it's higher than MDC's styles.
div.mat-mdc-autocomplete-panel {
  width: 100%; // Ensures that the panel matches the overlay width.
  max-height: 256px; // Prevents lists with a lot of option from growing too high.
  visibility: hidden;
  transform-origin: center top;
  overflow: auto;
  padding: 8px 0;
  box-sizing: border-box;

  // Workaround in case other MDC menu surface styles bleed in.
  position: static;

  @include token-utils.use-tokens(
    tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {
    @include token-utils.create-token-slot(border-radius, container-shape);
    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
    @include token-utils.create-token-slot(background-color, background-color);
  }

  @include cdk.high-contrast {
    outline: solid 1px;
  }

  .cdk-overlay-pane:not(.mat-mdc-autocomplete-panel-above) & {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .mat-mdc-autocomplete-panel-above & {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform-origin: center bottom;
  }

  // These classes are used to toggle the panel visibility depending on whether it has any options.
  &.mat-mdc-autocomplete-visible {
    visibility: visible;
  }

  &.mat-mdc-autocomplete-hidden {
    visibility: hidden;
    pointer-events: none;
  }
}

// Prevent the overlay host node from affecting its surrounding layout.
mat-autocomplete {
  display: none;
}