@use '@material/textfield/variables' as textfield-variables;
@use '@material/menu-surface/variables' as menu-surface-variables;
@use '../mixins' as ui-mixins;

.mdc-autocomplete {
  display: inline-flex;
  position: relative;

  .mdc-text-field__ripple {
    &::before,
    &::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 4px 4px 0 0;
    }
  }
}

.mdc-autocomplete--fullwidth {
  display: flex;
  width: 100%;
}

.mdc-autocomplete__menu {
  position: absolute;
  top: textfield-variables.$height - textfield-variables.$outlined-stroke-width;
  left: 0;
  max-height: calc(50vh - #{menu-surface-variables.$min-distance-from-edge});

  &.mdc-menu-surface--open {
    display: block;
  }

  .mdc-deprecated-list {
    width: 100%;
  }

  .mdc-deprecated-list-item {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;

    strong {
      font-weight: bold;
    }

    &.selected {
      @include ui-mixins.selected;
    }
  }
}

.mdc-autocomplete--in-dialog {
  .mdc-autocomplete__menu {
    @include ui-mixins.menu-in-dialog;
  }
}