gerillass 1.6.2 → 2.0.0

package/scss/_gerillass-prefix.scss

@@ -1,1586 +0,0 @@
-@charset "UTF-8";
-@use "sass:math";
-
-@mixin gls-adaptive($gutter: 30px) {
-  $actual-breakpoints: map-remove($map-for-breakpoints, "xsmall");
-  margin: 0 auto;
-  @each $item, $value in $actual-breakpoints {
-    @media (min-width: #{$value}) {
-      max-width: calc(#{$value} - (#{$gutter} * 2));
-    }
-  }
-}
-
-
-
-@mixin gls-after($content: null) {
-  &::after {
-    @if $content == null {
-      @content;
-    } @else if type-of($content) != "string" {
-      @error "`#{$content}` is not a valid $content for `after`. Pass a string to use as the content value, a data- attribute name such as `\"data-label\"` to render it with attr(), or no argument at all and write the content yourself.";
-    } @else {
-      $data: str-slice($content, 1, 5);
-      @if $data == "data-" {
-        content: attr(#{$content});
-        @content;
-      } @else {
-        content: "#{$content}";
-        @content;
-      }
-    }
-  }
-}
-
-
-@mixin gls-all-buttons($pseudo: null) {
-  $list: "hover", "focus", "active", "disabled";
-  @if not $pseudo {
-    #{$list-of-buttons} {
-      @content;
-    }   
-  } @else if index($list, $pseudo) {
-    $all-buttons: __pseudoSelector($list-of-buttons, $pseudo);
-    #{$all-buttons} {
-      @content;
-    }
-  } @else {
-    @error "The argument must be `null` or one of the followings: #{$list}.";
-  }
-}
-
-
-@mixin gls-all-text-inputs($pseudo: null) {
-  $list: "hover", "focus", "active", "invalid", "required", "disabled";
-  @if not $pseudo {
-    #{$list-of-text-inputs} {
-      @content;
-    }
-  } @else if index($list, $pseudo) {
-    $all-text-inputs: __pseudoSelector($list-of-text-inputs, $pseudo);
-    #{$all-text-inputs} {
-      @content;
-    }
-  } @else {
-    @error "The argument must be `null` or one of the followings: #{$list}";
-  }
-}
-
-
-
-@mixin gls-antialias($value: null) {
-  @if not & and $value == null {
-    *,
-    *::before,
-    *::after {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-  } @else if & and $value == "only" {
-    &,
-    &::before,
-    &::after {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-  } @else if & and $value == null {
-    &,
-    &::before,
-    &::after,
-    *,
-    *::before,
-    *::after {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-  } @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 `antialias(\"only\")` inside a selector, or pass no argument at all.";
-  } @else {
-    @error "`#{$value}` is not a valid argument for `antialias`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
-  }
-}
-
-
-
-@mixin gls-background-dots(
-  $color: null,
-  $size: 1em,
-  $gutter: $size * 5,
-  $diagonal: true,
-  $image: null
-) {
-  @if $image != null and type-of($image) != "string" {
-    @error "`#{$image}` is not a valid $image for `background-dots`. Pass an image path as a string.";
-  }
-  @if $diagonal != true and $diagonal != false {
-    @error "`#{$diagonal}` is not a valid $diagonal for `background-dots`. Pass `true` or `false`.";
-  }
-  @if not $color {
-    $color: rgba(0, 0, 0, 0.1);
-    @if $diagonal == true {
-      background-image: radial-gradient($color $size, transparent 0),
-        radial-gradient($color $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2),
-        ($gutter * 2) ($gutter * 2);
-    } @else if $diagonal == false {
-      background-image: radial-gradient($color $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2);
-    }
-  } @else if $color {
-    @if $diagonal == true {
-      background-image: radial-gradient(nth($color, 1) $size, transparent 0),
-        radial-gradient(nth($color, length($color)) $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2),
-        ($gutter * 2) ($gutter * 2);
-    } @else if $diagonal == false {
-      background-image: radial-gradient(nth($color, 1) $size, transparent 0);
-      background-position: math.div($gutter, 2) math.div($gutter, 2);
-      @if length($color) > 1 {
-        @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{nth($color, 1)}' to resolve the problem.";
-      }
-    }
-  }
-  background-size: $gutter $gutter;
-  background-repeat: repeat;
-  @if $image {
-    position: relative;
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      background-image: url(unquote($image));
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      z-index: -1;
-    }
-  }
-}
-
-
-
-@mixin gls-background-image(
-  $image-url: null,
-  $filter-color: null,
-  $filter-direction: null
-) {
-  @if $image-url {
-    @if $filter-color {
-      @if length($filter-color) == 1 {
-        background-image: linear-gradient(to top, $filter-color, $filter-color),
-          url($image-url);
-      } @else if length($filter-color) > 1 {
-        $color-list: ();
-        @for $i from 1 through length($filter-color) {
-          $color-list: append($color-list, nth($filter-color, $i), comma);
-        }
-        @if $filter-direction {
-          @if map-has-key($map-for-directions, $filter-direction) {
-            background-image: linear-gradient(
-                map-get($map-for-directions, $filter-direction),
-                $color-list
-              ),
-              url($image-url);
-          } @else {
-            @if type-of($filter-direction) == "number" and index("deg", unit($filter-direction)) {
-              background-image: linear-gradient($filter-direction, $color-list),
-                url($image-url);
-            } @else {
-              @error "`#{$filter-direction}` is not a valid $filter-direction. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
-            }
-          }
-        } @else {
-          background-image: linear-gradient(to top, $color-list),
-            url($image-url);
-        }
-      }
-    } @else {
-      background-image: url($image-url);
-    }
-  } @else {
-    position: relative;
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      @if length($filter-color) == 1 {
-        background: $filter-color;
-      } @else if length($filter-color) > 1 {
-        @include gls-linear-gradient(
-          if(not $filter-direction, "top", $filter-direction),
-          $filter-color
-        );
-      }
-    }
-    & > * {
-      position: relative;
-      z-index: 1;
-    }
-  }
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-
-
-@mixin gls-background-stripes(
-  $color: null,
-  $thickness: 1em,
-  $rotation: -45deg,
-  $image: null
-) {
-  @if type-of($rotation) != "number" {
-    @error "`#{$rotation}` is not a valid $rotation for `background-stripes`. Pass an angle such as `-45deg`, or a unitless number which is treated as degrees.";
-  }
-  @if $image != null and type-of($image) != "string" {
-    @error "`#{$image}` is not a valid $image for `background-stripes`. Pass an image path as a string.";
-  }
-  $validate-unit: if(not index("deg", unit($rotation)), $rotation + deg, $rotation);
-  $get-image: if($image, unquote(", ") + url(unquote($image)), unquote(""));
-  @if not $color {
-    $color: rgba(0, 0, 0, 0.1);
-    background-image: repeating-linear-gradient(
-        $validate-unit,
-        $color 0,
-        $color $thickness,
-        transparent $thickness,
-        transparent $thickness * 2
-      ) + $get-image;
-    @if $image {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  } @else if length($color) == 1 {
-    background-image: repeating-linear-gradient(
-        $validate-unit,
-        $color 0,
-        $color $thickness,
-        transparent $thickness,
-        transparent $thickness * 2
-      ) + $get-image;
-    @if $image {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  } @else if length($color) > 1 {
-    $list: ();
-    @for $i from 1 through length($color) {
-      $index-color: nth($color, $i);
-      $style-rule: $index-color ($thickness * $i) - $thickness, $index-color $thickness * $i;
-      $list: append($list, $style-rule, comma);
-    }
-    background-image: repeating-linear-gradient($validate-unit, $list) + $get-image;
-    @if $image {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  }
-}
-
-
-
-@mixin gls-before($content: null) {
-  &::before {
-    @if $content == null {
-      @content;
-    } @else if type-of($content) != "string" {
-      @error "`#{$content}` is not a valid $content for `before`. Pass a string to use as the content value, a data- attribute name such as `\"data-label\"` to render it with attr(), or no argument at all and write the content yourself.";
-    } @else {
-      $data: str-slice($content, 1, 5);
-      @if $data == "data-" {
-        content: attr(#{$content});
-        @content;
-      } @else {
-        content: "#{$content}";
-        @content;
-      }
-    }
-  }
-}
-
-
-
-@mixin gls-border-box($value: null) {
-  @if not & and $value == null {
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-  } @else if & and $value == "only" {
-    &,
-    &::before,
-    &::after {
-      box-sizing: border-box;
-    }
-  } @else if & and $value == null {
-    &,
-    &::before,
-    &::after,
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-  } @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 `border-box(\"only\")` inside a selector, or pass no argument at all.";
-  } @else {
-    @error "`#{$value}` is not a valid argument for `border-box`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
-  }
-}
-
-
-
-@mixin gls-border-radius($args...) {
-  $list: join($list-of-directions, ("cross-left", "cross-right", "all"));
-  @if length($args) == 1 {
-    $value: nth($args, 1);
-    border-radius: __null($value, space);
-  } @else if length($args) == 2 {
-    $corner: nth($args, 1);
-    $value: nth($args, 2);
-    @if index($list, $corner) {
-      @if $corner == "top" {
-        border-top-left-radius: $value;
-        border-top-right-radius: $value;
-      } @else if $corner == "top-right" {
-        border-top-right-radius: $value;
-      } @else if $corner == "right" {
-        border-top-right-radius: $value;
-        border-bottom-right-radius: $value;
-      } @else if $corner == "bottom-right" {
-        border-bottom-right-radius: $value;
-      } @else if $corner == "bottom" {
-        border-bottom-left-radius: $value;
-        border-bottom-right-radius: $value;
-      } @else if $corner == "bottom-left" {
-        border-bottom-left-radius: $value;
-      } @else if $corner == "left" {
-        border-top-left-radius: $value;
-        border-bottom-left-radius: $value;
-      } @else if $corner == "top-left" {
-        border-top-left-radius: $value;
-      } @else if $corner == "all" {
-        border-radius: $value;
-      } @else if $corner == "cross-left" {
-        border-top-left-radius: $value;
-        border-bottom-right-radius: $value;
-      } @else if $corner == "cross-right" {
-        border-top-right-radius: $value;
-        border-bottom-left-radius: $value;
-      }
-    } @else {
-      @error "Corner value must be one of the followings: #{$list}.";
-    }
-  } @else if length($args) == 4 {
-    $args: __null($args, space, true);
-    border-top-left-radius: nth($args, 1);
-    border-top-right-radius: nth($args, 2);
-    border-bottom-right-radius: nth($args, 3);
-    border-bottom-left-radius: nth($args, 4);
-  } @else {
-    @error "`border-radius` takes 1, 2 or 4 arguments; you passed #{length($args)}. Use one radius for every corner, a corner name plus a radius, or four radii in top-left, top-right, bottom-right, bottom-left order.";
-  }
-}
-
-
-
-@mixin gls-brand-logo($width, $height, $image-url: null) {
-  display: inline-block;
-  position: relative;
-  width: $width;
-  height: $height;
-  @if $image-url {
-    background-image: url($image-url);
-  }
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100%;
-  a {
-    display: block;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    text-indent: 100%;
-    @include gls-stretched-link(after);
-  }
-}
-
-
-
-@mixin gls-breakpoint($params...) {
-  @if length($params) == 1 {
-    $value: nth($params, 1);
-    @if map-has-key($map-for-breakpoints, $value) {
-      @media (width: map-get($map-for-breakpoints, $value)) {
-        @content;
-      }
-    } @else {
-      @media (width: $value) {
-        @content;
-      }
-    }
-  } @else if length($params) == 2 {
-    @if not index("only" "min" "max" "between", nth($params, 1)) {
-      $start: nth($params, 1);
-      $end: nth($params, 2);
-      @media (min-width: #{__validateBreakpoint($start)}) and (max-width: #{if(map-has-key($map-for-breakpoints, $end), __validateBreakpoint($end) - 1, $end)}) {
-        @content;
-      }
-    } @else {
-      $mode: nth($params, 1);
-      $value: nth($params, 2);
-      @if $mode == "only" {
-        @if map-has-key($map-for-breakpoints, $value) {
-          @media (width: map-get($map-for-breakpoints, $value)) {
-            @content;
-          }
-        } @else {
-          @media (width: $value) {
-            @content;
-          }
-        }
-      } @else if $mode == "min" {
-        @if map-has-key($map-for-breakpoints, $value) {
-          @media (min-width: map-get($map-for-breakpoints, $value)) {
-            @content;
-          }
-        } @else {
-          @media (min-width: $value) {
-            @content;
-          }
-        }
-      } @else if $mode == "max" {
-        @if map-has-key($map-for-breakpoints, $value) {
-          @media (max-width: map-get($map-for-breakpoints, $value)) {
-            @content;
-          }
-        } @else {
-          @media (max-width: $value) {
-            @content;
-          }
-        }
-      } @else if $mode == "between" {
-        $start: nth($value, 1);
-        $end: nth($value, 2);
-        @media (min-width: #{__validateBreakpoint($start)}) and (max-width: #{if(map-has-key($map-for-breakpoints, $end), __validateBreakpoint($end) - 1, $end)}) {
-          @content;
-        }
-      }
-    }
-  }
-}
-
-
-
-@mixin gls-breakpointer($selector: null) {
-  @if $selector != null and type-of($selector) != "string" {
-    @error "`#{$selector}` is not a valid $selector for `breakpointer`. Pass a selector as a string, such as `\".debug\"`, or no argument at all to attach it to body.";
-  }
-  @if & {
-    &::before {
-      @content;
-      @each $key, $value in $map-for-breakpoints {
-        @media (min-width: #{$value}) {
-          content: "#{$key}";
-        }
-      }
-    }
-  } @else {
-    @if $selector {
-      #{$selector}::before {
-        @content;
-        @each $key, $value in $map-for-breakpoints {
-          @media (min-width: #{$value}) {
-            content: "#{$key}";
-          }
-        }
-      }
-    } @else {
-      body::before {
-        @content;
-        @each $key, $value in $map-for-breakpoints {
-          @media (min-width: #{$value}) {
-            content: "#{$key}";
-          }
-        }
-      }
-    }
-  }
-}
-
-
-
-@mixin gls-center($axis: "both") {
-  @if not index("both" "horizontal" "vertical", $axis) {
-    @error "`#{$axis}` is not a valid $axis for `center`. Pass one of: both, horizontal, vertical.";
-  }
-  @if $axis == "both" or $axis == "vertical" {
-    top: 50%;
-  }
-  @if $axis == "both" or $axis == "horizontal" {
-    left: 50%;
-  }
-  transform: 
-    if($axis == "horizontal", translateX(-50%), if($axis == "both", translateX(-50%), null))
-    if($axis == "vertical", translateY(-50%), if($axis == "both", translateY(-50%), null))
-  ;
-}
-
-
-
-@mixin gls-circle($size) {
-  width: $size;
-  height: $size;
-  display: inline-block;
-  border-radius: 100%;
-}
-
-
-
-@mixin gls-clearfix {
-  &::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-}
-
-
-
-@mixin gls-columnizer($params...) {
-  @if length($params) < 1 or length($params) > 3 {
-    @error "`columnizer` takes 1 to 3 arguments; you passed #{length($params)}. Pass the column count, optionally a gutter length, and optionally a boolean telling the last row whether to fill.";
-  }
-  $columns: nth($params, 1);
-  $gutter: null;
-  $fill: false;
-  display: flex;
-  flex-wrap: wrap;
-  @include border-box;
-  > * {
-    @if length($params) == 1 {
-      flex: 0 0 calc(100% / #{$columns});
-      margin-bottom: 0;
-      &:not(:last-child) {
-        margin-right: 0;
-      }
-    } @else if length($params) == 2 {
-      @if type-of(nth($params, 2)) == bool {
-        $fill: nth($params, length($params));
-        flex-grow: #{if($fill == true, 1, 0)};
-        flex-shrink: 0;
-        flex-basis: calc(100% / #{$columns});
-        margin-bottom: 0;
-        &:not(:last-child) {
-          margin-right: 0;
-        }
-      } @else if __isGutter(nth($params, 2)) {
-        $gutter: nth($params, length($params));
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: calc((100% - (#{$columns} - 1) * #{$gutter}) / #{$columns});
-        margin-bottom: $gutter;
-        &:not(:last-child) {
-          margin-right: $gutter;
-        }
-        &:nth-child(#{$columns}n) {
-          margin-right: 0;
-        }
-      } @else {
-        @error "`#{nth($params, 2)}` is not a valid second argument for `columnizer`. Pass a gutter length such as `20px` or `var(--gap)`, or a boolean telling the last row whether to fill.";
-      }
-    } @else if length($params) == 3 {
-      $gutter: nth($params, 2);
-      $fill: nth($params, length($params));
-      flex-grow: if($fill == true, 1, 0);
-      flex-shrink: 0;
-      flex-basis: calc((100% - (#{$columns} - 1) * #{$gutter}) / #{$columns});
-      margin-bottom: $gutter;
-      &:not(:last-child) {
-        margin-right: $gutter;
-      }
-      &:nth-child(#{$columns}n) {
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-
-
-@mixin gls-counter($params...) {
-  $counter: null;
-  $counter-before: null;
-  $counter-after: null;
-
-  @if length($params) == 1 {
-    @if index($list-of-counter-styles, nth($params, 1)) {
-      $counter: nth($params, 1);
-    } @else {
-      $counter-after: nth($params, 1);
-    }
-  } @else if length($params) == 2 {
-    @if index($list-of-counter-styles, nth($params, 1)) {
-      $counter: nth($params, 1);
-      $counter-after: nth($params, 2);
-    } @else if index($list-of-counter-styles, nth($params, 2)) {
-      $counter-before: nth($params, 1);
-      $counter: nth($params, 2);
-    } @else {
-      $counter-before: nth($params, 1);
-      $counter-after: nth($params, 2);
-    }
-  } @else if length($params) == 3 {
-    @if index($list-of-counter-styles, nth($params, 2)) {
-      $counter-before: nth($params, 1);
-      $counter: nth($params, 2);
-      $counter-after: nth($params, 3);
-    }
-  }
-
-  &.counter-start {
-    counter-reset: glsCounter;
-  }
-  &.counter-start .counter-item::before,
-  &.counter-continue .counter-item::before {
-    content: #{if($counter-before, '"' + $counter-before + '"' + " ", null)}counter(
-        glsCounter#{if($counter, ", " + $counter, null)}
-      )
-      #{if($counter-after, " " + '"' + $counter-after + '"', null)};
-    counter-increment: glsCounter;
-    @content;
-  }
-}
-
-
-
-@mixin gls-ellipsis($width: 100%, $display: inline-block) {
-  display: $display;
-  max-width: $width;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  word-wrap: normal;
-}
-
-
-
-@mixin gls-escape-to-parent($selector: null) {
-  @if $selector != null and type-of($selector) != "string" {
-    @error "`#{$selector}` is not a valid $selector for `escape-to-parent`. Pass a selector as a string, such as `\".theme-dark\"`.";
-  }
-  @at-root #{$selector}#{&} {
-    @content;
-  }
-}
-
-
-
-@mixin gls-except($params...) {
-  @if length($params) == 0 {
-    @error "Please pass an argument. The argument must be either a negative or positive number or list of numbers. Or pass one of the following predefined string values: 'first', 'last', 'odd', 'even'.";
-  } @else if length($params) == 1 {
-    $value: nth($params, 1);
-    @if type-of($value) == "number" {
-      @if $value < 0 {
-        &:not(:nth-last-of-type(#{$value * -1})) {
-          @content;
-        }
-      } @else {
-        &:not(:nth-of-type(#{$value})) {
-          @content;
-        }
-      }
-    } @else if type-of($value) == "string" {
-      @if $value == "odd" {
-        &:not(:nth-of-type(odd)) {
-          @content;
-        }
-      } @else if $value == "even" {
-        &:not(:nth-of-type(even)) {
-          @content;
-        }
-      } @else if $value == "first" {
-        &:not(:first-of-type) {
-          @content;
-        }
-      } @else if $value == "last" {
-        &:not(:last-of-type) {
-          @content;
-        }
-      } @else {
-        &:not(#{$value}) {
-          @content;
-        }
-      }
-    } @else {
-      @error "`#{$value}` is not a valid argument for `except`. Pass a positive or negative number, one of `first`, `last`, `odd`, `even`, or a selector such as `.foo`.";
-    }
-  } @else if length($params) > 1 {
-    $items: "";
-    @for $i from 1 through length($params) {
-      $items: $items + if(nth($params, $i) < 0, unquote(":not(:nth-last-of-type(#{nth($params, $i) * -1}))"), unquote(":not(:nth-of-type(#{nth($params, $i)}))"));
-    }
-    &#{$items} {
-      @content;
-    }
-  }
-}
-
-
-
-@mixin gls-font-face(
-  $font-family,
-  $file-path,
-  $font-style: normal,
-  $font-weight: 400,
-  $file-formats: eot woff2 woff ttf svg
-) {
-  @if & {
-    @error "You must call the mixin at the root level of your style sheet, not in the `#{&+'{'+'}'}` selector.";
-  } @else if type-of($font-family) != "string" {
-    @error "`#{$font-family}` is not a valid $font-family for `font-face`. Pass the family name as a string, such as `\"Inter\"`.";
-  } @else if type-of($file-path) != "string" {
-    @error "`#{$file-path}` is not a valid $file-path for `font-face`. Pass the path to the font files without an extension, as a string.";
-  } @else {
-    
-    $list: ();
-
-    @if index(100 200 300 400 500 600 700 800 900, $font-style) {
-      $font-weight: $font-style;
-      $font-style: normal;
-    } @else if not
-      index("normal" "italic" "oblique", $font-style) and
-      type-of($font-style) !=
-      "number"
-    {
-      $font-style-list: ();
-      @for $i from 1 through length($font-style) {
-        $font-style-list: append($font-style-list, nth($font-style, $i), comma);
-      }
-      @for $i from 1 through length($font-style-list) {
-        @if index("eot" "woff2" "woff" "ttf" "svg", nth($font-style-list, $i)) {
-          $file-formats: $font-style-list;
-          $font-style: normal;
-        }
-      }
-    }
-
-    @font-face {
-      font-family: $font-family;
-      @if index($file-formats, eot) {
-        src: url("#{$file-path}.eot");
-      }
-      @for $i from 1 through length($file-formats) {
-        $list: append($list, __fontSource($font-family, $file-path, nth($file-formats, $i)), comma);
-      }
-      src: $list;
-      font-style: $font-style;
-      font-weight: $font-weight;
-      @content;
-    }
-  }
-}
-
-
-
-@mixin gls-hide($toggle: "hide") {
-  @if $toggle == "hide" {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    border: 0;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(100%);
-    white-space: nowrap;
-  } @else if $toggle == "unhide" {
-    position: static;
-    width: auto;
-    height: auto;
-    overflow: visible;
-    clip: auto;
-    clip-path: none;
-    white-space: inherit;
-  } @else if not index ("hide" "unhide", $toggle) {
-    @error "#{$toggle} is not a valid value for the `$toggle` argument. The value must be either `hide` or `unhide`.";
-  }
-}
-
-
-
-@mixin gls-linear-gradient($direction, $colors) {
-  $list: ();
-  @for $i from 1 through length($colors) {
-    $list: append($list, nth($colors, $i), comma);
-  }
-  @if map-has-key($map-for-directions, $direction) {
-    background: linear-gradient(
-      map-get($map-for-directions, $direction),
-      $list
-    );
-  } @else if not map-has-key($map-for-directions, $direction) {
-    @if type-of($direction) != "number" or not index("deg", unit($direction)) {
-      @error "`#{$direction}` is not a valid $direction for `linear-gradient`. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
-    } @else {
-      background: linear-gradient($direction, $list);
-    }
-  }
-}
-
-
-
-@mixin gls-loadify($params...) {
-  @if not & {
-    @if length($params) == 0 or (length($params) == 1 and nth($params, 1) == "init") {
-      @keyframes loadify {
-        to {
-          opacity: 1;
-          visibility: visible;
-          backface-visibility: visible;
-        }
-      }
-      %loadify {
-        opacity: 0;
-        visibility: hidden;
-        backface-visibility: hidden;
-        animation-name: loadify;
-        animation-fill-mode: forwards;
-      }
-    } @else if (length($params) == 1 and nth($params, 1) != "init") or (length($params) == 1 and type-of(nth($params, 1)) != "string") {
-      @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
-    } @else if length($params) > 1 {
-      @error "Only one argument is allowed when you call this mixin at the root of your stylesheet! Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
-    }
-  } @else if & {
-    @extend %loadify;
-    @if length($params) == 0 {
-      animation-delay: 0.2s;
-      animation-duration: 0.5s;
-    } @else if length($params) == 1 {
-      animation-delay: #{__isTime(nth($params, 1))};
-      animation-duration: 0.5s;
-    } @else if length($params) == 2 {
-      animation-delay: #{__isTime(nth($params, 1))};
-      animation-duration: #{__isTime(nth($params, 2))};
-    } @else if length($params) > 2 {
-      @error "You cannot pass more than two arguments.";
-    }
-  }
-}
-
-
-
-@mixin gls-only($params...) {
-  @if length($params) == 0 {
-    @error "Please pass an argument. The argument must be either a negative or positive number or list of numbers. Or pass one of the following predefined string values: 'first', 'last', 'odd', 'even'.";
-  } @else if length($params) == 1 {
-    $value: nth($params, 1);
-    @if type-of($value) == "number" {
-      @if $value < 0 {
-        &:nth-last-of-type(#{$value * -1}) {
-          @content;
-        }
-      } @else {
-        &:nth-of-type(#{$value}) {
-          @content;
-        }
-      }
-    } @else if type-of($value) == "string" {
-      @if $value == "odd" {
-        &:nth-of-type(odd) {
-          @content;
-        }
-      } @else if $value == "even" {
-        &:nth-of-type(even) {
-          @content;
-        }
-      } @else if $value == "first" {
-        &:first-of-type {
-          @content;
-        }
-      } @else if $value == "last" {
-        &:last-of-type {
-          @content;
-        }
-      } @else {
-        // For class, id or attribute selectors.
-        &#{$value} {
-          @content;
-        }
-      }
-    } @else {
-      @error "`#{$value}` is not a valid argument for `only`. Pass a positive or negative number, one of `first`, `last`, `odd`, `even`, or a selector such as `.foo`.";
-    }
-  } @else if length($params) > 1 {
-    $list: ();
-    @for $i from 1 through length($params) {
-      $list: append($list, if(nth($params, $i) < 0, unquote("&:nth-last-of-type(#{nth($params, $i) * -1})"), unquote("&:nth-of-type(#{nth($params, $i)})")), comma);
-    }
-    #{$list} {
-      @content;
-    }
-  }
-}
-
-
-
-@mixin gls-placeholder-shown {
-  &:placeholder-shown {
-    @content;
-  }
-}
-
-
-
-@mixin gls-placeholder {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-  &::-moz-placeholder {
-    @content;
-  }
-  &:-ms-input-placeholder {
-    @content;
-  }
-  &:-moz-placeholder {
-    @content;
-  }
-  &::placeholder {
-    @content;
-  }
-}
-
-
-
-@mixin gls-position($position: absolute, $offsets: 0) {
-  $offsets: __shorthandProperty($offsets);
-  $positioning-offsets: (
-    top: nth($offsets, 1),
-    right: nth($offsets, 2),
-    bottom: nth($offsets, 3),
-    left: nth($offsets, 4),
-  );
-  position: $position;
-  @each $offset, $value in $positioning-offsets {
-    @if __validateLength($value) {
-      #{$offset}: $value;
-    }
-  }
-}
-
-
-
-@mixin gls-radial-gradient($shape, $position, $colors) {
-  @if type-of($shape) != "string" {
-    @error "`#{$shape}` is not a valid $shape for `radial-gradient`. Pass `circle` or `ellipse`.";
-  }
-  @if type-of($position) != "string" {
-    @error "`#{$position}` is not a valid $position for `radial-gradient`. Pass a position name such as `center` or `top-left`, or a raw CSS position as a string.";
-  }
-  $list: ();
-  $shape: unquote($shape);
-  $position: unquote($position);
-  @for $i from 1 through length($colors) {
-    $list: append($list, nth($colors, $i), comma);
-  }
-  @if map-has-key($map-for-positions, $position) {
-    background: radial-gradient(
-      $shape map-get($map-for-positions, $position),
-      $list
-    );
-  } @else if not map-has-key($map-for-positions, $position) {
-    background: radial-gradient($shape $position, $list);
-  }
-}
-
-
-
-@mixin gls-ratio-box($ratio: null) {
-  position: relative;
-  &::before {
-    content: "";
-    display: block;
-    padding-top: __validateRatio($ratio);
-  }
-  & > * {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-
-
-@mixin gls-remove($params...) {
-  @if length($params) == 0 {
-    display: none;
-  } @else if length($params) == 1 {
-    $value: nth($params, 1);
-    @include gls-breakpoint($value) {
-      display: none;
-    }
-  } @else if length($params) == 2 {
-    @if index("min" "max", nth($params, 1)) {
-      $mode: nth($params, 1);
-      $value: nth($params, 2);
-      @if $mode == "min" {
-        @include gls-breakpoint(min, $value) {
-          display: none;
-        }
-      } @else if $mode == "max" {
-        @include gls-breakpoint(max, $value) {
-          display: none;
-        }
-      }
-    } @else {
-      $start: nth($params, 1);
-      $end: nth($params, 2);
-      @include gls-breakpoint($start, $end) {
-        display: none;
-      }
-    }
-  } @else {
-    @error "`remove` takes at most 2 arguments; you passed #{length($params)}. Pass nothing to hide the element outright, one breakpoint, `min`/`max` plus a breakpoint, or a start and an end breakpoint.";
-  }
-}
-
-
-
-@mixin gls-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)
-    */
-    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;
-    }
-  }
-}
-
-
-@mixin gls-reset-figure {
-  margin: 0;
-  img {
-    @include gls-responsive-image;
-  }
-}
-
-
-
-@mixin gls-resizable($direction: both, $overflow: auto) {
-  resize: $direction;
-  overflow: $overflow;
-  max-width: 100%;
-}
-
-
-
-@mixin gls-responsive-image {
-  display: block;
-  width: 100%;
-}
-
-
-
-@mixin gls-responsive-video($ratio: null) {
-  position: relative;
-  &::before {
-    content: "";
-    display: block;
-    padding-top: __validateRatio($ratio);
-  }
-  & > * {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-
-
-@mixin gls-scissors($corners) {
-  @if length($corners) == 1 {
-    $corners: __validateScissors($corners);
-    clip-path: polygon(
-      0 #{nth($corners, 1)},
-      #{nth($corners, 1)} 0,
-      calc(100% - #{nth($corners, 1)}) 0,
-      100% #{nth($corners, 1)},
-      100% calc(100% - #{nth($corners, 1)}),
-      calc(100% - #{nth($corners, 1)}) 100%,
-      #{nth($corners, 1)} 100%,
-      0 calc(100% - #{nth($corners, 1)})
-    );
-  } @else if length($corners) == 4 {
-    $corners: __validateScissors($corners);
-    clip-path: polygon(
-      0 #{nth($corners, 1)},
-      #{nth($corners, 1)} 0,
-      calc(100% - #{nth($corners, 2)}) 0,
-      100% #{nth($corners, 2)},
-      100% calc(100% - #{nth($corners, 3)}),
-      calc(100% - #{nth($corners, 3)}) 100%,
-      #{nth($corners, 4)} 100%,
-      0 calc(100% - #{nth($corners, 4)})
-    );
-  } @else {
-    @error "`scissors` takes either 1 corner size or 4; you passed #{length($corners)}. Pass one length to cut every corner equally, or four lengths in top-left, top-right, bottom-right, bottom-left order.";
-  }
-}
-
-
-
-@mixin gls-screen-agent($resolution) {
-  @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 {
-    @media (min-resolution: #{$resolution}) {
-      @content;
-    }
-  }
-}
-
-
-
-@mixin gls-sizer($width, $height: $width) {
-  width: $width;
-  height: $height;
-}
-
-
-
-@mixin gls-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)}.";
-  }
-}
-
-
-
-@mixin gls-sprite($params...) {
-  @if length($params) == 1 {
-    @if type-of(nth($params, 1)) == "string" {
-      $str-length: str-length(nth($params, 1));
-      $str-end: str-slice(nth($params, 1), $str-length - 3);
-      @if index(".png" ".jpg" ".svg", $str-end) {
-        $image-url: nth($params, 1);
-        display: inline-block;
-        background-image: url($image-url);
-        background-repeat: no-repeat;
-      } @else {
-        @error "`#{nth($params, 1)}` is not a valid image path for `sprite`. The path must end in .png, .jpg or .svg.";
-      }
-    } @else {
-      $position: nth($params, 1);
-      background-position: $position;
-    }
-  } @else if length($params) == 2 {
-    $image-url: nth($params, 1);
-    $position: nth($params, 2);
-    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 #{length($params)}. Pass an image path, a background position, or both in that order.";
-  }
-  @content;
-}
-
-
-
-@mixin gls-stretched-link($value: "before") {
-  @if 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.";
-  }
-}
-
-
-
-@mixin gls-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)}.";
-  }
-}
-
-
-
-@mixin gls-text-gradient($direction, $colors) {
-  $list: ();
-  @for $i from 1 through length($colors) {
-    $list: append($list, nth($colors, $i), comma);
-  }
-  @if map-has-key($map-for-directions, $direction) {
-    background: linear-gradient(
-      map-get($map-for-directions, $direction),
-      $list
-    );
-  } @else if not map-has-key($map-for-directions, $direction) {
-    @if type-of($direction) != "number" or not index("deg", unit($direction)) {
-      @error "`#{$direction}` is not a valid $direction for `text-gradient`. Pass an angle such as `45deg`, or one of: #{map-keys($map-for-directions)}.";
-    } @else {
-      background: linear-gradient($direction, $list);
-    }
-  }
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  color: transparent;
-}
-
-
-
-@mixin gls-text-image($image: null) {
-  @if $image {
-    background-image: url($image);
-  }
-  background-size: cover;
-  background-position: center;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  color: transparent;
-}
-
-
-
-@mixin gls-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.";
-  }
-}
-
-
-
-@mixin gls-text-shadow($params...) {
-  $value: ();
-
-  @for $i from 1 through length($params) {
-    // Takes each items come from $params.
-    $item: nth($params, $i);
-
-    // Each group must carry at least a direction, a colour and a size. Without
-    // this the nth() calls below fail with "Invalid index", which says nothing
-    // about what the mixin wanted.
-    @if 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: nth($item, 1);
-
-    // Second value is the color.
-    $color: nth($item, 2);
-
-    // The third value is the actual offset value of the shadows.
-    $size: 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: 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 length($item) == 4 and type-of(nth($item, 4)) == number {
-      $blur: nth($item, length($item));
-    } @else if length($item) == 4 and type-of(nth($item, 4)) == bool {
-      $fill: nth($item, length($item));
-    } @else if length($item) == 5 {
-      $blur: nth($item, 4);
-      $fill: nth($item, 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: 0 -#{$size} $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: -#{$size} -#{$size} $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: #{$size} -#{$size} $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: 0 #{$size} $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: -#{$size} #{$size} $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: #{$size} #{$size} $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: -#{$size} 0 $blur $color;
-        $value: 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: append($value, $shadow, comma);
-        }
-      } @else {
-        $shadow: #{$size} 0 $blur $color;
-        $value: append($value, $shadow, comma);
-      }
-    }
-  }
-  text-shadow: $value;
-}
-
-
-
-@mixin gls-text-stroke(
-  $fallback-color: black,
-  $color: transparent,
-  $stroke-color: black,
-  $stroke-width: 1px
-) {
-  color: $fallback-color;
-  -webkit-text-fill-color: $color;
-  -webkit-text-stroke-color: $stroke-color;
-  -webkit-text-stroke-width: $stroke-width;
-}
-
-
-
-@mixin gls-triangle($direction: "bottom", $color: black, $size: 10px 8px) {
-  @if index($list-of-directions, $direction) {
-    @if __isColor($color){
-      content: "";
-      height: 0;
-      width: 0;
-      display: inline-block;
-      border-style: solid;
-      @if $direction == "top"{
-        border-color: transparent transparent $color;
-        border-width: 0 math.div(nth($size, 1), 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
-      } @else if $direction == "top-right" {
-        border-color: transparent $color transparent transparent;
-        border-width: 0 nth($size, 1) nth($size, 1) 0;
-      } @else if $direction == "right" {
-        border-color: transparent transparent transparent $color;
-        border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)),  2) 0 math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1);
-      } @else if $direction == "bottom-right" {
-        border-color: transparent transparent $color;
-        border-width: 0 0 nth($size, 1) nth($size, 1);
-      } @else if $direction == "bottom" {
-        border-color: $color transparent transparent;
-        border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) math.div(nth($size, 1), 2) 0;
-      } @else if $direction == "bottom-left" {
-        border-color: transparent transparent transparent $color;
-        border-width: nth($size, 1) 0 0 nth($size, 1);
-      } @else if $direction == "left" {
-        border-color: transparent $color transparent transparent;
-        border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1) math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0;
-      } @else if $direction == "top-left" {
-        border-color: $color transparent transparent;
-        border-width: nth($size, 1) nth($size, 1) 0 0;
-      }
-      @content;
-    }
-  } @else {
-    @error "The argument for direction must be one of the followings: #{$list-of-directions}";
-  }
-}