metabuilder/scss/global/_layout.scss

// Size utility classes - Material Design 3

.w-full { width: 100%; }
.h-full { height: 100%; }
.max-w-full { max-width: 100%; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1200px; }
.min-w-0 { min-width: 0; }

// Min height
.min-h-screen { min-height: 100vh; }
.min-h-full { min-height: 100%; }

// Margin auto
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

// Overflow
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

// Visibility
.hidden { display: none; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }

// Cursor
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }

// Whitespace / text overflow
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.whitespace-normal { white-space: normal; }

// Font family
.font-mono {
  font-family: var(--mat-sys-body-large-font);
  font-feature-settings: "tnum" on, "lnum" on;
}

// Pointer events
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

// User select
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }