@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 $content != null {
      $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: #{quote($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: #{quote($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;
    }
  }
}



@mixin gls-background-dots(
  $color: null,
  $size: 1em,
  $gutter: $size * 5,
  $diagonal: true,
  $image: null
) {
  @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 index("deg", unit($filter-direction)) {
              background-image: linear-gradient($filter-direction, $color-list),
                url($image-url);
            } @else {
              @error "#{$filter-direction} is a wrong value for the $filter-direction parameter. The value must be either a number followed by the 'deg' unit or one of the following pre-defined values: #{quote(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
) {
  $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 $content != null {
      $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;
    }
  }
}



@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: #{quote($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);
  }
}



@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 & {
    &::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 $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...) {
  $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 type-of(nth($params, 2)) == number {
        $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 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) {
  @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 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 {
    
    $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 not index("deg", unit($direction)) {
      @error "#{$direction} is a wrong value for the $direction parameter. The value must be eighter a number followed by the 'deg' unit or one of the followings: #{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 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) {
  $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;
    @if not $ratio {
      padding-top: 56.25%;
    } @else if $ratio {
      @if type-of($ratio) == string {
        $width: null;
        $height: null;
        @if str-index($ratio, "/") {
          $fslash-index: str-index($ratio, "/");
          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
        } @else if str-index($ratio, ":") {
          $colon-index: str-index($ratio, ":");
          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
        }
        $calc: math.div($height, $width) * 100;
        padding-top: #{$calc * 1%};
      } @else if type-of($ratio) == number {
        padding-top: math.div(1, $ratio) * 100%;
      }
    }
  }
  & > * {
    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 "Error!";
  }
}



@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;
    @if not $ratio {
      padding-top: 56.25%;
    } @else if $ratio {
      @if type-of($ratio) == string {
        $width: null;
        $height: null;
        @if str-index($ratio, "/") {
          $fslash-index: str-index($ratio, "/");
          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
        } @else if str-index($ratio, ":") {
          $colon-index: str-index($ratio, ":");
          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
        }
        $calc: math.div($height, $width) * 100;
        padding-top: #{$calc * 1%};
      } @else if type-of($ratio) == number {
        padding-top: math.div(1, $ratio) * 100%;
      }
    }
  }
  & > * {
    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)})
    );
  }
}



@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 {
    @warn "#{$device} is a wrong device name! The argument must be one of the followings: #{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 {
      $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;
  }
  @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 {
    @warn "#{$device} is a wrong device name! The argument must be one of the followings: #{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 not index("deg", unit($direction)) {
      @error "#{$direction} is a wrong value for the $direction parameter. The value must be eighter a number followed by the 'deg' unit or one of the followings: #{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;
    }
  }
}



@mixin gls-text-shadow($params...) {
  $value: ();

  @for $i from 1 through length($params) {
    // Takes each items come from $params.
    $item: nth($params, $i);

    // 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: #{quote($list-of-directions)}";
  }
}