@layer base {
  /* Prevent scroll when modal is open */
  html:has(.modal-content) {
    @apply transition-scaffold;
    transition-property: overflow;
    transition-duration: 300ms;
  }

  html:has(.modal-content[open]) {
    overflow: hidden;
    transition-delay: 0s;
  }

  .modal-content:not([open]) {
    pointer-events: none;
    opacity: 0;
  }

  /* Position fixed and some inset has been automatically applied */

  /* Base/Closing Style */
  .modal-content {
    margin: auto;
  }

  .modal-content::backdrop {
    backdrop-filter: blur(0);
  }

  .modal-content,
  .modal-content::backdrop {
    @apply transition-scaffold-extended;
    opacity: 0;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
  }

  /* Opened Style */
  .modal-content[open],
  .modal-content[open]::backdrop {
    opacity: 1;
    transition-timing-function: ease-out;
  }

  .modal-content[open]::backdrop {
    backdrop-filter: blur(var(--blur, 6px));
    background: var(--backdrop-bg, oklch(0% 0 0deg / 50%));
  }

  @starting-style {
    .modal-content[open],
    .modal-content[open]::backdrop {
      backdrop-filter: blur(0);
      opacity: 0;
    }
  }
}