@use "@material/animation/_index" as animation;
@use "@material/top-app-bar/_index" as top-app-bar;
@use "@material/shape/_index" as shape;

.autocomplete.mdc-menu {
  max-height: 160px !important;
  width: 100%;
  .mdc-list-item {
    margin: 0;
    @include shape.radius(0);
    height: 48px;
    white-space: pre;
    .highlight {
      font-weight: bold;
      display: inline;
    }
  }
}

.autocomplete-mobile,
.bottom-nav .search-app-bar .autocomplete-mobile {
  min-height: 0;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  top: top-app-bar.$row-height;
  transition: animation.standard(min-height, 250ms),
    animation.standard(max-height, 250ms);
  &--open {
    min-height: calc(100vh - #{top-app-bar.$row-height});
    max-height: calc(100vh - #{top-app-bar.$row-height});
    overflow: auto;
  }
  .mdc-list-item {
    margin: 0;
    @include shape.radius(0);
    height: 48px;
    white-space: pre;
    .highlight {
      font-weight: bold;
      display: inline;
    }
  }

  @media (max-width: top-app-bar.$mobile-breakpoint) {
    top: top-app-bar.$mobile-row-height;
    &--open {
      min-height: calc(100vh - #{top-app-bar.$mobile-row-height});
      max-height: calc(100vh - #{top-app-bar.$mobile-row-height});
    }
  }
}

.bottom-nav .autocomplete-mobile {
  top: calc(-100vh + #{top-app-bar.$row-height});

  @media (max-width: top-app-bar.$mobile-breakpoint) {
    top: calc(-100vh + #{top-app-bar.$mobile-row-height});
  }
}

.mdc-drawer .mdc-text-field,
.full-screen-dialog .mdc-text-field {
  & + .autocomplete.mdc-menu {
    margin-top: -16px;
  }
  & + .mdc-text-field-helper-line + .autocomplete.mdc-menu {
    margin-top: -35px;
  }
}
