@use 'variables' as vars;

/*
 * spacing helpers
 */

// padding top
// /////////////////////////////////////////////////////////////////////////////
$paddings-t: (
  'pt0': 0,
  'pt1': vars.$spacing-xs,
  'pt2': vars.$spacing-sm
);

@each $padding, $value in $paddings-t {
  .#{$padding} {
    padding-top: #{$value};
  }
}

// margin bottom
// /////////////////////////////////////////////////////////////////////////////
$margins-b: (
  'mb1': vars.$spacing-xs,
  'mb2': vars.$spacing-sm
);

@each $margin, $value in $margins-b {
  .#{$margin} {
    margin-bottom: #{$value};
  }
}

// margin right
// /////////////////////////////////////////////////////////////////////////////
$margins-r: (
  'mr1': vars.$spacing-xs,
  'mr2': vars.$spacing-sm,
  'mr3': vars.$spacing-md,
  'mr4': vars.$spacing-lg
);

@each $margin, $value in $margins-r {
  .#{$margin} {
    margin-right: #{$value};
  }
}

// margin left
// /////////////////////////////////////////////////////////////////////////////
$margins-l: (
  'ml1': vars.$spacing-xs
);

@each $margin, $value in $margins-l {
  .#{$margin} {
    margin-left: #{$value};
  }
}

// margin top
// /////////////////////////////////////////////////////////////////////////////
$margins-t: (
  'mt1': vars.$spacing-xs
);

@each $margin, $value in $margins-t {
  .#{$margin} {
    margin-top: #{$value};
  }
}

$spacers: (
  'spacerhalf': 4,
  'spacer1': vars.$spacing-xs,
  'spacer2': vars.$spacing-sm,
  'spacer3': vars.$spacing-md,
  'spacer4': vars.$spacing-lg,
  'spacer6': vars.$spacing-xxl
);

// height spacer
// /////////////////////////////////////////////////////////////////////////////
@each $spacer, $value in $spacers {
  .#{$spacer} {
    height: #{$value};
    width: 100%;
  }
}

// width spacer
// /////////////////////////////////////////////////////////////////////////////
@each $spacer, $value in $spacers {
  .#{$spacer}w {
    height: 100%;
    width: #{$value};
  }
}
