:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
   * @prop --width: width of the dropdown. Defaults to 'auto'
   * @prop --border: Defaults to 'none';
   * @prop --border-radius: Defaults to '0px';
   * @prop --background: Defaults to 'var(--nano-color-neutral-75)';
   * @prop --padding: padding of the drop down. Default to 'var(--nano-spacing-sm) 0';
   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overridden;
   * @prop --dropdown-z-index: Defaults to 'var(--nano-z-index-dropdown)';
   * @prop --min-width: Defaults to '0';
   * @prop --max-height: maximum height of the dropdown panel. Defaults to 'none';
   * @prop --box-shadow: Defaults to 'var(--nano-shadow-l1)';
   * @prop --menu-height: max height of a slotted menu. Defaults to '50vh';
   */
  --width: auto;
  --border: none;
  --border-radius: 0px;
  --background: var(--nano-color-neutral-75);
  --padding: 0 0;
  --overflow: auto;
  --dropdown-z-index: var(--nano-z-index-dropdown);
  --min-width: 0;
  --max-height: none;
  --box-shadow: var(--nano-shadow-l2);
  --menu-height: calc(100vh - 200px);
  display: inline-block;
}

.dropdown {
  position: relative;
}
.dropdown__trigger {
  display: block;
}
.dropdown__positioner {
  position: absolute;
  z-index: var(--dropdown-z-index);
  min-inline-size: var(--min-width);
  border: 0;
  background: none;
  padding: 0;
  overflow: visible;
  color: unset;
}
.dropdown__positioner::backdrop {
  display: none;
}
.dropdown__positioner[popover], .dropdown__positioner:popover-open {
  inset: unset;
}
@media (width <= 35.9375em) {
  .dropdown__positioner {
    z-index: 100;
  }
}
.dropdown__panel {
  padding: var(--padding);
  background: var(--background);
  min-inline-size: var(--min-width);
  inline-size: var(--width);
  border: var(--border);
  border-radius: var(--border-radius);
  color: currentcolor;
  box-shadow: var(--box-shadow);
  opacity: 0;
  transition: var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;
  min-block-size: 20px;
  overflow: var(--overflow);
  max-block-size: var(--max-height);
  box-sizing: content-box !important;
}
.dropdown__panel.loading {
  overflow-y: hidden;
}
.dropdown__panel.top {
  transform: translateY(-20px) translateZ(0);
}
.dropdown__panel.bottom {
  transform: translateY(20px) translateZ(0);
}
.dropdown__positioner.popover-visible .dropdown__panel {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}
.dropdown__panel ::slotted(.nano-menu) {
  max-block-size: var(--menu-height);
}
.dropdown__accessible-title {
  clip-path: inset(50%);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}