beathers 5.7.6 → 5.9.1

package/scss/style/_shaping.scss

@@ -1,439 +1,561 @@
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:math';
-@use '../functions/mediaQueries' as mQ;
-@use '../settings/configs' as configs;
-@use '../settings/defaults' as defs;
-@use '../functions/validations' as val;
-@use '../settings/index' as settings;
-@use '../functions/others' as func;
-@use '../variables' as vars;
-
-// Definitions
-$useWrappers: if(vars.$useWrappers != null, vars.$useWrappers, settings.$useWrappers);
-$wrappers: if(vars.$wrappers != (), vars.$wrappers, defs.$wrappers);
-$useShadows: if(vars.$useShadows != null, vars.$useShadows, settings.$useShadows);
-$useShadowsMediaQueries: if(
-  vars.$useShadowsMediaQueries != null,
-  vars.$useShadowsMediaQueries,
-  settings.$useShadowsMediaQueries
-);
-$useDisplays: if(vars.$useDisplays != null, vars.$useDisplays, settings.$useDisplays);
-$useDisplaysMediaQueries: if(
-  vars.$useDisplaysMediaQueries != null,
-  vars.$useDisplaysMediaQueries,
-  settings.$useDisplaysMediaQueries
-);
-$useOverflows: if(vars.$useOverflows != null, vars.$useOverflows, settings.$useOverflows);
-$useOverflowsMediaQueries: if(
-  vars.$useOverflowsMediaQueries != null,
-  vars.$useOverflowsMediaQueries,
-  settings.$useOverflowsMediaQueries
-);
-$useOpacities: if(vars.$useOpacities != null, vars.$useOpacities, settings.$useOpacities);
-$useOpacitiesMediaQueries: if(
-  vars.$useOpacitiesMediaQueries != null,
-  vars.$useOpacitiesMediaQueries,
-  settings.$useOpacitiesMediaQueries
-);
-$opacities: if(vars.$opacities != null, vars.$opacities, defs.$opacities);
-$useBlur: if(vars.$useBlur != null, vars.$useBlur, settings.$useBlur);
-$useBlurMediaQueries: if(vars.$useBlurMediaQueries != null, vars.$useBlurMediaQueries, settings.$useBlurMediaQueries);
-$blurValues: if(vars.$blurValues != null, vars.$blurValues, defs.$blurValues);
-$useObjectFits: if(vars.$useObjectFits != null, vars.$useObjectFits, settings.$useObjectFits);
-$useObjectFitsMediaQueries: if(
-  vars.$useObjectFitsMediaQueries != null,
-  vars.$useObjectFitsMediaQueries,
-  settings.$useObjectFitsMediaQueries
-);
-$usePositions: if(vars.$usePositions != null, vars.$usePositions, settings.$usePositions);
-$usePositionsMediaQueries: if(
-  vars.$usePositionsMediaQueries != null,
-  vars.$usePositionsMediaQueries,
-  settings.$usePositionsMediaQueries
-);
-$useInsets: if(vars.$useInsets != null, vars.$useInsets, settings.$useInsets);
-$useInsetsMediaQueries: if(
-  vars.$useInsetsMediaQueries != null,
-  vars.$useInsetsMediaQueries,
-  settings.$useInsetsMediaQueries
-);
-$insetValues: if(vars.$insetValues != null, vars.$insetValues, defs.$insetValues);
-$useSizes: if(vars.$useSizes != null, vars.$useSizes, settings.$useSizes);
-$useSizesMediaQueries: if(
-  vars.$useSizesMediaQueries != null,
-  vars.$useSizesMediaQueries,
-  settings.$useSizesMediaQueries
-);
-$useGutters: if(vars.$useGutters != null, vars.$useGutters, settings.$useGutters);
-$useGuttersMediaQueries: if(
-  vars.$useGuttersMediaQueries != null,
-  vars.$useGuttersMediaQueries,
-  settings.$useGuttersMediaQueries
-);
-$guttersValues: if(vars.$guttersValues != null, vars.$guttersValues, defs.$guttersValues);
-$useBorders: if(vars.$useBorders != null, vars.$useBorders, settings.$useBorders);
-$useBordersMediaQueries: if(
-  vars.$useBordersMediaQueries != null,
-  vars.$useBordersMediaQueries,
-  settings.$useBordersMediaQueries
-);
-$bordersValue: if(vars.$bordersValue != null, vars.$bordersValue, defs.$bordersValue);
-$useTextBorders: if(vars.$useTextBorders != null, vars.$useTextBorders, settings.$useTextBorders);
-$useTextBordersMediaQueries: if(
-  vars.$useTextBordersMediaQueries != null,
-  vars.$useTextBordersMediaQueries,
-  settings.$useTextBordersMediaQueries
-);
-$useRadius: if(vars.$useRadius != null, vars.$useRadius, settings.$useRadius);
-$useRadiusMediaQueries: if(
-  vars.$useRadiusMediaQueries != null,
-  vars.$useRadiusMediaQueries,
-  settings.$useRadiusMediaQueries
-);
-$radiuses: if(vars.$radiuses != null, vars.$radiuses, defs.$radiuses);
-
-@if $useWrappers {
-  @each $wSize, $properties in $wrappers {
-    $mainWSize: if($wSize, '#{$wSize}#{\:}wrapper', 'wrapper');
-
-    $padding: if(list.nth($properties, 2), list.nth($properties, 2), 0);
-
-    .#{$mainWSize} {
-      width: 100%;
-
-      @if ($padding != 0) {
-        padding-inline: $padding;
-      }
-    }
-  }
-  @include mQ.mQ(min, md) {
-    @each $wSize, $properties in $wrappers {
-      $mainWSize: if($wSize, '#{$wSize}#{\:}wrapper', 'wrapper');
-
-      $size: list.nth($properties, 1);
-      $padding: if(list.nth($properties, 2), list.nth($properties, 2), 0);
-
-      // Validate parameters
-      $checkedSize: val.notNull($size, 'Wrappers.size');
-
-      .#{$mainWSize} {
-        padding-inline: calc((100% - #{$checkedSize}) / 2 + $padding);
-      }
-    }
-  }
-}
-
-@if $useShadows {
-  @include mQ.multiSizes($useShadowsMediaQueries) using ($size, $divider) {
-    @each $class, $values in configs.$shadows {
-      $mainClass: if($size, '#{$size}#{$divider}shadow#{\:}#{$class}', 'shadow#{\:}#{$class}');
-
-      .#{$mainClass} {
-        box-shadow: $values;
-      }
-    }
-  }
-}
-
-@if $useDisplays {
-  @include mQ.multiSizes($useDisplaysMediaQueries) using ($size, $divider) {
-    @each $display in configs.$displays {
-      // Validate parameters
-      $checkedDisplay: val.listItem(configs.$displays, $display, 'Shaping.displays');
-
-      $mainClass: if($size, '#{$size}#{$divider}d-#{$display}', 'd-#{$display}');
-
-      .#{$mainClass} {
-        display: if($size, $display !important, $display);
-      }
-    }
-  }
-}
-
-@if $useOverflows {
-  @include mQ.multiSizes($useOverflowsMediaQueries) using ($size, $divider) {
-    @each $dir in configs.$overflowsDirections {
-      // Validate parameters
-      @if $dir {
-        $checkedDir: val.listItem(('x', 'y'), $dir, 'Shaping.overflow.direction');
-      }
-
-      $dirClass: if($dir, '#{$dir}#{\:}overflow', 'overflow');
-      $mainClass: if($size, '#{$size}#{$divider}#{$dirClass}', $dirClass);
-      $property: if($dir, 'overflow-#{$dir}', 'overflow');
-
-      .#{$mainClass} {
-        @each $value in configs.$overflows {
-          // Validate parameters
-          $checkedClass: val.listItem(configs.$overflows, $value, 'Shaping.overflow.value');
-
-          &-#{$value} {
-            #{$property}: if($size, $value !important, $value);
-          }
-        }
-      }
-    }
-  }
-}
-
-@if $useOpacities {
-  @include mQ.multiSizes($useOpacitiesMediaQueries) using ($size, $divider) {
-    @each $value in $opacities {
-      $checkedValue: val.opacity(math.div($value, 100), 'Shaping.opacity');
-
-      $mainClass: if($size, '#{$size}#{$divider}op', 'op');
-
-      .#{$mainClass}#{\:}#{$value} {
-        opacity: if($size, $checkedValue !important, $checkedValue);
-
-        &#{\:}hover:hover {
-          opacity: if($size, $checkedValue !important, $checkedValue);
-        }
-      }
-    }
-  }
-}
-
-@if $useBlur {
-  @include mQ.multiSizes($useBlurMediaQueries) using ($size, $divider) {
-    @each $value in $blurValues {
-      $checkedValue: val.listItem($blurValues, $value, 'Shaping.blur');
-
-      $mainClass: if($size, '#{$size}#{$divider}bg#{\:}blur', 'bg#{\:}blur');
-      $calcValue: blur(#{$checkedValue}#{px});
-
-      .#{$mainClass}#{\:}#{$value} {
-        backdrop-filter: if($size, $calcValue !important, $calcValue);
-
-        &#{\:}hover:hover {
-          backdrop-filter: if($size, $calcValue !important, $calcValue);
-        }
-      }
-    }
-  }
-}
-
-@if $useObjectFits {
-  @include mQ.multiSizes($useObjectFitsMediaQueries) using ($size, $divider) {
-    @each $fit in configs.$objectsFits {
-      // Validate parameters
-      $checkedFit: val.listItem(configs.$objectsFits, $fit, 'Shaping.objectFit');
-
-      $mainClass: if($size, '#{$size}#{$divider}object-fit', 'object-fit');
-
-      .#{$mainClass}#{\:}#{$fit} {
-        object-fit: if($size, $fit !important, $fit);
-      }
-    }
-  }
-}
-
-@if $usePositions {
-  @include mQ.multiSizes($usePositionsMediaQueries) using ($size, $divider) {
-    @each $position in configs.$positions {
-      // Validate parameters
-      $checkedPosition: val.listItem(configs.$positions, $position, 'Shaping.position');
-
-      $mainClass: if($size, '#{$size}#{$divider}p-', 'p-');
-
-      .#{$mainClass}#{$position} {
-        position: if($size, $position !important, $position);
-      }
-    }
-  }
-}
-
-@if $useInsets {
-  @include mQ.multiSizes($useInsetsMediaQueries) using ($size, $divider) {
-    @each $value in $insetValues {
-      @each $position in configs.$insetPositions {
-        // Validate parameters
-        $checkedPosition: val.listItem(configs.$insetPositions, $position, 'Shaping.inset');
-
-        $mainClass: if($size, '#{$size}#{$divider}inset', 'inset');
-        $posClass: if($position, '#{$mainClass}-#{$position}', '#{$mainClass}');
-        $property: if($position, 'inset-#{$position}', 'inset');
-        $val: if($value == 0, 'full', $value);
-
-        .#{$posClass}#{\:}#{$val} {
-          #{$property}: $value;
-        }
-      }
-    }
-  }
-}
-
-@if $useSizes {
-  @include mQ.multiSizes($useSizesMediaQueries) using ($size, $divider) {
-    @each $dir, $direction in configs.$spacesDirections {
-      // Validate parameters
-      $checkedDir: val.listItem(
-        ('w', 'min#{\:}w', 'max#{\:}w', 'h', 'min#{\:}h', 'max#{\:}h'),
-        $dir,
-        'Shaping.space.direction'
-      );
-      $checkedDirection: val.listItem(
-        ('width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'),
-        $direction,
-        'Shaping.space.direction'
-      );
-      $checkedStep: val.number(configs.$spacesStep, 'Shaping.space.step');
-
-      $mainClass: if($size, #{$size}#{$divider}#{$dir}, $dir);
-
-      .#{$mainClass} {
-        @for $i from 0 through 100 {
-          $value: $i * $checkedStep;
-
-          @if ($value != 0) and ($value % $checkedStep == 0) and ($value <= 100) {
-            &#{\:}#{$value} {
-              #{$direction}: if($size, #{$value}#{'%'} !important, #{$value}#{'%'});
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@if $useGutters {
-  @include mQ.multiSizes($useGuttersMediaQueries) using ($size, $divider) {
-    @each $class, $property in configs.$gutters {
-      // Validate parameters
-      $checkedClass: val.listItem(
-        (p, px, py, ps, pe, pt, pb, m, mx, my, ms, me, mt, mb, g, gx, gy),
-        $class,
-        'Shaping.gutter.class'
-      );
-      $checkedProperty: val.listItem(
-        (
-          padding,
-          padding-inline,
-          padding-block,
-          padding-inline-start,
-          padding-inline-end,
-          padding-block-start,
-          padding-block-end,
-          margin,
-          margin-inline,
-          margin-block,
-          margin-inline-start,
-          margin-inline-end,
-          margin-block-start,
-          margin-block-end,
-          gap,
-          column-gap,
-          row-gap
-        ),
-        $property,
-        'Shaping.gutter.property'
-      );
-
-      $mainClass: if($size, #{$size}#{$divider}#{$class}, $class);
-
-      .#{$mainClass} {
-        @each $vClass, $value in $guttersValues {
-          &-#{$vClass} {
-            @if $size {
-              #{$property}: if($size, $value !important, $value);
-            } @else {
-              #{$property}: $value;
-
-              &\:i {
-                /* stylelint-disable declaration-no-important */
-                #{$property}: $value !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@if $useBorders {
-  @include mQ.multiSizes($useBordersMediaQueries) using ($size, $divider) {
-    @each $i in $bordersValue {
-      @each $dir, $property in configs.$bordersDirections {
-        // Validate parameters
-        $checkedDir: val.listItem((null, 'top', 'bottom', 'start', 'end'), $dir, 'Shaping.borders');
-        $checkedProperty: val.listItem(
-          (border, border-block-start, border-block-end, border-inline-start, border-inline-end),
-          $property,
-          'Shaping.borders'
-        );
-
-        $mainClass: if($size, '#{$size}#{$divider}border', 'border');
-        $dirClass: if($dir, '#{$dir}#{\:}', $dir);
-
-        .#{$mainClass}#{\:}#{$dirClass}#{$i} {
-          #{$property}-width: if($size, #{$i}#{px} !important, #{$i}#{px});
-
-          @if not $size {
-            #{$property}-style: if($size, solid !important, solid);
-          }
-        }
-      }
-    }
-  }
-}
-
-@if $useTextBorders {
-  @include mQ.multiSizes($useTextBordersMediaQueries) using ($size, $divider) {
-    @each $i in $bordersValue {
-      $mainClass: if($size, '#{$size}#{$divider}stroke', 'stroke');
-      $value: math.div($i, 10);
-
-      // Validate parameters
-      $checkedValue: val.number($value, 'Shaping.textBorder');
-
-      .#{$mainClass}#{\:}#{$i} {
-        -webkit-text-stroke-width: if($size, #{$value}#{px} !important, #{$value}#{px});
-      }
-    }
-  }
-}
-
-@if $useRadius {
-  @include mQ.multiSizes($useRadiusMediaQueries) using ($size, $divider) {
-    @each $dir, $properties in configs.$radiusDirection {
-      // Validate parameters
-      $checkedDir: val.listItem(
-        (null, 'top', 'bottom', 'start', 'end', 'top-start', 'top-end', 'bottom-start', 'bottom-end'),
-        $dir,
-        'Shaping.radius.direction'
-      );
-
-      $mainClass: if($size, '#{$size}#{$divider}radius', 'radius');
-      $dirClass: if($dir, '#{$dir}#{\:}', $dir);
-
-      @each $property in $properties {
-        .#{$mainClass}#{\:}#{$dirClass} {
-          &full {
-            #{$property}: if($size, 100vw !important, 100vw);
-          }
-
-          @each $value in $radiuses {
-            // Validate parameters
-            $checkedProperty: val.listItem(
-              (
-                border-radius,
-                border-start-start-radius,
-                border-start-end-radius,
-                border-end-start-radius,
-                border-end-end-radius
-              ),
-              $property,
-              'Shaping.radius.property'
-            );
-
-            &#{$value} {
-              #{$property}: if($size, #{$value}#{px} !important, #{$value}#{'px'});
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+@use '../functions/mediaQueries' as mQ;
+@use '../settings/configs' as configs;
+@use '../settings/defaults' as defs;
+@use '../functions/validations' as val;
+@use '../settings/index' as settings;
+@use '../functions/others' as func;
+@use '../variables' as vars;
+
+// Definitions
+
+$useWrappers: if(
+  sass(vars.$useWrappers != null): vars.$useWrappers; else: settings.$useWrappers
+);
+$wrappers: if(
+  sass(vars.$wrappers != null): vars.$wrappers; else: defs.$wrappers
+);
+$useShadows: if(
+  sass(vars.$useShadows != null): vars.$useShadows; else: settings.$useShadows
+);
+$useShadowsMediaQueries: if(
+  sass(vars.$useShadowsMediaQueries != null): vars.$useShadowsMediaQueries; else: settings.$useShadowsMediaQueries
+);
+$useDisplays: if(
+  sass(vars.$useDisplays != null): vars.$useDisplays; else: settings.$useDisplays
+);
+$useDisplaysMediaQueries: if(
+  sass(vars.$useDisplaysMediaQueries != null): vars.$useDisplaysMediaQueries; else: settings.$useDisplaysMediaQueries
+);
+$useOverflows: if(
+  sass(vars.$useOverflows != null): vars.$useOverflows; else: settings.$useOverflows
+);
+$useOverflowsMediaQueries: if(
+  sass(vars.$useOverflowsMediaQueries != null): vars.$useOverflowsMediaQueries; else: settings.$useOverflowsMediaQueries
+);
+$useOpacities: if(
+  sass(vars.$useOpacities != null): vars.$useOpacities; else: settings.$useOpacities
+);
+$useOpacitiesMediaQueries: if(
+  sass(vars.$useOpacitiesMediaQueries != null): vars.$useOpacitiesMediaQueries; else: settings.$useOpacitiesMediaQueries
+);
+$opacities: if(
+  sass(vars.$opacities != null): vars.$opacities; else: defs.$opacities
+);
+$useBlur: if(
+  sass(vars.$useBlur != null): vars.$useBlur; else: settings.$useBlur
+);
+$useBlurMediaQueries: if(
+  sass(vars.$useBlurMediaQueries != null): vars.$useBlurMediaQueries; else: settings.$useBlurMediaQueries
+);
+$blurValues: if(
+  sass(vars.$blurValues != null): vars.$blurValues; else: defs.$blurValues
+);
+$useObjectFits: if(
+  sass(vars.$useObjectFits != null): vars.$useObjectFits; else: settings.$useObjectFits
+);
+$useObjectFitsMediaQueries: if(
+  sass(vars.$useObjectFitsMediaQueries != null): vars.$useObjectFitsMediaQueries;
+    else: settings.$useObjectFitsMediaQueries
+);
+$usePositions: if(
+  sass(vars.$usePositions != null): vars.$usePositions; else: settings.$usePositions
+);
+$usePositionsMediaQueries: if(
+  sass(vars.$usePositionsMediaQueries != null): vars.$usePositionsMediaQueries; else: settings.$usePositionsMediaQueries
+);
+$useInsets: if(
+  sass(vars.$useInsets != null): vars.$useInsets; else: settings.$useInsets
+);
+$useInsetsMediaQueries: if(
+  sass(vars.$useInsetsMediaQueries != null): vars.$useInsetsMediaQueries; else: settings.$useInsetsMediaQueries
+);
+$insetValues: if(
+  sass(vars.$insetValues != null): vars.$insetValues; else: defs.$insetValues
+);
+$useSizes: if(
+  sass(vars.$useSizes != null): vars.$useSizes; else: settings.$useSizes
+);
+$useSizesMediaQueries: if(
+  sass(vars.$useSizesMediaQueries != null): vars.$useSizesMediaQueries; else: settings.$useSizesMediaQueries
+);
+$useGutters: if(
+  sass(vars.$useGutters != null): vars.$useGutters; else: settings.$useGutters
+);
+$useGuttersMediaQueries: if(
+  sass(vars.$useGuttersMediaQueries != null): vars.$useGuttersMediaQueries; else: settings.$useGuttersMediaQueries
+);
+$guttersValues: if(
+  sass(vars.$guttersValues != null): vars.$guttersValues; else: defs.$guttersValues
+);
+$useBorders: if(
+  sass(vars.$useBorders != null): vars.$useBorders; else: settings.$useBorders
+);
+$useBordersMediaQueries: if(
+  sass(vars.$useBordersMediaQueries != null): vars.$useBordersMediaQueries; else: settings.$useBordersMediaQueries
+);
+$bordersValue: if(
+  sass(vars.$bordersValue != null): vars.$bordersValue; else: defs.$bordersValue
+);
+$useTextBorders: if(
+  sass(vars.$useTextBorders != null): vars.$useTextBorders; else: settings.$useTextBorders
+);
+$useTextBordersMediaQueries: if(
+  sass(vars.$useTextBordersMediaQueries != null): vars.$useTextBordersMediaQueries;
+    else: settings.$useTextBordersMediaQueries
+);
+$useRadius: if(
+  sass(vars.$useRadius != null): vars.$useRadius; else: settings.$useRadius
+);
+$useRadiusMediaQueries: if(
+  sass(vars.$useRadiusMediaQueries != null): vars.$useRadiusMediaQueries; else: settings.$useRadiusMediaQueries
+);
+$radiuses: if(
+  sass(vars.$radiuses != null): vars.$radiuses; else: defs.$radiuses
+);
+
+@if $useWrappers {
+  @each $wSize, $properties in $wrappers {
+    $mainWSize: if(
+      sass($wSize): '#{$wSize}#{\:}wrapper' ; else: 'wrapper'
+    );
+
+    $padding: if(
+      sass(list.nth($properties, 2)): list.nth($properties, 2) ; else: 0
+    );
+
+    .#{$mainWSize} {
+      width: 100%;
+
+      @if ($padding != 0) {
+        padding-inline: $padding;
+      }
+    }
+  }
+  @include mQ.mQ(min, md) {
+    @each $wSize, $properties in $wrappers {
+      $mainWSize: if(
+        sass($wSize): '#{$wSize}#{\:}wrapper' ; else: 'wrapper'
+      );
+
+      $size: list.nth($properties, 1);
+      $padding: if(
+        sass(list.nth($properties, 2)): list.nth($properties, 2) ; else: 0
+      );
+
+      // Validate parameters
+      $checkedSize: val.notNull($size, 'Wrappers.size');
+
+      .#{$mainWSize} {
+        padding-inline: calc((100% - #{$checkedSize}) / 2 + $padding);
+      }
+    }
+  }
+}
+
+@if $useShadows {
+  @include mQ.multiSizes($useShadowsMediaQueries) using ($size, $divider) {
+    @each $class, $values in configs.$shadows {
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}shadow#{\:}#{$class}' ; else: 'shadow#{\:}#{$class}'
+      );
+
+      .#{$mainClass} {
+        box-shadow: $values;
+      }
+    }
+  }
+}
+
+@if $useDisplays {
+  @include mQ.multiSizes($useDisplaysMediaQueries) using ($size, $divider) {
+    @each $display in configs.$displays {
+      // Validate parameters
+      $checkedDisplay: val.listItem(configs.$displays, $display, 'Shaping.displays');
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}d-#{$display}' ; else: 'd-#{$display}'
+      );
+
+      .#{$mainClass} {
+        @if ($size) {
+          display: $display !important;
+        } @else {
+          display: $display;
+        }
+      }
+    }
+  }
+}
+
+@if $useOverflows {
+  @include mQ.multiSizes($useOverflowsMediaQueries) using ($size, $divider) {
+    @each $dir in configs.$overflowsDirections {
+      // Validate parameters
+      @if $dir {
+        $checkedDir: val.listItem(('x', 'y'), $dir, 'Shaping.overflow.direction');
+      }
+
+      $dirClass: if(
+        sass($dir): '#{$dir}#{\:}overflow' ; else: 'overflow'
+      );
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}#{$dirClass}' ; else: $dirClass
+      );
+      $property: if(
+        sass($dir): 'overflow-#{$dir}' ; else: 'overflow'
+      );
+
+      .#{$mainClass} {
+        @each $value in configs.$overflows {
+          // Validate parameters
+          $checkedClass: val.listItem(configs.$overflows, $value, 'Shaping.overflow.value');
+
+          &-#{$value} {
+            @if ($size) {
+              #{$property}: $value !important;
+            } @else {
+              #{$property}: $value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useOpacities {
+  @include mQ.multiSizes($useOpacitiesMediaQueries) using ($size, $divider) {
+    @each $value in $opacities {
+      $checkedValue: val.opacity(math.div($value, 100), 'Shaping.opacity');
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}op' ; else: 'op'
+      );
+
+      .#{$mainClass}#{\:}#{$value} {
+        @if ($size) {
+          opacity: $checkedValue !important;
+        } @else {
+          opacity: $checkedValue;
+        }
+
+        &#{\:}hover:hover {
+          @if ($size) {
+            opacity: $checkedValue !important;
+          } @else {
+            opacity: $checkedValue;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useBlur {
+  @include mQ.multiSizes($useBlurMediaQueries) using ($size, $divider) {
+    @each $value in $blurValues {
+      $checkedValue: val.listItem($blurValues, $value, 'Shaping.blur');
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}bg#{\:}blur' ; else: 'bg#{\:}blur'
+      );
+      $calcValue: blur(#{$checkedValue}#{px});
+
+      .#{$mainClass}#{\:}#{$value} {
+        @if ($size) {
+          backdrop-filter: $calcValue !important;
+        } @else {
+          backdrop-filter: $calcValue;
+        }
+
+        &#{\:}hover:hover {
+          @if ($size) {
+            backdrop-filter: $calcValue !important;
+          } @else {
+            backdrop-filter: $calcValue;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useObjectFits {
+  @include mQ.multiSizes($useObjectFitsMediaQueries) using ($size, $divider) {
+    @each $fit in configs.$objectsFits {
+      // Validate parameters
+      $checkedFit: val.listItem(configs.$objectsFits, $fit, 'Shaping.objectFit');
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}object-fit' ; else: 'object-fit'
+      );
+
+      .#{$mainClass}#{\:}#{$fit} {
+        @if ($size) {
+          object-fit: $fit !important;
+        } @else {
+          object-fit: $fit;
+        }
+      }
+    }
+  }
+}
+
+@if $usePositions {
+  @include mQ.multiSizes($usePositionsMediaQueries) using ($size, $divider) {
+    @each $position in configs.$positions {
+      // Validate parameters
+      $checkedPosition: val.listItem(configs.$positions, $position, 'Shaping.position');
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}p-' ; else: 'p-'
+      );
+
+      .#{$mainClass}#{$position} {
+        @if ($size) {
+          position: $position !important;
+        } @else {
+          position: $position;
+        }
+      }
+    }
+  }
+}
+
+@if $useInsets {
+  @include mQ.multiSizes($useInsetsMediaQueries) using ($size, $divider) {
+    @each $value in $insetValues {
+      @each $position in configs.$insetPositions {
+        // Validate parameters
+        $checkedPosition: val.listItem(configs.$insetPositions, $position, 'Shaping.inset');
+
+        $mainClass: if(
+          sass($size): '#{$size}#{$divider}inset' ; else: 'inset'
+        );
+        $posClass: if(
+          sass($position): '#{$mainClass}-#{$position}' ; else: '#{$mainClass}'
+        );
+        $property: if(
+          sass($position): 'inset-#{$position}' ; else: 'inset'
+        );
+        $val: if(
+          sass($value == 0): 'full' ; else: $value
+        );
+
+        .#{$posClass}#{\:}#{$val} {
+          #{$property}: $value;
+        }
+      }
+    }
+  }
+}
+
+@if $useSizes {
+  @include mQ.multiSizes($useSizesMediaQueries) using ($size, $divider) {
+    @each $dir, $direction in configs.$spacesDirections {
+      // Validate parameters
+      $checkedDir: val.listItem(
+        ('w', 'min#{\:}w', 'max#{\:}w', 'h', 'min#{\:}h', 'max#{\:}h'),
+        $dir,
+        'Shaping.space.direction'
+      );
+      $checkedDirection: val.listItem(
+        ('width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'),
+        $direction,
+        'Shaping.space.direction'
+      );
+      $checkedStep: val.number(configs.$spacesStep, 'Shaping.space.step');
+
+      $mainClass: if(
+        sass($size): #{$size}#{$divider}#{$dir}; else: $dir
+      );
+
+      .#{$mainClass} {
+        @for $i from 0 through 100 {
+          $value: $i * $checkedStep;
+
+          @if ($value != 0) and ($value % $checkedStep == 0) and ($value <= 100) {
+            &#{\:}#{$value} {
+              @if ($size) {
+                #{$direction}: #{$value}#{'%'} !important;
+              } @else {
+                #{$direction}: #{$value}#{'%'};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useGutters {
+  @include mQ.multiSizes($useGuttersMediaQueries) using ($size, $divider) {
+    @each $class, $property in configs.$gutters {
+      // Validate parameters
+      $checkedClass: val.listItem(
+        (p, px, py, ps, pe, pt, pb, m, mx, my, ms, me, mt, mb, g, gx, gy),
+        $class,
+        'Shaping.gutter.class'
+      );
+      $checkedProperty: val.listItem(
+        (
+          padding,
+          padding-inline,
+          padding-block,
+          padding-inline-start,
+          padding-inline-end,
+          padding-block-start,
+          padding-block-end,
+          margin,
+          margin-inline,
+          margin-block,
+          margin-inline-start,
+          margin-inline-end,
+          margin-block-start,
+          margin-block-end,
+          gap,
+          column-gap,
+          row-gap
+        ),
+        $property,
+        'Shaping.gutter.property'
+      );
+
+      $mainClass: if(
+        sass($size): #{$size}#{$divider}#{$class}; else: $class
+      );
+
+      .#{$mainClass} {
+        @each $vClass, $value in $guttersValues {
+          &-#{$vClass} {
+            @if $size {
+              #{$property}: #{$value} !important;
+            } @else {
+              #{$property}: $value;
+            }
+
+            &\:i {
+              #{$property}: $value !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useBorders {
+  @include mQ.multiSizes($useBordersMediaQueries) using ($size, $divider) {
+    @each $i in $bordersValue {
+      @each $dir, $property in configs.$bordersDirections {
+        // Validate parameters
+        $checkedDir: val.listItem((null, 'top', 'bottom', 'start', 'end'), $dir, 'Shaping.borders');
+        $checkedProperty: val.listItem(
+          (border, border-block-start, border-block-end, border-inline-start, border-inline-end),
+          $property,
+          'Shaping.borders'
+        );
+
+        $mainClass: if(
+          sass($size): '#{$size}#{$divider}border' ; else: 'border'
+        );
+        $dirClass: if(
+          sass($dir): '#{$dir}#{\:}' ; else: $dir
+        );
+
+        .#{$mainClass}#{\:}#{$dirClass}#{$i} {
+          @if ($size) {
+            #{$property}-width: #{$i}px !important;
+          } @else {
+            #{$property}-width: #{$i}px;
+          }
+
+          @if not $size {
+            #{$property}-style: solid;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if $useTextBorders {
+  @include mQ.multiSizes($useTextBordersMediaQueries) using ($size, $divider) {
+    @each $i in $bordersValue {
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}stroke' ; else: 'stroke'
+      );
+      $value: math.div($i, 10);
+
+      // Validate parameters
+      $checkedValue: val.number($value, 'Shaping.textBorder');
+
+      .#{$mainClass}#{\:}#{$i} {
+        @if ($size) {
+          -webkit-text-stroke-width: #{$value}px !important;
+        } @else {
+          -webkit-text-stroke-width: #{$value}px;
+        }
+      }
+    }
+  }
+}
+
+@if $useRadius {
+  @include mQ.multiSizes($useRadiusMediaQueries) using ($size, $divider) {
+    @each $dir, $properties in configs.$radiusDirection {
+      // Validate parameters
+      $checkedDir: val.listItem(
+        (null, 'top', 'bottom', 'start', 'end', 'top-start', 'top-end', 'bottom-start', 'bottom-end'),
+        $dir,
+        'Shaping.radius.direction'
+      );
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}radius' ; else: 'radius'
+      );
+      $dirClass: if(
+        sass($dir): '#{$dir}#{\:}' ; else: $dir
+      );
+
+      @each $property in $properties {
+        .#{$mainClass}#{\:}#{$dirClass} {
+          &full {
+            @if ($size) {
+              #{$property}: 100vw !important;
+            } @else {
+              #{$property}: 100vw;
+            }
+          }
+
+          @each $value in $radiuses {
+            // Validate parameters
+            $checkedProperty: val.listItem(
+              (
+                border-radius,
+                border-start-start-radius,
+                border-start-end-radius,
+                border-end-start-radius,
+                border-end-end-radius
+              ),
+              $property,
+              'Shaping.radius.property'
+            );
+
+            &#{$value} {
+              @if ($size) {
+                #{$property}: #{$value}px !important;
+              } @else {
+                #{$property}: #{$value}px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}