@layer components {
  /* Base: a non-modal <dialog> anchored below its relatively-positioned parent
  /* -------------------------------------------------------------------------- */

  .popup {
    --popup-gap: var(--block-space-half);
    --popup-max-block-size: 70dvh;
    --popup-min-inline-size: 20ch;
    --popup-padding: var(--block-space-half);

    background-color: var(--color-canvas);
    border: var(--border);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-large);
    color: var(--color-ink);
    inset: calc(100% + var(--popup-gap)) auto auto 50%;
    margin: 0;
    max-block-size: var(--popup-max-block-size);
    max-inline-size: min(40ch, calc(100vw - var(--main-padding) * 2));
    min-inline-size: min(var(--popup-min-inline-size), calc(100vw - var(--main-padding) * 2));
    opacity: 0;
    overflow: auto;
    padding: var(--popup-padding);
    position: absolute;
    transform: scale(0.95);
    transform-origin: top center;
    transition: var(--duration-fast) allow-discrete;
    transition-property: display, opacity, overlay, transform;
    translate: -50%;
    z-index: var(--z-popup);

    /* transform: none (not scale(1)) so no compositing layer lingers and the
       border paints on the same pixel boundary as the untransformed trigger */
    &[open] {
      opacity: 1;
      transform: none;
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: scale(0.95);
      }
    }
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  /* Flush with the anchor's inline-end edge, for right-aligned triggers */
  .popup--align-end {
    inset-inline: auto 0;
    transform-origin: top right;
    translate: none;
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .popup__section + .popup__section {
    border-block-start: var(--border);
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
  }

  .popup__summary {
    align-items: center;
    border-radius: var(--border-radius);
    color: var(--color-ink-muted);
    cursor: pointer;
    display: flex;
    font-size: var(--text-small);
    font-weight: 500;
    gap: 0.5em;
    list-style: none;
    padding: 0.4em;
    user-select: none;

    &::-webkit-details-marker {
      display: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-surface-subtle);
        color: var(--color-ink);
      }
    }
  }

  .popup__summary-caret {
    --icon-size: 0.9em;

    transition: rotate var(--duration-fast) ease-in-out;

    details[open] > .popup__summary & {
      rotate: 90deg;
    }
  }

  .popup__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .popup__btn {
    --btn-border-size: 0;
    --btn-font-weight: 400;

    border-radius: var(--border-radius);
    gap: 0.5em;
    inline-size: 100%;
    justify-content: flex-start;
    text-align: start;
    text-decoration: none;

    &[aria-current] {
      --btn-color: var(--color-ink);
    }
  }

  .popup__btn-label {
    /* line-height above 1 so overflow: hidden doesn't clip descenders
       against .btn's line-height: 1 */
    line-height: 1.25;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .popup__icon {
    --icon-size: 1.05em;

    color: var(--color-ink-muted);

    .popup__btn[aria-current] & {
      color: var(--color-ink);
    }
  }

  /* The check is only revealed on the current item */
  .popup__check {
    display: none;
    margin-inline-start: auto;

    .popup__btn[aria-current] & {
      display: inline-block;
    }
  }

  .popup__empty {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    margin: 0;
    padding-block: var(--block-space-half);
    padding-inline: 0.4em;
  }

  @media print {
    .popup { display: none; }
  }
}