: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 menu. Defaults to 'auto'
   * @prop --padding: padding of the menu. Default to 'var(--nano-spacing-sm) var(--nano-spacing-sm)';
   * @prop --font-size: font size of the menu. Default to '1rem';
   * @prop --background: background color of the menu. Default to 'var(--nano-color-neutral-75)';
   */
  --padding: var(--nano-spacing-sm) var(--nano-spacing-sm);
  --font-size: 1rem;
  --background: var(--nano-color-neutral-75);
  --nav-item-padding: var(--padding);
  display: block;
  background: var(--background);
  color: var(--nano-color-neutral-1400);
  overflow-x: clip;
}

.menu {
  font-size: var(--font-size);
  overscroll-behavior: none;
  min-inline-size: var(--width);
  position: relative;
}
.menu:focus {
  outline: none;
}

::slotted(*:not(.nano-nav-item, .nano-option, hr, slot)) {
  padding: var(--padding);
  display: block;
}