@use '../select/select' as select;
@use '../input/input' as input;
@use '../text-field/text-field' as text-field;
@use './autocomplete' as *;
@use '@mezzanine-ui/system/spacing' as spacing;

.#{$prefix} {
  position: relative;
  width: 100%;

  &--single {
    min-width: spacing.semantic-variable(size, container, concentrate-fixed);

    &:has(.#{select.$trigger-prefix} .#{text-field.$prefix}__prefix) {
      min-width: spacing.semantic-variable(size, container, small);
    }
  }

  &--multiple {
    min-width: spacing.semantic-variable(size, container, snug);

    &:has(.#{select.$trigger-prefix} .#{text-field.$prefix}__prefix) {
      min-width: spacing.semantic-variable(size, container, small);
    }
  }

  &--inside-closed {
    .#{select.$trigger-prefix} {
      opacity: 0;
      pointer-events: none;
    }

    // Inside trigger uses a plain Input (React) or an [mznTextField] div
    // (Angular) instead of SelectTrigger in some cases. Hide both so the
    // host collapses when the dropdown is closed, regardless of platform.
    .#{input.$prefix},
    .#{text-field.$prefix} {
      opacity: 0;
      pointer-events: none;
    }
  }

  .#{select.$trigger-prefix}__input {
    padding: 0;
  }
}