%menu-space-shared {
  padding-block: var(
    --amplify-components-autocomplete-menu-space-shared-padding-block
  );
  padding-inline: var(
    --amplify-components-autocomplete-menu-space-shared-padding-inline
  );
}

.amplify-autocomplete {
  position: relative;
  display: block;
}

.amplify-autocomplete__menu {
  position: absolute;
  z-index: 999999;

  width: var(--amplify-components-autocomplete-menu-width);
  margin-block-start: var(
    --amplify-components-autocomplete-menu-margin-block-start
  );
  background-color: var(
    --amplify-components-autocomplete-menu-background-color
  );
  border-color: var(--amplify-components-autocomplete-menu-border-color);
  border-width: var(--amplify-components-autocomplete-menu-border-width);
  border-style: var(--amplify-components-autocomplete-menu-border-style);
  border-radius: var(--amplify-components-autocomplete-menu-border-radius);

  &--empty {
    @extend %menu-space-shared;

    display: var(--amplify-components-autocomplete-menu-empty-display);
  }

  &--loading {
    @extend %menu-space-shared;

    display: var(--amplify-components-autocomplete-menu-loading-display);
    align-items: var(
      --amplify-components-autocomplete-menu-loading-align-items
    );
    gap: var(--amplify-components-autocomplete-menu-loading-gap);
  }

  &__options {
    position: relative;
    overscroll-behavior: contain;
    display: var(--amplify-components-autocomplete-menu-options-display);
    flex-direction: var(
      --amplify-components-autocomplete-menu-options-flex-direction
    );
    max-height: var(--amplify-components-autocomplete-menu-options-max-height);
  }

  &__option {
    @extend %menu-space-shared;
    background-color: var(
      --amplify-components-autocomplete-menu-option-background-color
    );
    color: var(--amplify-components-autocomplete-menu-option-color);
    cursor: var(--amplify-components-autocomplete-menu-option-cursor);
    transition-duration: var(
      --amplify-components-autocomplete-menu-option-transition-duration
    );
    transition-property: var(
      --amplify-components-autocomplete-menu-option-transition-property
    );
    transition-timing-function: var(
      --amplify-components-autocomplete-menu-option-transition-timing-function
    );

    &--active {
      background-color: var(
        --amplify-components-autocomplete-menu-option-active-background-color
      );
      color: var(--amplify-components-autocomplete-menu-option-active-color);
    }
  }
}