@mixin arrow {
  content: "";
  border-left: solid $tooltip-arrow-size transparent;
  border-right: solid $tooltip-arrow-size transparent;
  border-bottom: solid $tooltip-arrow-size $border-color;
  position: absolute;
}

.dropdown {
  position: relative;
  border: $border;
  padding: spacer(4);
  border-radius: border-radius(1);
  @include bg-color(filled);
  margin-top: $tooltip-arrow-size;
  max-width: calc(100vw - spacer(4) * 2);

  &::before {
    @include arrow;
    bottom: 100%;
    left: spacer(3);
  }

  > [role="menu"],
  > .stack {
    &:only-child {
      box-shadow: none;
      margin: -(spacer(4));
      max-width: calc(100% + spacer(4) * 2);
      border: none;
    }
  }
}

.popover {
  display: inline-block;
  position: relative;

  &[open],
  &.expanded {
    &::after {
      @include arrow;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: z-index(tooltip);
    }
  }

  .dropdown {
    position: absolute;
    top: calc(100% - $border-width);
    min-width: 100%;
    width: max-content;
    box-shadow: box-shadow(1);
    z-index: z-index(tooltip);
    // We want the popover to contrast against the site as a whole, not its parent.
    --color: var(--contrast-filled);

    &::before {
      display: none;
    }
  }

  &.top {
    &::after {
      bottom: 100%;
      top: unset;
      border-top: solid $tooltip-arrow-size $border-color;
      border-bottom: unset;
    }

    .dropdown {
      box-shadow: none;
      bottom: calc(100% + $tooltip-arrow-size - $border-width);
      top: unset;
    }
  }

  &:has(> summary button) {
    > .dropdown {
      margin-left: -$button-hover-transform-length;
    }

    &.top {
      > .dropdown,
      &::after {
        margin-bottom: $button-hover-transform-length;
      }
    }
  }
}
