gerillass 1.6.2 → 2.0.0

package/scss/library/_columnizer.scss

@@ -1,25 +1,30 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "../library/border-box" as *;
+@use "../utilities/is-gutter" as *;
+
 @mixin 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.";
+  @if list.length($params) < 1 or list.length($params) > 3 {
+    @error "`columnizer` takes 1 to 3 arguments; you passed #{list.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);
+  $columns: list.nth($params, 1);
   $gutter: null;
   $fill: false;
   display: flex;
   flex-wrap: wrap;
   @include border-box;
   > * {
-    @if length($params) == 1 {
+    @if list.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));
+    } @else if list.length($params) == 2 {
+      @if meta.type-of(list.nth($params, 2)) == bool {
+        $fill: list.nth($params, list.length($params));
         flex-grow: #{if($fill == true, 1, 0)};
         flex-shrink: 0;
         flex-basis: calc(100% / #{$columns});
@@ -27,8 +32,8 @@
         &:not(:last-child) {
           margin-right: 0;
         }
-      } @else if __isGutter(nth($params, 2)) {
-        $gutter: nth($params, length($params));
+      } @else if isGutter(list.nth($params, 2)) {
+        $gutter: list.nth($params, list.length($params));
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc((100% - (#{$columns} - 1) * #{$gutter}) / #{$columns});
@@ -40,11 +45,11 @@
           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.";
+        @error "`#{list.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));
+    } @else if list.length($params) == 3 {
+      $gutter: list.nth($params, 2);
+      $fill: list.nth($params, list.length($params));
       flex-grow: if($fill == true, 1, 0);
       flex-shrink: 0;
       flex-basis: calc((100% - (#{$columns} - 1) * #{$gutter}) / #{$columns});

package/scss/library/_counter.scss

@@ -1,32 +1,35 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../lists/list-of-counter-styles" as *;
+
 @mixin 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);
+  @if list.length($params) == 1 {
+    @if list.index($list-of-counter-styles, list.nth($params, 1)) {
+      $counter: list.nth($params, 1);
     } @else {
-      $counter-after: nth($params, 1);
+      $counter-after: list.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 if list.length($params) == 2 {
+    @if list.index($list-of-counter-styles, list.nth($params, 1)) {
+      $counter: list.nth($params, 1);
+      $counter-after: list.nth($params, 2);
+    } @else if list.index($list-of-counter-styles, list.nth($params, 2)) {
+      $counter-before: list.nth($params, 1);
+      $counter: list.nth($params, 2);
     } @else {
-      $counter-before: nth($params, 1);
-      $counter-after: nth($params, 2);
+      $counter-before: list.nth($params, 1);
+      $counter-after: list.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);
+  } @else if list.length($params) == 3 {
+    @if list.index($list-of-counter-styles, list.nth($params, 2)) {
+      $counter-before: list.nth($params, 1);
+      $counter: list.nth($params, 2);
+      $counter-after: list.nth($params, 3);
     }
   }
 

package/scss/library/_escape-to-parent.scss

@@ -1,7 +1,9 @@
 @charset "UTF-8";
 
+@use "sass:meta";
+
 @mixin escape-to-parent($selector: null) {
-  @if $selector != null and type-of($selector) != "string" {
+  @if $selector != null and meta.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}#{&} {

package/scss/library/_except.scss

@@ -1,11 +1,15 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
 @mixin except($params...) {
-  @if length($params) == 0 {
+  @if list.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" {
+  } @else if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    @if meta.type-of($value) == "number" {
       @if $value < 0 {
         &:not(:nth-last-of-type(#{$value * -1})) {
           @content;
@@ -15,7 +19,7 @@
           @content;
         }
       }
-    } @else if type-of($value) == "string" {
+    } @else if meta.type-of($value) == "string" {
       @if $value == "odd" {
         &:not(:nth-of-type(odd)) {
           @content;
@@ -40,10 +44,10 @@
     } @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 {
+  } @else if list.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)}))"));
+    @for $i from 1 through list.length($params) {
+      $items: $items + if(list.nth($params, $i) < 0, string.unquote(":not(:nth-last-of-type(#{list.nth($params, $i) * -1}))"), string.unquote(":not(:nth-of-type(#{list.nth($params, $i)}))"));
     }
     &#{$items} {
       @content;

package/scss/library/_font-face.scss

@@ -1,5 +1,10 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../utilities/font-source" as *;
+
 @mixin font-face(
   $font-family,
   $file-path,
@@ -9,28 +14,28 @@
 ) {
   @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" {
+  } @else if meta.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" {
+  } @else if meta.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) {
+    @if list.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) !=
+      list.index("normal" "italic" "oblique", $font-style) and
+      meta.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 list.length($font-style) {
+        $font-style-list: list.append($font-style-list, 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)) {
+      @for $i from 1 through list.length($font-style-list) {
+        @if list.index("eot" "woff2" "woff" "ttf" "svg", list.nth($font-style-list, $i)) {
           $file-formats: $font-style-list;
           $font-style: normal;
         }
@@ -39,11 +44,11 @@
 
     @font-face {
       font-family: $font-family;
-      @if index($file-formats, eot) {
+      @if list.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);
+      @for $i from 1 through list.length($file-formats) {
+        $list: list.append($list, fontSource($font-family, $file-path, list.nth($file-formats, $i)), comma);
       }
       src: $list;
       font-style: $font-style;

package/scss/library/_index.scss

@@ -0,0 +1,52 @@
+@charset "UTF-8";
+
+@forward "adaptive";
+@forward "after";
+@forward "all-buttons";
+@forward "all-text-inputs";
+@forward "antialias";
+@forward "aspect-ratio";
+@forward "background-dots";
+@forward "background-image";
+@forward "background-stripes";
+@forward "before";
+@forward "border-box";
+@forward "border-radius";
+@forward "brand-logo";
+@forward "breakpoint";
+@forward "breakpointer";
+@forward "center";
+@forward "circle";
+@forward "clearfix";
+@forward "columnizer";
+@forward "counter";
+@forward "ellipsis";
+@forward "escape-to-parent";
+@forward "except";
+@forward "font-face";
+@forward "hide";
+@forward "linear-gradient";
+@forward "loadify";
+@forward "only";
+@forward "placeholder";
+@forward "placeholder-shown";
+@forward "position";
+@forward "radial-gradient";
+@forward "remove";
+@forward "reset-css";
+@forward "reset-figure";
+@forward "resizable";
+@forward "responsive-image";
+@forward "scissors";
+@forward "screen-agent";
+@forward "sizer";
+@forward "smartphone";
+@forward "sprite";
+@forward "stretched-link";
+@forward "tablet";
+@forward "text-gradient";
+@forward "text-image";
+@forward "text-selection";
+@forward "text-shadow";
+@forward "text-stroke";
+@forward "triangle";

package/scss/library/_linear-gradient.scss

@@ -1,18 +1,24 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../maps/map-for-directions" as *;
+
 @mixin linear-gradient($direction, $colors) {
   $list: ();
-  @for $i from 1 through length($colors) {
-    $list: append($list, nth($colors, $i), comma);
+  @for $i from 1 through list.length($colors) {
+    $list: list.append($list, list.nth($colors, $i), comma);
   }
-  @if map-has-key($map-for-directions, $direction) {
+  @if map.has-key($map-for-directions, $direction) {
     background: linear-gradient(
-      map-get($map-for-directions, $direction),
+      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 if not map.has-key($map-for-directions, $direction) {
+    @if meta.type-of($direction) != "number" or not list.index("deg", math.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);
     }

package/scss/library/_loadify.scss

@@ -1,8 +1,12 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "../utilities/is-time" as *;
+
 @mixin loadify($params...) {
   @if not & {
-    @if length($params) == 0 or (length($params) == 1 and nth($params, 1) == "init") {
+    @if list.length($params) == 0 or (list.length($params) == 1 and list.nth($params, 1) == "init") {
       @keyframes loadify {
         to {
           opacity: 1;
@@ -17,23 +21,23 @@
         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 {
+    } @else if (list.length($params) == 1 and list.nth($params, 1) != "init") or (list.length($params) == 1 and meta.type-of(list.nth($params, 1)) != "string") {
+      @error "#{list.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 list.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 {
+    @if list.length($params) == 0 {
       animation-delay: 0.2s;
       animation-duration: 0.5s;
-    } @else if length($params) == 1 {
-      animation-delay: #{__isTime(nth($params, 1))};
+    } @else if list.length($params) == 1 {
+      animation-delay: #{isTime(list.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 {
+    } @else if list.length($params) == 2 {
+      animation-delay: #{isTime(list.nth($params, 1))};
+      animation-duration: #{isTime(list.nth($params, 2))};
+    } @else if list.length($params) > 2 {
       @error "You cannot pass more than two arguments.";
     }
   }

package/scss/library/_only.scss

@@ -1,11 +1,15 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
 @mixin only($params...) {
-  @if length($params) == 0 {
+  @if list.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" {
+  } @else if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    @if meta.type-of($value) == "number" {
       @if $value < 0 {
         &:nth-last-of-type(#{$value * -1}) {
           @content;
@@ -15,7 +19,7 @@
           @content;
         }
       }
-    } @else if type-of($value) == "string" {
+    } @else if meta.type-of($value) == "string" {
       @if $value == "odd" {
         &:nth-of-type(odd) {
           @content;
@@ -41,10 +45,10 @@
     } @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 {
+  } @else if list.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);
+    @for $i from 1 through list.length($params) {
+      $list: list.append($list, if(list.nth($params, $i) < 0, string.unquote("&:nth-last-of-type(#{list.nth($params, $i) * -1})"), string.unquote("&:nth-of-type(#{list.nth($params, $i)})")), comma);
     }
     #{$list} {
       @content;

package/scss/library/_position.scss

@@ -1,16 +1,20 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../utilities/shorthand-property" as *;
+@use "../utilities/validate-length" as *;
+
 @mixin position($position: absolute, $offsets: 0) {
-  $offsets: __shorthandProperty($offsets);
+  $offsets: shorthandProperty($offsets);
   $positioning-offsets: (
-    top: nth($offsets, 1),
-    right: nth($offsets, 2),
-    bottom: nth($offsets, 3),
-    left: nth($offsets, 4),
+    top: list.nth($offsets, 1),
+    right: list.nth($offsets, 2),
+    bottom: list.nth($offsets, 3),
+    left: list.nth($offsets, 4),
   );
   position: $position;
   @each $offset, $value in $positioning-offsets {
-    @if __validateLength($value) {
+    @if validateLength($value) {
       #{$offset}: $value;
     }
   }

package/scss/library/_radial-gradient.scss

@@ -1,24 +1,30 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../maps/map-for-positions" as *;
+
 @mixin radial-gradient($shape, $position, $colors) {
-  @if type-of($shape) != "string" {
+  @if meta.type-of($shape) != "string" {
     @error "`#{$shape}` is not a valid $shape for `radial-gradient`. Pass `circle` or `ellipse`.";
   }
-  @if type-of($position) != "string" {
+  @if meta.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);
+  $shape: string.unquote($shape);
+  $position: string.unquote($position);
+  @for $i from 1 through list.length($colors) {
+    $list: list.append($list, list.nth($colors, $i), comma);
   }
-  @if map-has-key($map-for-positions, $position) {
+  @if map.has-key($map-for-positions, $position) {
     background: radial-gradient(
-      $shape map-get($map-for-positions, $position),
+      $shape map.get($map-for-positions, $position),
       $list
     );
-  } @else if not map-has-key($map-for-positions, $position) {
+  } @else if not map.has-key($map-for-positions, $position) {
     background: radial-gradient($shape $position, $list);
   }
 }

package/scss/library/_remove.scss

@@ -1,34 +1,37 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../library/breakpoint" as *;
+
 @mixin remove($params...) {
-  @if length($params) == 0 {
+  @if list.length($params) == 0 {
     display: none;
-  } @else if length($params) == 1 {
-    $value: nth($params, 1);
-    @include gls-breakpoint($value) {
+  } @else if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    @include breakpoint($value) {
       display: none;
     }
-  } @else if length($params) == 2 {
-    @if index("min" "max", nth($params, 1)) {
-      $mode: nth($params, 1);
-      $value: nth($params, 2);
+  } @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 gls-breakpoint(min, $value) {
+        @include breakpoint(min, $value) {
           display: none;
         }
       } @else if $mode == "max" {
-        @include gls-breakpoint(max, $value) {
+        @include breakpoint(max, $value) {
           display: none;
         }
       }
     } @else {
-      $start: nth($params, 1);
-      $end: nth($params, 2);
-      @include gls-breakpoint($start, $end) {
+      $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 #{length($params)}. Pass nothing to hide the element outright, one breakpoint, `min`/`max` plus a breakpoint, or a start and an end breakpoint.";
+    @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.";
   }
 }

package/scss/library/_reset-figure.scss

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

package/scss/library/_scissors.scss

@@ -1,31 +1,34 @@
 @charset "UTF-8";
 
+@use "sass:list";
+@use "../utilities/validate-scissors" as *;
+
 @mixin scissors($corners) {
-  @if length($corners) == 1 {
-    $corners: __validateScissors($corners);
+  @if list.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)})
+      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 length($corners) == 4 {
-    $corners: __validateScissors($corners);
+  } @else if list.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)})
+      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 #{length($corners)}. Pass one length to cut every corner equally, or four lengths in top-left, top-right, bottom-right, bottom-left order.";
+    @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.";
   }
 }

package/scss/library/_smartphone.scss

@@ -1,18 +1,22 @@
 @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 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 (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 (device-width: mapDeepGet($map-for-smartphones, $device, 'height')) 
+      and (device-height: mapDeepGet($map-for-smartphones, $device, 'width'))
       and (orientation: landscape) {
         @content;
       }
@@ -20,6 +24,6 @@
       @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)}.";
+    @error "`#{$device}` is not a device known to `smartphone`. Pass one of: #{map.keys($map-for-smartphones)}.";
   }
 }