@layer components {
  .rs-modal {
    position: relative;
    inline-size: min(420px, calc(100vw - var(--rs-unit-x8)));
    max-block-size: calc(100dvh - var(--rs-unit-x8));
    overflow: auto;
    border: 0;
    border-radius: var(--rs-radius-large);
    background: var(--rs-color-background-elevation-overlay);
    color: var(--rs-color-foreground-neutral);
    box-shadow: var(--rs-shadow-raised);
  }

  .rs-modal__close {
    position: absolute;
    z-index: var(--rs-z-index-relative);
    inset-block-start: var(--rs-unit-x2);
    inset-inline-end: var(--rs-unit-x2);
  }

  .rs-modal__close-form {
    display: contents;
  }

  .rs-modal > .rs-modal__close + .rs-card__body,
  .rs-modal > .rs-modal__close-form + .rs-card__body {
    padding-inline-end: calc(var(--rs-unit-x4) + var(--rs-unit-x8));
  }

  .rs-modal[data-position="bottom"] {
    align-self: end;
    inline-size: min(100%, 720px);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .rs-modal[data-position="full-screen"] {
    inline-size: 100%;
    block-size: 100%;
    max-block-size: none;
    border-radius: 0;
  }

  dialog.rs-modal {
    inline-size: min(480px, calc(100vw - 32px));
    padding: 0;
  }

  dialog.rs-modal::backdrop {
    background-color: transparent;
  }

  dialog.rs-modal[data-position="full-screen"] {
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: 100vw;
    max-block-size: 100dvh;
    margin: 0;
    border-radius: 0;
  }

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