/* =========================================================
   TOE BEANS DESIGN SYSTEM
   MODALS
   ========================================================= */

.ds-modal-demo {

  color:
    var(--ds-text);

  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-xl);

  overflow:
    hidden;

  background:
    var(--ds-surface);

  box-shadow:
    var(--ds-shadow-lg);

}


.ds-modal-small {

  max-width:
    480px;

}


.ds-modal-standard {

  max-width:
    720px;

}


.ds-modal-large {

  max-width:
    960px;

}


.ds-modal-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    22px 24px;

  border-bottom:
    1px solid
    var(--ds-border);

}


.ds-modal-header h2 {

  margin:
    0 0 5px;

}


.ds-modal-header p {

  margin:
    0;

  color:
    var(--ds-muted);

}


.ds-modal-body {

  padding:
    24px;

}


.ds-modal-footer {

  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;

  padding:
    16px 24px;

  border-top:
    1px solid
    var(--ds-border);

  background:
    var(--ds-surface-soft);

}