$disable-progressive-enhancements-dj3nar: false !default;
$fix-mqs: false !default;
$old-ie: false !default;

$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);
$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;
  } @else if type-of($device) == number {
    $width: $device;
  }
  // 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;
      }
    }
  }
}

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



//-----------------------------------------------
// progressive enhancements
//-----------------------------------------------

@function join-array-with-string-dj3nar($list, $glue: '', $is-nested: false) {
  $result: null;

  @for $i from 1 through length($list) {
    $e: nth($list, $i);

    @if type-of($e) == list {
      $result: $result#{join-array-with-string-dj3nar($e, $glue, true)};
    }

    @else {
      $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e});
    }
  }

  @return $result;
}

@mixin supports( $properties... ) {
  $features: ();

  // loop over all the properties and add to feature query
  @each $property in $properties {

    @if $property == 'svg-background' {
      $features: append( $features, "background: url(\"data:image/svg+xml;charset=utf8,%3Csvg fill='%23fff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\")" );

    } @else if $property == 'background-size' {
      $features: append( $features, 'background-size: 100% 100%');

    } @else if $property == 'appearance-prefixed' {
      $features: append( $features, '(-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)');

    } @else if $property == 'advanced-box-shadow' {
      $features: append( $features, 'box-shadow: inset 0 0 1px rgba(0,0,0,.11), 0 1px 2px rgba(0,0,0,.22)');

    } @else if $property == 'flexbox' {
      $features: append( $features, 'display: flex');

    } @else if $property == 'grid' {
      $features: append( $features, 'display: grid');

    }

  }

  // add bogus feature query as a way to globally disable all progressive enhancements
  @if $disable-progressive-enhancements-dj3nar {
    $features: append( $features, 'holi: badoli');
  }

  // construct the feature query and scope it around the @content
  @supports #{ '(#{ join-array-with-string-dj3nar( $features, ') and (' ) })' } {
    @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;
}