@layer base {
  [popover] {
    @apply border-scaffold;
    @apply transition-scaffold-extended;
    position: absolute;
    max-width: 100%;
    color: var(--text-color);
    background: var(--bg-color, white);
    opacity: 0;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
  }

  [popover]:not(:popover-open) {
    display: none !important;
  }

  [popover]:popover-open {
    opacity: 1;
    transition-timing-function: ease-in;
  }

  @starting-style {
    [popover]:popover-open {
      display: block;
      opacity: 0;
    }
  }

  /* All modals should use `dialog` element with the `modal` class. */
  /* They should not use [popover] dialogs with backdrops are modals — it only gives the right affordance this way. */

  [popover]::backdrop {
    pointer-events: none;
    opacity: 0;
  }

  [popover] > * {
    overflow: auto;
  }
}