beathers 5.7.3 → 5.7.5

package/scss/style/_shaping.scss

@@ -1,432 +1,439 @@
-@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 != null, 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');
-
-    $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} {
-      width: 100%;
-
-      @if ($padding != 0) {
-        padding-inline: $padding;
-      }
-
-      @include mQ.mQ(min, md) {
-        padding-inline: calc((100% - #{$size}) / 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(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'});
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }