metabuilder/scss/atoms/mat-dialog.module.scss

// Dialog Component - Material Design 3 SCSS Module
// ==================================================================
// Pure CSS Module implementation with M3 design tokens
// Standalone React-compatible styles

// =============================================================================
// CSS Variables for M3 Dialog Tokens
// =============================================================================
$dialog-container-color: var(--mat-sys-surface-container-high, #fff);
$dialog-container-shape: var(--mat-sys-corner-extra-large, 28px);
$dialog-container-elevation: var(--mat-sys-elevation-3, 0 8px 24px rgba(0,0,0,0.15));
$dialog-subhead-color: var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87));
$dialog-supporting-text-color: var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6));
$dialog-scrim-color: var(--mat-sys-scrim, #000);
$dialog-transition-duration: 150ms;

// =============================================================================
// Dialog Open State - Parent class that triggers animations
// =============================================================================
.dialogOpen {
  // Needs width: 100% so .dialogContainer's max-width is measured against the
  // full overlay width, not the auto-sized flex-item content width
  width: 100%;
}

// =============================================================================
// Dialog Overlay (Scrim/Backdrop)
// =============================================================================
.dialogOverlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, $dialog-scrim-color 32%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: var(--z-modal, 1300);
  animation: dialogFadeIn $dialog-transition-duration ease-out;
  overflow: auto;
  box-sizing: border-box;

  @media (max-width: 600px) {
    padding: 12px;
    align-items: flex-start;
    padding-top: 48px;
  }
}

@keyframes dialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// =============================================================================
// Dialog Container - Main wrapper
// =============================================================================
.dialogContainer {
  display: block;
  box-sizing: border-box;
  outline: 0;
  max-width: 560px;
  min-width: 280px;
  width: 100%;
  margin: 0 auto;

  @media (max-width: 600px) {
    min-width: auto;
    max-width: 100%;
  }
}

// Size variants
.dialogPanelSm {
  max-width: 400px;

  @media (max-width: 440px) {
    max-width: 100%;
  }
}

.dialogPanelLg {
  max-width: 860px;

  @media (max-width: 900px) {
    max-width: 100%;
  }
}

.dialogPanelXl {
  max-width: 900px;

  @media (max-width: 940px) {
    max-width: 100%;
  }
}

.dialogPanelFullscreen {
  max-width: 100%;
  max-height: 100%;
  width: 100vw;
  height: 100vh;

  .dialogSurface {
    border-radius: 0;
    max-height: 100vh;
  }
}

// =============================================================================
// Dialog Inner Container - Flex wrapper for content
// =============================================================================
.dialogInnerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity linear $dialog-transition-duration;
}

.dialogOpen .dialogInnerContainer {
  opacity: 1;
}

// =============================================================================
// Dialog Surface - The actual dialog panel
// =============================================================================
.dialogSurface {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: hidden;
  outline: 0;
  transform: scale(0.8);
  transition: transform $dialog-transition-duration cubic-bezier(0, 0, 0.2, 1);
  max-height: calc(100vh - 48px);
  box-shadow: $dialog-container-elevation;
  border-radius: $dialog-container-shape;
  background-color: $dialog-container-color;
}

.dialogOpen .dialogSurface {
  transform: none;
}

// =============================================================================
// Dialog Header
// =============================================================================
.dialogHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  // No padding here — DialogTitle inside handles its own padding
  position: relative;

  // When DialogTitle is nested inside DialogHeader, suppress its built-in
  // top/side padding so the header is the single source of spacing
  .dialogTitle {
    padding: 24px 24px 16px;
  }
}

.dialogHeaderWithIcon {
  flex-direction: column;
  text-align: center;
}

// =============================================================================
// Dialog Title
// =============================================================================
.dialogTitle {
  display: block;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  margin: 0 0 1px;
  padding: 24px 24px 20px;
  color: $dialog-subhead-color;
  font-family: var(--mat-sys-headline-small-font, inherit);
  line-height: var(--mat-sys-headline-small-line-height, 1.5rem);
  font-size: var(--mat-sys-headline-small-size, 1.5rem);
  font-weight: var(--mat-sys-headline-small-weight, 500);
}

// =============================================================================
// Dialog Content
// =============================================================================
.dialogContent {
  display: block;
  flex-grow: 1;
  box-sizing: border-box;
  margin: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
  color: $dialog-supporting-text-color;
  font-family: var(--mat-sys-body-medium-font, inherit);
  line-height: var(--mat-sys-body-medium-line-height, 1.5rem);
  font-size: var(--mat-sys-body-medium-size, 1rem);
  font-weight: var(--mat-sys-body-medium-weight, 400);

  > :first-child {
    margin-top: 0;
  }

  > :last-child {
    margin-bottom: 0;
  }
}

// When following title, remove top padding
.dialogTitle + .dialogContent,
.dialogHeader + .dialogContent {
  padding-top: 12px;
}

// =============================================================================
// Dialog Actions
// =============================================================================
.dialogActions {
  display: flex;
  position: relative;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  min-height: 52px;
  margin: 0;
  padding: 20px 24px 24px;
  gap: 8px;
}

.dialogActionsStart {
  justify-content: flex-start;
}

.dialogActionsCenter {
  justify-content: center;
}

.dialogActionsStacked {
  flex-direction: column;
  align-items: stretch;

  > * {
    width: 100%;
  }
}

// =============================================================================
// Dialog Icon
// =============================================================================
.dialogIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--mat-sys-secondary, #625b71);
}

.dialogHeaderWithIcon .dialogIcon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}

// =============================================================================
// Dialog Close Button
// =============================================================================
.dialogClose {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6));
  cursor: pointer;
  transition: background-color 100ms ease;

  &:hover {
    background: color-mix(in srgb, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)) 8%, transparent);
  }

  &:focus-visible {
    outline: 2px solid var(--mat-sys-primary, #6750a4);
    outline-offset: 2px;
  }

  &:active {
    background: color-mix(in srgb, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)) 12%, transparent);
  }
}

// =============================================================================
// Dialog Divider
// =============================================================================
.dialogDivider {
  height: 1px;
  background: var(--mat-sys-outline-variant, rgba(0, 0, 0, 0.12));
  margin: 0;
  border: none;
}