gerillass 0.0.6 → 3.0.0

data/scss/library/_remove.scss

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "../library/breakpoint" as *;
+
+@mixin remove($params...) {
+  @if list.length($params) == 0 {
+    display: none;
+  } @else if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    // `only` rather than the one-argument form, which compiles to the same
+    // query, so the warning below names `remove` and is printed once.
+    @include breakpoint(only, $value) {
+      display: none;
+    }
+    @warn "`remove(#{$value})` hides the element only at a viewport exactly that wide, a single pixel. Write `remove(only, #{$value})` for that width, or `remove(min, #{$value})` from it upwards.";
+  } @else if list.length($params) == 2 {
+    @if list.index("min" "max", list.nth($params, 1)) {
+      $mode: list.nth($params, 1);
+      $value: list.nth($params, 2);
+      @if $mode == "min" {
+        @include breakpoint(min, $value) {
+          display: none;
+        }
+      } @else if $mode == "max" {
+        @include breakpoint(max, $value) {
+          display: none;
+        }
+      }
+    } @else {
+      $start: list.nth($params, 1);
+      $end: list.nth($params, 2);
+      @include breakpoint($start, $end) {
+        display: none;
+      }
+    }
+  } @else {
+    @error "`remove` takes at most 2 arguments; you passed #{list.length($params)}. Pass nothing to hide the element outright, one breakpoint, `min`/`max` plus a breakpoint, or a start and an end breakpoint.";
+  }
+}

data/scss/library/_reset-css.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+
+@mixin reset-css {
+    @if & {
+        @error "Please call the mixin at the root of your style sheet.";
+    } @else {
+    // http://meyerweb.com/eric/tools/css/reset/
+    // v2.0 | 20110126
+    // License: none (public domain)
+    //
+    // Comments in this file are `//`: a /* */ comment inside a mixin is emitted
+    // into the stylesheet of everyone who includes it.
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%;
+      font: inherit;
+      vertical-align: baseline;
+    }
+    // HTML5 display-role reset for older browsers
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, main, nav, section {
+      display: block;
+    }
+    body {
+      line-height: 1;
+    }
+    ol, ul {
+      list-style: none;
+    }
+    blockquote, q {
+      quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+      content: '';
+      content: none;
+    }
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+  }
+}

data/scss/library/_reset-figure.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "../library/responsive-image" as *;
+
+@mixin reset-figure {
+  margin: 0;
+  img {
+    @include responsive-image;
+  }
+}

data/scss/library/_resizable.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/keyword-value" as *;
+
+// Measured in Chrome 152, `resize` kept none, both, horizontal, vertical, block,
+// inline and auto, and `overflow` one or two of visible, hidden, clip, scroll,
+// auto and overlay, all in any case, with the CSS-wide keywords on their own and
+// var(). Both dropped a quoted keyword, three overflow values, and a CSS-wide
+// keyword beside another, such as `overflow: inherit auto`. null leaves the
+// declaration out, as it always has.
+@mixin resizable($direction: both, $overflow: auto) {
+  $problem: keywordProblem($direction, "none" "both" "horizontal" "vertical" "block" "inline" "auto");
+  @if $problem {
+    @error "`#{meta.inspect($direction)}` is not a valid $direction for `resizable`: #{$problem}. A browser drops the declaration.";
+  }
+  $problem: keywordProblem($overflow, "visible" "hidden" "clip" "scroll" "auto" "overlay", 2);
+  @if $problem {
+    @error "`#{meta.inspect($overflow)}` is not a valid $overflow for `resizable`: #{$problem}. A browser drops the declaration.";
+  }
+  // Written without quotes, since `resize: "both"` was dropped.
+  @if meta.type-of($direction) == "string" {
+    resize: string.unquote($direction);
+  } @else {
+    resize: $direction;
+  }
+  @if meta.type-of($overflow) == "string" {
+    overflow: string.unquote($overflow);
+  } @else {
+    overflow: $overflow;
+  }
+  max-width: 100%;
+}

data/scss/library/_responsive-image.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@mixin responsive-image {
+  display: block;
+  width: 100%;
+}

data/scss/library/_scissors.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "../utilities/validate-scissors" as *;
+
+@mixin scissors($corners) {
+  @if list.length($corners) == 1 {
+    $corners: validateScissors($corners);
+    clip-path: polygon(
+      0 #{list.nth($corners, 1)},
+      #{list.nth($corners, 1)} 0,
+      calc(100% - #{list.nth($corners, 1)}) 0,
+      100% #{list.nth($corners, 1)},
+      100% calc(100% - #{list.nth($corners, 1)}),
+      calc(100% - #{list.nth($corners, 1)}) 100%,
+      #{list.nth($corners, 1)} 100%,
+      0 calc(100% - #{list.nth($corners, 1)})
+    );
+  } @else if list.length($corners) == 4 {
+    $corners: validateScissors($corners);
+    clip-path: polygon(
+      0 #{list.nth($corners, 1)},
+      #{list.nth($corners, 1)} 0,
+      calc(100% - #{list.nth($corners, 2)}) 0,
+      100% #{list.nth($corners, 2)},
+      100% calc(100% - #{list.nth($corners, 3)}),
+      calc(100% - #{list.nth($corners, 3)}) 100%,
+      #{list.nth($corners, 4)} 100%,
+      0 calc(100% - #{list.nth($corners, 4)})
+    );
+  } @else {
+    @error "`scissors` takes either 1 corner size or 4; you passed #{list.length($corners)}. Pass one length to cut every corner equally, or four lengths in top-left, top-right, bottom-right, bottom-left order.";
+  }
+}

data/scss/library/_screen-agent.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../internal/custom-property-in" as *;
+@use "../internal/is-condition-value" as *;
+
+@mixin screen-agent($resolution) {
+  $custom-property: customPropertyIn($resolution);
+  @if $custom-property {
+    @error "`#{$custom-property}` cannot be used as a resolution: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass `1x`, `2x`, `3x` or a resolution such as `2dppx`.";
+  }
+  @if $resolution == "1x" {
+    @media (min-resolution: 96dpi) {
+      @content;
+    }
+  } @else if $resolution == "2x" {
+    @media (min-resolution: 192dpi) {
+      @content;
+    }
+  } @else if $resolution == "3x" {
+    @media (min-resolution: 288dpi) {
+      @content;
+    }
+  } @else {
+    // Measured in Chrome 152, `(min-resolution: huge)`, `(min-resolution: 2)`,
+    // `(min-resolution: 10px)` and `(min-resolution: -1dppx)` never match.
+    @if not isConditionValue($resolution, "resolution") {
+      @error "`#{meta.inspect($resolution)}` is not a valid $resolution for `screen-agent`: `(min-resolution: #{meta.inspect($resolution)})` would never match. Pass `1x`, `2x`, `3x`, or a resolution such as `2dppx`, `192dpi` or `38dpcm`.";
+    }
+    @media (min-resolution: #{$resolution}) {
+      @content;
+    }
+  }
+}

data/scss/library/_sizer.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../internal/length-problem" as *;
+
+@mixin sizer($width, $height: $width) {
+  @each $name, $value in ("$width": $width, "$height": $height) {
+    $problem: sizeProblem($value);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `sizer`: #{$problem}. A browser drops the declaration.";
+    }
+  }
+  width: $width;
+  height: $height;
+}

data/scss/library/_smartphone.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@use "sass:map";
+@use "../maps/map-for-smartphones" as *;
+@use "../utilities/map-deep-get" as *;
+
+@mixin smartphone($device, $orientation: null) {
+  @if map.has-key($map-for-smartphones, $device) {
+    @if $orientation == portrait or $orientation == null {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-smartphones, $device, 'width')) 
+      and (device-height: mapDeepGet($map-for-smartphones, $device, 'height'))
+      and (orientation: portrait) {
+        @content;
+      }
+    } @else if $orientation == landscape {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-smartphones, $device, 'height')) 
+      and (device-height: mapDeepGet($map-for-smartphones, $device, 'width'))
+      and (orientation: landscape) {
+        @content;
+      }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `smartphone`. Pass `portrait`, `landscape`, or no orientation at all.";
+    }
+  } @else {
+    @error "`#{$device}` is not a device known to `smartphone`. Pass one of: #{map.keys($map-for-smartphones)}.";
+  }
+}

data/scss/library/_sprite.scss

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/length-problem" as *;
+
+$-places: "left" "center" "right" "top" "bottom";
+
+// What is wrong with $position as a background-position, or null. Measured in
+// Chrome 152, background-position kept one or two lengths, percentages or
+// place keywords, keywords with offsets such as `left 10px top 5px`, var(),
+// maths functions and a CSS-wide keyword alone. It dropped a unitless number
+// other than 0, a unit that is not a length, any other word or colour, an image,
+// and three or four lengths with no keyword. Interpolation, as in
+// `#{$x}px #{$y}px`, gives the same value as strings, so each part is read.
+@function -position-problem($position) {
+  $parts: $position;
+  @if meta.type-of($position) == "string" and string.slice(meta.inspect($position), 1, 1) != "\"" and not string.index($position, "(") and string.index($position, " ") {
+    $parts: ();
+    $text: $position;
+    $at: string.index($text, " ");
+    @while $at {
+      @if $at > 1 {
+        $parts: list.append($parts, string.unquote(string.slice($text, 1, $at - 1)));
+      }
+      $text: string.slice($text, $at + 1);
+      $at: string.index($text, " ");
+    }
+    $parts: list.append($parts, string.unquote($text));
+  } @else if meta.type-of($position) != "list" {
+    $parts: ($position,);
+  }
+  @if list.length($parts) > 4 {
+    @return "a background position takes at most four values";
+  }
+  $keywords: 0;
+  @each $part in $parts {
+    @if meta.type-of($part) == "string" and list.index($-places, string.to-lower-case($part)) {
+      $keywords: $keywords + 1;
+    } @else {
+      $problem: lengthProblem($part, $css-wide: list.length($parts) == 1);
+      @if $problem == "it is not a length" {
+        @return "`#{meta.inspect($part)}` is not a length or one of left, center, right, top or bottom";
+      } @else if $problem {
+        @return "in `#{meta.inspect($part)}`, #{$problem}";
+      }
+    }
+  }
+  @if list.length($parts) > 2 and $keywords == 0 {
+    @return "three or four values need place keywords, such as `left 10px top 5px`";
+  }
+  @return null;
+}
+
+@mixin sprite($params...) {
+  @if list.length($params) == 1 {
+    @if meta.type-of(list.nth($params, 1)) == "string" {
+      $str-length: string.length(list.nth($params, 1));
+      $str-end: string.slice(list.nth($params, 1), $str-length - 3);
+      @if list.index(".png" ".jpg" ".svg", $str-end) {
+        $image-url: list.nth($params, 1);
+        display: inline-block;
+        background-image: url($image-url);
+        background-repeat: no-repeat;
+      } @else {
+        @error "`#{list.nth($params, 1)}` is not a valid image path for `sprite`. The path must end in .png, .jpg or .svg.";
+      }
+    } @else {
+      $position: list.nth($params, 1);
+      $problem: -position-problem($position);
+      @if $problem {
+        @error "`#{meta.inspect($position)}` is not a valid position for `sprite`: #{$problem}. A browser drops the declaration.";
+      }
+      background-position: $position;
+    }
+  } @else if list.length($params) == 2 {
+    $image-url: list.nth($params, 1);
+    $position: list.nth($params, 2);
+    // The one-argument form checks its path; this one did not, so a list was
+    // written into url(), which a browser drops, and a number asked for a file
+    // of that name. Measured in Chrome 152: `url(16 9)` was dropped.
+    @if meta.type-of($image-url) != "string" {
+      @error "`#{meta.inspect($image-url)}` is not a valid image path for `sprite`: with two arguments the first is one path as a string, and a browser drops a list in `url()`. Pass a path such as `\"/img/sprite.png\"`, then the position.";
+    }
+    @if $position != null {
+      $problem: -position-problem($position);
+      @if $problem {
+        @error "`#{meta.inspect($position)}` is not a valid position for `sprite`: #{$problem}. A browser drops the declaration.";
+      }
+    }
+    display: inline-block;
+    background-image: url($image-url);
+    background-position: $position;
+    background-repeat: no-repeat;
+  } @else {
+    @error "`sprite` takes 1 or 2 arguments; you passed #{list.length($params)}. Pass an image path, a background position, or both in that order.";
+  }
+  @content;
+}

data/scss/library/_stretched-link.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@mixin stretched-link($value: "before") {
+  @if list.index("before" "after", $value) {
+    &#{"::" + $value} {
+      content: "";
+      position: absolute;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0);
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+  } @else {
+    @error "'#{$value}' is a wrong argument. This mixin accepts 'before' or 'after' as an argument. If you don't pass any argument default it will target the '::before' pseudo-element of the selected element.";
+  }
+}

data/scss/library/_tablet.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@use "sass:map";
+@use "../maps/map-for-tablets" as *;
+@use "../utilities/map-deep-get" as *;
+
+@mixin tablet($device, $orientation: null) {
+  @if map.has-key($map-for-tablets, $device) {
+    @if $orientation == portrait or $orientation == null {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-tablets, $device, 'width')) 
+      and (device-height: mapDeepGet($map-for-tablets, $device, 'height'))
+      and (orientation: portrait) {
+        @content;
+      }
+    } @else if $orientation == landscape {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-tablets, $device, 'height')) 
+      and (device-height: mapDeepGet($map-for-tablets, $device, 'width'))
+      and (orientation: landscape) {
+        @content;
+      }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `tablet`. Pass `portrait`, `landscape`, or no orientation at all.";
+    }
+  } @else {
+    @error "`#{$device}` is not a device known to `tablet`. Pass one of: #{map.keys($map-for-tablets)}.";
+  }
+}

data/scss/library/_text-gradient.scss

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/gradient" as *;
+
+// Fills the letters with a gradient: the gradient mixin's arguments, and
+// background-clip: text. The gradient is built and checked in
+// scss/internal/_gradient.scss.
+//
+// The colours come first since 3.0.0, as in gradient, so a direction, a type
+// and a colour space can all be left out. A call in the old order,
+// `text-gradient("top", (red, blue))`, would otherwise fail on `"top"` not
+// being a colour, so it is caught and answered with the new form.
+//
+// It still writes the background shorthand rather than background-image, so a
+// call in the new order compiles to exactly what the same call compiled to in
+// the old order.
+@mixin text-gradient(
+  $colors,
+  $type: linear,
+  $direction: null,
+  $shape: null,
+  $position: null,
+  $from: null,
+  $in: null,
+  $repeating: false
+) {
+  @if gradientDirection($colors) != null and not list.index("linear" "radial" "conic", string.to-lower-case("#{$type}")) {
+    $written: meta.inspect($type);
+    @if list.separator($type) == "comma" {
+      $written: "(#{$written})";
+    }
+    @error "`text-gradient` takes the colours first since 3.0.0. Write `text-gradient(#{$written}, $direction: #{meta.inspect($colors)})`.";
+  }
+  $value: gradientOf($colors, $type, $direction, $shape, $position, $from, $in, $repeating, $member: "text-gradient");
+  // Written without the space first, as the gradient mixin does, for a browser
+  // that does not know `in`.
+  @if $in != null {
+    background: gradientOf($colors, $type, $direction, $shape, $position, $from, null, $repeating, $member: "text-gradient", $warn: false);
+  }
+  background: $value;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}

data/scss/library/_text-image.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "../internal/image-value" as *;
+
+@mixin text-image($image: null) {
+  @if $image {
+    background-image: imageValue($image, "text-image", "$image");
+  }
+  background-size: cover;
+  background-position: center;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}

data/scss/library/_text-selection.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+@mixin text-selection($value: null) {
+  @if not & and $value == null {
+    ::selection {
+      @content;
+    }
+  } @else if & and $value == "only" {
+    &::selection {
+      @content;
+    }
+  } @else if & and $value == null {
+    &::selection,
+    *::selection {
+      @content;
+    }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `text-selection(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `text-selection`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
+  }
+}

data/scss/library/_text-shadow.scss

@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/clear-unit" as *;
+
+@mixin text-shadow($params...) {
+  $value: ();
+
+  @for $i from 1 through list.length($params) {
+    // Takes each items come from $params.
+    $item: list.nth($params, $i);
+
+    // Each group must carry at least a direction, a colour and a size. Without
+    // this the list.nth() calls below fail with "Invalid index", which says nothing
+    // about what the mixin wanted.
+    @if list.length($item) < 3 {
+      @error "`#{$item}` is not a valid shadow for `text-shadow`. Each group needs a direction, a colour and a size, such as `bottom-right red 5px`. An optional blur and a fill flag may follow.";
+    }
+
+    // The first value comes from the $item is direction.
+    // This will be used in the @if, @else statements with $size to control the offset of the shadows.
+    $direction: list.nth($item, 1);
+
+    // Second value is the color.
+    $color: list.nth($item, 2);
+
+    // The third value is the actual offset value of the shadows.
+    $size: list.nth($item, 3);
+
+    // Takes the unit of the $size value to use it later to increment the amount of shadow based on the unit.
+    $sizeUnit: math.unit($size);
+
+    // The $blur argument is optional. It controls the size of the blur.
+    $blur: null;
+
+    // The $fill argument is optional. This makes shadow fill the gap between the actual text and shadow's end-point. The default value is set to false.
+    $fill: null;
+
+    // Assigns the optional sub-arguments to the actual argument.
+    @if list.length($item) == 4 and meta.type-of(list.nth($item, 4)) == number {
+      $blur: list.nth($item, list.length($item));
+    } @else if list.length($item) == 4 and meta.type-of(list.nth($item, 4)) == bool {
+      $fill: list.nth($item, list.length($item));
+    } @else if list.length($item) == 5 {
+      $blur: list.nth($item, 4);
+      $fill: list.nth($item, list.length($item));
+    }
+
+    // The code below changes the angle of $direction of the shadow based on the predefined values.
+    @if $direction == "top" {
+      @if $fill == true {
+        // The clearUnit(); function is used here due to it is not possible to count $size with a unit. First, it clears the unit from the $size argument and then adds it back again in the @for loop.
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: 0 -#{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: 0 -#{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "top-left" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: -#{$increase} -#{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: -#{$size} -#{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "top-right" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: #{$increase} -#{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: #{$size} -#{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "bottom" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: 0 #{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: 0 #{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "bottom-left" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: -#{$increase} #{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: -#{$size} #{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "bottom-right" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: #{$increase} #{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: #{$size} #{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "left" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: -#{$increase} 0 $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: -#{$size} 0 $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "right" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: #{$increase} 0 $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: #{$size} 0 $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    }
+  }
+  text-shadow: $value;
+}