$gaps: (
	'0': 0,
	'auto': auto,
	'xs': var(--gap-xs),
	'sm': var(--gap-sm),
	'md': var(--gap-md),
	'lg': var(--gap-lg),
	'xl': var(--gap-xl),
);

@each $name, $value in $gaps {
  [class*="padding-#{$name}"] {
	padding: $value;
  }
  [class*="padding-inline-#{$name}"] {
	padding-inline: $value;
  }
  [class*="padding-block-#{$name}"] {
	padding-block: $value;
  }
  [class*="padding-top-#{$name}"] {
	padding-top: $value;
  }
  [class*="padding-bottom-#{$name}"] {
	padding-bottom: $value;
  }
  [class*="padding-left-#{$name}"] {
	padding-left: $value;
  }
  [class*="padding-right-#{$name}"] {
	padding-right: $value;
  }
  [class*="margin-#{$name}"] {
	margin: $value;
  }
  [class*="margin-inline-#{$name}"] {
	margin-inline: $value;
  }
  [class*="margin-block-#{$name}"] {
	margin-block: $value;
  }
  [class*="margin-top-#{$name}"] {
	margin-top: $value;
  }
  [class*="margin-bottom-#{$name}"] {
	margin-bottom: $value;
  }
  [class*="margin-left-#{$name}"] {
	margin-left: $value;
  }
  [class*="margin-right-#{$name}"] {
	margin-right: $value;
  }
}

$bg-colors: (
	'base': var(--color-bg),
	'raised': var(--color-raised-bg),
	'clickable': var(--color-button-bg),
	'brand': var(--color-brand),
	'red': var(--color-red),
	'orange': var(--color-orange),
	'green': var(--color-green),
	'blue': var(--color-blue),
	'purple': var(--color-purple),
	'gray': var(--color-gray),
);

@each $name, $value in $bg-colors {
  [class*="bg-#{$name}"] {
	background-color: $value;
  }
}

$colors: (
	'base': var(--color-base),
	'contrast': var(--color-contrast),
	'accent-contrast': var(--color-accent-contrast),
	'brand': var(--color-brand),
	'red': var(--color-red),
	'orange': var(--color-orange),
	'green': var(--color-green),
	'blue': var(--color-blue),
	'purple': var(--color-purple),
	'gray': var(--color-gray),
);

@each $name, $value in $colors {
  [class*="color-#{$name}"] {
	color: $value;
  }
}

$radii: (
	'0': 0,
	'xs': var(--radius-xs),
	'sm': var(--radius-sm),
	'md': var(--radius-md),
	'lg': var(--radius-lg),
	'xl': var(--radius-xl),
	'max': var(--radius-max),
);

@each $name, $value in $gaps {
  [class*="radius-#{$name}"] {
	border-radius: $value;
  }
  [class*="radius-top-left-#{$name}"] {
	border-top-left-radius: $value;
  }
  [class*="radius-bottom-left-#{$name}"] {
	border-bottom-left-radius: $value;
  }
  [class*="radius-top-right-#{$name}"] {
	border-top-right-radius: $value;
  }
  [class*="radius-bottom-right-#{$name}"] {
	border-bottom-right-radius: $value;
  }
  [class*="radius-top-#{$name}"] {
	border-top-right-radius: $value;
	border-top-left-radius: $value;
  }
  [class*="radius-bottom-#{$name}"] {
	border-bottom-right-radius: $value;
	border-bottom-left-radius: $value;
  }
  [class*="radius-left-#{$name}"] {
	border-top-left-radius: $value;
	border-bottom-left-radius: $value;
  }
  [class*="radius-right-#{$name}"] {
	border-top-right-radius: $value;
	border-bottom-right-radius: $value;
  }
}