gerillass 0.0.6 → 3.0.0

data/scss/library/_background-stripes.scss

@@ -0,0 +1,88 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/is-size" as *;
+@use "../internal/image-value" as *;
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+@use "../internal/gradient" as *;
+
+@mixin background-stripes(
+  $color: null,
+  $thickness: 1em,
+  $rotation: -45deg,
+  $image: null
+) {
+  // The arithmetic below runs in calc() so var() and clamp() work; on plain
+  // lengths Sass simplifies it back to the same number.
+  @if not isSize($thickness) {
+    @error "`#{meta.inspect($thickness)}` is not a valid $thickness for `background-stripes`. Pass a length, or var(), env() or a calculation such as `clamp()`.";
+  }
+  // isSize takes any number. The thickness is a colour stop's position, which
+  // in Chrome 152 kept a percentage and a negative length and dropped a unitless
+  // number other than 0 and a unit that is not a length.
+  $thickness-problem: lengthProblem($thickness);
+  @if $thickness-problem {
+    @error "`#{meta.inspect($thickness)}` is not a valid $thickness for `background-stripes`: #{$thickness-problem}. A browser drops the gradient.";
+  }
+  @if meta.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 meta.type-of($image) != "string" {
+    @error "`#{$image}` is not a valid $image for `background-stripes`. Pass an image path as a string.";
+  }
+  // A unitless rotation is read as degrees. `deg` used to be added to any unit
+  // that was not deg, so a valid `0.25turn` became `0.25turndeg` and `-10px`
+  // became `-10pxdeg`, both dropped. Measured in Chrome 152, a gradient kept
+  // deg, grad, rad and turn in any case (`10DEG`, `0.25TURN`) and a unitless 0,
+  // and dropped a unitless 45, `-10px` and `10%`.
+  // Each colour becomes a stripe in a repeating gradient, where a word or a
+  // quoted colour drops the whole pattern; see scss/internal/_color-problem.scss.
+  @if $color != null {
+    @each $item in $color {
+      $problem: colorProblem($item);
+      @if $problem {
+        @error "`#{meta.inspect($item)}` is not a valid colour in $color for `background-stripes`: #{$problem}. Pass one colour or several, such as `red` or `red var(--stripe)`.";
+      }
+    }
+  }
+  $validate-unit: $rotation;
+  @if math.is-unitless($rotation) {
+    $validate-unit: $rotation + deg;
+  } @else if not list.index("deg" "grad" "rad" "turn", string.to-lower-case(math.unit($rotation))) {
+    @error "`#{meta.inspect($rotation)}` is not a valid $rotation for `background-stripes`: `#{math.unit($rotation)}` is not an angle unit, and a browser drops the gradient. Pass an angle in deg, grad, rad or turn, such as `-45deg`, or a unitless number, which is read as degrees.";
+  }
+  $get-image: if($image, string.unquote(", ") + imageValue($image, "background-stripes", "$image", $unquote: true), string.unquote(""));
+  @if not $color {
+    $color: rgba(0, 0, 0, 0.1);
+    background-image: gradientOf(($color 0, $color $thickness, transparent $thickness, transparent calc($thickness * 2)), linear, $validate-unit, $repeating: true, $member: "background-stripes") + $get-image;
+    @if $image {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  } @else if list.length($color) == 1 {
+    background-image: gradientOf(($color 0, $color $thickness, transparent $thickness, transparent calc($thickness * 2)), linear, $validate-unit, $repeating: true, $member: "background-stripes") + $get-image;
+    @if $image {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  } @else if list.length($color) > 1 {
+    $list: ();
+    @for $i from 1 through list.length($color) {
+      $index-color: list.nth($color, $i);
+      $list: list.append($list, $index-color calc($thickness * $i - $thickness), comma);
+      $list: list.append($list, $index-color calc($thickness * $i), comma);
+    }
+    background-image: gradientOf($list, linear, $validate-unit, $repeating: true, $member: "background-stripes") + $get-image;
+    @if $image {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+}

data/scss/library/_before.scss

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/is-css-function" as *;
+
+@mixin before($content: null) {
+  &::before {
+    @if $content == null {
+      @content;
+    } @else if meta.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 if isCssFunction($content, "var" "attr" "counter" "counters") {
+      // Quoting would turn the call into text: content: "var(--label)".
+      content: $content;
+      @content;
+    } @else {
+      $data: string.slice($content, 1, 5);
+      @if $data == "data-" {
+        content: attr(#{$content});
+        @content;
+      } @else {
+        content: "#{$content}";
+        @content;
+      }
+    }
+  }
+}

data/scss/library/_border-box.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+@mixin 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.";
+  }
+}

data/scss/library/_border-radius.scss

@@ -0,0 +1,164 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../lists/list-of-directions" as *;
+@use "../utilities/fill-nulls" as *;
+@use "../internal/length-problem" as *;
+
+// The parts of $text between the separator, empty parts left out.
+@function -split($text, $separator) {
+  $parts: ();
+  $at: string.index($text, $separator);
+  @while $at {
+    @if $at > 1 {
+      $parts: list.append($parts, string.unquote(string.slice($text, 1, $at - 1)));
+    }
+    $text: string.slice($text, $at + 1);
+    $at: string.index($text, $separator);
+  }
+  @if string.length($text) > 0 {
+    $parts: list.append($parts, string.unquote($text));
+  }
+  @return $parts;
+}
+
+// What is wrong with $value as the radii of one declaration, or null. Measured
+// in Chrome 152: border-radius kept one to four radii, and a slash between two
+// such sets; a corner's own property kept one or two radii and no slash. Both
+// kept a length, 0, a percentage and a CSS-wide keyword alone, and dropped a
+// negative radius, a keyword such as auto, and more radii than that.
+// Interpolation, as in `#{$a}/#{$b}`, gives the same value as a string, so a
+// string is read by its parts. null is a corner left out, as fillNulls has it.
+@function -radii-problem($value, $max, $slash: false) {
+  @if $value == null {
+    @return null;
+  }
+  $is-text: meta.type-of($value) == "string" and string.slice(meta.inspect($value), 1, 1) != "\"" and not string.index($value, "(");
+  @if ($is-text and string.index($value, "/")) or (meta.type-of($value) == "list" and list.separator($value) == "slash") {
+    $sets: $value;
+    @if $is-text {
+      $sets: -split($value, "/");
+    }
+    @if not $slash {
+      @return "a slash only works in the one-argument form, between two sets of radii";
+    }
+    @if list.length($sets) != 2 {
+      @return "a slash goes between exactly two sets of radii";
+    }
+    @each $set in $sets {
+      $problem: -radii-problem($set, $max);
+      @if $problem {
+        @return $problem;
+      }
+    }
+    @return null;
+  }
+  $radii: $value;
+  @if $is-text and string.index($value, " ") {
+    $radii: -split($value, " ");
+  }
+  @if list.length($radii) > $max {
+    @return "it is #{list.length($radii)} radii where at most #{$max} are meant";
+  }
+  @each $radius in $radii {
+    @if $radius != null {
+      $problem: lengthProblem($radius, $negative: false, $css-wide: list.length($radii) == 1);
+      @if $problem {
+        @return $problem;
+      }
+    }
+  }
+  @return null;
+}
+
+@mixin border-radius($args...) {
+  // Logical corners are named block side first, inline side second, like the
+  // properties they map to. Every name here needs a branch below: the chain has
+  // no final @else, so a name without one would be accepted and emit nothing.
+  $logical: ("start-start", "start-end", "end-start", "end-end", "inline-start", "inline-end", "block-start", "block-end");
+  $list: list.join(list.join($list-of-directions, ("cross-left", "cross-right", "all")), $logical);
+  @if list.length($args) == 1 {
+    $value: list.nth($args, 1);
+    $problem: -radii-problem($value, 4, $slash: true);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+    }
+    border-radius: fillNulls($value, space);
+  } @else if list.length($args) == 2 {
+    $corner: list.nth($args, 1);
+    $value: list.nth($args, 2);
+    @if list.index($list, $corner) {
+      $problem: -radii-problem($value, 2);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+      }
+      @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 if $corner == "start-start" {
+        border-start-start-radius: $value;
+      } @else if $corner == "start-end" {
+        border-start-end-radius: $value;
+      } @else if $corner == "end-start" {
+        border-end-start-radius: $value;
+      } @else if $corner == "end-end" {
+        border-end-end-radius: $value;
+      } @else if $corner == "inline-start" {
+        border-start-start-radius: $value;
+        border-end-start-radius: $value;
+      } @else if $corner == "inline-end" {
+        border-start-end-radius: $value;
+        border-end-end-radius: $value;
+      } @else if $corner == "block-start" {
+        border-start-start-radius: $value;
+        border-start-end-radius: $value;
+      } @else if $corner == "block-end" {
+        border-end-start-radius: $value;
+        border-end-end-radius: $value;
+      }
+    } @else {
+      @error "Corner value must be one of the followings: #{$list}.";
+    }
+  } @else if list.length($args) == 4 {
+    @each $value in $args {
+      $problem: -radii-problem($value, 2);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid radius for `border-radius`: #{$problem}. A browser drops the declaration.";
+      }
+    }
+    $args: fillNulls($args, space, true);
+    border-top-left-radius: list.nth($args, 1);
+    border-top-right-radius: list.nth($args, 2);
+    border-bottom-right-radius: list.nth($args, 3);
+    border-bottom-left-radius: list.nth($args, 4);
+  } @else {
+    @error "`border-radius` takes 1, 2 or 4 arguments; you passed #{list.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.";
+  }
+}

data/scss/library/_brand-logo.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+@use "../library/stretched-link" as *;
+@use "sass:meta";
+@use "../internal/image-value" as *;
+@use "../internal/length-problem" as *;
+
+@mixin brand-logo($width, $height, $image-url: null) {
+  @each $name, $value in ("$width": $width, "$height": $height) {
+    $problem: sizeProblem($value);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `brand-logo`: #{$problem}. A browser drops the declaration.";
+    }
+  }
+  display: inline-block;
+  position: relative;
+  width: $width;
+  height: $height;
+  @if $image-url {
+    background-image: imageValue($image-url, "brand-logo", "$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 stretched-link(after);
+  }
+}

data/scss/library/_breakpoint.scss

@@ -0,0 +1,96 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "../maps/map-for-breakpoints" as *;
+@use "../utilities/validate-breakpoint" as *;
+@use "../internal/custom-property-in" as *;
+@use "../internal/condition-width" as *;
+
+// Every size goes through conditionWidth before a query is written, so a size no
+// width condition can match raises instead of compiling into one. The queries
+// themselves are written as they always were, and the checks in the branches
+// below are called only for the error they raise, so a call that worked writes
+// the same CSS.
+@mixin breakpoint($params...) {
+  $custom-property: customPropertyIn($params);
+  @if $custom-property {
+    @error "`#{$custom-property}` cannot be used in a breakpoint: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass a length or a key from $map-for-breakpoints.";
+  }
+  @if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    // Checked before the warning below, so a size that is wrong outright is
+    // refused rather than described as a single pixel.
+    $width: conditionWidth($value, "breakpoint");
+    // One argument matches a single pixel, which two agent trials took for
+    // "from this width up". Still emitted, and said out loud,
+    // but not refused: the CSS is valid and matches that one width.
+    @warn "`breakpoint(#{$value})` matches only a viewport exactly #{$width} wide, `(width: #{$width})`. Write `breakpoint(only, #{$value})` for that width, or `breakpoint(min, #{$value})` from it upwards.";
+    @if map.has-key($map-for-breakpoints, $value) {
+      @media (width: map.get($map-for-breakpoints, $value)) {
+        @content;
+      }
+    } @else {
+      @media (width: $value) {
+        @content;
+      }
+    }
+  } @else if list.length($params) == 2 {
+    @if not list.index("only" "min" "max" "between", list.nth($params, 1)) {
+      $start: list.nth($params, 1);
+      $end: list.nth($params, 2);
+      $checked: conditionWidth($start, "breakpoint") conditionWidth($end, "breakpoint");
+      @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
+        @content;
+      }
+    } @else {
+      $mode: list.nth($params, 1);
+      $value: list.nth($params, 2);
+      @if $mode != "between" {
+        $checked: conditionWidth($value, "breakpoint");
+      }
+      @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: list.nth($value, 1);
+        $end: list.nth($value, 2);
+        $checked: conditionWidth($start, "breakpoint") conditionWidth($end, "breakpoint");
+        @media (min-width: #{validateBreakpoint($start)}) and (max-width: #{if(map.has-key($map-for-breakpoints, $end), validateBreakpoint($end) - 1, $end)}) {
+          @content;
+        }
+      }
+    }
+  } @else {
+    // Anything else used to match no branch and emit nothing, so a three
+    // argument range such as `between, medium, large` failed without a sound.
+    @error "`breakpoint` takes one or two arguments; you passed #{list.length($params)}. For a range, pass `between` with a space-separated pair, `between, medium large`, or two sizes, `medium, large`.";
+  }
+}

data/scss/library/_breakpointer.scss

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../maps/map-for-breakpoints" as *;
+
+@mixin breakpointer($selector: null) {
+  @if $selector != null and meta.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}";
+          }
+        }
+      }
+    }
+  }
+}

data/scss/library/_center.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@mixin center($axis: "both") {
+  @if not list.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))
+  ;
+}

data/scss/library/_circle.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../internal/length-problem" as *;
+
+@mixin circle($size) {
+  $problem: sizeProblem($size);
+  @if $problem {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `circle`: #{$problem}. A browser drops the width and height.";
+  }
+  width: $size;
+  height: $size;
+  display: inline-block;
+  border-radius: 100%;
+}

data/{core → scss}/library/_clearfix.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@mixin gorillass-clearfix {
+@mixin clearfix {
   &::after {
     content: "";
     display: block;

data/scss/library/_columnizer.scss

@@ -0,0 +1,125 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../library/border-box" as *;
+@use "../utilities/is-gutter" as *;
+@use "../internal/length-problem" as *;
+
+// The count divides 100% in calc(), which in Chrome 152 kept a unitless number
+// and a function that resolves to one, var(), env() or attr(), or maths with
+// one of those inside. It dropped a count with a unit, a word and maths on
+// lengths alone, such as calc(100% - 10px): 100% divided by a length is not a
+// length.
+@function -count-problem($columns) {
+  @if meta.type-of($columns) == "number" {
+    @if math.is-unitless($columns) {
+      @return null;
+    }
+    @return "a column count has no unit";
+  }
+  // Interpolation, as in `#{$cols}`, gives the number as an unquoted string,
+  // which is written into calc() as it reads.
+  @if meta.type-of($columns) == "string" and string.slice(meta.inspect($columns), 1, 1) != "\"" and not string.index($columns, "(") {
+    $digits: 0;
+    @for $i from 1 through string.length($columns) {
+      $character: string.slice($columns, $i, $i);
+      @if string.index("0123456789", $character) {
+        $digits: $digits + 1;
+      } @else if not string.index(".+-", $character) {
+        @return "it is not a column count";
+      }
+    }
+    @if $digits > 0 {
+      @return null;
+    }
+  }
+  @if meta.type-of($columns) == "calculation" or (meta.type-of($columns) == "string" and string.index($columns, "(")) {
+    $text: string.to-lower-case(meta.inspect($columns));
+    @if string.index($text, "var(") or string.index($text, "env(") or string.index($text, "attr(") {
+      @return null;
+    }
+    @return "maths on lengths does not give a count; pass a number, or var(), env() or attr()";
+  }
+  @return "it is not a column count";
+}
+
+// The gutter is multiplied in calc() and written as a margin. Chrome 152 kept a
+// length, a percentage and a negative length, and dropped the flex-basis for a
+// unitless number, a unit that is not a length and a word. A unitless 0 made
+// `(3 - 1) * 0`, a number rather than a length, so it is written as 0px.
+@function -gutter($gutter) {
+  $problem: lengthProblem($gutter);
+  @if $problem {
+    @error "`#{meta.inspect($gutter)}` is not a valid gutter for `columnizer`: #{$problem}. A browser drops the column width.";
+  }
+  @if (meta.type-of($gutter) == "number" and math.is-unitless($gutter)) or (meta.type-of($gutter) == "string" and string.unquote($gutter) == string.unquote("0")) {
+    @return 0px;
+  }
+  @return $gutter;
+}
+
+@mixin columnizer($params...) {
+  @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: list.nth($params, 1);
+  $count-problem: -count-problem($columns);
+  @if $count-problem {
+    @error "`#{meta.inspect($columns)}` is not a valid column count for `columnizer`: #{$count-problem}. A browser drops the column width.";
+  }
+  $gutter: null;
+  $fill: false;
+  display: flex;
+  flex-wrap: wrap;
+  @include border-box;
+  > * {
+    @if list.length($params) == 1 {
+      flex: 0 0 calc(100% / #{$columns});
+      margin-bottom: 0;
+      &:not(:last-child) {
+        margin-right: 0;
+      }
+    } @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});
+        margin-bottom: 0;
+        &:not(:last-child) {
+          margin-right: 0;
+        }
+      } @else if isGutter(list.nth($params, 2)) {
+        $gutter: -gutter(list.nth($params, list.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 "`#{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 list.length($params) == 3 {
+      $gutter: -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});
+      margin-bottom: $gutter;
+      &:not(:last-child) {
+        margin-right: $gutter;
+      }
+      &:nth-child(#{$columns}n) {
+        margin-right: 0;
+      }
+    }
+  }
+}