@layer components {
  .rs-dialog {
    position: fixed;
    inset: 0;
    inline-size: min(480px, calc(100vw - 32px));
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    padding: 0;
    margin: auto;
    background: var(--rs-color-background-elevation-overlay);
    color: var(--rs-color-foreground-neutral);
    box-shadow: var(--rs-shadow-overlay);
    opacity: 0;
    transform: scale(0.96);
    transition:
      opacity var(--rs-duration-fast) var(--rs-easing-decelerate),
      transform var(--rs-duration-fast) var(--rs-easing-decelerate),
      overlay var(--rs-duration-fast) allow-discrete,
      display var(--rs-duration-fast) allow-discrete;
  }

  .rs-dialog[open] {
    display: grid;
    opacity: 1;
    transform: scale(1);
  }

  .rs-dialog::backdrop {
    background-color: transparent;
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-decelerate),
      overlay var(--rs-duration-fast) allow-discrete,
      display var(--rs-duration-fast) allow-discrete;
  }

  .rs-dialog[open]::backdrop {
    background-color: color-mix(
      in oklch,
      var(--rs-color-black),
      transparent 30%
    );
  }

  @starting-style {
    .rs-dialog[open] {
      opacity: 0;
      transform: scale(0.96);
    }

    .rs-dialog[open]::backdrop {
      background-color: transparent;
    }
  }
}