.ds-modal-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
  min-height: 0;
}

.ds-modal-header {
  align-items: start;
  border-bottom: 1px solid var(--ds-colour-line);
  background: inherit;
  display: grid;
  gap: var(--ds-space-16);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--ds-space-20) var(--ds-space-20) var(--ds-space-16);
}

.ds-modal-heading {
  display: grid;
  gap: var(--ds-space-8);
  min-width: 0;
}

.ds-modal-title,
.ds-modal-description {
  overflow-wrap: anywhere;
}

.ds-modal-title,
.ds-modal-description {
  margin: 0;
}

.ds-modal-close {
  align-items: center;
  align-self: start;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-round);
  color: var(--ds-colour-ink);
  cursor: pointer;
  display: inline-grid;
  height: 2rem;
  justify-self: end;
  padding: 0;
  place-items: center;
  width: 2rem;
}

.ds-modal-close:hover,
.ds-modal-close:focus-visible,
.ds-modal-close.ds-modal-close--focus-visible {
  background: color-mix(in srgb, var(--ds-colour-surface-white) 58%, transparent);
  border-color: var(--ds-colour-line);
}

.ds-modal-close:focus {
  outline: none;
}

.ds-modal-close:focus-visible,
.ds-modal-close.ds-modal-close--focus-visible {
  box-shadow: var(--ds-shadow-focus);
  outline: 2px solid var(--ds-colour-deep-green);
  outline-offset: 3px;
}

.ds-modal-close svg {
  display: block;
  height: 0.875rem;
  width: 0.875rem;
}

.ds-modal-close path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.ds-modal-body {
  --ds-scroll-container-max-height: min(26rem, calc(100vh - 15rem));
  --ds-scroll-container-padding: var(--ds-space-20);
  min-height: 0;
}

.ds-modal-body--plain {
  display: grid;
  gap: var(--ds-space-14);
  padding: var(--ds-space-20);
}

.ds-modal-footer {
  background: inherit;
  border-top: 1px solid var(--ds-colour-line);
  padding: var(--ds-space-16) var(--ds-space-20) var(--ds-space-20);
}

.ds-modal-footer--sticky {
  bottom: 0;
  position: sticky;
}

@media (max-width: 42rem) {
  .ds-modal-header {
    gap: var(--ds-space-12);
    padding: var(--ds-space-16);
  }

  .ds-modal-body {
    --ds-scroll-container-max-height: calc(100vh - 13rem);
    --ds-scroll-container-padding: var(--ds-space-16);
  }

  .ds-modal-body--plain,
  .ds-modal-footer {
    padding: var(--ds-space-16);
  }
}