@import "../../settings/core";
@import "../../settings/media";

/*------------------------------------*\
    #SPACING-RESPONSIVE
\*------------------------------------*/

/**
 * Margin and padding helper classes. Use these to tweak layout on a micro
 * level.
 *
 * $spacing: mt|mr|mb|ml|mh|mv|pt|pr|pb|pl|ph|pv
 * $val: 0.25|0.5|0.75|1|1.25|1.5|1.75|2
 * $border: *px (combined border width in pixels)
 * $negative: true|false;
 *
 * @include vr-spacing(mt, 1, 2px, true);
 * margin-top 1rem minus 1px negative margin
**/

$breakpoints: ("small-up": $small-up, "small-only": $small-only, "medium-up": $medium-up, "medium-only": $medium-only, "large-up": $large-up, "large-only": $large-only, "xlarge-up": $xlarge-up, "xlarge-only": $xlarge-only, "xxlarge-up": $xxlarge-up, "xxlarge-only": $xxlarge-only) !default;


// spacing attribute map
$spacings: (m: "margin", mt: "margin-top", mr: "margin-right", mb: "margin-bottom", ml: "margin-left", mh: ("margin-right", "margin-left"), mv: ("margin-top", "margin-bottom"), p: "padding", pt: "padding-top", pr: "padding-right", pb: "padding-bottom", pl: "padding-left", ph: ("padding-right", "padding-left"), pv: ("padding-top", "padding-bottom")) !default;

// set margin to the nearest rem value to a baseline unit
@mixin vr-spacing($spacing: null, $val: 1, $border: 0px, $negative: false, $media: "small-up", $base-unit: $base-unit) {
  // error checking
  @if map_has_key($spacings, $spacing) == false {
    @warn "invalid spacing type: try m, mt, mr, mb, ml, mh, mv, p, pt, pr, pb, pl, ph, pv";
  }
  @else if unit($border) != "px" {
    @warn "a pixel value is required for $border: try 1px, 2px";
  }
  @else if unit($val) != "" {
    @warn "a unitless value is required for $val: try 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2";
  }
  @else if map_has_key($breakpoints, $media) == false {
    @warn "a valid breakpoint value is required for $media: try small-up, medium-up, large-up etc.";
  }
  @else {
    // get spacing attribute type
    $sp: map-get($spacings, $spacing);

    // get negative
    $n: if($negative, "-", "");

    // get rounded value minus border width
    $v: rem((round-to(px($val * 1rem), $base-unit) - $border) / 1px);

    @if $media != "small-up" {
      // use media query as needed
      & {
        @media #{map-get($breakpoints, $media)} {
          // first attribute
          #{nth($sp, 1)}: #{$n}#{$v};

          @if length($sp) != 1 {
            // second attribute as needed
            #{nth($sp, 2)}: #{$n}#{$v};
          }
        }
      }
    }
    @else {
      // first attribute
      #{nth($sp, 1)}: #{$n}#{$v};

      @if length($sp) != 1 {
        // second attribute as needed
        #{nth($sp, 2)}: #{$n}#{$v};
      }
    }
  }
}