@function sharp-linear-gradient($angle, $stops...) {
  @return sharp-stagger($angle: $angle, $stops: $stops);
}

@function sharp-repeating-linear-gradient($angle, $stops...) {
  @return sharp-stagger($repeating: true, $angle: $angle, $stops: $stops);
}

@function offset-sharp-repeating-linear-gradient($angle, $stops...) {
  @return sharp-stagger($repeating: true, $initial-offset: true, $angle: $angle, $stops: $stops);
}

@function cumulative-sharp-repeating-linear-gradient($angle, $stops...) {
  @return sharp-stagger($repeating: true, $cumulative: true, $angle: $angle, $stops: $stops);
}

@function sharp-radial-gradient($angle, $stops...) {
  @return sharp-stagger($type: 'radial', $angle: $angle, $stops: $stops);
}

@function fuzzy-radial-gradient($angle, $stops...) {
  @return sharp-stagger($type: 'radial', $angle: $angle, $stagger: 1, $stops: $stops);
}

@function sharp-repeating-radial-gradient($angle, $stops...) {
  @return sharp-stagger($repeating: true, $type: 'radial', $angle: $angle, $stops: $stops);
}

@function cumulative-sharp-radial-gradient($angle, $stops...) {
  @return sharp-stagger($type: 'radial', $cumulative: true, $angle: $angle, $stops: $stops);
}

@function is-stop($angle) {
  @if type-of($angle) == 'list' {
    @return type-of(nth($angle, 1)) == 'color';
  }
  @return type-of($angle) == 'color';
}

@function sharp-stagger($repeating: false, $type: 'linear', $angle: 180deg, $stagger: 0, $cumulative: false, $initial-offset: false, $stops: ()) {
  $args: ();
  $has-angle: true;
  $cum: 0;

  @if is-stop($angle) {
    $stops: join(append((), $angle, comma), $stops);
    $has-angle: false;
  }

  @for $i from 1 through length($stops) {
    $stop: nth($stops, $i);
    $stop-color: nth($stop, 1);
    $dump: ();

    @if $i > 1 {
      $previous-stop: nth($stops, $i - 1);
      $previous-stop-pos: nth($previous-stop, 2);
      $start-pos: 0;
      @if $stagger > 0 {
        $start-pos: $previous-stop-pos + $stagger;
      }
      $dump: append($dump, $stop-color $start-pos);
      @if $i != length($stops) or $repeating {
        @if $cumulative {
          $cum: $cum + nth($stop, 2);
          $stop: $stop-color $cum;
        }
        $dump: append($dump, $stop);
      }
    }
    @else {
      @if $repeating and not $initial-offset {
        $dump: append($dump, $stop-color 0);
      }
      $dump: append($dump, $stop);
      @if $cumulative {
        $cum: nth($stop, 2);
      }
    }

    $args: join($args, $dump, comma);
  }

  @if $has-angle {
    $args: join(append((), $angle, comma), $args);
  }

  @if $type == "radial" {
    @if $repeating {
      @return repeating-radial-gradient($args...);
    }
    @else {
      @return radial-gradient($args...);
    }
  }
  @else {
    @if $repeating {
      @return repeating-linear-gradient($args...);
    }
    @else {
      @return linear-gradient($args...);
    }
  }
}

$tr: transparent;

// https://unindented.org/articles/trigonometry-in-sass/
@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@function tan($angle) {
  @return sin($angle) / cos($angle);
}

@function unitless-rad-to-deg($rad) {
  @return $rad * 180deg / pi();
}

@function atan($tan) {
  $atan: 0;
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $atan: $atan + pow(-1, $i) * pow($tan, (2 * $i + 1)) / (2 * $i + 1);
  }
  @return unitless-rad-to-deg($atan);
}

// http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
$default-threshold: pi()/180/10;
@function asin($z, $threshold: $default-threshold) {
  $sum: 0;
  $complement: false;
  $sign: $z/abs($z);
  $z: abs($z);

  @if $z > sin(pi()/4) {
    $complement: true;
    $z: sqrt(1 - pow($z, 2));
  }

  $term: $z;
  $i: 0;
  $k: 1;

  @while $term > $threshold {
    $sum: $sum + $term;

    $i: $i + 1;
    $k: $k*(2*$i - 1)/(2*$i);
    $j: 2*$i + 1;

    $term: $k*pow($z, $j)/$j;
  }

  @return unitless-rad-to-deg($sign * (if($complement, pi()/2 - $sum, $sum)));
}

// https://css-tricks.com/snippets/sass/strip-unit-function/
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function percent-to-decimal($percent) {
  @return strip-unit($percent) / 100;
}

/// @link http://lea.verou.me/css3patterns/#honeycomb
/// @group lea-verou
/// @param {color} $background-color [#fb1]
/// @param {color} $line-color [#b71]
/// @param {length} $scale [60px]
/// @param {boolean} $set-relative [true] - if true, $background-color can also control $line-color
@mixin honeycomb(
  $background-color: #fb1,
  $line-color: #b71,
  $scale: 60px,
  $set-relative: true
) {
  @if $set-relative and $background-color != #fb1 {
    @if $line-color == #b71 {
      $line-color: darken(adjust-hue(desaturate($background-color, 17%), -7deg), 13%);
    }
  }

  background-image:
      sharp-radial-gradient(circle farthest-side at 0% 50%, $background-color 23.5%, $tr),
      sharp-radial-gradient(circle farthest-side at 0% 50%, $line-color 24%, $tr),
      sharp-linear-gradient(to bottom, $background-color 14%, $tr 85%, $background-color),
      sharp-linear-gradient(150deg, $background-color 24%, $line-color 26%, $tr 74%, $line-color 76%, $background-color),
      sharp-linear-gradient(30deg,  $background-color 24%, $line-color 26%, $tr 74%, $line-color 76%, $background-color),
      sharp-linear-gradient(90deg, $line-color 2%, $background-color 98%, $line-color);
  background-position:
      $scale * 21 / 60 $scale / 2,
      $scale * 19 / 60 $scale / 2,
      0 0,
      0 0,
      0 0,
      0 0;
  background-size: $scale / 1.5 $scale;
  background-color: $background-color;
}

/// @link http://lea.verou.me/css3patterns/#tablecloth
/// @group lea-verou
/// @param {color} $color [rgba(200, 0, 0, .5)]
/// @param {color} $background-color [white]
/// @param {length} $scale [50px]
/// @param {length} $color-width [50%]
@mixin gingham(
  $color: rgba(200, 0, 0, .5),
  $background-color: white,
  $scale: 50px,
  $color-width: 50%
) {
  $stops: $color $color-width, $tr;
  background-image:
    sharp-linear-gradient(90deg, $stops...),
    sharp-linear-gradient(0deg,  $stops...);
  background-size: $scale $scale;
  background-color: $background-color;
}

/// @link http://lea.verou.me/css3patterns/#chocolate-weave
/// @group lea-verou
/// @param {color} $background-color [#753]
/// @param {length} $scale [25px]
/// @param {color} $first-color [#dca]
/// @param {color} $second-color [#a85]
/// @param {boolean} $set-relative [true] - if true, $background-color can also control $first-color and $second-color
@mixin weave(
  $background-color: #753,
  $scale: 25px,
  $first-color: #dca,
  $second-color: #a85,
  $set-relative: true
) {
  @if $set-relative and $background-color != #753 {
    @if $second-color == #a85 {
      $second-color: lighten(adjust-hue(desaturate($background-color, 7%), 6deg), 17%);
    }
    @if $first-color == #dca {
      $first-color: lighten(adjust-hue(saturate($background-color, 3%), 10deg), 44%);
    }
  }
  background-image:
    sharp-linear-gradient(45deg, $first-color 12%, $tr 88%, $first-color),
    sharp-linear-gradient(135deg, $tr 37%, $second-color 63%, $tr),
    sharp-linear-gradient(45deg, $tr 37%, $first-color 63%, $tr);
  background-color: $background-color;
  background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#seigaiha
/// @group lea-verou
/// @param {color} $color [white]
/// @param {color} $background-color [silver]
/// @param {length} $scale [100px]
@mixin seigaiha($color: white, $background-color: silver, $scale: 100px) {
  background-image:
    radial-gradient(circle at 100% 150%, $background-color 24%, $color 25%, $color 28%, $background-color 29%, $background-color 36%, $color 36%, $color 40%, $tr 40%),
    radial-gradient(circle at 0 150%, $background-color 24%, $color 25%, $color 28%, $background-color 29%, $background-color 36%, $color 36%, $color 40%, $tr 40%),
    radial-gradient(circle at 50% 100%, $color 10%, $background-color 11%, $background-color 23%, $color 24%, $color 30%, $background-color 31%, $background-color 43%, $color 44%, $color 50%, $background-color 51%, $background-color 63%, $color 64%, $color 71%, $tr 71%),
    radial-gradient(circle at 100% 50%, $color 5%, $background-color 6%, $background-color 15%, $color 16%, $color 20%, $background-color 21%, $background-color 30%, $color 31%, $color 35%, $background-color 36%, $background-color 45%, $color 46%, $color 49%, $tr 49%),
    radial-gradient(circle at 0 50%, $color 5%, $background-color 6%, $background-color 15%, $color 16%, $color 20%, $background-color 21%, $background-color 30%, $color 31%, $color 35%, $background-color 36%, $background-color 45%, $color 46%, $color 49%, $tr 49%);
  background-color: $background-color;
  background-size: $scale $scale / 2;
}

/// @link http://lea.verou.me/css3patterns/#japanese-cube
/// @group lea-verou
/// @param {color} $background-color [#556]
/// @param {color} $second-color [#445]
/// @param {color} $third-color [#99a]
/// @param {length} $scale [140px]
/// @param {boolean} $set-relative [true] - if true, $background-color can also control $second-color and $third-color
@mixin japanese-cube(
  $background-color: #556,
  $second-color: #445,
  $third-color: #99a,
  $scale: 140px,
  $set-relative: true
) {
    @if $set-relative and $background-color != #556 {
      @if $second-color == #445 {
        $second-color: darken(saturate($background-color, 2%), 7%);
      }
      @if $third-color == #99a {
        $third-color: lighten($background-color, 26%);
      }
    }
    $stops: $second-color 12%, $tr 12.5%, $tr 87%, $second-color 87.5%;
    $other-stops: $third-color 25%, $tr 25.5%, $tr 75%, $third-color 75%;
    $long-dim: $scale;
    $short-dim: $scale * 4 / 7;
    background-image:
      linear-gradient(30deg,  $stops...),
      linear-gradient(150deg, $stops...),
      linear-gradient(30deg,  $stops...),
      linear-gradient(150deg, $stops...),
      linear-gradient(60deg,  $other-stops...),
      linear-gradient(60deg,  $other-stops...);
    background-position:
      0 0,
      0 0,
      $short-dim / 2 $long-dim / 2,
      $short-dim / 2 $long-dim / 2,
      0 0,
      $short-dim / 2 $long-dim / 2;
    background-size: $short-dim $long-dim;
    background-color: $background-color;
}

/// @link http://thenewcode.com/1057/SVG-Patterns-of-Japan
/// @param {color} $line-color [black]
/// @param {color} $background-color [white]
/// @param {length} $scale [140px]
@mixin asanoha($line-color: black, $background-color: white, $scale: 140px) {
    $stops: $background-color 12%, $line-color 13%, $tr 87%, $line-color 88%, $background-color;
    $other-stops: $line-color 1%, $tr 99%, $line-color;
    $other-stops-thinner: $line-color .5%, $tr 99.5%, $line-color;
    $last-stops: $tr 24.5%, $line-color 25.5%, $tr 74.5%, $line-color 75.5%, $tr;
    $long-dim: $scale;
    $short-dim: $scale * 4 / 7;
    background-image:
      sharp-linear-gradient(0deg,   $other-stops-thinner...),
      sharp-linear-gradient(0deg,   $other-stops-thinner...),
      sharp-linear-gradient(120deg, $last-stops...),
      sharp-linear-gradient(60deg,  $last-stops...),
      sharp-linear-gradient(30deg,  $stops...),
      sharp-linear-gradient(150deg, $stops...),
      sharp-linear-gradient(30deg,  $stops...),
      sharp-linear-gradient(150deg, $stops...),
      sharp-linear-gradient(90deg,  $other-stops...),
      sharp-linear-gradient(90deg,  $other-stops...);
    background-position:
      0 0,
      0 $long-dim / 2,
      0 0,
      0 0,
      0 0,
      0 0,
      $short-dim / 2 $long-dim / 2,
      $short-dim / 2 $long-dim / 2,
      0 0,
      $short-dim / 2 $long-dim / 2;
    background-size: $short-dim $long-dim;
    background-color: $background-color;
}

/// @link http://lea.verou.me/css3patterns/#carbon
/// @group lea-verou
/// @param {color} $background-color [#131313]
/// @param {color} $first-color [#151515]
/// @param {color} $second-color [#222]
/// @param {color} $third-color [#1b1b1b]
/// @param {color} $fourth-color [#1d1d1d]
/// @param {color} $fifth-color [#1a1a1a]
/// @param {color} $sixth-color [#242424]
/// @param {length} $scale [20px]
@mixin carbon(
  $background-color: #131313,
  $first-color: #151515,
  $second-color: #222,
  $third-color: #1b1b1b,
  $fourth-color: #1d1d1d,
  $fifth-color: #1a1a1a,
  $sixth-color: #242424,
  $scale: 20px
) {
    background-image:
      sharp-linear-gradient(
        27deg,
        $first-color $scale * .25,
        $tr
      ),
      sharp-linear-gradient(
        207deg,
        $first-color $scale * .25,
        $tr
      ),
      sharp-linear-gradient(
        27deg,
        $second-color $scale * .25,
        $tr
      ),
      sharp-linear-gradient(
        207deg,
        $second-color $scale * .25,
        $tr
      ),
      sharp-linear-gradient(
        90deg,
        $third-color $scale * .5,
        $tr
      ),
      sharp-linear-gradient(
        $fourth-color 25%,
        $fifth-color 50%,
        $tr 75%,
        $sixth-color
      );
    background-position:
      0 $scale * .25,
      $scale * .5 0,
      0 $scale * .5,
      $scale * .5 $scale * .25,
      0 0,
      0 0;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#marrakesh
/// @group lea-verou
/// @param {color} $background-color [white]
/// @param {color} $color [midnightblue]
/// @param {length} $scale [90px] - hint: use a multiple of 3px
/// @param {length} $dot-size [10%] - relative to $scale
@mixin marrakesh(
  $background-color: white,
  $color: midnightblue,
  $scale: 90px,
  $dot-size: 10%
) {
    $dot-size: percent-to-decimal($dot-size) * $scale;
    background-color: $background-color;
    background-image:
      // sharp-stagger(false, "radial", circle, 1, $color 43%, $tr),
      // sharp-stagger(false, "radial", circle, 1, $tr 31.4%, $color 39%, $tr 78%, $color 84%, $tr);
      // sharp-stagger(false, 'radial', circle, 1, $color $dot-size, $tr),
      // sharp-stagger(false, 'radial', circle, 1, $tr $scale * 2/9, $color $scale * 25/90, $tr $scale * 5/9, $color $scale * 54/90, $tr);
      fuzzy-radial-gradient(circle, $color $dot-size, $tr),
      fuzzy-radial-gradient(circle, $tr $scale * 2/9, $color $scale * 25/90, $tr $scale * 5/9, $color $scale * 54/90, $tr);
    background-size: $scale / 3 $scale / 3, $scale $scale
}

/// @link http://lea.verou.me/css3patterns/#diagonal-stripes
/// @group lea-verou
/// @param {color} $background-color [gray]
/// @param {color} $stripe-color [rgba(255, 255, 255, .5)]
/// @param {direction} $angle [45deg]
/// @param {length} $scale [70px]
/// @param {length} $stripe-width [50%] - relative to $scale
@mixin diagonal-stripes(
  $background-color: gray,
  $stripe-color: rgba(255, 255, 255, .5),
  $angle: 45deg,
  $scale: 70px,
  $stripe-width: 50%
) {
    $stripe-width: percent-to-decimal($stripe-width) * $scale;
    background-color: $background-color;
    background-image:
      repeating-linear-gradient($angle, $tr, $tr $scale - $stripe_width, $stripe-color $scale - $stripe_width, $stripe-color $scale);
}

/// @link http://lea.verou.me/css3patterns/#horizontal-stripes
/// @group lea-verou
/// @param {color} $background-color [gray]
/// @param {color} $stripe-color [rgba(255, 255, 255, .5)]
/// @param {length} $scale [50px]
/// @param {length} $stripe-width [50%]
@mixin horizontal-stripes($background-color: gray, $stripe-color: rgba(255, 255, 255, .5), $scale: 50px, $stripe-width: 50%) {
    background-color: $background-color;
    background-image:
      sharp-linear-gradient(0deg, $tr 100% - $stripe-width, $stripe-color $stripe-width);
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#vertical-stripes
/// @group lea-verou
/// @param {color} $background-color [gray]
/// @param {color} $stripe-color [rgba(255, 255, 255, .5)]
/// @param {length} $scale [50px]
/// @param {length} $stripe-width [50%]
@mixin vertical-stripes($background-color: gray, $stripe-color: rgba(255, 255, 255, .5), $scale: 50px, $stripe-width: 50%) {
    background-color: $background-color;
    background-image:
      sharp-linear-gradient(90deg, $tr 100% - $stripe-width, $stripe-color $stripe-width);
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#microbial-mat
/// @group lea-verou
/// @param {color} $background-color [#8a3]
/// @param {color} $line-color [#613]
/// @param {length} $scale [20px]
/// @param {length} $line-thickness [1px]
@mixin microbial-mat($background-color: #8a3, $line-color: #613, $scale: 20px, $line-thickness: 1px) {
    $tr-line-color: rgba($line-color, 0);
    $stops:
      $tr-line-color $scale / 2 - ($line-thickness + 1) / 2,
      $line-color    $scale / 2 - ($line-thickness + 1) / 2 + 1,
      $line-color    $scale / 2 + ($line-thickness + 1) / 2 - 1,
      $tr-line-color $scale / 2 + ($line-thickness + 1) / 2;
    background-image:
      radial-gradient(circle at 0% 50%,    $stops...),
      radial-gradient(circle at 100% 100%, $stops...);
    background-position:
      0px $scale / 2,
      0 0;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#checkerboard
/// @group lea-verou
/// @param {color} $background-color [#eee]
/// @param {color} $color [black]
/// @param {length} $scale [60px]
@mixin checkerboard($background-color: #eee, $color: black, $scale: 60px) {
    $stops: $color 25%, $tr 75%, $color;
    background-image:
      sharp-linear-gradient(45deg, $stops...),
      sharp-linear-gradient(45deg, $stops...);
    background-position:
      0 0,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#diagonal-checkerboard
/// @group lea-verou
/// @param {color} $background-color [#eee]
/// @param {color} $color [black]
/// @param {length} $scale [60px]
@mixin diagonal-checkerboard($background-color: #eee, $color: black, $scale: 60px) {
    $stops: $color 25%, $tr 75%, $color;
    background-image:
      sharp-linear-gradient(45deg, $stops...),
      sharp-linear-gradient(-45deg, $stops...);
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#weave
/// @group lea-verou
/// @param {color} $background-color [#708090]
/// @param {color} $line-color [#d9ecff]
/// @param {length} $scale [128px]
/// @param {length} $line-thickness [2px]
@mixin brick-inlay($background-color: #708090, $line-color: #d9ecff, $scale: 128px, $line-thickness: 2px) {
    $stops:
      $background-color ($scale * 23 / 128) - $line-thickness / 2,
      $line-color       ($scale * 23 / 128) + $line-thickness / 2,
      $tr               ($scale * 68 / 128) - $line-thickness / 2,
      $line-color       ($scale * 68 / 128) + $line-thickness / 2,
      $tr;
    background-image:
      sharp-linear-gradient(135deg, $stops...),
      sharp-linear-gradient(225deg, $stops...);
    background-position:
      0 0,
      0 $scale / 2;
    background-color: $background-color;
    background-size: $scale / 2 $scale;
}

/// @link http://lea.verou.me/css3patterns/#hearts
/// @group lea-verou
/// @param {color} $background-color [#b03]
/// @param {color} $color [#d35]
/// @param {length} $scale [100px]
@mixin hearts($background-color: #b03, $color: #d35, $scale: 100px) {
    $tr-color:            rgba($color,            0);
    $tr-background-color: rgba($background-color, 0);
    $heart-gradients:
      fuzzy-radial-gradient(circle closest-side at 60% 43%, $background-color 26%, $tr-background-color),
      fuzzy-radial-gradient(circle closest-side at 40% 43%, $background-color 26%, $tr-background-color),
      fuzzy-radial-gradient(circle closest-side at 40% 22%, $color 45%, $tr-color),
      fuzzy-radial-gradient(circle closest-side at 60% 22%, $color 45%, $tr-color),
      fuzzy-radial-gradient(circle closest-side at 50% 35%, $color 30%, $tr-color);
    background-image:
      $heart-gradients,
      $heart-gradients;
    background-color: $background-color;
    background-size: $scale $scale;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, $scale / 2 $scale / 2, $scale / 2 $scale / 2, $scale / 2 $scale / 2, $scale / 2 $scale / 2, $scale / 2 $scale / 2;
}

/// @link http://lea.verou.me/css3patterns/#arrows
/// @group lea-verou
/// @param {color} $background-color [#e1ebbd]
/// @param {color} $color [#92baac]
/// @param {length} $scale [128px]
@mixin arrows($background-color: #e1ebbd, $color: #92baac, $scale: 128px) {
    background-image:
      sharp-linear-gradient(45deg, $color $scale * 45 / 128, $tr),
      sharp-linear-gradient(45deg, $color $scale * 45 / 128, $tr $scale * 91 / 128, $background-color $scale * 135 / 128, $tr),
      sharp-linear-gradient(-45deg, $color $scale * 23 / 128, $tr $scale * 68 / 128, $color $scale * 113 / 128, $tr $scale * 158 / 128, $color);
    background-position:
      $scale / 2 $scale / 2,
      0 0,
      0 0;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#half-rombes
/// @group lea-verou
/// @param {color} $background-color [#36c]
/// @param {color} $color [rgba(255, 255, 255, .8)]
/// @param {length} $scale [15px]
@mixin half-rombes($background-color: #36c, $color: rgba(255, 255, 255, .8), $scale: 15px) {
    $stops: $tr 75%, $color;
    background-image:
      sharp-linear-gradient(115deg, $stops...),
      sharp-linear-gradient(245deg, $stops...),
      sharp-linear-gradient(115deg, $stops...),
      sharp-linear-gradient(245deg, $stops...);
    background-position:
      0 0,
      0 0,
      $scale * 7 / 15 (-$scale),
      $scale * 7 / 15 (-$scale);
    background-color: $background-color;
    background-size: $scale $scale * 2;
}

/// @link http://lea.verou.me/css3patterns/#polka-dot
/// @group lea-verou
/// @param {color} $background-color [#001]
/// @param {color} $dot-color [white]
/// @param {length} $scale [60px]
/// @param {length} $dot-width [15%]
/// @param {color} $ring-color [$background-color (#001)]
/// @param {length} $ring-width [0%]
@mixin polka-dot(
  $background-color: #001,
  $dot-color: white,
  $scale: 60px,
  $dot-width: 15%,
  $ring-color: $background-color,
  $ring-width: 0%
) {
    // $stops: $color $dot-width, $tr $dot-width + 1%;
    $stops: $dot-color $dot-width, $tr $dot-width + 1%, $tr $dot-width + $ring-width + 1%, $tr $dot-width + $ring-width + 1%;
    @if $ring-width > 0% {
      $stops: $dot-color $dot-width, $ring-color $dot-width + 1%, $ring-color $dot-width + $ring-width, $tr $dot-width + $ring-width + 1%;
    }
    background-image:
      radial-gradient($stops...),
      radial-gradient($stops...);
    background-position:
      0 0,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#blueprint-grid
/// @group lea-verou
/// @param {color} $background-color [#269]
/// @param {color} $thick-line-color [white]
/// @param {color} $thin-line-color [rgba($thick-line-color, .3) (rgba(255, 255, 255, .3))]
/// @param {length} $scale [100px]
/// @param {length} $thick-line-thickness [2px]
/// @param {length} $thin-line-thickness [1px]
/// @param {number} $per [5]
@mixin blueprint-grid($background-color: #269, $thick-line-color: white, $thin-line-color: rgba($thick-line-color, .3), $scale: 15px, $thick-line-thickness: 2px, $thin-line-thickness: 1px, $per: 5) {
    background-image:
      sharp-linear-gradient(180deg, $thick-line-color $thick-line-thickness, $tr),
      sharp-linear-gradient(90deg,  $thick-line-color $thick-line-thickness, $tr),
      sharp-linear-gradient(180deg, $thin-line-color  $thin-line-thickness,  $tr),
      sharp-linear-gradient(90deg,  $thin-line-color  $thin-line-thickness,  $tr);
    background-position:
      -$thick-line-thickness (-$thick-line-thickness),
      -$thick-line-thickness (-$thick-line-thickness),
      -$thin-line-thickness (-$thin-line-thickness),
      -$thin-line-thickness (-$thin-line-thickness);
    background-color: $background-color;
    background-size: $scale $scale, $scale $scale, $scale / $per $scale / $per, $scale / $per $scale / $per;
}

/// @link http://lea.verou.me/css3patterns/#lined-paper
/// @group lea-verou
/// @param {color} $background-color [white]
/// @param {color} $thick-line-color [#abced4]
/// @param {color} $thin-line-color [#eee]
/// @param {length} $line-separation [1.2em]
/// @param {length} $thick-line-thickness [2px]
/// @param {length} $thin-line-thickness [.1em]
/// @param {length} $margin [79px]
@mixin lined-paper($background-color: white, $thick-line-color: #abced4, $thin-line-color: #eee, $line-separation: 1.2em, $thick-line-thickness: 2px, $thin-line-thickness: .1em, $margin: 79px) {
    background-image:
      sharp-linear-gradient(90deg, $tr $margin, $thick-line-color $margin + $thick-line-thickness, $tr),
      sharp-linear-gradient($thin-line-color $thin-line-thickness, $tr);
    background-color: $background-color;
    background-size: 100% $line-separation;
}

/// @link http://lea.verou.me/css3patterns/#steps
/// @group lea-verou
/// @param {color} $background-color [#ff7d9d]
/// @param {color} $color [#c90032]
/// @param {length} $scale [58px]
@mixin steps($background-color: #ff7d9d, $color: #c90032, $line-color: #c90032, $scale: 58px) {
    background-image:
      sharp-linear-gradient(335deg, $color $scale * 23 / 58, $tr),
      sharp-linear-gradient(155deg, $color $scale * 23 / 58, $tr),
      sharp-linear-gradient(335deg, $color $scale * 23 / 58, $tr),
      sharp-linear-gradient(155deg, $color $scale * 23 / 58, $tr),

      sharp-linear-gradient(335deg, $color $scale * 10 / 58, $tr),
      sharp-linear-gradient(155deg, $color $scale * 10 / 58, $tr),
      sharp-linear-gradient(335deg, $color $scale * 10 / 58, $tr),
      sharp-linear-gradient(155deg, $color $scale * 10 / 58, $tr);
    background-position:
      0                $scale * 2  / 58,
      $scale * 4  / 58 $scale * 35 / 58,
      $scale * 29 / 58 $scale * 31 / 58,
      $scale * 33 / 58 $scale * 6  / 58,

      0                $scale * 36 / 58,
      $scale * 4  / 58 $scale * 2  / 58,
      $scale * 29 / 58 $scale * 6  / 58,
      $scale * 33 / 58 $scale * 30 / 58;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#waves
/// @group lea-verou
/// @param {color} $background-color [slategray]
/// @param {color} $line-color [rgba(255, 255, 255, .3)]
/// @param {length} $scale [100px]
@mixin waves($background-color: slategray, $line-color: rgba(255, 255, 255, .3), $scale: 100px) {
    $stops: $tr 20%, $line-color 34%, $tr;
    background-image:
      fuzzy-radial-gradient(circle at 100% 50%, $stops...),
      fuzzy-radial-gradient(circle at 0%   50%, $stops...);
    background-position:
      0 0,
      0 (-$scale / 2);
    background-color: $background-color;
    background-size: $scale * .75 $scale;
}

/// @link http://lea.verou.me/css3patterns/#cross
/// @group lea-verou
/// @param {color} $background-color [slategray]
/// @param {color} $line-color [#a8b1bb]
/// @param {length} $scale [100px]
/// @param {length} $line-width [8px]
/// @param {length} $line-length [20%]
@mixin cross($background-color: slategray, $line-color: #a8b1bb, $scale: 100px, $line-width: 8px, $line-length: 20%) {
    background-image:
      sharp-radial-gradient(circle, $tr $line-length, $background-color 100% - $line-length, $tr),
      sharp-radial-gradient(circle, $tr $line-length, $background-color 100% - $line-length, $tr),
      sharp-linear-gradient(to bottom, $line-color $line-width, $tr),
      sharp-linear-gradient(90deg, $line-color $line-width, $tr);
    background-position:
      0 0,
      $scale / 2 $scale / 2,
      0 (-$line-width / 2),
      -$line-width / 2 0;
    background-color: $background-color;
    background-size: $scale $scale, $scale $scale, $scale / 2 $scale / 2, $scale / 2 $scale / 2;
}

/// @link http://lea.verou.me/css3patterns/#yin-yang
/// @group lea-verou
/// @param {color} $background-color [#63773f]
/// @param {color} $first-color [#d2caab]
/// @param {color} $second-color [#364e27]
/// @param {length} $scale [100px]
/// @param {length} $size [16%]
/// @param {length} $inner-circle-size [3%]
/// @todo @param {direction} $rotation [0deg]
@mixin yin-yang($background-color: #63773f, $first-color: #d2caab, $second-color: #364e27, $scale: 100px, $size: 16%, $inner-circle-size: 3%) {
    $tr-first-color:  rgba($first-color, 0);
    $tr-second-color: rgba($second-color, 0);
    // $rotation-offset-x: sin($rotation) * $size * 9 / 16;
    // $rotation-offset-y: cos($rotation) * $size * 9 / 16;
    background-image:
      // fuzzy-radial(circle at 50% + $rotation-offset-x 50% + $rotation-offset-y, $first-color  $inner-circle-size, $second-color $size * 11 / 16, $tr-second-color) $scale / 2 0,
      // fuzzy-radial(circle at 50% - $rotation-offset-x 50% - $rotation-offset-y, $second-color $inner-circle-size, $first-color  $size * 11 / 16, $tr-first-color ) $scale / 2 0,
      // fuzzy-radial(circle at 50% + $rotation-offset-x 50% + $rotation-offset-y, $first-color  $inner-circle-size, $second-color $size * 11 / 16, $tr-second-color) 0 $scale / 2,
      // fuzzy-radial(circle at 50% - $rotation-offset-x 50% - $rotation-offset-y, $second-color $inner-circle-size, $first-color  $size * 11 / 16, $tr-first-color ) 0 $scale / 2,
      fuzzy-radial-gradient(circle at 50% 50% + $size * 9 / 16, $first-color  $inner-circle-size, $second-color $size * 11 / 16, $tr-second-color),
      fuzzy-radial-gradient(circle at 50% 50% - $size * 9 / 16, $second-color $inner-circle-size, $first-color  $size * 11 / 16, $tr-first-color ),
      fuzzy-radial-gradient(circle at 50% 50% + $size * 9 / 16, $first-color  $inner-circle-size, $second-color $size * 11 / 16, $tr-second-color),
      fuzzy-radial-gradient(circle at 50% 50% - $size * 9 / 16, $second-color $inner-circle-size, $first-color  $size * 11 / 16, $tr-first-color ),
      fuzzy-radial-gradient(circle at 100% 50%, $first-color  $size, $tr-first-color ),
      fuzzy-radial-gradient(circle at 0%   50%, $second-color $size, $tr-second-color),
      fuzzy-radial-gradient(circle at 100% 50%, $first-color  $size, $tr-first-color ),
      fuzzy-radial-gradient(circle at 0%   50%, $second-color $size, $tr-second-color);
    background-position:
      $scale / 2 0,
      $scale / 2 0,
      0 $scale / 2,
      0 $scale / 2,
      0 0,
      0 0,
      $scale / 2 $scale / 2,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#stars
/// @group lea-verou
/// @param {color} $background-color [#232927]
/// @param {color} $color [#e3d7bf]
/// @param {length} $scale [100px]
/// @param {length} $star-size [8.5%]
/// @param {boolean} $staggered-row [true]
@mixin stars($background-color: #232927, $color: #e3d7bf, $scale: 100px, $star-size: 8.5%, $staggered-row: true) {
    $offset: 20 + (strip-unit($star-size / 8.5) - 1) * 20;
    $star:
      sharp-linear-gradient(324deg, $background-color $star-size * 4 / 8.5, $tr),
      sharp-linear-gradient( 36deg, $background-color $star-size * 4 / 8.5, $tr),
      sharp-linear-gradient( 72deg, $color $star-size, $tr),
      sharp-linear-gradient(288deg, $color $star-size, $tr),
      sharp-linear-gradient(216deg, $color $star-size * 7.5 / 8.5, $tr),
      sharp-linear-gradient(144deg, $color $star-size * 7.5 / 8.5, $tr);
    @if $staggered-row {
      background-image:
        $star, $star;
      background-position:
        $scale * -70 / 100 $scale * 43 / 100,
        $scale *  30 / 100 $scale * 43 / 100,
        $scale *  30 / 100 $scale * 43 / 100,
        $scale * -70 / 100 $scale * 43 / 100,
        $scale * -70 / 100 $scale * (43 - $offset) / 100,
        $scale *  30 / 100 $scale * (43 - $offset) / 100,
        $scale * -20 / 100 $scale * 93 / 100,
        $scale *  80 / 100 $scale * 93 / 100,
        $scale *  80 / 100 $scale * 93 / 100,
        $scale * -20 / 100 $scale * 93 / 100,
        $scale * -20 / 100 $scale * (93 - $offset)/ 100,
        $scale *  80 / 100 $scale * (93 - $offset)/ 100;
    } @else {
      background-image:
        $star;
      background-position:
        $scale * -70 / 100 $scale * 43 / 100,
        $scale *  30 / 100 $scale * 43 / 100,
        $scale *  30 / 100 $scale * 43 / 100,
        $scale * -70 / 100 $scale * 43 / 100,
        $scale * -70 / 100 $scale * (43 - $offset) / 100,
        $scale *  30 / 100 $scale * (43 - $offset) / 100;
    }
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#shippo
/// @group lea-verou
/// @param {color} $background-color [#def]
/// @param {color} $color [rgba(0, 0, 0, .3)]
/// @param {length} $scale [80px]
@mixin shippo($background-color: #def, $color: rgba(0, 0, 0, .3), $scale: 80px) {
    $stops: $tr 98%, $color;
    background-image:
      fuzzy-radial-gradient(closest-side, $stops...),
      fuzzy-radial-gradient(closest-side, $stops...);
    background-position:
      0 0,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#brady-bunch
/// @group lea-verou
/// @param {color} $background-color [#c8d3a7]
/// @param {color} $first-color [#b6cc66]
/// @param {color} $second-color [#edffdb]
/// @param {color} $third-color [#ffffff]
/// @param {color} $fourth-color [#d9e6a7]
/// @param {color} $fifth-color [#798b3c]
/// @param {color} $sixth-color [#e0ead7]
/// @param {length} $scale [110px]
/// @param {length} $start-position [75%]
/// @param {length} $ring-width [9%]
/// @param {boolean} $set-relative [true] - if true, $first-color can also control $second-color, $fourth-color, $fifth-color, $sixth-color and $background-color
@mixin brady-bunch(
  $background-color: #c8d3a7,
  $first-color: #b6cc66,
  $second-color: #edffdb,
  $third-color: #ffffff,
  $fourth-color: #d9e6a7,
  $fifth-color: #798b3c,
  $sixth-color: #e0ead7,
  $scale: 110px,
  $start-position: 75%,
  $ring-width: 9%,
  $set-relative: true
) {
    @if $set-relative and $first-color != #b6cc66 {
      @if $second-color == #edffdb {
        $second-color: lighten(adjust-hue(saturate($first-color, 50%), 17deg), 33%);
      }
      // @if $third-color == #ffffff {
      // }
      @if $fourth-color == #d9e6a7 {
        $fourth-color: lighten(adjust-hue(saturate($first-color, 6%), -1deg), 18%);
      }
      @if $fifth-color == #798b3c {
        $fifth-color: darken(adjust-hue(desaturate($first-color, 10%), 1deg), 21%);
      }
      @if $sixth-color == #e0ead7 {
        $sixth-color: lighten(adjust-hue(desaturate($first-color, 19%), 19deg), 28%);
      }
      @if $background-color == #c8d3a7 {
        $background-color: lighten(adjust-hue(desaturate($first-color, 17%), 2deg), 14%);
      }
    }
    $stops:
      $tr $start-position,
      $first-color  $start-position + $ring-width     + 1%,
      $second-color $start-position + $ring-width * 2 + 1%,
      $third-color  $start-position + $ring-width * 3 + 1%,
      $fourth-color $start-position + $ring-width * 4 + 1%,
      $fifth-color  $start-position + $ring-width * 5 + 1%,
      $third-color  $start-position + $ring-width * 6 + 1%,
      $sixth-color  $start-position + $ring-width * 7 + 2%;
    background-image:
      fuzzy-radial-gradient(closest-side, $stops...),
      fuzzy-radial-gradient(closest-side, $stops...);
    background-position:
      0 0,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [blanchedalmond]
/// @param {color} $first-color [beige]
/// @param {color} $second-color [khaki]
/// @param {color} $third-color [navajowhite]
/// @param {color} $fourth-color [peachpuff]
/// @param {color} $fifth-color [palegoldenrod]
/// @param {length} $scale [10em]
@mixin gummi-worms(
  $background-color: blanchedalmond,
  $first-color: beige,
  $second-color: khaki,
  $third-color: navajowhite,
  $fourth-color: peachpuff,
  $fifth-color: palegoldenrod,
  $scale: 10em
) {
    $single-width: $scale / 5;
    $stops:
      $tr           $single-width,
      $first-color  $single-width * 2,
      $tr           $single-width * 3,
      $second-color $single-width * 4,
      $tr;
    background-image:
      sharp-radial-gradient(circle at bottom left, $stops...),
      sharp-radial-gradient(circle at top right,   $stops...),
      sharp-radial-gradient(circle at top left,
        $tr           $single-width,
        $third-color  $single-width * 2,
        $tr           $single-width * 3,
        $fourth-color $single-width * 4,
        $tr
      ),
      sharp-radial-gradient(circle at bottom right,
        $tr           $single-width,
        $fifth-color  $single-width * 2,
        $tr           $single-width * 3,
        $fourth-color $single-width * 4,
        $tr
      );
    background-position:
      0 0,
      0 0,
      $scale / 2 $scale / 2,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [floralwhite]
/// @param {color} $first-color [tomato]
/// @param {color} $second-color [dodgerblue]
/// @param {color} $line-color [gold]
/// @param {length} $scale [10em]
/// @param {length} $ring-start [$scale * .35 (3.5em)]
/// @param {length} $ring-width [$scale / 10 (1em)]
/// @param {length} $line-start [$scale / 4 (2.5em)]
/// @param {length} $line-width [$scale * .025 (.25em)]
/// @param {length} $outer-line-start [$line-start * 2 + $line-width (5.25em)]
/// @param {length} $outer-line-width [$line-width (.25em)]
@mixin o-rings(
  $background-color: floralwhite,
  $first-color: tomato,
  $second-color: dodgerblue,
  $line-color: gold,
  $scale: 10em,
  $ring-start: $scale * .35,
  $ring-width: $scale / 10,
  $line-start: $scale / 4,
  $line-width: $scale * .025,
  $outer-line-start: $line-start * 2 + $line-width,
  $outer-line-width: $line-width
) {
    background-image:
      sharp-radial-gradient(circle, $tr $ring-start, $first-color  $ring-start + $ring-width, $tr),
      sharp-radial-gradient(circle, $tr $ring-start, $second-color $ring-start + $ring-width, $tr),
      sharp-radial-gradient(circle, $tr $line-start, $line-color $line-start + $line-width, $tr $outer-line-start, $line-color $outer-line-start + $outer-line-width, $tr);
    background-position:
      0 0,
      $scale / 2 $scale / 2,
      $scale $scale / 2;
    background-color: $background-color;
    background-size: $scale $scale;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [white]
/// @param {color} $first-color [beige]
/// @param {color} $second-color [wheat]
/// @param {color} $third-color [moccasin]
/// @param {length} $scale [6em]
/// @param {direction} $angle [to top left]
/// @param {direction} $other-angle [to left]
@mixin slanted-stripes(
  $background-color: white,
  $first-color: beige,
  $second-color: wheat,
  $third-color: moccasin,
  $scale: 6em,
  $angle: to top left,
  $other-angle: to left
) {
    $single-width: $scale / 3;
    background-image:
      sharp-repeating-linear-gradient($angle, $first-color $single-width, $third-color $single-width * 2, $second-color $single-width * 3),
      sharp-repeating-linear-gradient($other-angle, $background-color $single-width, $second-color $single-width * 2, $first-color $single-width * 3);
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [#f7a37b]
/// @param {color} $second-color [#ffdea8]
/// @param {color} $third-color [#d0e4b0]
/// @param {color} $fourth-color [#7cc5d0]
/// @param {color} $fifth-color [#00a2e1]
/// @param {color} $sixth-color [#0085c8]
/// @param {direction} $angle [50deg]
/// @param {length} $scale [6em]
@mixin diamonds(
  $first-color: #f7a37b,
  $second-color: #ffdea8,
  $third-color: #d0e4b0,
  $fourth-color: #7cc5d0,
  $fifth-color: #00a2e1,
  $sixth-color: #0085c8,
  $angle: 50deg,
  $scale: 6em
) {
    $single-width: $scale / 6;
    $stops:
      $first-color  $single-width,
      $second-color $single-width * 2,
      $third-color  $single-width * 3,
      $fourth-color $single-width * 4,
      $fifth-color  $single-width * 5,
      $sixth-color  $single-width * 6;
    background-image:
      sharp-repeating-linear-gradient( $angle, $stops...),
      sharp-repeating-linear-gradient(-$angle, $stops...);
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [lightgreen]
/// @param {color} $first-color [limegreen]
/// @param {color} $second-color [olivedrab]
/// @param {color} $third-color [green]
/// @param {length} $ring-width [4em]
/// @param {boolean} $set-relative [true] - if true, $first-color can also control $second-color, $third-color and $background-color
@mixin vesica-pisces(
  $background-color: lightgreen,
  $first-color: limegreen,
  $second-color: olivedrab,
  $third-color: green,
  $ring-width: 4em,
  $set-relative: true
) {
    @if $set-relative and $first-color != limegreen {
      @if $second-color == olivedrab {
        $second-color: darken(adjust-hue(desaturate($first-color, 1%), -40deg), 15%);
      }
      @if $third-color == green {
        $third-color: darken(saturate($first-color, 39%), 25%);
      }
      @if $background-color == lightgreen {
        $background-color: lighten(saturate($first-color, 12%), 25%);
      }
    }
    background-image:
      repeating-radial-gradient(
        circle at 50% 25%,
        $first-color,
        $first-color $ring-width / 8,
        $tr $ring-width * .75,
        $tr $ring-width
      ),
      repeating-radial-gradient(
        circle at 25% 50%,
        $second-color,
        $second-color $ring-width / 8,
        $tr $ring-width * .5,
        $tr $ring-width
      ),
      repeating-radial-gradient(
        circle at 75% 50%,
        $third-color,
        $third-color $ring-width / 8,
        $tr $ring-width * .5,
        $tr $ring-width
      );
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [cyan]
/// @param {color} $second-color [yellow]
/// @param {color} $third-color [magenta]
/// @param {length} $scale [6em]
@mixin light-machine(
  $first-color: cyan,
  $second-color: yellow,
  $third-color: magenta,
  $scale: 6em
) {
    $single-width: $scale / 3;
    $stops:
      $first-color,
      $second-color $single-width,
      $third-color  $single-width * 2,
      $first-color  $single-width * 3;
    background-image:
      repeating-radial-gradient(circle at top    left,  $stops...),
      repeating-radial-gradient(circle at bottom left,  $stops...),
      repeating-radial-gradient(circle at top    right, $stops...),
      repeating-radial-gradient(circle at bottom right, $stops...);
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [red]
/// @param {color} $second-color [lime]
/// @param {color} $third-color [yellow]
/// @param {color} $fourth-color [blue]
/// @param {color} $background-color [white]
/// @param {length} $scale [15em]
@mixin harness(
  $first-color: red,
  $second-color: lime,
  $third-color: yellow,
  $fourth-color: blue,
  $background-color: white,
  $scale: 15em
) {
    background-image:
      sharp-repeating-radial-gradient(
        circle at top left,
        $first-color $scale * 4 / 15,
        $tr $scale
      ),
      sharp-repeating-radial-gradient(
        circle at top right,
        $second-color $scale * 4 / 15,
        $tr $scale
      ),
      sharp-repeating-radial-gradient(
        circle at bottom right,
        $third-color $scale * 4 / 15,
        $tr $scale
      ),
      sharp-repeating-radial-gradient(
        circle at bottom left,
        $fourth-color $scale * 4 / 15,
        $tr $scale
      );
    background-color: $background-color;
    background-blend-mode: difference;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [#f19181]
/// @param {color} $second-color [#3cbac8]
/// @param {color} $third-color [#f3f5c4]
/// @param {color} $fourth-color [#f9cb84]
/// @param {length} $horizontal-scale [6em]
/// @param {length} $horizontal-stripe-width [50%] - relative to $scale
/// @param {length} $vertical-scale [$horizontal-scale (6em)]
/// @param {length} $vertical-stripe-width [50%] - relative to $scale
/// @param {color} $cross-color [$first-color (#f19181)]
/// @param {length} $cross-scale [2 * $horizontal-scale (12em)]
/// @param {length} $first-cross-angle [45deg]
/// @param {length} $second-cross-angle [-45deg]
/// @param {boolean} $set-relative [true] - if true, $first-color can also control $cross-color and $horizontal-scale can also control $vertical-scale and $cross-scale
@mixin cross-multiply(
  $first-color: #f19181,
  $second-color: #3cbac8,
  $third-color: #f3f5c4,
  $fourth-color: #f9cb84,
  $background-color: white,
  $horizontal-scale: 6em,
  $horizontal-stripe-width: 50%,
  $vertical-scale: 6em,
  $vertical-stripe-width: 50%,
  $cross-color: #f19181,
  $cross-scale: 12em,
  $first-cross-angle: 45deg,
  $second-cross-angle: -45deg,
  $set-relative: true
) {
    @if $set-relative and $first-color != #f19181 {
      @if $cross-color == #f19181 {
        $cross-color: $first-color;
      }
    }
    @if $set-relative and $horizontal-scale != 6em {
      @if $vertical-scale == 6em {
        $vertical-scale: $horizontal-scale;
      }
      @if $cross-scale == 12em {
        $cross-scale: 2 * $horizontal-scale;
      }
    }

    background-image:
      sharp-repeating-linear-gradient(
        $third-color $vertical-scale * (1 - percent-to-decimal($vertical-stripe-width)),
        $first-color $vertical-scale
      ),
      sharp-repeating-linear-gradient(
        90deg,
        $fourth-color $horizontal-scale * (1 - percent-to-decimal($horizontal-stripe-width)),
        $second-color $horizontal-scale
      ),
      repeating-linear-gradient(
        $first-cross-angle,
        $tr 0,
        $tr $cross-scale / 2,
        $cross-color $cross-scale
      ),
      repeating-linear-gradient(
        $second-cross-angle,
        $tr 0,
        $tr $cross-scale / 2,
        $cross-color $cross-scale
      );
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [lightblue]
/// @param {color} $second-color [aquamarine]
/// @param {color} $third-color [khaki]
/// @param {color} $fourth-color [pink]
/// @param {color} $background-color [linen]
/// @param {length} $scale [5em]
/// @param {length} $ring-start [40%] - relative to $scale
/// @param {length} $ring-width [10%] - relative to $scale
@mixin flowa(
  $first-color: lightblue,
  $second-color: aquamarine,
  $third-color: khaki,
  $fourth-color: pink,
  $background-color: linen,
  $scale: 5em,
  $ring-start: 40%,
  $ring-width: 10%
) {
    $ring-start: percent-to-decimal($ring-start);
    $ring-end: $ring-start + percent-to-decimal($ring-width);
    $ring-width-dec: percent-to-decimal($ring-width);

    background-image:
      sharp-radial-gradient(
        $tr $scale * $ring-start,
        $first-color $scale * $ring-end,
        $tr
      ),
      sharp-radial-gradient(
        $tr $scale * $ring-start,
        $second-color $scale * $ring-end,
        $tr
      ),
      sharp-radial-gradient(
        $tr $scale * $ring-start,
        $third-color $scale * $ring-end,
        $tr
      ),
      sharp-radial-gradient(
        $tr $scale * $ring-start,
        $fourth-color $scale * $ring-end,
        $tr
      );
    background-color: $background-color;
    background-blend-mode: multiply;
    background-size: $scale $scale;
    background-position:
      0 $scale / 2,
      $scale / 2 0,
      $scale / 2 $scale / 2,
      0 0;
}

/// @group me
/// @param {color} $ring-color [gold]
/// @param {color} $line-color [black]
/// @param {color} $background-color [black]
/// @param {length} $scale [50px]
/// @param {length} $ring-width [30%] - relative to $scale
/// @param {length} $line-width [5%] - relative to $scale
@mixin viking(
  $ring-color: gold,
  $line-color: black,
  $background-color: black,
  $scale: 50px,
  $ring-width: 30%,
  $line-width: 5%
) {
    $line-width: percent-to-decimal($line-width) * $scale;
    $ring-width: percent-to-decimal($ring-width) * $scale;
    $ring-end:   percent-to-decimal(103%       ) * $scale;
    $ring-start: $ring-end - $ring-width;
    $line-start: ($ring-width - $line-width) / 2 + $ring-start;
    $line-end: $line-start + $line-width;
    $stops:
      $tr $ring-start,
      $ring-color $line-start,
      $line-color $line-end,
      $ring-color $ring-end,
      $tr;

    background-image:
      sharp-radial-gradient(
        circle at 100% 135%,
        $stops...
      ),
      sharp-radial-gradient(
        circle at 0% 135%,
        $stops...
      ),
      sharp-radial-gradient(
        circle at 100% 95%,
        $stops...
      ),
      sharp-radial-gradient(
        circle at 0% 95%,
        $stops...
      ),
      sharp-radial-gradient(
        circle at 100% 95%,
        $stops...
      ),
      sharp-radial-gradient(
        circle at 0% 95%,
        $stops...
      );
    background-position:
      0 (-$scale * .8),
      0 (-$scale * .8),
      0 $scale,
      0 $scale,
      0 0,
      0 0;
    background-color: $background-color;
    background-size: $scale $scale * 2;
}

/// @link http://thenewcode.com/810/Web-Developer-Reading-List-SVG-Text
/// @param {color} $first-color [#ffb13b]
/// @param {color} $stroke-color [black]
/// @param {color} $background-color [white]
/// @param {length} $scale [145px]
/// @param {length} $size [30%] - relative to $scale
/// @param {length} $line-thickness [26.6%] - relative to $size
/// @param {length} $dot-size [20%] - relative to $size
/// @param {length} $stroke-width [20%] - relative to $size
@mixin svg-logo(
  $first-color: #ffb13b,
  $stroke-color: black,
  $background-color: white,
  $scale: 145px,
  $size: 30%,
  $line-thickness: 26.6%,
  $dot-size: 20%,
  $stroke-width: 20%
) {
    $size:           percent-to-decimal($size          );
    $line-thickness: percent-to-decimal($line-thickness) * $scale * $size;
    $dot-size:       percent-to-decimal($dot-size      ) * $scale * $size;
    $stroke-width:   percent-to-decimal($stroke-width  ) * $scale * $size;

    background-image:
      // top half dots
      sharp-radial-gradient(
        circle at $scale * (.5 - sin(45deg) * $size) $scale * (1 - cos(45deg) * $size),
        $first-color $dot-size,
        $tr
      ),
      sharp-radial-gradient(
        circle at $scale * (.5 + sin(45deg) * $size) $scale * (1 - cos(45deg) * $size),
        $first-color $dot-size,
        $tr
      ),
      sharp-radial-gradient(
        circle at $scale * (.5 - $size + $size / 15) 100%,
        $first-color $dot-size,
        $tr
      ),
      sharp-radial-gradient(
        circle at $scale * (.5 + $size - $size / 15) 100%,
        $first-color $dot-size,
        $tr
      ),
      sharp-radial-gradient(
        circle at 50% $scale * (1 - $size),
        $first-color $dot-size,
        $tr
      ),
      // top half strokes
      sharp-radial-gradient(
        circle at 100% $scale * (1 - cos(45deg) * $size),
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      sharp-radial-gradient(
        circle at $scale * (.5 - sin(45deg) * $size) 100%,
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      sharp-radial-gradient(
        circle at 0% $scale * (1 - cos(45deg) * $size),
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      sharp-radial-gradient(
        circle at $scale * (.5 + sin(45deg) * $size) 100%,
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      sharp-radial-gradient(
        circle at 100% 100%,
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      sharp-radial-gradient(
        circle at 0% 100%,
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      sharp-radial-gradient(
        circle at 50% 97%,
        $tr $dot-size,
        $stroke-color $dot-size + $stroke-width,
        $tr
      ),
      // sharp-radial-gradient(
      //   circle at $scale * (.5 - sin(45deg) * $size) $scale * (1 - cos(45deg) * $size),
      //   $stroke-color $dot-size + $stroke-width,
      //   $tr
      // ),
      // sharp-radial-gradient(
      //   circle at $scale * (.5 + sin(45deg) * $size) $scale * (1 - cos(45deg) * $size),
      //   $stroke-color $dot-size + $stroke-width,
      //   $tr
      // ),
      // sharp-radial-gradient(
      //   circle at $scale * (.5 - $size + .02) 100%,
      //   $stroke-color $dot-size + $stroke-width,
      //   $tr
      // ),
      // sharp-radial-gradient(
      //   circle at $scale * (.5 + $size - .02) 100%,
      //   $stroke-color $dot-size + $stroke-width,
      //   $tr
      // ),
      // sharp-radial-gradient(
      //   circle at 50% $scale * (1 - $size),
      //   $stroke-color $dot-size + $stroke-width,
      //   $tr
      // ),
      // top half cutoff
      sharp-radial-gradient(
        circle at 50% 100%,
        $tr $scale * $size,
        $background-color
      ),
      // top half lines
      sharp-linear-gradient(
        0deg,
        $first-color $line-thickness * .125 + $line-thickness / 2,
        $tr
      ),
      sharp-linear-gradient(
        -45deg,
        $tr          $scale * .35 - $line-thickness / 2,
        $first-color $scale * .35 + $line-thickness / 2,
        $tr
      ),
      sharp-linear-gradient(
        90deg,
        $tr          $scale * .5 - $line-thickness / 2,
        $first-color $scale * .5 + $line-thickness / 2,
        $tr
      ),
      sharp-linear-gradient(
        45deg,
        $tr          $scale * .35 - $line-thickness / 2,
        $first-color $scale * .35 + $line-thickness / 2,
        $tr
      ),
      // top half stroke circle
      sharp-radial-gradient(
        circle at 50% 100%,
        $stroke-color $scale * $size,
        $tr
      );
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      $scale * (.5 - sin(45deg) * $size) - $scale 0,
      0 $scale * (1 - cos(45deg) * $size),
      $scale * (.5 + sin(45deg) * $size) - $scale 0,
      0 $scale * (1 - cos(45deg) * $size),
      $scale * (.5 - $size + .02) 0,
      $scale * (.5 + $size - .02) 0,
      0 $scale * (1 - $size + .03),
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [yellow]
/// @param {color} $second-color [cyan]
/// @param {color} $third-color [magenta]
/// @param {color} $background-color [floralwhite]
/// @param {length} $scale [8em]
/// @param {length} $small-dot-size [40%]
/// @param {length} $medium-dot-size [50%]
/// @param {length} $large-dot-size [50%]
@mixin dotsy(
  $first-color: yellow,
  $second-color: cyan,
  $third-color: magenta,
  $background-color: floralwhite,
  $scale: 8em,
  $small-dot-size: 40%,
  $medium-dot-size: 50%,
  $large-dot-size: 50%
) {
    background-image:
      sharp-radial-gradient(
        $first-color $large-dot-size,
        $tr
      ),
      sharp-radial-gradient(
        $second-color $medium-dot-size,
        $tr
      ),
      sharp-radial-gradient(
        $third-color $small-dot-size,
        $tr
      );
    background-color: $background-color;
    background-blend-mode: multiply;
    background-size:
      $scale $scale,
      $scale * .75 $scale * .75,
      $scale * .25 $scale * .25;
    background-position:
      0 0,
      -33% -33%,
      -200% -200%;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [#dc143c]
/// @param {color} $second-color [#3cb371]
/// @param {color} $background-color [linen]
/// @param {length} $scale [40px]
/// @param {length} $ring-start [50%] - relative to $scale
/// @param {length} $ring-width [12.5%] - relative to $scale
@mixin ring-pairs(
  $first-color: #dc143c,
  $second-color: #3cb371,
  $background-color: linen,
  $scale: 40px,
  $ring-start: 50%,
  $ring-width: 12.5%
) {
    $ring-start: percent-to-decimal($ring-start) * $scale;
    $ring-width: percent-to-decimal($ring-width) * $scale;
    $ring-end: $ring-start + $ring-width;
    background-image:
      sharp-radial-gradient(
        $tr $ring-start,
        $first-color $ring-end,
        $tr
      ),
      sharp-radial-gradient(
        $tr $ring-start,
        $first-color $ring-end,
        $tr
      ),
      sharp-radial-gradient(
        $tr $ring-start,
        $second-color $ring-end,
        $tr
      ),
      sharp-radial-gradient(
        $tr $ring-start,
        $second-color $ring-end,
        $tr
      );
    background-color: $background-color;
    background-blend-mode: multiply;
    background-size: $scale * 2 $scale * 2;
    background-position:
      $scale $scale,
      $scale 0,
      0 0,
      0 $scale;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [limegreen]
/// @param {color} $second-color [skyblue]
/// @param {color} $third-color [coral]
/// @param {direction} $first-angle [180deg]
/// @param {direction} $second-angle [90deg]
/// @param {direction} $third-angle [-90deg]
@mixin tri-fade(
  $first-color: limegreen,
  $second-color: skyblue,
  $third-color: coral,
  $first-angle: 180deg,
  $second-angle: 90deg,
  $third-angle: -90deg
) {
    background-image:
      linear-gradient(
        $first-angle,
        $first-color,
        $tr
      ),
      linear-gradient(
        $second-angle,
        $second-color,
        $tr
      ),
      linear-gradient(
        $third-angle,
        $third-color,
        $tr
      );
    background-blend-mode: screen;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [cyan]
/// @param {color} $second-color [magenta]
/// @param {color} $third-color [yellow]
/// @param {direction} $first-angle [180deg]
/// @param {direction} $second-angle [-45deg]
/// @param {direction} $third-angle [45deg]
@mixin hazy(
  $first-color: cyan,
  $second-color: magenta,
  $third-color: yellow,
  $first-angle: 180deg,
  $second-angle: -45deg,
  $third-angle: 45deg
) {
    background-image:
      linear-gradient(
        $first-angle,
        $first-color,
        $tr
      ),
      linear-gradient(
        $second-angle,
        $second-color,
        $tr
      ),
      linear-gradient(
        $third-angle,
        $third-color,
        $tr
      );
    background-blend-mode: multiply;
}

/// @link http://lea.verou.me/css3patterns/#stairs
/// @group lea-verou
/// @param {color} $color [#999]
/// @param {color} $background-color [#444]
/// @param {length} $scale [48px]
@mixin stairs(
  $color: #999,
  $background-color: #444,
  $scale: 48px
) {
    background-image:
      sharp-linear-gradient(
        63deg,
        $color 23%,
        $tr
      ),
      linear-gradient(
        63deg,
        $tr 74%,
        $color 78%
      ),
      linear-gradient(
        63deg,
        $tr 34%,
        $color 38%,
        $color 58%,
        $tr 62%
      );
    background-color: $background-color;
    background-size: $scale / 3 $scale;
    background-position:
      $scale * 7 / 48 0,
      0 0,
      0 0;
}

/// @link http://lea.verou.me/css3patterns/#bricks
/// @group lea-verou
/// @param {color} $top-color [#d00]
/// @param {color} $bottom-color [#b00]
/// @param {color} $mortar-color [silver]
/// @param {length} $scale [58px] - hint: use a multiple of 2px
/// @param {length} $mortar-width [6.9%] - relative to $scale
/// @param {length} $mortar-height [6.9%] - relative to $scale
@mixin bricks(
  $top-color: #d00,
  $bottom-color: #b00,
  $mortar-color: silver,
  $scale: 58px,
  $mortar-width: 6.9%,
  $mortar-height: 6.9%
) {
    $mortar-width:  percent-to-decimal($mortar-width ) * $scale;
    $mortar-height: percent-to-decimal($mortar-height) * $scale;
    $vertical-offset: $mortar-height / 2;
    $long-side-length:  $scale     - $mortar-width;
    $short-side-length: $scale / 2 - $mortar-height;
    $angle: atan($short-side-length / $long-side-length);
    $gradient-length: sin($angle) * $long-side-length + $scale * .003;
    background-image:
      sharp-linear-gradient(
        360deg - $angle,
        $bottom-color $gradient-length,
        $tr
      ),
      sharp-linear-gradient(
        180deg - $angle,
        $top-color $gradient-length,
        $tr
      ),
      sharp-linear-gradient(
        360deg - $angle,
        $bottom-color $gradient-length,
        $tr
      ),
      sharp-linear-gradient(
        180deg - $angle,
        $top-color $gradient-length,
        $tr
      );
    background-color: $mortar-color;
    background-size: $scale $scale;
    background-position:
      0 $vertical-offset,
      $mortar-width $scale / 2 + $mortar-height + $vertical-offset,
      $scale / 2 $scale / 2 + $vertical-offset,
      $mortar-width + $scale / 2 $mortar-height + $vertical-offset;
}

/// @link http://lea.verou.me/css3patterns/#pyramid
/// @group lea-verou
/// @param {color} $first-color [#a7332b]
/// @param {color} $second-color [#d45d55]
/// @param {color} $third-color [#6a201b]
/// @param {color} $fourth-color [#561a16]
/// @param {length} $scale [20px]
/// @param {boolean} $set-relative [true] - if true, $first-color can also control $second-color, $third-color and $fourth-color
@mixin pyramid(
  $first-color: #a7332b,
  $second-color: #d45d55,
  $third-color: #6a201b,
  $fourth-color: #561a16,
  $scale: 20px,
  $set-relative: true
) {
    @if $set-relative and $first-color != #a7332b {
      @if $second-color == #d45d55 {
        $second-color: lighten(saturate($first-color, 1%), 17%);
      }
      @if $third-color == #6a201b {
        $third-color: darken($first-color, 15%);
      }
      @if $fourth-color == #561a16 {
        $fourth-color: darken($first-color, 20%);
      }
    }
    background-image:
      sharp-linear-gradient(
        315deg,
        $tr 75%,
        $second-color
      ),
      sharp-linear-gradient(
        45deg,
        $tr 75%,
        $second-color
      ),
      sharp-linear-gradient(
        135deg,
        $first-color 50%,
        $tr
      ),
      sharp-linear-gradient(
        45deg,
        $third-color 50%,
        $fourth-color
      );
    background-size: $scale $scale;
    background-position:
      - $scale / 2 0,
      - $scale / 2 0,
      0 0,
      0 0;
}

/// @link http://lea.verou.me/css3patterns/#houndstooth
/// @group lea-verou
/// @param {color} $color [black]
/// @param {color} $background-color [white]
/// @param {length} $scale [2em]
@mixin houndstooth(
  $color: black,
  $background-color: white,
  $scale: 2em
) {
    background-image:
      sharp-linear-gradient(
        -45deg,
        $background-color 25%,
        $tr 75%,
        $color
      ),
      sharp-linear-gradient(
        -45deg,
        $color 25%,
        $tr 75%,
        $background-color
      ),
      sharp-linear-gradient(
        45deg,
        $color 17%,
        $tr 25%,
        $color 36%,
        $tr 64%,
        $color 75%,
        $tr 83%,
        $color
      );
    background-color: $background-color;
    background-size: $scale $scale;
    background-position:
      0 0,
      $scale / 2 $scale / 2,
      $scale / 2 $scale / 2;
}

/// @link http://lea.verou.me/css3patterns/#wave
/// @group lea-verou
/// @param {color} $sky-color [white]
/// @param {color} $water-color [#48b]
/// @param {length} $wave-width [55px]
/// @param {length} $offset [200px]
@mixin wave(
  $sky-color: white,
  $water-color: #48b,
  $wave-width: 55px,
  $offset: 200px
) {
    background-image:
      sharp-linear-gradient(
        $sky-color 50%,
        $tr
      ),
      sharp-radial-gradient(
        circle closest-side,
        $sky-color 53%,
        $tr
      ),
      sharp-radial-gradient(
        circle closest-side,
        $sky-color 50%,
        $tr
      );
    background-color: $water-color;
    background-size: $wave-width * 2 $offset;
    background-position:
      0 0,
      0 0,
      $wave-width 0;
    background-repeat: repeat-x;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [hotpink]
/// @param {color} $second-color [tomato]
/// @param {color} $third-color [cornflowerblue]
/// @param {color} $fourth-color [gold]
/// @param {color} $background-color [white]
/// @param {length} $scale [10em]
/// @param {length} $first-ring-size [10%] - relative to $scale
/// @param {length} $second-ring-size [40%] - relative to $scale
/// @param {length} $third-ring-size [40%] - relative to $scale
@mixin hot-tomato(
  $first-color: hotpink,
  $second-color: tomato,
  $third-color: cornflowerblue,
  $fourth-color: gold,
  $background-color: white,
  $scale: 10em,
  $first-ring-size: 10%,
  $second-ring-size: 40%,
  $third-ring-size: 40%
) {
    $first-ring-size:  percent-to-decimal($first-ring-size ) * $scale;
    $second-ring-size: percent-to-decimal($second-ring-size) * $scale;
    $third-ring-size:  percent-to-decimal($third-ring-size ) * $scale;
    background-image:
      repeating-radial-gradient(
        $tr,
        $tr           $scale * .3,
        $first-color  $scale * .3,
        $tr           $scale * .6,
        $second-color $scale * .65
      ),
      repeating-radial-gradient(
        $tr           $scale * .1,
        $third-color  $scale * .1,
        $tr           $scale * .1 + $second-ring-size,
        $third-color  $scale * .1 + $second-ring-size
      ),
      repeating-radial-gradient(
        $tr,
        $tr           $third-ring-size - $scale * .1,
        $fourth-color $third-ring-size
      ),
      repeating-radial-gradient(
        $tr,
        $fourth-color $first-ring-size
      );
    background-color: $background-color;
    background-size: $scale $scale;
    background-position:
      0 0,
      $scale / 2 $scale / 2,
      $scale / 2 0,
      0 0;
    background-blend-mode: multiply;
}

/// @link http://lea.verou.me/css3patterns/#tartan
/// @group lea-verou
/// @param {color} $background-color [hsl(2, 57%, 40%)]
/// @param {length} $scale [232px]
/// @param {color} $thick-stripe-color [rgba(0, 0, 0, .5)]
/// @param {length} $thick-stripe-width [50%] - relative to $scale
/// @param {color} $thin-stripe-color [rgba(0, 0, 0, .4)]
/// @param {color} $thin-stripe-overlay-color [rgba(255, 255, 255, .2)]
/// @param {length} $thin-stripe-width [1.3%] - relative to $scale
/// @param {length} $thin-stripe-between-width [4.3%] - relative to $scale
/// @param {color} $crossing-stripe-color [rgba(0, 0, 0, .2)]
/// @param {length} $crossing-stripe-width [1px]
/// @param {length} $crossing-stripe-gap [4px]
/// @param {direction} $crossing-stripe-angle [125deg]
@mixin tartan(
  $background-color: hsl(2, 57%, 40%),
  $scale: 232px,
  $thick-stripe-color: rgba(0, 0, 0, .5),
  $thick-stripe-width: 50%,
  $thin-stripe-color: rgba(0, 0, 0, .4),
  $thin-stripe-overlay-color: rgba(255, 255, 255, .2),
  $thin-stripe-width: 1.3%,
  $thin-stripe-between-width: 4.3%,
  $crossing-stripe-color: rgba(0, 0, 0, .2),
  $crossing-stripe-width: 1px,
  $crossing-stripe-gap: 4px,
  $crossing-stripe-angle: 125deg
) {
    $thick-stripe-width: percent-to-decimal($thick-stripe-width) * $scale;
    $thin-stripe-width:  percent-to-decimal($thin-stripe-width ) * $scale;
    $thin-stripe-between-width: percent-to-decimal($thin-stripe-between-width ) * $scale;
    $tr-total-width: $scale - $thick-stripe-width;
    $tr-single-width: ($tr-total-width - 2 * $thin-stripe-width - $thin-stripe-between-width) / 2;
    $thick-stripe-single-width: ($thick-stripe-width - 2 * $thin-stripe-width - $thin-stripe-between-width) / 2;
    $stops:
      $tr $tr-single-width,
      $thin-stripe-color         $tr-single-width + $thin-stripe-width,
      $tr                        $tr-single-width + $thin-stripe-width + $thin-stripe-between-width,
      $thin-stripe-color         $tr-single-width + 2 * $thin-stripe-width + $thin-stripe-between-width,
      $tr 2 * $tr-single-width + 2 * $thin-stripe-width + $thin-stripe-between-width,
      $thick-stripe-color        2 * $tr-single-width + 2 * $thin-stripe-width + $thin-stripe-between-width + $thick-stripe-single-width,
      $thin-stripe-overlay-color 2 * $tr-single-width + 3 * $thin-stripe-width + $thin-stripe-between-width + $thick-stripe-single-width,
      $thick-stripe-color        2 * $tr-single-width + 3 * $thin-stripe-width + 2 * $thin-stripe-between-width + $thick-stripe-single-width,
      $thin-stripe-overlay-color 2 * $tr-single-width + 4 * $thin-stripe-width + 2 * $thin-stripe-between-width + $thick-stripe-single-width,
      $thick-stripe-color        2 * $tr-single-width + 4 * $thin-stripe-width + 2 * $thin-stripe-between-width + 2 * $thick-stripe-single-width;
    background-image:
      sharp-repeating-linear-gradient(        $stops...),
      sharp-repeating-linear-gradient(270deg, $stops...),
      sharp-repeating-linear-gradient(
        $crossing-stripe-angle,
        $tr                    $crossing-stripe-gap / 2,
        $crossing-stripe-color $crossing-stripe-gap / 2 + $crossing-stripe-width,
        $tr                    $crossing-stripe-gap     + $crossing-stripe-width
      );
    background-color: $background-color;
}

/// @link http://lea.verou.me/css3patterns/#carbon-fibre
/// @group lea-verou
/// @param {color} $background-color [#282828]
/// @param {color} $hole-color [black]
/// @param {color} $shadow-color [rgba(255, 255, 255, .1)]
/// @param {length} $scale [16px]
@mixin carbon-fibre(
  $background-color: #282828,
  $hole-color: black,
  $shadow-color: rgba(255, 255, 255, .1),
  $scale: 16px
) {
    $shadow-size: $scale * .0625;
    background-image:
      fuzzy-radial-gradient(
        $hole-color 15%,
        $tr
      ),
      fuzzy-radial-gradient(
        $hole-color 15%,
        $tr
      ),
      radial-gradient(
        $shadow-color 15%,
        $tr 20%
      ),
      radial-gradient(
        $shadow-color 15%,
        $tr 20%
      );
    background-position:
      0 0,
      $scale / 2 $scale / 2,
      0 $shadow-size,
      $scale / 2 $scale / 2 + $shadow-size;
    background-color: $background-color;
    background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#cicada-stripes
/// @group lea-verou
/// @param {color} $background-color [#026873]
/// @param {color} $first-color [rgba(255, 255, 255, .07)]
/// @param {length} $first-size [13px]
/// @param {color} $second-color [rgba(255, 255, 255, .13)]
/// @param {length} $second-size [29px]
/// @param {color} $third-color [rgba(255, 255, 255, .17)]
/// @param {length} $third-size [37px]
/// @param {color} $fourth-color [rgba(255, 255, 255, .19)]
/// @param {length} $fourth-size [53px]
/// @param {direction} $angle [90deg]
@mixin cicada-stripes(
  $background-color: #026873,
  $first-color: rgba(255, 255, 255, .07),
  $first-size: 13px,
  $second-color: rgba(255, 255, 255, .13),
  $second-size: 29px,
  $third-color: rgba(255, 255, 255, .17),
  $third-size: 37px,
  $fourth-color: rgba(255, 255, 255, .19),
  $fourth-size: 53px,
  $angle: 90deg
) {
    background-image:
      sharp-repeating-linear-gradient(
        $angle,
        $first-color $first-size / 2,
        $tr $first-size
      ),
      sharp-repeating-linear-gradient(
        $angle,
        $second-color $second-size / 2,
        $tr $second-size
      ),
      sharp-repeating-linear-gradient(
        $angle,
        $tr $third-size / 2,
        $third-color $third-size
      ),
      sharp-repeating-linear-gradient(
        $angle,
        $tr $fourth-size / 2,
        $fourth-color $fourth-size
      );
    background-color: $background-color;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [wheat]
/// @param {color} $first-color [tomato]
/// @param {length} $first-width [50%] - relative to $scale
/// @param {color} $second-color [dodgerblue]
/// @param {length} $second-width [50%] - relative to $scale
/// @param {length} $scale [7em]
/// @param {direction} $first-angle [-45deg]
/// @param {direction} $second-angle [45deg]
@mixin bingham(
  $background-color: wheat,
  $first-color: tomato,
  $first-width: 50%,
  $second-color: dodgerblue,
  $second-width: 50%,
  $scale: 7em,
  $first-angle: -45deg,
  $second-angle: 45deg
) {
    $first-width:  percent-to-decimal($first-width ) * $scale;
    $second-width: percent-to-decimal($second-width) * $scale;
    $first-start:  ($scale - $first-width ) / 2;
    $second-start: ($scale - $second-width) / 2;
    background-image:
      sharp-repeating-linear-gradient(
        $first-angle,
        $tr $first-start,
        $first-color $first-start + $first-width,
        $tr $scale
      ),
      sharp-repeating-linear-gradient(
        $second-angle,
        $tr $second-start,
        $second-color $second-start + $second-width,
        $tr $scale
      );
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://lea.verou.me/css3patterns/#starry-night
/// @group lea-verou
/// @param {color} $background-color [black]
/// @param {color} $star-color [white]
/// @param {length} $first-star-intensity [20%]
/// @param {length} $first-star-size [2px]
/// @param {length} $first-star-repeat [550px]
/// @param {length} $second-star-intensity [15%]
/// @param {length} $second-star-size [1px]
/// @param {length} $second-star-repeat [350px]
/// @param {length} $third-star-intensity [10%]
/// @param {length} $third-star-size [2px]
/// @param {length} $third-star-repeat [250px]
@mixin starry-night(
  $background-color: black,
  $star-color: white,
  $first-star-intensity: 20%,
  $first-star-size: 2px,
  $first-star-repeat: 550px,
  $second-star-intensity: 15%,
  $second-star-size: 1px,
  $second-star-repeat: 350px,
  $third-star-intensity: 10%,
  $third-star-size: 2px,
  $third-star-repeat: 250px
) {
    $first-star-intensity: percent-to-decimal($first-star-intensity);
    $second-star-intensity: percent-to-decimal($second-star-intensity);
    $third-star-intensity: percent-to-decimal($third-star-intensity);
    background-image:
      radial-gradient(
        $star-color,
        rgba($star-color, $first-star-intensity) $first-star-size,
        $tr 40px
      ),
      radial-gradient(
        $star-color,
        rgba($star-color, $second-star-intensity) $second-star-size,
        $tr 30px
      ),
      radial-gradient(
        $star-color,
        rgba($star-color, $third-star-intensity) $third-star-size,
        $tr 40px
      ),
      radial-gradient(
        rgba($star-color, .4),
        rgba($star-color, .1) 2px,
        $tr 30px
      );
    background-position:
      0 0,
      40px 60px,
      130px 270px,
      70px 100px;
    background-color: $background-color;
    background-size:
      $first-star-repeat $first-star-repeat,
      $second-star-repeat $second-star-repeat,
      $third-star-repeat $third-star-repeat,
      150px 150px;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [whitesmoke]
/// @param {color} $first-color [moccasin]
/// @param {color} $second-color [powderblue]
/// @param {color} $third-color [lavender]
/// @param {color} $fourth-color [beige]
/// @param {color} $fifth-color [khaki]
/// @param {color} $sixth-color [peachpuff]
/// @param {length} $scale [2em]
/// @param {direction} $first-angle [45deg]
/// @param {direction} $second-angle [-45deg]
/// @param {length} $stripe-width [50%] - relative to $scale
@mixin j-crew(
  $background-color: whitesmoke,
  $first-color: moccasin,
  $second-color: powderblue,
  $third-color: lavender,
  $fourth-color: beige,
  $fifth-color: khaki,
  $sixth-color: peachpuff,
  $scale: 2em,
  $first-angle: 45deg,
  $second-angle: -45deg,
  $stripe-width: 50%
) {
    $stripe-width: percent-to-decimal($stripe-width) * $scale;
    $tr-width: $scale - $stripe-width;
    background-image:
      sharp-repeating-linear-gradient(
        $first-angle,
        $tr               $tr-width,
        $first-color      $tr-width +     $stripe-width,
        $tr           2 * $tr-width +     $stripe-width,
        $second-color 2 * $tr-width + 2 * $stripe-width,
        $tr           3 * $tr-width + 2 * $stripe-width,
        $third-color  3 * $tr-width + 3 * $stripe-width,
        $tr           4 * $tr-width + 3 * $stripe-width,
        $fourth-color 4 * $tr-width + 4 * $stripe-width
      ),
      sharp-repeating-linear-gradient(
        $second-angle,
        $tr $tr-width,
        $fifth-color      $tr-width +     $stripe-width,
        $tr           2 * $tr-width +     $stripe-width,
        $fourth-color 2 * $tr-width + 2 * $stripe-width,
        $tr           3 * $tr-width + 2 * $stripe-width,
        $sixth-color  3 * $tr-width + 3 * $stripe-width
      );
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [firebrick]
/// @param {color} $second-color [beige]
/// @param {color} $third-color [forestgreen]
/// @param {color} $fourth-color [gold]
/// @param {color} $fifth-color [crimson]
/// @param {length} $scale [60px]
/// @param {direction} $first-angle [90deg]
/// @param {direction} $second-angle [180deg]
/// @param {length} $center-stripe-width [16.7%] - relative to $scale
/// @param {length} $surrounding-stripe-width [8.3%] - relative to $scale
@mixin thatchy(
  $first-color: firebrick,
  $second-color: beige,
  $third-color: forestgreen,
  $fourth-color: gold,
  $fifth-color: crimson,
  $scale: 60px,
  $first-angle: 90deg,
  $second-angle: 180deg,
  $center-stripe-width: 16.7%,
  $surrounding-stripe-width: 8.3%
) {
    $center-stripe-width:      percent-to-decimal($center-stripe-width     ) * $scale;
    $surrounding-stripe-width: percent-to-decimal($surrounding-stripe-width) * $scale;
    $inter-stripe-width: ($scale - $center-stripe-width - 2 * $surrounding-stripe-width) / 2;
    $stops:
      $first-color      $inter-stripe-width,
      $second-color     $inter-stripe-width +     $surrounding-stripe-width,
      $third-color      $inter-stripe-width +     $surrounding-stripe-width + $center-stripe-width,
      $fourth-color     $inter-stripe-width + 2 * $surrounding-stripe-width + $center-stripe-width,
      $fifth-color  2 * $inter-stripe-width + 2 * $surrounding-stripe-width + $center-stripe-width;
    background-image:
      sharp-repeating-linear-gradient(
        $first-angle,
        $stops...
      ),
      sharp-repeating-linear-gradient(
        $second-angle,
        $stops...
      );
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $first-color [crimson]
/// @param {color} $background-color [orangered]
/// @param {color} $third-color [orange]
/// @param {color} $fourth-color [gold]
/// @param {color} $fifth-color [white]
/// @param {color} $sixth-color [lightblue]
/// @param {color} $seventh-color [skyblue]
/// @param {color} $eighth-color [steelblue]
/// @param {color} $ninth-color [#38678f]
/// @param {length} $scale [5em]
/// @param {direction} $first-angle [180deg]
/// @param {direction} $second-angle [90deg]
@mixin chunk-street(
  $first-color: crimson,
  $background-color: orangered,
  $third-color: orange,
  $fourth-color: gold,
  $fifth-color: white,
  $sixth-color: lightblue,
  $seventh-color: skyblue,
  $eighth-color: steelblue,
  $ninth-color: #38678f,
  $scale: 5em,
  $first-angle: 180deg,
  $second-angle: 90deg
) {
    $per: .05 * $scale;
    $stops:
      $first-color          $per,
      $background-color  2 * $per,
      $third-color       3 * $per,
      $fourth-color      4 * $per,
      $fifth-color       5 * $per,
      $sixth-color       6 * $per,
      $seventh-color     7 * $per,
      $eighth-color      8 * $per,
      $ninth-color       9 * $per,
      $seventh-color    10 * $per,
      $ninth-color      11 * $per,
      $eighth-color     12 * $per,
      $seventh-color    13 * $per,
      $sixth-color      14 * $per,
      $fifth-color      15 * $per,
      $fourth-color     16 * $per,
      $third-color      17 * $per,
      $background-color 18 * $per,
      $first-color      19 * $per,
      $fourth-color     20 * $per;
    background-image:
      sharp-repeating-linear-gradient(
        $first-angle,
        $stops...
      ),
      sharp-repeating-linear-gradient(
        $second-angle,
        $stops...
      );
    background-blend-mode: multiply, normal;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $color [lightcoral]
/// @param {color} $background-color [floralwhite]
/// @param {length} $scale [80px]
/// @param {direction} $first-angle [180deg]
/// @param {direction} $second-angle [90deg]
/// @param {length} $center-stripe-width [25%] - relative to $scale
/// @param {length} $surrounding-stripe-width [6.25%] - relative to $scale
/// @param {length} $surrounding-gap-width [6.25%] - relative to $scale
@mixin stringham(
  $color: lightcoral,
  $background-color: floralwhite,
  $scale: 80px,
  $first-angle: 180deg,
  $second-angle: 90deg,
  $center-stripe-width: 25%,
  $surrounding-stripe-width: 6.25%,
  $surrounding-gap-width: 6.25%
) {
    $center-stripe-width:      percent-to-decimal($center-stripe-width     ) * $scale;
    $surrounding-stripe-width: percent-to-decimal($surrounding-stripe-width) * $scale;
    $surrounding-gap-width:    percent-to-decimal($surrounding-gap-width   ) * $scale;
    $inter-gap-width: ($scale - $center-stripe-width - 2 * $surrounding-stripe-width - 2 * $surrounding-gap-width);
    $stops:
      $tr    $inter-gap-width * .25,
      $color $surrounding-stripe-width,
      $tr    $surrounding-gap-width,
      $color $center-stripe-width,
      $tr    $surrounding-gap-width,
      $color $surrounding-stripe-width,
      $tr    $inter-gap-width * .75;
    background-image:
      cumulative-sharp-repeating-linear-gradient(
        $first-angle,
        $stops...
      ),
      cumulative-sharp-repeating-linear-gradient(
        $second-angle,
        $stops...
      );
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://lea.verou.me/css3patterns/#madras
/// @group lea-verou
/// @param {color} $background-color [hsl(34, 53%, 82%)]
/// @param {color} $first-color [hsla(197, 62%, 11%, 0.5)]
/// @param {color} $second-color [hsla(5, 53%, 63%, 0.5)]
/// @param {color} $third-color [hsla(35, 91%, 65%, 0.5)]
/// @param {length} $scale [160px]
/// @param {direction} $first-angle [45deg]
/// @param {direction} $second-angle [135deg]
@mixin madras(
  $background-color: hsl(34, 53%, 82%),
  $first-color: hsla(197, 62%, 11%, 0.5),
  $second-color: hsla(5, 53%, 63%, 0.5),
  $third-color: hsla(35, 91%, 65%, 0.5),
  $scale: 160px,
  $first-angle: 45deg,
  $second-angle: 135deg
) {
    background-image:
      offset-sharp-repeating-linear-gradient(
        $first-angle,
        $tr           $scale * 5   / 160,
        $first-color  $scale * 10  / 160,
        $tr           $scale * 35  / 160,
        $second-color $scale * 40  / 160,
        $first-color  $scale * 50  / 160,
        $tr           $scale * 60  / 160,
        $second-color $scale * 70  / 160,
        $third-color  $scale * 80  / 160,
        $tr           $scale * 90  / 160,
        $second-color $scale * 110 / 160,
        $tr           $scale * 120 / 160,
        $first-color  $scale * 140 / 160
      ),
      offset-sharp-repeating-linear-gradient(
        $second-angle,
        $tr           $scale * 5   / 160,
        $first-color  $scale * 10  / 160,
        $tr           $scale * 35  / 160,
        $second-color $scale * 40  / 160,
        $first-color  $scale * 50  / 160,
        $tr           $scale * 60  / 160,
        $second-color $scale * 70  / 160,
        $third-color  $scale * 80  / 160,
        $tr           $scale * 90  / 160,
        $second-color $scale * 110 / 160,
        $tr           $scale * 140 / 160,
        $first-color  $scale
      );
    background-color: $background-color;
}

/// @link http://lea.verou.me/css3patterns/#argyle
/// @group lea-verou
/// @param {color} $background-color [#6d695c]
/// @param {color} $diamond-color [rgba(0, 0, 0, .1)]
/// @param {color} $line-color [rgba(255, 255, 255, .1)]
/// @param {length} $line-width [1px]
/// @param {length} $scale [120px]
@mixin argyle(
  $background-color: #6d695c,
  $diamond-color: rgba(0, 0, 0, .1),
  $line-color: rgba(255, 255, 255, .1),
  $line-width: 1px,
  $scale: 120px
) {
  background-image:
    sharp-repeating-linear-gradient(
      120deg,
      $line-color $line-width / 2,
      $tr $scale / 2 - $line-width / 2,
      $line-color $scale / 2
    ),
    sharp-repeating-linear-gradient(
      60deg,
      $line-color $line-width / 2,
      $tr $scale / 2 - $line-width / 2,
      $line-color $scale / 2
    ),
    sharp-linear-gradient(
      60deg,
      $diamond-color 25%,
      $tr 75%,
      $diamond-color
    ),
    sharp-linear-gradient(
      120deg,
      $diamond-color 25%,
      $tr 75%,
      $diamond-color
    );
  background-color: $background-color;
  background-size: $scale * 7 / 12 $scale;
}

/// @link http://lea.verou.me/css3patterns/#zig-zag
/// @group lea-verou
/// @param {color} $background-color [#EC173A]
/// @param {color} $color [#ECEDDC]
/// @param {length} $scale [100px]
@mixin zig-zag(
  $background-color: #EC173A,
  $color: #ECEDDC,
  $scale: 100px
) {
  $stops:
    $color 25%,
    $tr;
  background-image:
    sharp-linear-gradient(
      135deg,
      $stops...
    ),
    sharp-linear-gradient(
      225deg,
      $stops...
    ),
    sharp-linear-gradient(
      315deg,
      $stops...
    ),
    sharp-linear-gradient(
      45deg,
      $stops...
    );
  background-position:
    - $scale / 2 0,
    - $scale / 2 0,
    0 0,
    0 0;
  background-color: $background-color;
  background-size: $scale $scale;
}

/// @link http://lea.verou.me/css3patterns/#rainbow-bokeh
/// @group lea-verou
/// @param {length} $first-bubble-size [470px]
/// @param {length} $second-bubble-size [970px]
/// @param {length} $third-bubble-size [410px]
/// @param {length} $fourth-bubble-size [610px]
/// @param {length} $fifth-bubble-size [530px]
/// @param {length} $sixth-bubble-size [730px]
/// @param {direction} $background-angle [45deg]
@mixin rainbow-bokeh(
  $first-bubble-size: 470px,
  $second-bubble-size: 970px,
  $third-bubble-size: 410px,
  $fourth-bubble-size: 610px,
  $fifth-bubble-size: 530px,
  $sixth-bubble-size: 730px,
  $background-angle: 45deg
) {
    background-image:
      radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .15) 30%,
        rgba(255, 255, 255, .3) 32%,
        rgba(255, 255, 255, 0) 33%
      ),
      radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .1) 11%,
        rgba(255, 255, 255, .3) 13%,
        rgba(255, 255, 255, 0) 14%
      ),
      radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .2) 17%,
        rgba(255, 255, 255, .43) 19%,
        rgba(255, 255, 255, 0) 20%
      ),
      radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .2) 11%,
        rgba(255, 255, 255, .4) 13%,
        rgba(255, 255, 255, 0) 14%
      ),
      radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .2) 11%,
        rgba(255, 255, 255, .4) 13%,
        rgba(255, 255, 255, 0) 14%
      ),
      radial-gradient(
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .1) 11%,
        rgba(255, 255, 255, .2) 13%,
        rgba(255, 255, 255, 0) 14%
      ),
      linear-gradient(
        $background-angle,
        #343702 0%,
        #184500 20%,
        #187546 30%,
        #006782 40%,
        #0b1284 50%,
        #760ea1 60%,
        #83096e 70%,
        #840b2a 80%,
        #b13e12 90%,
        #e27412 100%
      );
    background-position:
      0 0,
      0 0,
      0 110px,
      -130px -170px,
      130px 370px,
      0 0,
      0 0;
    background-size:
      $first-bubble-size $first-bubble-size,
      $second-bubble-size $second-bubble-size,
      $third-bubble-size $third-bubble-size,
      $fourth-bubble-size $fourth-bubble-size,
      $fifth-bubble-size $fifth-bubble-size,
      $sixth-bubble-size $sixth-bubble-size,
      100% 100%;
}

/// @link http://lea.verou.me/css3patterns/#upholstery
/// @group lea-verou
/// @param {hue} $hue [0]
/// @param {length} $button-size [10%]
/// @param {length} $scale [100px]
@mixin upholstery(
  $hue: 0,
  $button-size: 10%,
  $scale: 100px
) {
    background-image:
      radial-gradient(
        hsl($hue, 100%, 27%)     $button-size * .4,
        hsl($hue, 100%, 18%)     $button-size * .9,
        hsla($hue, 100%, 20%, 0) $button-size * .9
      ),
      radial-gradient(
        hsl($hue, 100%, 27%)     $button-size * .4,
        hsl($hue, 100%, 18%)     $button-size * .8,
        hsla($hue, 100%, 20%, 0) $button-size
      ),
      radial-gradient(
        hsla($hue, 100%, 30%, .8) 20%,
        hsla($hue, 100%, 20%, 0)
      ),
      radial-gradient(
        hsla($hue, 100%, 30%, .8) 20%,
        hsla($hue, 100%, 20%, 0)
      ),
      radial-gradient(
        hsla($hue, 100%, 20%, 1) 35%,
        hsla($hue, 100%, 20%, 0) 60%
      ),
      radial-gradient(
        hsla($hue, 100%, 20%, 1) 35%,
        hsla($hue, 100%, 20%, 0) 60%
      ),
      radial-gradient(
        hsla($hue, 100%, 15%, .7) 35%,
        hsla($hue, 100%, 20%, 0)
      ),
      radial-gradient(
        hsla($hue, 100%, 15%, .7) 35%,
        hsla($hue, 100%, 20%, 0)
      ),
      linear-gradient(
        45deg,
        hsla($hue, 100%, 20%, 0) 49%,
        hsla($hue, 100%, 0%, 1) 50%,
        hsla($hue, 100%, 20%, 0) 70%
      ),
      linear-gradient(
        -45deg,
        hsla($hue, 100%, 20%, 0) 49%,
        hsla($hue, 100%, 0%, 1) 50%,
        hsla($hue, 100%, 20%, 0) 70%
      );
    background-position:
      0 0,
      $scale / 2 $scale / 2,
      $scale / 2 0,
      0 $scale / 2,
      $scale / 2 0,
      $scale $scale / 2,
      0 0,
      $scale / 2 $scale / 2,
      0 0,
      0 0;
    background-color: hsl($hue, 100%, 10%);
    background-size:
      $scale $scale;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [beige]
/// @param {color} $first-color [wheat]
/// @param {color} $second-color [forestgreen]
/// @param {color} $third-color [crimson]
/// @param {length} $scale [60px]
/// @param {direction} $angle [to top left]
/// @param {direction} $other-angle [to left]
@mixin slanted-stripes-2(
  $background-color: beige,
  $first-color: wheat,
  $second-color: forestgreen,
  $third-color: crimson,
  $scale: 60px,
  $angle: to top left,
  $other-angle: to left
) {
    $single-width: $scale / 3;
    background-image:
      sharp-repeating-linear-gradient($angle, $first-color $single-width, $tr $single-width * 2, $second-color $single-width * 3),
      sharp-repeating-linear-gradient($other-angle, $third-color $single-width, $first-color $single-width * 2, $second-color $single-width * 3);
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [wheat]
/// @param {color} $first-color [#96526b]
/// @param {color} $second-color [#f5cf66]
/// @param {color} $third-color [#ebad60]
/// @param {color} $fourth-color [#8bab8d]
/// @param {length} $scale [20em]
/// @param {direction} $angle [to top left]
/// @param {direction} $other-angle [to top right]
/// @param {length} $stripe-width [50%] - relative to $scale / 2
@mixin chard(
  $background-color: wheat,
  $first-color: #96526b,
  $second-color: #f5cf66,
  $third-color: #ebad60,
  $fourth-color: #8bab8d,
  $scale: 20em,
  $angle: to top left,
  $other-angle: to top right,
  $stripe-width: 50%
) {
    $stripe-width: percent-to-decimal($stripe-width) * $scale / 2;
    $tr-width: $scale / 2 - $stripe-width;
    background-image:
      cumulative-sharp-repeating-linear-gradient(
        $angle,
        $tr $tr-width,
        $first-color $stripe-width,
        $tr $tr-width,
        $second-color $stripe-width
      ),
      cumulative-sharp-repeating-linear-gradient(
        $other-angle,
        $tr $tr-width,
        $third-color $stripe-width,
        $tr $tr-width,
        $fourth-color $stripe-width
      );
    background-color: $background-color;
    background-blend-mode: multiply;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {color} $background-color [orangered]
/// @param {color} $first-color [rgb(128, 0, 128)]
/// @param {color} $second-color [rgb(0, 0, 139)]
/// @param {color} $third-color [rgb(220, 20, 60)]
/// @param {color} $fourth-color [rgb(255, 69, 0)]
/// @param {length} $first-size [13em]
/// @param {length} $second-size [11em]
/// @param {length} $third-size [5em]
/// @param {length} $fourth-size [11em]
/// @param {length} $inner-ring-size [35%]
/// @param {length} $outer-ring-size [55%]
/// @param {opacity} $opacity [.4]
@mixin drops(
  $background-color: orangered,
  $first-color: rgb(128, 0, 128),
  $second-color: rgb(0, 0, 139),
  $third-color: rgb(220, 20, 60),
  $fourth-color: rgb(255, 69, 0),
  $first-size: 13em,
  $second-size: 11em,
  $third-size: 5em,
  $fourth-size: 11em,
  $inner-ring-size: 35%,
  $outer-ring-size: 55%,
  $opacity: .4
) {
    $fifth-color: rgb(255, 215, 0);
    $sixth-color: rgb(154, 205, 0);
    $seventh-color: rgb(70, 130, 180);
    $fifth-size: 7em;
    $sixth-size: 5em;
    $seventh-size: 3em;
    background-image:
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($first-color, $opacity) $inner-ring-size - 4%,
        rgba($first-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($first-color, $opacity) $outer-ring-size - 4%,
        rgba($first-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      ),
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($second-color, $opacity) $inner-ring-size - 4%,
        rgba($second-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($second-color, $opacity) $outer-ring-size - 4%,
        rgba($second-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      ),
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($third-color, $opacity) $inner-ring-size - 4%,
        rgba($third-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($third-color, $opacity) $outer-ring-size - 4%,
        rgba($third-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      ),
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($fourth-color, $opacity) $inner-ring-size - 4%,
        rgba($fourth-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($fourth-color, $opacity) $outer-ring-size - 4%,
        rgba($fourth-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      ),
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($fifth-color, $opacity) $inner-ring-size - 4%,
        rgba($fifth-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($fifth-color, $opacity) $outer-ring-size - 4%,
        rgba($fifth-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      ),
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($sixth-color, $opacity) $inner-ring-size - 4%,
        rgba($sixth-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($sixth-color, $opacity) $outer-ring-size - 4%,
        rgba($sixth-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      ),
      radial-gradient(
        rgba(255, 255, 255, .2) $inner-ring-size - 15%,
        rgba($seventh-color, $opacity) $inner-ring-size - 4%,
        rgba($seventh-color, $opacity) $inner-ring-size,
        rgba(255, 255, 255, .2) $inner-ring-size + 1%,
        rgba(255, 255, 255, .2) $inner-ring-size + 5%,
        rgba($seventh-color, $opacity) $outer-ring-size - 4%,
        rgba($seventh-color, $opacity) $outer-ring-size,
        rgba(255, 255, 255, .2) $outer-ring-size + 1%
      );
    background-color: $background-color;
    background-size:
      $first-size $first-size,
      $second-size $second-size,
      $third-size $third-size,
      $fourth-size $fourth-size,
      $fifth-size $fifth-size,
      $sixth-size $sixth-size,
      $seventh-size $seventh-size;
    background-position:
      50% 50%,
      20% 20%,
      30% 30%,
      70% 70%;
    background-blend-mode:
      overlay,
      normal,
      hard-light,
      overlay,
      multiply,
      soft-light;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {length} $scale [8em]
/// @param {color} $first-color [dodgerblue]
/// @param {color} $second-color [lightskyblue]
/// @param {color} $third-color [deepskyblue]
/// @param {color} $fourth-color [gainsboro]
/// @param {color} $fifth-color [lightsteelblue]
/// @param {color} $sixth-color [deepskyblue]
/// @param {color} $seventh-color [lightskyblue]
/// @param {color} $first-fade-color [coral]
/// @param {color} $second-fade-color [darkslateblue]
@mixin finger-wave(
  $scale: 8em,
  $first-color: dodgerblue,
  $second-color: skyblue,
  $third-color: deepskyblue,
  $fourth-color: gainsboro,
  $fifth-color: lightsteelblue,
  $sixth-color: deepskyblue,
  $seventh-color: lightskyblue,
  $first-fade-color: coral,
  $second-fade-color: darkslateblue
) {
    $single-width: $scale / 8;
    background-image:
      cumulative-sharp-radial-gradient(
        at bottom right,
        $first-color $single-width,
        $second-color $single-width,
        $third-color $single-width,
        $fourth-color $single-width,
        $fifth-color $single-width,
        $sixth-color $single-width,
        $seventh-color $single-width,
        $tr
      ),
      cumulative-sharp-radial-gradient(
        at top left,
        $tr $single-width,
        $seventh-color $single-width,
        $sixth-color $single-width,
        $fifth-color $single-width,
        $fourth-color $single-width,
        $third-color $single-width,
        $second-color $single-width,
        $first-color $single-width,
        $tr
      ),
      radial-gradient(
        circle at center bottom,
        $first-fade-color,
        $second-fade-color
      );
    background-size:
      $scale $scale,
      $scale $scale,
      cover;
    background-blend-mode: overlay;
}

/// @link http://bennettfeely.com/gradients/
/// @group blend-modes
/// @param {length} $scale [4em]
/// @param {color} $first-color [#99eb47]
/// @param {color} $second-color [#b3e87d]
/// @param {color} $third-color [#ccebad]
/// @param {color} $fourth-color [#a6ed5e]
/// @param {color} $background-color [#99e052]
@mixin slither-wave(
  $scale: 4em,
  $first-color: #99eb47,
  $second-color: #b3e87d,
  $third-color: #ccebad,
  $fourth-color: #a6ed5e,
  $background-color: #99e052
) {
    $stops:
      $first-color 3.36927%,
      $tr 6.73854%,
      $second-color 10.10782%,
      $tr 13.47709%,
      $third-color 16.84636%,
      $tr 20.21563%,
      $fourth-color 23.58491%,
      $tr 26.95418%,
      $third-color 30.32345%,
      $tr 33.69272%,
      $second-color 37.06199%,
      $tr 40.43126%,
      $first-color 43.80054%,
      $tr;
    background-image:
      sharp-radial-gradient(
        circle at left,
        $stops...
      ),
      sharp-radial-gradient(
        circle at right,
        $stops...
      ),
      sharp-radial-gradient(
        circle at left,
        $stops...
      ),
      sharp-radial-gradient(
        circle at right,
        $stops...
      );
    background-size: $scale $scale;
    background-position:
      0 0,
      0 $scale / 2,
      $scale / 2 0,
      $scale / 2 $scale / 2;
    background-color: $background-color;
    background-blend-mode:
      overlay,
      overlay,
      normal,
      normal;
}