$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),
  'brand-highlight': var(--color-brand-highlight),
  '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;
  }
}