/*
  TODO: replace with CSS variables/tokens
*/

$spacing: (
  16x: var(--cbp-space-16x),
  15x: var(--cbp-space-15x),
  14x: var(--cbp-space-14x),
  13x: var(--cbp-space-13x),
  12x: var(--cbp-space-12x),
  11x: var(--cbp-space-11x),
  10x: var(--cbp-space-10x),
  9x: var(--cbp-space-9x),
  8x: var(--cbp-space-8x),
  7x: var(--cbp-space-7x),
  6x: var(--cbp-space-6x),
  5x: var(--cbp-space-5x),
  4x: var(--cbp-space-4x),
  3x: var(--cbp-space-3x),
  2x: var(--cbp-space-2x),
  1x: var(--cbp-space-1x),
  half-x: var(--cbp-space-half-x),
  1px: 1px,
  0: 0
);

@each $name, $space in $spacing {
  .cbp-margin-#{$name} {
    margin: #{$space};
  }

  .cbp-margin-top-#{$name} {
    margin-top: #{$space};
  }

  .cbp-margin-bottom-#{$name} {
    margin-bottom: #{$space};
  }

  .cbp-margin-right-#{$name} {
    margin-right: #{$space};
  }

  .cbp-margin-left-#{$name} {
    margin-left: #{$space};
  }

  .cbp-margin-x-#{$name} {
    margin-left: #{$space};
    margin-right: #{$space};
  }

  .cbp-margin-y-#{$name} {
    margin-top: #{$space};
    margin-bottom: #{$space};
  }
}

@each $name, $space in $spacing {
  .cbp-padding-#{$name} {
    padding: #{$space};
  }

  .cbp-padding-top-#{$name} {
    padding-top: #{$space};
  }

  .cbp-padding-bottom-#{$name} {
    padding-bottom: #{$space};
  }

  .cbp-padding-right-#{$name} {
    padding-right: #{$space};
  }

  .cbp-padding-left-#{$name} {
    padding-left: #{$space};
  }

  .cbp-padding-x-#{$name} {
    padding-left: #{$space};
    padding-right: #{$space};
  }

  .cbp-padding-y-#{$name} {
    padding-top: #{$space};
    padding-bottom: #{$space};
  }
}