$remify-baseline: 16 !default;
$anecdote-spacing-an4a2q: (
  tiny: 0.15,
  small: 0.6,
  standard: 1,
  big: 2.5,
  mega: 4
);
$respond-devices: (
  medium-handheld: 350px,
  large-handheld: 450px,
  tablet: 650px,
  medium-tablet: 775px,
  laptop: 960px,
  large-monitor: 1300px
);
$respond-device-medium-handheld: map-get($respond-devices, medium-handheld);
$respond-device-large-handheld: map-get($respond-devices, large-handheld);
$respond-device-tablet: map-get($respond-devices, tablet);
$respond-device-medium-tablet: map-get($respond-devices, medium-tablet);
$respond-device-laptop: map-get($respond-devices, laptop);
$respond-device-large-monitor: map-get($respond-devices, large-monitor);
$fix-mqs: false !default;
$color-strokes: #e9e9e9 !default;



@mixin scope-variation($sel) {
  @at-root #{selector-append($sel, &)} {
    @content;
  }
}




@mixin formatted-text( $tmp-size: 1, $tmp-margin-top: 1, $tmp-margin-bottom: 1, $tmp-line-height: 1.65 ) {
  font-size: $tmp-size * 1em;
  @if $tmp-line-height != false {
    line-height: ( 1 + ( ( $tmp-line-height - 1 ) / $tmp-size ) ) * 1em;
  }
  @if $tmp-margin-top != false {
    margin-top: ( $tmp-margin-top / $tmp-size ) * 1em;
  }
  @if $tmp-margin-bottom != false {
    margin-bottom: ( $tmp-margin-bottom / $tmp-size ) * 1em;
  }
}


// remify units

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin remify($properties, $values...) {
  @each $property in $properties {
    $max: length($values);
    $pxValues: '';
    $remValues: '';

    @for $i from 1 through $max {
      $value: strip-unit(nth($values, $i));
      $pxValues: #{$pxValues + round($value*$remify-baseline)}px;
      @if $i < $max {
        $pxValues: #{$pxValues + " "};
      }
    }

    @for $i from 1 through $max {
      $value: strip-unit(nth($values, $i));
      $remValues: #{$remValues + $value}rem;
      @if $i < $max {
        $remValues: #{$remValues + " "};
      }
    }

    #{$property}: $pxValues;
    #{$property}: $remValues;
  }
}


// responsive breakpoints
@mixin respond($type, $device: false) {
  // Determine device width
  $width: 1px;
  @if $device == medium-handheld {
    $width: $respond-device-medium-handheld;
  } @else if $device == large-handheld {
    $width: $respond-device-large-handheld;
  } @else if $device == tablet {
    $width: $respond-device-tablet;
  } @else if $device == medium-tablet {
    $width: $respond-device-medium-tablet;
  } @else if $device == laptop {
    $width: $respond-device-laptop;
  } @else if $device == large-monitor {
    $width: $respond-device-large-monitor;
  }
  // If we're outputting for a fixed media query set...
  @if $fix-mqs and $type == min {
    // ...and if we should apply these rules...
    @if $fix-mqs >= $width {
      // ...output the content the user gave us.
      @content;
    }
  } @else {
    // Otherwise, output it using a regular media query
    @if $type == min {
      @media (min-width: $width) {
        @content;
      }
    } @else if $type == max {
      @media (max-width: $width) {
        @content;
      }
    } @else if $type == retina {
      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        @content;
      }
    }
  }
}

$old-ie: false !default;
@mixin old-ie {
  // Only use this content if we're dealing with old IE
  @if $old-ie {
    @content;
  }
}


@mixin padding-vertical( $tmp-size, $tmp-second-size: false ) {
  padding-top: $tmp-size;
  @if $tmp-second-size == false {
    $tmp-second-size: $tmp-size;
  }
  padding-bottom: $tmp-second-size;
}

@mixin padding-horizontal( $tmp-size, $tmp-second-size: false ) {
  padding-left: $tmp-size;
  @if $tmp-second-size == false {
    $tmp-second-size: $tmp-size;
  }
  padding-right: $tmp-second-size;
}

@mixin margin-vertical( $tmp-size, $tmp-second-size: false ) {
  margin-top: $tmp-size;
  @if $tmp-second-size == false {
    $tmp-second-size: $tmp-size;
  }
  margin-bottom: $tmp-second-size;
}

@mixin margin-horizontal( $tmp-size, $tmp-second-size: false ) {
  margin-left: $tmp-size;
  @if $tmp-second-size == false {
    $tmp-second-size: $tmp-size;
  }
  margin-right: $tmp-second-size;
}