@layer components {
  .popup {
    background: transparent;
    border: none;
    border-radius: 0.5em;
    box-shadow: 0 0 0.4em var(--color-ink-light);
    margin: 0;
    min-inline-size: var(--popup-min-size, 30ch);
    padding: 0;
    position: absolute;
    z-index: var(--z-popup);

    :where([role="toolbar"]) {
      background: var(--color-ink-lightest);
      margin: 0;
      padding: 0.33rem;
      position: relative;
    }

    :where(details[open]) & {
      animation: pop-open 150ms both;
    }
  }

  .popup--bottom-right {
    inset-block-start: var(--btn-size);
    inset-inline: auto var(--btn-size);
    transform-origin: right top;
  }

  .popup--right {
    inset-block-start: var(--btn-size);
    inset-inline: auto 0;
    transform-origin: right top;
  }

  .popup--arrow-top {
    padding: 0.75rem;

    :where([role="toolbar"])::before {
      block-size: 0;
      border-block-end: 0.75rem solid var(--color-theme);
      border-inline: 0.75rem solid transparent;
      content: "";
      inline-size: 0;
      inset-block-start: -0.75rem;
      inset-inline-start: calc(50% - 0.75rem);
      position: absolute;
    }
  }

  .popup--one-pager {
    box-shadow: none;
    /* Match the (+) button font size so we can calculate --btn-size em value properly */
    font-size: var(--txt-small);
    inset-block-start: 100%;
    inset-inline-start: calc(var(--btn-size) / 2);
    translate: -50%;

    :where([role="toolbar"]) {
      background: var(--color-theme);
      border: 0.125rem solid var(--color-theme);
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }
}