@layer components {
  /* Prevent page scrolling when modal dialog is open */
  html:has(:popover-open) {
    overflow: hidden;
  }

  [popover] {
    --dialog-duration: 200ms;

    border: 0;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: top center;
    transition: var(--dialog-duration) allow-discrete;
    transition-property: display, opacity, overlay, transform;

    &::backdrop {
      background-color: var(--color-black);
      opacity: 0;
      transform: scale(1);
      transition: var(--dialog-duration) allow-discrete;
      transition-property: display, opacity, overlay;
    }

    &:popover-open {
      opacity: 1;
      transform: scale(1);

      &::backdrop {
        opacity: 0.75;
      }
    }
    
    @starting-style {
      &:popover-open {
        opacity: 0;
        transform: scale(0.2);
      }
  
      &:popover-open::backdrop {
        opacity: 0;
      }
    }
  }
}