SCSS Variables

/**
 * Responsive breakpoints map defining screen size thresholds
 * Keys correspond to device types, values are minimum widths
 * Phone breakpoint is 0px (applies to all sizes until tablet)
 */
$breakpoints: (
  desktop: 840px,
  tablet: 600px,
  phone: 0px,
) !default;

// Customize breakpoints before importing
$breakpoints: (
  desktop: 1024px,
  tablet: 768px,
  phone: 0px,
);

@use "@material/layout-grid" with (
  $breakpoints: $breakpoints
);

/**
 * Column count map defining number of columns per device type
 * Desktop has 12 columns, tablet has 8, phone has 4
 */
$columns: (
  desktop: 12,
  tablet: 8,
  phone: 4,
) !default;

// Create a 16-column desktop layout
$columns: (
  desktop: 16,
  tablet: 8,
  phone: 4,
);

@use "@material/layout-grid" with (
  $columns: $columns
);

/**
 * Default margin map defining space between grid edge and first cell
 * Applied to the outer grid container on each device type
 */
$default-margin: (
  desktop: 24px,
  tablet: 16px,
  phone: 16px,
) !default;

/**
 * Default gutter map defining space between adjacent cells
 * Applied between cells within the grid on each device type
 */
$default-gutter: (
  desktop: 24px,
  tablet: 16px,
  phone: 16px,
) !default;

// Increase desktop spacing
$default-margin: (
  desktop: 32px,
  tablet: 16px,
  phone: 16px,
);

$default-gutter: (
  desktop: 32px,
  tablet: 16px,
  phone: 16px,
);

@use "@material/layout-grid" with (
  $default-margin: $default-margin,
  $default-gutter: $default-gutter
);

// Tighter mobile spacing
$tight-spacing: (
  desktop: 24px,
  tablet: 12px,
  phone: 8px,
);

@use "@material/layout-grid" with (
  $default-margin: $tight-spacing,
  $default-gutter: $tight-spacing
);

/**
 * Column width map for fixed-width grid layouts
 * Used when .mdc-layout-grid--fixed-column-width class is applied
 * Default is 72px for all device types
 */
$column-width: (
  desktop: 72px,
  tablet: 72px,
  phone: 72px,
) !default;

// Wider columns for desktop
$column-width: (
  desktop: 80px,
  tablet: 72px,
  phone: 60px,
);

@use "@material/layout-grid" with (
  $column-width: $column-width
);

/**
 * Default column span for grid cells when no span class is specified
 * Cells without explicit span classes will span this many columns
 */
$default-column-span: 4 !default;

/**
 * Maximum width constraint for the entire grid
 * Set to null for no maximum width constraint
 * When set, grid will not exceed this width regardless of screen size
 */
$max-width: null !default;

// Make cells span 3 columns by default instead of 4
@use "@material/layout-grid" with (
  $default-column-span: 3
);

// Add maximum width constraint
@use "@material/layout-grid" with (
  $max-width: 1200px
);

// Combine multiple customizations
@use "@material/layout-grid" with (
  $default-column-span: 6,
  $max-width: 1440px,
  $default-margin: (
    desktop: 32px,
    tablet: 24px,
    phone: 16px,
  )
);

// Define custom configuration
$custom-breakpoints: (
  large: 1200px,
  medium: 768px,
  small: 0px,
);

$custom-columns: (
  large: 16,
  medium: 12,
  small: 6,
);

$custom-spacing: (
  large: 40px,
  medium: 32px,
  small: 20px,
);

// Import with custom configuration
@use "@material/layout-grid" with (
  $breakpoints: $custom-breakpoints,
  $columns: $custom-columns,
  $default-margin: $custom-spacing,
  $default-gutter: $custom-spacing,
  $max-width: 1600px
);

// Only customize spacing, keep default breakpoints and columns
@use "@material/layout-grid" with (
  $default-margin: (
    desktop: 48px,
    tablet: 32px,
    phone: 24px,
  ),
  $default-gutter: (
    desktop: 32px,
    tablet: 24px,
    phone: 16px,
  )
);

// Tight theme
$tight-theme: (
  margin: (desktop: 16px, tablet: 12px, phone: 8px),
  gutter: (desktop: 16px, tablet: 12px, phone: 8px),
  max-width: 1024px,
);

// Spacious theme  
$spacious-theme: (
  margin: (desktop: 48px, tablet: 32px, phone: 24px),
  gutter: (desktop: 40px, tablet: 32px, phone: 24px),
  max-width: 1600px,
);

// Apply theme
@use "@material/layout-grid" with (
  $default-margin: map.get($spacious-theme, margin),
  $default-gutter: map.get($spacious-theme, gutter),
  $max-width: map.get($spacious-theme, max-width)
);