:host {
  --box-shadow: var(--wa-shadow-m);

  display: inline-block;
}

.dropdown::part(popup) {
  z-index: 900;
}

.dropdown[data-current-placement^='top']::part(popup) {
  transform-origin: bottom;
}

.dropdown[data-current-placement^='bottom']::part(popup) {
  transform-origin: top;
}

.dropdown[data-current-placement^='left']::part(popup) {
  transform-origin: right;
}

.dropdown[data-current-placement^='right']::part(popup) {
  transform-origin: left;
}

#trigger {
  display: block; /* for boundingClientRect */
}

.panel {
  font: inherit;
  box-shadow: var(--box-shadow);
  border-radius: var(--wa-border-radius-m);
  pointer-events: none;
}

.dropdown--open .panel {
  display: block;
  pointer-events: all;
}

/* When users slot a menu, make sure it conforms to the popup's auto-size */
::slotted(wa-menu) {
  max-width: var(--auto-size-available-width) !important;
  max-height: var(--auto-size-available-height) !important;
}
