Modal

/* smbk-modal — Modal. Figma "Modal" 4212:26125 (Size: sm, md, lg).
 * A centered dialog over a scrim, built on the native dialog element. The three
 * widths are the modal size tokens, carried from Figma's frames, used as
 * maximums so the panel shrinks with the window. The sections are spaced with
 * the extra-large stack step, as Figma binds them.
 * The inline flag shows the panel in place, for previews and documentation.
 * The panel fades and rises into place over a fading scrim (motion rules at the end). */

.smbk-modal {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: var(--smbk-layer-modal);
  display: none;
  flex-direction: column;
  gap: var(--smbk-space-stack-xl);
  width: 100%;
  max-width: var(--smbk-size-modal-sm);
  max-height: 100%;
  margin: auto;
  padding: var(--smbk-space-inset-2xl);
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
  border-radius: var(--smbk-radius-container-lg);
  background: var(--smbk-color-surface-default);
  color: var(--smbk-color-text-default);
  box-shadow: var(--smbk-elevation-overlay);
}

.smbk-modal[open] {
  display: flex;
}

/* The icon and the title on one line, as Figma draws them. The title keeps
   clear of the close button, which overlaps the row's end (see below). */
.smbk-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-lg);
  padding-inline-end: calc(var(--smbk-size-control-md) - var(--smbk-space-inset-2xl) + var(--smbk-space-inset-lg));
}

.smbk-modal__icon {
  flex-shrink: 0;
  font-size: var(--smbk-size-icon-lg);
}

/* The alert dialog (alert-dialog.css, drawn by this stylesheet) warns in the danger color while its confirm action is
   the danger one, as its Figma drawing has it; with a brand confirm action its icon keeps the modal's color. */
.smbk-alert-dialog:has(.smbk-btn--tone-danger) .smbk-modal__icon {
  color: var(--smbk-color-feedback-danger-icon);
}

.smbk-modal__title {
  margin: 0;
  font-family: var(--smbk-typography-heading-2xs-bold-font-family);
  font-size: var(--smbk-typography-heading-2xs-bold-font-size);
  font-weight: var(--smbk-typography-heading-2xs-bold-font-weight);
  line-height: var(--smbk-typography-heading-2xs-bold-line-height);
  letter-spacing: var(--smbk-typography-heading-2xs-bold-letter-spacing);
}

/* The close button sits in the modal's corner, the large inset from its top and end edges, over the
   padding, as Figma places it: the header sits the modal's own padding (and its hairline
   edge) in from those edges, so the button is moved back out by the difference. */
.smbk-modal__close {
  position: absolute;
  top: calc(var(--smbk-space-inset-lg) - var(--smbk-space-inset-2xl) - var(--smbk-border-width-hairline));
  inset-inline-end: calc(var(--smbk-space-inset-lg) - var(--smbk-space-inset-2xl) - var(--smbk-border-width-hairline));
}

.smbk-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* The system's scrollbar: thin, in the subtle border color, on a clear track. */
  scrollbar-width: thin;
  scrollbar-color: var(--smbk-color-border-subtle) transparent;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

/* The first thing in it, after the scrollbar the script adds (scrollbar.ts). */
.smbk-modal__body > :first-child,
.smbk-modal__body > .smbk-scrollbar:first-child + * {
  margin-top: 0;
}

.smbk-modal__body > :last-child {
  margin-bottom: 0;
}

.smbk-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--smbk-space-inline-lg);
}

/* ---- sizes ---- */

.smbk-modal--size-md {
  max-width: var(--smbk-size-modal-md);
}

.smbk-modal--size-lg {
  max-width: var(--smbk-size-modal-lg);
}

/* ---- inline: shown in place, no scrim ---- */

.smbk-modal--inline {
  position: relative;
  inset: auto;
  z-index: auto;
  margin: 0;
}

/* ---- over the page: the scrim, the motion (the panel fades in and rises a spacing step into place over a scrim
   that fades in, and fades out dropping a smaller step; under reduced motion it fades in place) and the page held
   still behind it are the dialogs' own, shared with the drawer and the command palette: dialog/dialog.css. Inline
   modals do not move. ---- */

{
  "name": "modal",
  "block": "smbk-modal",
  "summary": "A centered dialog over a scrim for a short interruption: an icon and title, a body, and a footer of actions.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "sm",
      "description": "The greatest width the panel takes."
    }
  },
  "flags": {
    "inline": {
      "description": "Shown in place with no scrim, for previews and documentation."
    }
  },
  "parts": [
    "header",
    "icon",
    "title",
    "close",
    "body",
    "footer"
  ],
  "figmaNodeId": "4212:26125"
}