@layer components {
  .popup {
    z-index: var(--z-popup);
  }

  .popup__container {
    position: relative;
    margin: var(--space-2);
    inline-size: 24rem;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }

  .color-scheme.color-scheme--dark .popup__container {
    background-color: oklch(21% 0.006 285.88);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .popup__container {
      background-color: oklch(21% 0.006 285.88);
    }
  }

  .popup__container__content {
    display: inline-block;
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--color-surface);
    position: relative;
    z-index: 20;
    border-radius: var(--radius-lg);
  }

  .color-scheme.color-scheme--dark .popup__container__content {
    background-color: oklch(21% 0.006 285.88);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .popup__container__content {
      background-color: oklch(21% 0.006 285.88);
    }
  }

  .popup__container__content__loading-indicator {
    color: oklch(44.6% 0.016 285.75);
    padding: var(--space-4);
  }

  .color-scheme.color-scheme--dark .popup__container__content__loading-indicator {
    color: oklch(87.81% 0.01 258.34);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .popup__container__content__loading-indicator {
      color: oklch(87.81% 0.01 258.34);
    }
  }

  .popup__container__arrow {
    position: absolute;
    z-index: 10;
    inline-size: 1rem;
    block-size: 1rem;
    inset-inline-start: 50%;
    translate: -50%;
    rotate: 45deg;
    background-color: var(--color-surface);
    border-radius: 0.125rem;
    box-shadow: var(--shadow-lg);
  }

  .color-scheme.color-scheme--dark .popup__container__arrow {
    background-color: oklch(21% 0.006 285.88);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .popup__container__arrow {
      background-color: oklch(21% 0.006 285.88);
    }
  }

  .popup[data-placement="bottom"] .popup__container__arrow {
    inset-block-start: -0.25rem;
  }

  .popup[data-placement="top"] .popup__container__arrow {
    inset-block-end: -0.25rem;
  }
}