:is(ul, menu)[popover] {
  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-dropdown-background-color);
  min-width: fit-content;
  box-shadow: var(--pico-dropdown-box-shadow);
  color: var(--pico-dropdown-color);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--pico-transition),
    overlay var(--pico-transition) allow-discrete,
    display var(--pico-transition) allow-discrete;
  margin: auto;
  padding: 0;

  &:not(:popover-open) {
    display: none;
  }

  &:popover-open {
    opacity: 1;
    display: block;
  }

  & li {
    padding: calc(var(--pico-form-element-spacing-vertical) * .5)
      var(--pico-form-element-spacing-horizontal);
    margin-bottom: 0;
    list-style: none;
    display: block;

    &:first-of-type {
      margin-top: calc(var(--pico-form-element-spacing-vertical) * .5);
    }

    &:last-of-type {
      margin-bottom: calc(var(--pico-form-element-spacing-vertical) * .5);
    }

    &:has(label):hover {
      background-color: var(--pico-dropdown-hover-background-color);
    }
  }

  & li a {
    margin: calc(var(--pico-form-element-spacing-vertical) * -.5)
      calc(var(--pico-form-element-spacing-horizontal) * -1);
    padding: calc(var(--pico-form-element-spacing-vertical) * .5)
      var(--pico-form-element-spacing-horizontal);
    color: var(--pico-dropdown-color);
    text-overflow: ellipsis;
    border-radius: 0;
    text-decoration: none;
    display: block;
    overflow: hidden;

    &:is(:hover, :focus, :active, :focus-visible, [aria-current]:not([aria-current="false"])) {
      background-color: var(--pico-dropdown-hover-background-color);
    }
  }

  & li label {
    width: 100%;
  }
}

nav :is(ul, menu)[popover]:not(.does-not-exist) {
  margin: auto;
}

@starting-style {
  :is(ul, menu)[popover]:popover-open {
    opacity: 0;
  }
}

@supports (position-area: bottom) {
  :is(ul, menu)[popover], nav :is(ul, menu)[popover]:not(.does-not-exist) {
    margin: 0;
    margin-top: var(--pico-outline-width);
    position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto;

    &:dir(rtl) {
      position-area: bottom span-left;
    }
  }
}