.ds-modal-backdrop {
  align-items: center;
  backdrop-filter: var(--ds-effect-scrim-blur);
  background: var(--ds-colour-scrim);
  display: flex;
  inset: 0;
  justify-content: center;
  min-height: 100vh;
  overflow: auto;
  padding: var(--ds-space-24);
  position: fixed;
  z-index: 40;
}

.ds-modal-backdrop--static {
  min-height: 34rem;
  position: relative;
}

.ds-modal-shell {
  background: var(--ds-colour-warm-panel);
  border: 1px solid var(--ds-colour-line);
  box-shadow: var(--ds-shadow-modal);
  color: var(--ds-colour-ink);
  display: grid;
  max-height: min(88vh, 60rem);
  max-width: calc(100vw - (var(--ds-space-24) * 2));
  min-width: 0;
  overflow: hidden;
  width: min(100%, var(--ds-modal-shell-width, 35rem));
}

.ds-modal-shell--small {
  --ds-modal-shell-width: 28rem;
}

.ds-modal-shell--medium {
  --ds-modal-shell-width: 35rem;
}

.ds-modal-shell--large {
  --ds-modal-shell-width: 45rem;
}

.ds-modal-shell--alert {
  border-color: var(--ds-colour-destructive);
}

@media (max-width: 42rem) {
  .ds-modal-backdrop {
    align-items: stretch;
    padding: var(--ds-space-12);
  }

  .ds-modal-shell {
    max-height: calc(100vh - (var(--ds-space-12) * 2));
    max-width: calc(100vw - (var(--ds-space-12) * 2));
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-modal-shell {
    scroll-behavior: auto;
  }
}