@progress/kendo-theme-utils 6.0.2 → 6.0.3

package/dist/all.scss

@@ -1313,7 +1313,17 @@ $kendo-utils: (
         max: max-content,
         fr: minmax( 0, 1fr ),
     ),
-    "gap": $kendo-spacing,
+    "gap": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        // TODO: remove this extension once we fix docs
+        xs: k-map-get( $kendo-spacing, 1 ),
+        sm: k-map-get( $kendo-spacing, 2 ),
+        md: k-map-get( $kendo-spacing, 3 ),
+        lg: k-map-get( $kendo-spacing, 4 ),
+        xl: k-map-get( $kendo-spacing, 6 ),
+        thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
+        hair: k-map-get( $kendo-spacing, 1px )
+    )),
     "align-content": (
         normal: normal,
         stretch: stretch,
@@ -1391,8 +1401,28 @@ $kendo-utils: (
     ),
 
     // Spacing
-    "margin": $kendo-spacing,
-    "padding": $kendo-spacing,
+    "margin": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        // TODO: remove this extension once we fix docs
+        xs: k-map-get( $kendo-spacing, 1 ),
+        sm: k-map-get( $kendo-spacing, 2 ),
+        md: k-map-get( $kendo-spacing, 3 ),
+        lg: k-map-get( $kendo-spacing, 4 ),
+        xl: k-map-get( $kendo-spacing, 6 ),
+        thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
+        hair: k-map-get( $kendo-spacing, 1px )
+    )),
+    "padding": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        // TODO: remove this extension once we fix docs
+        xs: k-map-get( $kendo-spacing, 1 ),
+        sm: k-map-get( $kendo-spacing, 2 ),
+        md: k-map-get( $kendo-spacing, 3 ),
+        lg: k-map-get( $kendo-spacing, 4 ),
+        xl: k-map-get( $kendo-spacing, 6 ),
+        thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
+        hair: k-map-get( $kendo-spacing, 1px )
+    )),
     "space-between": (),
 
     // Sizing
@@ -1441,7 +1471,7 @@ $kendo-utils: (
 
     // Typography
     "font-family": (),
-    "font-size": (),
+    "font-size": $kendo-font-sizes,
     "font-smoothing": (),
     "font-style": (
         italic: italic,
@@ -1769,37 +1799,46 @@ $kendo-utils: (
 
 // #region @import "./accessibility/index.import.scss"; -> packages/utils/scss/accessibility/index.import.scss
 // #region @import "./_screen-readers.scss"; -> packages/utils/scss/accessibility/_screen-readers.scss
-$kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
-
-@if $kendo-utils-accessibility {
-    /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
-    /// @name .k-sr-only
-    /// @group accessibility
-    .#{$kendo-prefix}sr-only {
-        margin: -1px;
-        padding: 0;
-        width: 1px;
-        height: 1px;
-        border-width: 0;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        position: absolute;
-    }
+@mixin kendo-utils--accessibility--screen-readers() {
+
+    // Screen readers utility classes
+    $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
+
+    @if $kendo-utils-accessibility {
+        /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+        /// @name .k-sr-only
+        /// @group accessibility
+        .#{$kendo-prefix}sr-only {
+            margin: -1px;
+            padding: 0;
+            width: 1px;
+            height: 1px;
+            border-width: 0;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            position: absolute;
+        }
 
-    .#{$kendo-prefix}not-sr-only {
-        margin: 0;
-        padding: 0;
-        width: auto;
-        height: auto;
-        border-width: 0;
-        overflow: visible;
-        clip: auto;
-        position: static;
+        .#{$kendo-prefix}not-sr-only {
+            margin: 0;
+            padding: 0;
+            width: auto;
+            height: auto;
+            border-width: 0;
+            overflow: visible;
+            clip: auto;
+            position: static;
+        }
     }
+
 }
 
 // #endregion
 
+@mixin kendo-utils--accessibility() {
+    @include kendo-utils--accessibility--screen-readers();
+}
+
 // #endregion
 // #region @import "./layout/index.import.scss"; -> packages/utils/scss/layout/index.import.scss
 // #region @import "./_aspect-ratio.scss"; -> packages/utils/scss/layout/_aspect-ratio.scss
@@ -1825,13 +1864,49 @@ $kendo-utils-accessibility: k-map-get( $kendo-utils, "accessibility" ) !default;
 /// @group aspect-ratio
 /// @contextType css
 
-$kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
+@mixin kendo-utils--layout--aspect-ratio() {
+
+    // Aspect ratio utility classes
+    $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
+    @include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+
+
+    // Legacy aliases
+    @include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+
+}
+
+// #endregion
+// #region @import "./_clear.scss"; -> packages/utils/scss/layout/_clear.scss
+// Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
+
+/// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
+/// @name .k-clear-left
+/// @group float
+/// @contextType css
+
+/// This is equivalent to `clear: right;`. Is a keyword indicating that the element is moved down to clear past right floats.
+/// @name .k-clear-right
+/// @group float
+/// @contextType css
+
+/// This is equivalent to `clear: both;`. Is a keyword indicating that the element is moved down to clear past both left and right floats.
+/// @name .k-clear-both
+/// @group float
+/// @contextType css
+
+/// This is equivalent to `clear: none;`. Is a keyword indicating that the element is not moved down to clear past floating elements.
+/// @name .k-clear-none
+/// @group float
+/// @contextType css
 
-@include generate-utils( ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+@mixin kendo-utils--layout--clear() {
 
+    // Clear utility classes
+    $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
+    @include generate-utils( clear, clear, $kendo-utils-clear );
 
-// Legacy aliases
-@include generate-utils( aspect-ratio, aspect-ratio, $kendo-utils-aspect-ratio );
+}
 
 // #endregion
 // #region @import "./_display.scss"; -> packages/utils/scss/layout/_display.scss
@@ -1890,18 +1965,21 @@ $kendo-utils-aspect-ratio: k-map-get( $kendo-utils, "aspect-ratio" ) !default;
 /// @group display
 /// @contextType css
 
-// Display utility classes
-$kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+@mixin kendo-utils--layout--display() {
 
-@include generate-utils( d, display, $kendo-utils-display );
+    // Display utility classes
+    $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
+    @include generate-utils( d, display, $kendo-utils-display );
 
 
-// Legacy alias
-@include generate-utils( display, display, $kendo-utils-display );
-.#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
-.\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
-.#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
-.\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+    // Legacy aliases
+    @include generate-utils( display, display, $kendo-utils-display );
+    .#{$kendo-prefix}d-flex-row { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-row !optional; }
+    .\!#{$kendo-prefix}d-flex-row { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+    .#{$kendo-prefix}d-flex-col { @extend .#{$kendo-prefix}d-flex, .#{$kendo-prefix}flex-col !optional; }
+    .\!#{$kendo-prefix}d-flex-col { @extend .\!#{$kendo-prefix}d-flex, .\!#{$kendo-prefix}flex-row !optional; } // sass-lint:disable-line class-name-format
+
+}
 
 // #endregion
 // #region @import "./_float.scss"; -> packages/utils/scss/layout/_float.scss
@@ -1922,37 +2000,13 @@ $kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
 /// @group float
 /// @contextType css
 
-$kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
-
-@include generate-utils( float, float, $kendo-utils-float );
-
-// #endregion
-// #region @import "./_clear.scss"; -> packages/utils/scss/layout/_clear.scss
-// Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
-
-/// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
-/// @name .k-clear-left
-/// @group float
-/// @contextType css
-
-/// This is equivalent to `clear: right;`. Is a keyword indicating that the element is moved down to clear past right floats.
-/// @name .k-clear-right
-/// @group float
-/// @contextType css
-
-/// This is equivalent to `clear: both;`. Is a keyword indicating that the element is moved down to clear past both left and right floats.
-/// @name .k-clear-both
-/// @group float
-/// @contextType css
-
-/// This is equivalent to `clear: none;`. Is a keyword indicating that the element is not moved down to clear past floating elements.
-/// @name .k-clear-none
-/// @group float
-/// @contextType css
+@mixin kendo-utils--layout--float() {
 
-$kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
+    // Float utility classes
+    $kendo-utils-float: k-map-get( $kendo-utils, "float" ) !default;
+    @include generate-utils( float, float, $kendo-utils-float );
 
-@include generate-utils( clear, clear, $kendo-utils-clear );
+}
 
 // #endregion
 // #region @import "./_overflow.scss"; -> packages/utils/scss/layout/_overflow.scss
@@ -2031,10 +2085,13 @@ $kendo-utils-clear: k-map-get( $kendo-utils, "clear" ) !default;
 /// @group overflow
 /// @contextType css
 
-// Overflow utility classes
-$kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
+@mixin kendo-utils--layout--overflow() {
 
-@include generate-utils( overflow, overflow, $kendo-utils-overflow );
+    // Overflow utility classes
+    $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
+    @include generate-utils( overflow, overflow, $kendo-utils-overflow );
+
+}
 
 // #endregion
 // #region @import "./_position.scss"; -> packages/utils/scss/layout/_position.scss
@@ -2065,94 +2122,8 @@ $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
 /// @group position
 /// @contextType css
 
-$kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
-
-@include generate-utils( pos, position, $kendo-utils-position );
-
-// Aliases
-.#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
-.\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
-.#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
-.\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
-.#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
-.\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
-.#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
-.\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
-.#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
-.\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
-
-
-// TODO DOCS
-
-$kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
-
-@include generate-utils( inset, inset, $kendo-utils-inset );
-@include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
-@include generate-utils( inset-y, inset-block, $kendo-utils-inset );
-@include generate-utils( top, top, $kendo-utils-inset );
-@include generate-utils( right, right, $kendo-utils-inset );
-@include generate-utils( bottom, bottom, $kendo-utils-inset );
-@include generate-utils( left, left, $kendo-utils-inset );
-@include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
-@include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
-@include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-@include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
-
-.#{$kendo-prefix}top-start,
-.#{$kendo-prefix}pos-top-start {
-    top: 0;
-    inset-inline-start: 0;
-}
-
-.#{$kendo-prefix}top-end,
-.#{$kendo-prefix}pos-top-end {
-    top: 0;
-    inset-inline-end: 0;
-}
-
-.#{$kendo-prefix}bottom-start,
-.#{$kendo-prefix}pos-bottom-start {
-    bottom: 0;
-    inset-inline-start: 0;
-}
-
-.#{$kendo-prefix}bottom-end,
-.#{$kendo-prefix}pos-bottom-end {
-    bottom: 0;
-    inset-inline-end: 0;
-}
 
-.#{$kendo-prefix}top-center,
-.#{$kendo-prefix}pos-top-center {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
-.#{$kendo-prefix}middle-left,
-.#{$kendo-prefix}middle-start,
-.#{$kendo-prefix}pos-middle-start {
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-}
-.#{$kendo-prefix}middle-center {
-    top: 50%;
-    left: 50%;
-    transform: translateY(-50%);
-}
-.#{$kendo-prefix}middle-right,
-.#{$kendo-prefix}middle-end,
-.#{$kendo-prefix}pos-middle-end {
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-}
-.#{$kendo-prefix}bottom-center,
-.#{$kendo-prefix}pos-bottom-center {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
+// TODO: inset docs
 
 
 /// This is equivalent to `top: 0;`.
@@ -2175,37 +2146,211 @@ $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
 /// @group position
 /// @contextType css
 
-@each $side in (top, right, bottom, left) {
-    .#{$kendo-prefix}#{$side},
-    .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+@mixin kendo-utils--layout--position() {
+
+    // Position utility classes
+    $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
+    @include generate-utils( pos, position, $kendo-utils-position );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
+    .\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
+    .#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
+    .\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
+    .#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
+    .\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
+    .#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
+    .\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
+    .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
+    .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
+
+
+    // Inset utility classes
+    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
+    @include generate-utils( inset, inset, $kendo-utils-inset );
+    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
+    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
+    @include generate-utils( top, top, $kendo-utils-inset );
+    @include generate-utils( right, right, $kendo-utils-inset );
+    @include generate-utils( bottom, bottom, $kendo-utils-inset );
+    @include generate-utils( left, left, $kendo-utils-inset );
+    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}top-start,
+    .#{$kendo-prefix}pos-top-start {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}top-end,
+    .#{$kendo-prefix}pos-top-end {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}bottom-start,
+    .#{$kendo-prefix}pos-bottom-start {
+        bottom: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}bottom-end,
+    .#{$kendo-prefix}pos-bottom-end {
+        bottom: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}top-center,
+    .#{$kendo-prefix}pos-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .#{$kendo-prefix}middle-left,
+    .#{$kendo-prefix}middle-start,
+    .#{$kendo-prefix}pos-middle-start {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-center {
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-right,
+    .#{$kendo-prefix}middle-end,
+    .#{$kendo-prefix}pos-middle-end {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}bottom-center,
+    .#{$kendo-prefix}pos-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+
+    // Position length utility classes
+    @each $side in (top, right, bottom, left) {
+        .#{$kendo-prefix}#{$side},
+        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
+
 }
 
 // #endregion
 // #region @import "./_visibility.scss"; -> packages/utils/scss/layout/_visibility.scss
-// TODO DOCS
+// TODO: docs
+// TODO: consider visible and invisible vs visibility-visible and visibility-hidden
 
-$kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
+@mixin kendo-utils--layout--visibility() {
 
-@include generate-utils( visibility, visibility, $kendo-utils-visibility );
+    // Visibility utility classes
+    $kendo-utils-visibility: k-map-get( $kendo-utils, "visibility" ) !default;
+    @include generate-utils( visibility, visibility, $kendo-utils-visibility );
 
-// Aliases
-.#{$kendo-prefix}visible { @extend .#{$kendo-prefix}visibility-visible !optional; }
-.\!#{$kendo-prefix}visible { @extend .\!#{$kendo-prefix}visibility-visible !optional; }
-.#{$kendo-prefix}invisible { @extend .#{$kendo-prefix}visibility-hidden !optional; }
-.\!#{$kendo-prefix}invisible { @extend .\!#{$kendo-prefix}visibility-hidden !optional; }
+    // Legacy aliases
+    .#{$kendo-prefix}visible { @extend .#{$kendo-prefix}visibility-visible !optional; }
+    .\!#{$kendo-prefix}visible { @extend .\!#{$kendo-prefix}visibility-visible !optional; }
+    .#{$kendo-prefix}invisible { @extend .#{$kendo-prefix}visibility-hidden !optional; }
+    .\!#{$kendo-prefix}invisible { @extend .\!#{$kendo-prefix}visibility-hidden !optional; }
+
+}
 
 // #endregion
 // #region @import "./_zindex.scss"; -> packages/utils/scss/layout/_zindex.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
+@mixin kendo-utils--layout--zindex() {
 
-@include generate-utils( z, z-index, $kendo-utils-zindex );
+    // Z-index utility classes
+    $kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
+    @include generate-utils( z, z-index, $kendo-utils-zindex );
+
+}
 
 // #endregion
 
+
+@mixin kendo-utils--layout() {
+    @include kendo-utils--layout--aspect-ratio();
+    @include kendo-utils--layout--clear();
+    @include kendo-utils--layout--display();
+    @include kendo-utils--layout--float();
+    @include kendo-utils--layout--overflow();
+    @include kendo-utils--layout--position();
+    @include kendo-utils--layout--visibility();
+    @include kendo-utils--layout--zindex();
+}
+
 // #endregion
 // #region @import "./flex-grid/index.import.scss"; -> packages/utils/scss/flex-grid/index.import.scss
+// #region @import "./_align-content.scss"; -> packages/utils/scss/flex-grid/_align-content.scss
+// TODO: docs
+
+@mixin kendo-utils--flex-grid--align-content() {
+
+    // Align content utility classes
+    $kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
+    @include generate-utils( align-content, align-content, $kendo-utils-align-content );
+
+}
+
+// #endregion
+// #region @import "./_align-items.scss"; -> packages/utils/scss/flex-grid/_align-items.scss
+// TODO: docs
+
+@mixin kendo-utils--flex-grid--align-items() {
+
+    // Align items utility classes
+    $kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
+    @include generate-utils( align-items, align-items, $kendo-utils-align-items );
+
+}
+
+// #endregion
+// #region @import "./_align-self.scss"; -> packages/utils/scss/flex-grid/_align-self.scss
+// TODO: docs
+
+@mixin kendo-utils--flex-grid--align-self() {
+
+    // Align self utility classes
+    $kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
+    @include generate-utils( align-self, align-self, $kendo-utils-align-self );
+
+}
+
+// #endregion
+// #region @import "./_flex-basis.scss"; -> packages/utils/scss/flex-grid/_flex-basis.scss
+/// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
+/// @name .k-flex-basis-auto
+/// @group flex-basis
+/// @contextType css
+
+/// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
+/// @name .k-flex-basis-0
+/// @group flex-basis
+/// @contextType css
+
+@mixin kendo-utils--flex-grid--flex-basis() {
+
+    // Flex basis utility classes
+    $kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
+    @include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
+    @include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
+
+}
+
+// #endregion
 // #region @import "./_flex-direction.scss"; -> packages/utils/scss/flex-grid/_flex-direction.scss
 /// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
 /// @name .k-flex-row
@@ -2227,15 +2372,60 @@ $kendo-utils-zindex: k-map-get( $kendo-utils, "zindex" ) !default;
 /// @group flex-direction
 /// @contextType css
 
-// Flex direction utility classes
-$kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+@mixin kendo-utils--flex-grid--flex-direction() {
+
+    // Flex direction utility classes
+    $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !default;
+    @include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
+    .#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }
+
+}
+
+// #endregion
+// #region @import "./_flex-grow.scss"; -> packages/utils/scss/flex-grid/_flex-grow.scss
+/// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
+/// @name .k-flex-grow
+/// @group flex-grow
+/// @contextType css
+
+/// This is equivalent to `flex-grow: 0`. The item will not grow.
+/// @name .k-flex-grow-0
+/// @group flex-grow
+/// @contextType css
+
+@mixin kendo-utils--flex-grid--flex-grow() {
+
+    // Flex grow utility classes
+    $kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
+    @include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
+    @include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
+
+}
+
+// #endregion
+// #region @import "./_flex-shrink.scss"; -> packages/utils/scss/flex-grid/_flex-shrink.scss
+/// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
+/// @name .k-flex-shrink
+/// @group flex-shrink
+/// @contextType css
+
+/// This is equivalent to `flex-shrink: 0`. The item will not shrink.
+/// @name .k-flex-shrink-0
+/// @group flex-shrink
+/// @contextType css
 
-@include generate-utils( flex, flex-direction, $kendo-utils-flex-direction );
+@mixin kendo-utils--flex-grid--flex-shrink() {
 
+    // Flex shrink utility classes
+    $kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
+    @include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
+    @include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
 
-// Legacy aliases
-.#{$kendo-prefix}flex-column { @extend .#{$kendo-prefix}flex-col !optional; }
-.#{$kendo-prefix}flex-column-reverse { @extend .#{$kendo-prefix}flex-col-reverse !optional; }
+}
 
 // #endregion
 // #region @import "./_flex-wrap.scss"; -> packages/utils/scss/flex-grid/_flex-wrap.scss
@@ -2254,10 +2444,13 @@ $kendo-utils-flex-direction: k-map-get( $kendo-utils, "flex-direction" ) !defaul
 /// @group flex-wrap
 /// @contextType css
 
-// Flex wrap utility classes
-$kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
+@mixin kendo-utils--flex-grid--flex-wrap() {
 
-@include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
+    // Flex wrap utility classes
+    $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
+    @include generate-utils( flex, flex-wrap, $kendo-utils-flex-wrap );
+
+}
 
 // #endregion
 // #region @import "./_flex.scss"; -> packages/utils/scss/flex-grid/_flex.scss
@@ -2281,373 +2474,442 @@ $kendo-utils-flex-wrap: k-map-get( $kendo-utils, "flex-wrap" ) !default;
 /// @group flex
 /// @contextType css
 
-// Flex utility classes
-$kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
-
-@include generate-utils( flex, flex, $kendo-utils-flex );
-
-// #endregion
-// #region @import "./_flex-grow.scss"; -> packages/utils/scss/flex-grid/_flex-grow.scss
-/// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
-/// @name .k-flex-grow
-/// @group flex-grow
-/// @contextType css
-
-/// This is equivalent to `flex-grow: 0`. The item will not grow.
-/// @name .k-flex-grow-0
-/// @group flex-grow
-/// @contextType css
+@mixin kendo-utils--flex-grid--flex() {
 
-// Flex grow utility classes
-$kendo-utils-flex-grow: k-map-get( $kendo-utils, "flex-grow" ) !default;
+    // Flex utility classes
+    $kendo-utils-flex: k-map-get( $kendo-utils, "flex" ) !default;
+    @include generate-utils( flex, flex, $kendo-utils-flex );
 
-@include generate-utils( grow, flex-grow, $kendo-utils-flex-grow );
-@include generate-utils( flex-grow, flex-grow, $kendo-utils-flex-grow );
+}
 
 // #endregion
-// #region @import "./_flex-shrink.scss"; -> packages/utils/scss/flex-grid/_flex-shrink.scss
-/// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
-/// @name .k-flex-shrink
-/// @group flex-shrink
-/// @contextType css
+// #region @import "./_gap.scss"; -> packages/utils/scss/flex-grid/_gap.scss
+// TODO: docs
 
-/// This is equivalent to `flex-shrink: 0`. The item will not shrink.
-/// @name .k-flex-shrink-0
-/// @group flex-shrink
-/// @contextType css
+@mixin kendo-utils--flex-grid--gap() {
 
-// Flex shrink utility classes
-$kendo-utils-flex-shrink: k-map-get( $kendo-utils, "flex-shrink" ) !default;
+    // Gap utility classes
+    $kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
+    @include generate-utils( gap, gap, $kendo-utils-gap );
+    @include generate-utils( gap-x, column-gap, $kendo-utils-gap );
+    @include generate-utils( gap-y, row-gap, $kendo-utils-gap );
 
-@include generate-utils( shrink, flex-shrink, $kendo-utils-flex-shrink );
-@include generate-utils( flex-shrink, flex-shrink, $kendo-utils-flex-shrink );
+}
 
 // #endregion
-// #region @import "./_flex-basis.scss"; -> packages/utils/scss/flex-grid/_flex-basis.scss
-/// This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
-/// @name .k-flex-basis-auto
-/// @group flex-basis
-/// @contextType css
+// #region @import "./_grid-auto-columns.scss"; -> packages/utils/scss/flex-grid/_grid-auto-columns.scss
+// TODO: docs
 
-/// This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
-/// @name .k-flex-basis-0
-/// @group flex-basis
-/// @contextType css
+@mixin kendo-utils--flex-grid--grid-auto-columns() {
 
-// Flex basis utility classes
-$kendo-utils-flex-basis: k-map-get( $kendo-utils, "flex-basis" ) !default;
+    // Grid auto columns utility classes
+    $kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
+    @include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
 
-@include generate-utils( basis, flex-basis, $kendo-utils-flex-basis );
-@include generate-utils( flex-basis, flex-basis, $kendo-utils-flex-basis );
+}
 
 // #endregion
-// #region @import "./_order.scss"; -> packages/utils/scss/flex-grid/_order.scss
-/// This is equivalent to `order: -9999;`.
-/// @name .k-order-first
-/// @group order
-/// @contextType css
-
-/// This is equivalent to `order: 9999;`.
-/// @name .k-order-last
-/// @group order
-/// @contextType css
-
-/// This is equivalent to `order: 0;`.
-/// @name .k-order-none
-/// @group order
-/// @contextType css
+// #region @import "./_grid-auto-flow.scss"; -> packages/utils/scss/flex-grid/_grid-auto-flow.scss
+// TODO: docs
 
-/// This is equivalent to `order: 1;`, `order: 2;`, `order: 12;`, etc.
-/// @name .from k-order-1 to k-order-12
-/// @group order
-/// @contextType css
+@mixin kendo-utils--flex-grid--grid-auto-flow() {
 
-$kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
+    // Grid auto flow utility classes
+    $kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
+    @include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
 
-@include generate-utils( order, order, $kendo-utils-order );
+}
 
 // #endregion
-// #region @import "./_grid-template-columns.scss"; -> packages/utils/scss/flex-grid/_grid-template-columns.scss
-// TODO DOCS
-
-$kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
-
-@include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
+// #region @import "./_grid-auto-rows.scss"; -> packages/utils/scss/flex-grid/_grid-auto-rows.scss
+// TODO: docs
 
-// #endregion
-// #region @import "./_grid-template-rows.scss"; -> packages/utils/scss/flex-grid/_grid-template-rows.scss
-// TODO DOCS
+@mixin kendo-utils--flex-grid--grid-auto-rows() {
 
-$kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
+    // Grid auto rows utility classes
+    $kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
+    @include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
 
-@include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
+}
 
 // #endregion
 // #region @import "./_grid-column-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-column-start-end.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+@mixin kendo-utils--flex-grid--grid-column-start-end() {
 
-@include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
+    // Grid column start utility classes
+    $kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
+    @include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
 
 
-$kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    // Grid column end utility classes
+    $kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
+    @include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
-@include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
 
+    // Grid column span utility classes
+    $kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
+    @include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
 
-$kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
 
-@include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
+    // Legacy aliases
+    @include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
+    .#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
+    .\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
 
-
-// Legacy aliases
-@include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
-.#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
-.\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; } // sass-lint:disable-line class-name-format
+}
 
 // #endregion
 // #region @import "./_grid-row-start-end.scss"; -> packages/utils/scss/flex-grid/_grid-row-start-end.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+@mixin kendo-utils--flex-grid--grid-row-start-end() {
 
-@include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
+    // Grid row start/end utility classes
+    $kendo-utils-grid-row-start: k-map-get( $kendo-utils, "grid-row-start" ) !default;
+    @include generate-utils( row-start, grid-row-start, $kendo-utils-grid-row-start );
 
 
-$kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+    // Grid row start/end utility classes
+    $kendo-utils-grid-row-end: k-map-get( $kendo-utils, "grid-row-end" ) !default;
+    @include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
 
-@include generate-utils( row-end, grid-row-end, $kendo-utils-grid-row-end );
 
+    // Grid row span utility classes
+    $kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
+    @include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
 
-$kendo-utils-grid-row-span: k-map-get( $kendo-utils, "grid-row-span" ) !default;
 
-@include generate-utils( row-span, grid-row, $kendo-utils-grid-row-span );
+    // Legacy aliases
+    @include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
+    .#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
+    .\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
 
-
-// Legacy aliases
-@include generate-utils( rowspan, grid-row, $kendo-utils-grid-row-span );
-.#{$kendo-prefix}rowspan-all { @extend .#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
-.\!#{$kendo-prefix}rowspan-all { @extend .\!#{$kendo-prefix}rowspan-full !optional; } // sass-lint:disable-line class-name-format
+}
 
 // #endregion
-// #region @import "./_grid-auto-flow.scss"; -> packages/utils/scss/flex-grid/_grid-auto-flow.scss
-// TODO DOCS
-
-$kendo-utils-grid-auto-flow: k-map-get( $kendo-utils, "grid-auto-flow" ) !default;
+// #region @import "./_grid-template-columns.scss"; -> packages/utils/scss/flex-grid/_grid-template-columns.scss
+// TODO: docs
 
-@include generate-utils( grid-flow, grid-auto-flow, $kendo-utils-grid-auto-flow );
+@mixin kendo-utils--flex-grid--grid-template-columns() {
 
-// #endregion
-// #region @import "./_grid-auto-columns.scss"; -> packages/utils/scss/flex-grid/_grid-auto-columns.scss
-// TODO DOCS
+    // Grid template columns utility classes
+    $kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
+    @include generate-utils( grid-cols, grid-template-columns, $kendo-utils-grid-template-columns );
 
-$kendo-utils-grid-auto-columns: k-map-get( $kendo-utils, "grid-auto-columns" ) !default;
-
-@include generate-utils( grid-auto-cols, grid-auto-columns, $kendo-utils-grid-auto-columns );
+}
 
 // #endregion
-// #region @import "./_grid-auto-rows.scss"; -> packages/utils/scss/flex-grid/_grid-auto-rows.scss
-// TODO DOCS
-
-$kendo-utils-grid-auto-rows: k-map-get( $kendo-utils, "grid-auto-rows" ) !default;
+// #region @import "./_grid-template-rows.scss"; -> packages/utils/scss/flex-grid/_grid-template-rows.scss
+// TODO: docs
 
-@include generate-utils( grid-auto-rows, grid-auto-rows, $kendo-utils-grid-auto-rows );
+@mixin kendo-utils--flex-grid--grid-template-rows() {
 
-// #endregion
-// #region @import "./_gap.scss"; -> packages/utils/scss/flex-grid/_gap.scss
-// TODO DOCS
+    // Grid template rows utility classes
+    $kendo-utils-grid-template-rows: k-map-get( $kendo-utils, "grid-template-rows" ) !default;
+    @include generate-utils( grid-rows, grid-template-rows, $kendo-utils-grid-template-rows );
 
-$kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
-
-@include generate-utils( gap, gap, $kendo-utils-gap );
-@include generate-utils( gap-x, column-gap, $kendo-utils-gap );
-@include generate-utils( gap-y, row-gap, $kendo-utils-gap );
+}
 
 // #endregion
-// #region @import "./_align-content.scss"; -> packages/utils/scss/flex-grid/_align-content.scss
-// TODO DOCS
+// #region @import "./_justify-content.scss"; -> packages/utils/scss/flex-grid/_justify-content.scss
+// TODO: docs
 
-$kendo-utils-align-content: k-map-get( $kendo-utils, "align-content" ) !default;
+@mixin kendo-utils--flex-grid--justify-content() {
 
-@include generate-utils( align-content, align-content, $kendo-utils-align-content );
+    // Justify content utility classes
+    $kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
+    @include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
 
-// #endregion
-// #region @import "./_align-items.scss"; -> packages/utils/scss/flex-grid/_align-items.scss
-// TODO DOCS
 
-$kendo-utils-align-items: k-map-get( $kendo-utils, "align-items" ) !default;
+    // Custom justify-content classes
+    .#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
+    .\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format
 
-@include generate-utils( align-items, align-items, $kendo-utils-align-items );
+}
 
 // #endregion
-// #region @import "./_align-self.scss"; -> packages/utils/scss/flex-grid/_align-self.scss
-// TODO DOCS
+// #region @import "./_justify-items.scss"; -> packages/utils/scss/flex-grid/_justify-items.scss
+// TODO: docs
 
-$kendo-utils-align-self: k-map-get( $kendo-utils, "align-self" ) !default;
+@mixin kendo-utils--flex-grid--justify-items() {
 
-@include generate-utils( align-self, align-self, $kendo-utils-align-self );
+    // Justify items utility classes
+    $kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
+    @include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
+
+}
 
 // #endregion
-// #region @import "./_justify-content.scss"; -> packages/utils/scss/flex-grid/_justify-content.scss
-// TODO DOCS
+// #region @import "./_justify-self.scss"; -> packages/utils/scss/flex-grid/_justify-self.scss
+// TODO: docs
 
-$kendo-utils-justify-content: k-map-get( $kendo-utils, "justify-content" ) !default;
+@mixin kendo-utils--flex-grid--justify-self() {
 
-@include generate-utils( justify-content, justify-content, $kendo-utils-justify-content );
+    // Justify self utility classes
+    $kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
+    @include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
 
-.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0%; }
-.\!.#{$kendo-prefix}justify-content-stretch > * { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format
+}
 
 // #endregion
-// #region @import "./_justify-items.scss"; -> packages/utils/scss/flex-grid/_justify-items.scss
-// TODO DOCS
+// #region @import "./_order.scss"; -> packages/utils/scss/flex-grid/_order.scss
+/// This is equivalent to `order: -9999;`.
+/// @name .k-order-first
+/// @group order
+/// @contextType css
+
+/// This is equivalent to `order: 9999;`.
+/// @name .k-order-last
+/// @group order
+/// @contextType css
 
-$kendo-utils-justify-items: k-map-get( $kendo-utils, "justify-items" ) !default;
+/// This is equivalent to `order: 0;`.
+/// @name .k-order-none
+/// @group order
+/// @contextType css
 
-@include generate-utils( justify-items, justify-items, $kendo-utils-justify-items );
+/// This is equivalent to `order: 1;`, `order: 2;`, `order: 12;`, etc.
+/// @name .from k-order-1 to k-order-12
+/// @group order
+/// @contextType css
 
-// #endregion
-// #region @import "./_justify-self.scss"; -> packages/utils/scss/flex-grid/_justify-self.scss
-// TODO DOCS
+@mixin kendo-utils--flex-grid--order() {
 
-$kendo-utils-justify-self: k-map-get( $kendo-utils, "justify-self" ) !default;
+    // Order utility classes
+    $kendo-utils-order: k-map-get( $kendo-utils, "order" ) !default;
+    @include generate-utils( order, order, $kendo-utils-order );
 
-@include generate-utils( justify-self, justify-self, $kendo-utils-justify-self );
+}
 
 // #endregion
 // #region @import "./_place-content.scss"; -> packages/utils/scss/flex-grid/_place-content.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
+@mixin kendo-utils--flex-grid--place-content() {
 
-@include generate-utils( place-content, place-content, $kendo-utils-place-content );
+    // Place content utility classes
+    $kendo-utils-place-content: k-map-get( $kendo-utils, "place-content" ) !default;
+    @include generate-utils( place-content, place-content, $kendo-utils-place-content );
+
+}
 
 // #endregion
 // #region @import "./_place-items.scss"; -> packages/utils/scss/flex-grid/_place-items.scss
-// TODO DOCS
+// TODO: docs
+
+@mixin kendo-utils--flex-grid--place-items() {
 
-$kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
+    // Place items utility classes
+    $kendo-utils-place-items: k-map-get( $kendo-utils, "place-items" ) !default;
+    @include generate-utils( place-items, place-items, $kendo-utils-place-items );
 
-@include generate-utils( place-items, place-items, $kendo-utils-place-items );
+}
 
 // #endregion
 // #region @import "./_place-self.scss"; -> packages/utils/scss/flex-grid/_place-self.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
+@mixin kendo-utils--flex-grid--place-self() {
 
-@include generate-utils( place-self, place-self, $kendo-utils-place-self );
+    // Place self utility classes
+    $kendo-utils-place-self: k-map-get( $kendo-utils, "place-self" ) !default;
+    @include generate-utils( place-self, place-self, $kendo-utils-place-self );
+
+}
 
 // #endregion
 
+
+@mixin kendo-utils--flex-grid() {
+    @include kendo-utils--flex-grid--align-content();
+    @include kendo-utils--flex-grid--align-items();
+    @include kendo-utils--flex-grid--align-self();
+    @include kendo-utils--flex-grid--flex-basis();
+    @include kendo-utils--flex-grid--flex-direction();
+    @include kendo-utils--flex-grid--flex-grow();
+    @include kendo-utils--flex-grid--flex-shrink();
+    @include kendo-utils--flex-grid--flex-wrap();
+    @include kendo-utils--flex-grid--flex();
+    @include kendo-utils--flex-grid--gap();
+    @include kendo-utils--flex-grid--grid-auto-columns();
+    @include kendo-utils--flex-grid--grid-auto-flow();
+    @include kendo-utils--flex-grid--grid-auto-rows();
+    @include kendo-utils--flex-grid--grid-column-start-end();
+    @include kendo-utils--flex-grid--grid-row-start-end();
+    @include kendo-utils--flex-grid--grid-template-columns();
+    @include kendo-utils--flex-grid--grid-template-rows();
+    @include kendo-utils--flex-grid--justify-content();
+    @include kendo-utils--flex-grid--justify-items();
+    @include kendo-utils--flex-grid--justify-self();
+    @include kendo-utils--flex-grid--order();
+    @include kendo-utils--flex-grid--place-content();
+    @include kendo-utils--flex-grid--place-items();
+    @include kendo-utils--flex-grid--place-self();
+}
+
 // #endregion
 // #region @import "./spacing/index.import.scss"; -> packages/utils/scss/spacing/index.import.scss
 // #region @import "./_margin.scss"; -> packages/utils/scss/spacing/_margin.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
+@mixin kendo-utils--spacing--margin() {
 
-@include generate-utils( m, margin, $kendo-utils-margin );
-@include generate-utils( mt, margin-top, $kendo-utils-margin );
-@include generate-utils( mr, margin-right, $kendo-utils-margin );
-@include generate-utils( mb, margin-bottom, $kendo-utils-margin );
-@include generate-utils( ml, margin-left, $kendo-utils-margin );
-@include generate-utils( mx, margin-inline, $kendo-utils-margin );
-@include generate-utils( my, margin-block, $kendo-utils-margin );
+    // Margin utility classes
+    $kendo-utils-margin: k-map-get( $kendo-utils, "margin" ) !default;
+    @include generate-utils( m, margin, $kendo-utils-margin );
+    @include generate-utils( mt, margin-top, $kendo-utils-margin );
+    @include generate-utils( mr, margin-right, $kendo-utils-margin );
+    @include generate-utils( mb, margin-bottom, $kendo-utils-margin );
+    @include generate-utils( ml, margin-left, $kendo-utils-margin );
+    @include generate-utils( mx, margin-inline, $kendo-utils-margin );
+    @include generate-utils( my, margin-block, $kendo-utils-margin );
+
+}
 
 // #endregion
 // #region @import "./_padding.scss"; -> packages/utils/scss/spacing/_padding.scss
-// TODO DOCS
+// TODO: docs
+
+@mixin kendo-utils--spacing--padding() {
 
-$kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+    // Padding utility classes
+    $kendo-utils-padding: k-map-get( $kendo-utils, "padding" ) !default;
+    @include generate-utils( p, padding, $kendo-utils-padding );
+    @include generate-utils( pt, padding-top, $kendo-utils-padding );
+    @include generate-utils( pr, padding-right, $kendo-utils-padding );
+    @include generate-utils( pb, padding-bottom, $kendo-utils-padding );
+    @include generate-utils( pl, padding-left, $kendo-utils-padding );
+    @include generate-utils( px, padding-inline, $kendo-utils-padding );
+    @include generate-utils( py, padding-block, $kendo-utils-padding );
 
-@include generate-utils( p, padding, $kendo-utils-padding );
-@include generate-utils( pt, padding-top, $kendo-utils-padding );
-@include generate-utils( pr, padding-right, $kendo-utils-padding );
-@include generate-utils( pb, padding-bottom, $kendo-utils-padding );
-@include generate-utils( pl, padding-left, $kendo-utils-padding );
-@include generate-utils( px, padding-inline, $kendo-utils-padding );
-@include generate-utils( py, padding-block, $kendo-utils-padding );
+}
 
 // #endregion
 // #region @import "./_space-between.scss"; -> packages/utils/scss/spacing/_space-between.scss
+// TODO: docs
 
-// #endregion
+@mixin kendo-utils--spacing--space-between() {
 
-// #endregion
-// #region @import "./sizing/index.import.scss"; -> packages/utils/scss/sizing/index.import.scss
-// #region @import "./_width.scss"; -> packages/utils/scss/sizing/_width.scss
-// TODO DOCS
+    // Space between utility classes
+    $kendo-utils-space-between: k-map-get( $kendo-utils, "space-between" ) !default;
+    @each $key, $value in $kendo-utils-space-between {
+        $_key: k-escape-class-name( $key );
 
-$kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
+        .#{$kendo-prefix}space-x-#{$_key} > * + * {
+            margin-inline-start: $value;
+        }
+        .#{$kendo-prefix}space-y-#{$_key} > * + * {
+            margin-block-start: $value;
+        }
+    }
 
-@include generate-utils( w, width, $kendo-utils-width );
+}
 
+// #endregion
 
-$kendo-utils-min-width: k-map-get( $kendo-utils, "min-width" ) !default;
 
-@include generate-utils( min-w, min-width, $kendo-utils-min-width );
+@mixin kendo-utils--spacing() {
+    @include kendo-utils--spacing--margin();
+    @include kendo-utils--spacing--padding();
+    @include kendo-utils--spacing--space-between();
+}
 
+// #endregion
+// #region @import "./sizing/index.import.scss"; -> packages/utils/scss/sizing/index.import.scss
+// #region @import "./_height.scss"; -> packages/utils/scss/sizing/_height.scss
+// TODO: docs
 
-$kendo-utils-max-width: k-map-get( $kendo-utils, "max-width" ) !default;
+@mixin kendo-utils--sizing--height() {
 
-@include generate-utils( max-w, max-width, $kendo-utils-max-width );
+    // Height utility classes
+    $kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
+    @include generate-utils( h, height, $kendo-utils-height );
 
-// #endregion
-// #region @import "./_height.scss"; -> packages/utils/scss/sizing/_height.scss
-// TODO DOCS
+    // Min height utility classes
+    $kendo-utils-min-height: k-map-get( $kendo-utils, "min-height" ) !default;
+    @include generate-utils( min-h, min-height, $kendo-utils-min-height );
 
-$kendo-utils-height: k-map-get( $kendo-utils, "height" ) !default;
+    // Max height utility classes
+    $kendo-utils-max-height: k-map-get( $kendo-utils, "max-height" ) !default;
+    @include generate-utils( max-h, max-height, $kendo-utils-max-height );
 
-@include generate-utils( h, height, $kendo-utils-height );
+}
 
+// #endregion
+// #region @import "./_width.scss"; -> packages/utils/scss/sizing/_width.scss
+// TODO: docs
 
-$kendo-utils-min-height: k-map-get( $kendo-utils, "min-height" ) !default;
+@mixin kendo-utils--sizing--width() {
 
-@include generate-utils( min-h, min-height, $kendo-utils-min-height );
+    // Width utility classes
+    $kendo-utils-width: k-map-get( $kendo-utils, "width" ) !default;
+    @include generate-utils( w, width, $kendo-utils-width );
 
+    // Min-width utility classes
+    $kendo-utils-min-width: k-map-get( $kendo-utils, "min-width" ) !default;
+    @include generate-utils( min-w, min-width, $kendo-utils-min-width );
 
-$kendo-utils-max-height: k-map-get( $kendo-utils, "max-height" ) !default;
+    // Max-width utility classes
+    $kendo-utils-max-width: k-map-get( $kendo-utils, "max-width" ) !default;
+    @include generate-utils( max-w, max-width, $kendo-utils-max-width );
 
-@include generate-utils( max-h, max-height, $kendo-utils-max-height );
+}
 
 // #endregion
 
+
+@mixin kendo-utils--sizing() {
+    @include kendo-utils--sizing--height();
+    @include kendo-utils--sizing--width();
+}
+
 // #endregion
 // #region @import "./typography/index.import.scss"; -> packages/utils/scss/typography/index.import.scss
 // font family
 // #region @import "./_font-size.scss"; -> packages/utils/scss/typography/_font-size.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
+@mixin kendo-utils--typography--font-size() {
 
-@include generate-utils( font-size, font-size, $kendo-utils-font-size );
+    // Font size utility classes
+    $kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
+    @include generate-utils( font-size, font-size, $kendo-utils-font-size );
 
+    // Legacy aliases
+    @include generate-utils( fs, font-size, $kendo-utils-font-size );
 
-// Legacy aliases
-@include generate-utils( fs, font-size, $kendo-utils-font-size );
+}
 
 // #endregion
 // font smoothing
 // #region @import "./_font-style.scss"; -> packages/utils/scss/typography/_font-style.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
+@mixin kendo-utils--typography--font-style() {
 
-@include generate-utils( font, font-style, $kendo-utils-font-style );
+    // Font style utility classes
+    $kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
+    @include generate-utils( font, font-style, $kendo-utils-font-style );
+
+}
 
 // #endregion
 // #region @import "./_font-weight.scss"; -> packages/utils/scss/typography/_font-weight.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
+@mixin kendo-utils--typography--font-weight() {
 
-@include generate-utils( font, font-weight, $kendo-utils-font-weight );
+    // Font weight utility classes
+    $kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
+    @include generate-utils( font, font-weight, $kendo-utils-font-weight );
 
 
-// Legacy aliases
-@include generate-utils( font-weight, font-weight, $kendo-utils-font-weight );
+    // Legacy aliases
+    @include generate-utils( font-weight, font-weight, $kendo-utils-font-weight );
+
+}
 
 // #endregion
 // font variant
@@ -2677,22 +2939,30 @@ $kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
 /// @group text-align
 /// @contextType css
 
-// Text align utility classes
-$kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
+@mixin kendo-utils--typography--text-align() {
 
-@include generate-utils( text, text-align, $kendo-utils-text-align );
+    // Text align utility classes
+    $kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
+
+    @include generate-utils( text, text-align, $kendo-utils-text-align );
+
+}
 
 // #endregion
 // #region @import "./_text-color.scss"; -> packages/utils/scss/typography/_text-color.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
+@mixin kendo-utils--typography--text-color() {
 
-@include generate-utils( text, color, $kendo-utils-text-color );
+    // Text color utility classes
+    $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
+    @include generate-utils( text, color, $kendo-utils-text-color );
 
 
-// Legacy aliases
-@include generate-utils( color, color, $kendo-utils-text-color );
+    // Legacy aliases
+    @include generate-utils( color, color, $kendo-utils-text-color );
+
+}
 
 // #endregion
 // text decoration
@@ -2714,10 +2984,13 @@ $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
 /// @group text-transform
 /// @contextType css
 
-// Text transform utility classes
-$kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
+@mixin kendo-utils--typography--text-transform() {
 
-@include generate-utils( text, text-transform, $kendo-utils-text-transform );
+    // Text transform utility classes
+    $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
+    @include generate-utils( text, text-transform, $kendo-utils-text-transform );
+
+}
 
 // #endregion
 // text overflow
@@ -2756,145 +3029,216 @@ $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !defaul
 /// @group white-space
 /// @contextType css
 
-// White space utility classes
-$kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
+@mixin kendo-utils--typography--white-space() {
 
-@include generate-utils( white-space, white-space, $kendo-utils-white-space );
-@include generate-utils( whitespace, white-space, $kendo-utils-white-space );
+    // White space utility classes
+    $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
 
+    @include generate-utils( white-space, white-space, $kendo-utils-white-space );
+    @include generate-utils( whitespace, white-space, $kendo-utils-white-space );
 
-// Legacy aliases
-.#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }
+
+    // Legacy aliases
+    .#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }
+
+}
 
 // #endregion
 
 
-/// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
-/// @name .k-text-ellipsis
-/// @group text
-.#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
+@mixin kendo-utils--typography() {
+    /// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+    /// @name .k-text-ellipsis
+    /// @group text
+    .#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
+
+    @include kendo-utils--typography--font-size();
+    @include kendo-utils--typography--font-style();
+    @include kendo-utils--typography--font-weight();
+    @include kendo-utils--typography--text-align();
+    @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-transform();
+    @include kendo-utils--typography--white-space();
+}
 
 // #endregion
 // #region @import "./background/index.import.scss"; -> packages/utils/scss/background/index.import.scss
 // #region @import "./_background-color.scss"; -> packages/utils/scss/background/_background-color.scss
-// TODO DOCS
+// TODO: docs
+
+@mixin kendo-utils--background--background-color() {
 
-$kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+    // Background color utility classes
+    $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
+    @include generate-utils( bg, background-color, $kendo-utils-background-color );
 
-@include generate-utils( bg, background-color, $kendo-utils-background-color );
+}
 
 // #endregion
 
+
+@mixin kendo-utils--background() {
+    @include kendo-utils--background--background-color();
+}
+
 // #endregion
 // #region @import "./border/index.import.scss"; -> packages/utils/scss/border/index.import.scss
-// #region @import "./_border-width.scss"; -> packages/utils/scss/border/_border-width.scss
-// TODO DOCS
+// #region @import "./_border-color.scss"; -> packages/utils/scss/border/_border-color.scss
+// TODO: docs
 
-$kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
+@mixin kendo-utils--border--border-color() {
 
-@include generate-utils( border, border-width, $kendo-utils-border-width );
-@include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
-@include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
-@include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
-@include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
-@include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
-@include generate-utils( border-y, border-block-width, $kendo-utils-border-width );
+    // Border color utility classes
+    $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
+    @include generate-utils( border, border-color, $kendo-utils-border-color );
+    @include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
+    @include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
+    @include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
+    @include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
+    @include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
+    @include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
 
+}
 
-// Legacy aliases
-@include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
-@include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
-@include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
-@include generate-utils( border-left, border-left-width, $kendo-utils-border-width );
+// #endregion
+// #region @import "./_border-radius.scss"; -> packages/utils/scss/border/_border-radius.scss
+// TODO: docs
+
+@mixin kendo-utils--border--border-radius() {
+
+    // Border radius utility classes
+    $kendo-utils-border-radius: k-map-get( $kendo-utils, "border-radius" ) !default;
+    @include generate-utils( rounded, border-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-tl, border-top-left-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-tr, border-top-right-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-br, border-bottom-right-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-utils-border-radius );
+    @include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-utils-border-radius );
+    @include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
+    @include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
+    @include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-utils-border-radius );
+
+}
 
 // #endregion
 // #region @import "./_border-style.scss"; -> packages/utils/scss/border/_border-style.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
+@mixin kendo-utils--border--border-style() {
 
-@include generate-utils( border, border-style, $kendo-utils-border-style );
-@include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
-@include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
-@include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
-@include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
-@include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
-@include generate-utils( border-y, border-block-style, $kendo-utils-border-style );
+    // Border style utility classes
+    $kendo-utils-border-style: k-map-get( $kendo-utils, "border-style" ) !default;
+    @include generate-utils( border, border-style, $kendo-utils-border-style );
+    @include generate-utils( border-t, border-top-style, $kendo-utils-border-style );
+    @include generate-utils( border-r, border-right-style, $kendo-utils-border-style );
+    @include generate-utils( border-b, border-bottom-style, $kendo-utils-border-style );
+    @include generate-utils( border-l, border-left-style, $kendo-utils-border-style );
+    @include generate-utils( border-x, border-inline-style, $kendo-utils-border-style );
+    @include generate-utils( border-y, border-block-style, $kendo-utils-border-style );
+
+}
 
 // #endregion
-// #region @import "./_border-color.scss"; -> packages/utils/scss/border/_border-color.scss
-// TODO DOCS
+// #region @import "./_border-width.scss"; -> packages/utils/scss/border/_border-width.scss
+// TODO: docs
 
-$kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
+@mixin kendo-utils--border--border-width() {
 
-@include generate-utils( border, border-color, $kendo-utils-border-color );
-@include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
-@include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
-@include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
-@include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
-@include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
-@include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
+    // Border width utility classes
+    $kendo-utils-border-width: k-map-get( $kendo-utils, "border-width" ) !default;
+    @include generate-utils( border, border-width, $kendo-utils-border-width );
+    @include generate-utils( border-t, border-top-width, $kendo-utils-border-width );
+    @include generate-utils( border-r, border-right-width, $kendo-utils-border-width );
+    @include generate-utils( border-b, border-bottom-width, $kendo-utils-border-width );
+    @include generate-utils( border-l, border-left-width, $kendo-utils-border-width );
+    @include generate-utils( border-x, border-inline-width, $kendo-utils-border-width );
+    @include generate-utils( border-y, border-block-width, $kendo-utils-border-width );
 
-// #endregion
-// #region @import "./_border-radius.scss"; -> packages/utils/scss/border/_border-radius.scss
-// TODO DOCS
 
-$kendo-utils-border-radius: k-map-get( $kendo-utils, "border-radius" ) !default;
+    // Legacy aliases
+    @include generate-utils( border-top, border-top-width, $kendo-utils-border-width );
+    @include generate-utils( border-right, border-right-width, $kendo-utils-border-width );
+    @include generate-utils( border-bottom, border-bottom-width, $kendo-utils-border-width );
+    @include generate-utils( border-left, border-left-width, $kendo-utils-border-width );
 
-@include generate-utils( rounded, border-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-tl, border-top-left-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-tr, border-top-right-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-br, border-bottom-right-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-bl, border-bottom-left-radius, $kendo-utils-border-radius );
-@include generate-utils( rounded-t, ( border-top-left-radius, border-top-right-radius ), $kendo-utils-border-radius );
-@include generate-utils( rounded-r, ( border-top-right-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
-@include generate-utils( rounded-b, ( border-bottom-left-radius, border-bottom-right-radius ), $kendo-utils-border-radius );
-@include generate-utils( rounded-l, ( border-top-left-radius, border-bottom-left-radius ), $kendo-utils-border-radius );
+}
 
 // #endregion
-// #region @import "./_outline-width.scss"; -> packages/utils/scss/border/_outline-width.scss
-// TODO DOCS
+// #region @import "./_outline-color.scss"; -> packages/utils/scss/border/_outline-color.scss
+// TODO: docs
 
-$kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
+@mixin kendo-utils--border--outline-color() {
 
-@include generate-utils( outline, outline-width, $kendo-utils-outline-width );
+    // Outline color utility classes
+    $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
+    @include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+
+}
 
 // #endregion
-// #region @import "./_outline-style.scss"; -> packages/utils/scss/border/_outline-style.scss
-// TODO DOCS
+// #region @import "./_outline-offset.scss"; -> packages/utils/scss/border/_outline-offset.scss
+// TODO: docs
 
-$kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
+@mixin kendo-utils--border--outline-offset() {
 
-@include generate-utils( outline, outline-style, $kendo-utils-outline-style );
+    // Outline offset utility classes
+    $kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
+    @include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
+
+}
 
 // #endregion
-// #region @import "./_outline-color.scss"; -> packages/utils/scss/border/_outline-color.scss
-// TODO DOCS
+// #region @import "./_outline-style.scss"; -> packages/utils/scss/border/_outline-style.scss
+// TODO: docs
 
-$kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
+@mixin kendo-utils--border--outline-style() {
 
-@include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+    // Outline style utility classes
+    $kendo-utils-outline-style: k-map-get( $kendo-utils, "outline-style" ) !default;
+    @include generate-utils( outline, outline-style, $kendo-utils-outline-style );
+
+}
 
 // #endregion
-// #region @import "./_outline-offset.scss"; -> packages/utils/scss/border/_outline-offset.scss
-// TODO DOCS
+// #region @import "./_outline-width.scss"; -> packages/utils/scss/border/_outline-width.scss
+// TODO: docs
+
+@mixin kendo-utils--border--outline-width() {
 
-$kendo-utils-outline-offset: k-map-get( $kendo-utils, "outline-offset" ) !default;
+    // Outline width utility classes
+    $kendo-utils-outline-width: k-map-get( $kendo-utils, "outline-width" ) !default;
+    @include generate-utils( outline, outline-width, $kendo-utils-outline-width );
 
-@include generate-utils( outline-offset, outline-offset, $kendo-utils-outline-offset );
+}
 
 // #endregion
 
+
+@mixin kendo-utils--border() {
+    @include kendo-utils--border--border-color();
+    @include kendo-utils--border--border-radius();
+    @include kendo-utils--border--border-style();
+    @include kendo-utils--border--border-width();
+    @include kendo-utils--border--outline-color();
+    @include kendo-utils--border--outline-offset();
+    @include kendo-utils--border--outline-style();
+    @include kendo-utils--border--outline-width();
+}
+
 // #endregion
 // effects
 // filter
 // #region @import "./table/index.import.scss"; -> packages/utils/scss/table/index.import.scss
 // #region @import "./_border-collapse.scss"; -> packages/utils/scss/table/_border-collapse.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
+@mixin kendo-utils--table--border-collapse() {
 
-@include generate-utils( border, border-collapse, $kendo-utils-border-collapse );
+    // Border collapse utility classes
+    $kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
+    @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );
+
+}
 
 // #endregion
 // #region @import "./_table-layout.scss"; -> packages/utils/scss/table/_table-layout.scss
@@ -2910,14 +3254,23 @@ $kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !defa
 /// @group table-layout
 /// @contextType css
 
-// Table layout utility classes
-$kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
+@mixin kendo-utils--table--table-layout() {
 
-@include generate-utils( table, table-layout, $kendo-utils-table-layout );
-@include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );
+    // Table layout utility classes
+    $kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
+    @include generate-utils( table, table-layout, $kendo-utils-table-layout );
+    @include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );
+
+}
 
 // #endregion
 
+
+@mixin kendo-utils--table() {
+    @include kendo-utils--table--border-collapse();
+    @include kendo-utils--table--table-layout();
+}
+
 // #endregion
 // transition
 // #region @import "./transform/index.import.scss"; -> packages/utils/scss/transform/index.import.scss
@@ -2932,58 +3285,40 @@ $kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
 /// @group transform
 /// @contextType css
 
-// Flip utility classes
-$kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
+// TODO: consider globally horizontal vs h vs x
+
+@mixin kendo-utils--transform--flip() {
+
+    // Flip utility classes
+    $kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
+    @if $kendo-utils-flip {
+        .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
+        .\!#{$kendo-prefix}flip-h { transform: scaleX( -1 ) !important; } // sass-lint:disable-line no-important
+        .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
+        .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // sass-lint:disable-line no-important
+        .#{$kendo-prefix}flip-h.#{$kendo-prefix}flip-v { transform: scale( -1, -1 ); }
+        .\!#{$kendo-prefix}flip-h.\!#{$kendo-prefix}flip-v { transform: scale( -1, -1 ) !important; } // sass-lint:disable-line no-important
 
-@if $kendo-utils-flip {
-    .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }
-    .\!#{$kendo-prefix}flip-h { transform: scaleX( -1 ) !important; } // sass-lint:disable-line no-important
-    .#{$kendo-prefix}flip-v { transform: scaleY( -1 ); }
-    .\!#{$kendo-prefix}flip-v { transform: scaleY( -1 ) !important; } // sass-lint:disable-line no-important
-    .#{$kendo-prefix}flip-h.#{$kendo-prefix}flip-v { transform: scale( -1, -1 ); }
-    .\!#{$kendo-prefix}flip-h.\!#{$kendo-prefix}flip-v { transform: scale( -1, -1 ) !important; } // sass-lint:disable-line no-important
+        // Legacy aliases
+        .#{$kendo-prefix}flip-x { @extend .#{$kendo-prefix}flip-h !optional; }
+        .\!#{$kendo-prefix}flip-x { @extend .\!#{$kendo-prefix}flip-h !optional; }
+        .#{$kendo-prefix}flip-y { @extend .#{$kendo-prefix}flip-v !optional; }
+        .\!#{$kendo-prefix}flip-y { @extend .\!#{$kendo-prefix}flip-v !optional; }
+    }
 
-    // Aliases
-    .#{$kendo-prefix}flip-x { @extend .#{$kendo-prefix}flip-h !optional; }
-    .\!#{$kendo-prefix}flip-x { @extend .\!#{$kendo-prefix}flip-h !optional; }
-    .#{$kendo-prefix}flip-y { @extend .#{$kendo-prefix}flip-v !optional; }
-    .\!#{$kendo-prefix}flip-y { @extend .\!#{$kendo-prefix}flip-v !optional; }
 }
 
 // #endregion
-// #region @import "./_scale.scss"; -> packages/utils/scss/transform/_scale.scss
-/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
-/// @name .k-scale-0
-/// @group transform
-/// @contextType css
-
-/// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
-/// @name .k-scale-1
-/// @group transform
-/// @contextType css
+// #region @import "./_origin.scss"; -> packages/utils/scss/transform/_origin.scss
+// TODO: docs
 
-/// This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions.
-/// @name .k-scale-2
-/// @group transform
-/// @contextType css
+@mixin kendo-utils--transform--origin() {
 
-$kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
+    // Transform origin utility classes
+    $kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
+    @include generate-utils( origin, transform-origin, $kendo-utils-origin );
 
-// sass-lint:disable function-name-format
-@function __scale( $val ) {
-    @return scale( $val );
-}
-@function __scale-x( $val ) {
-    @return scaleX( $val );
 }
-@function __scale-y( $val ) {
-    @return scaleY( $val );
-}
-// sass-lint:enable function-name-format
-
-@include generate-utils( scale, transform, $kendo-utils-scale, __scale );
-@include generate-utils( scale-x, transform, $kendo-utils-scale, __scale-x );
-@include generate-utils( scale-y, transform, $kendo-utils-scale, __scale-y );
 
 // #endregion
 // #region @import "./_rotate.scss"; -> packages/utils/scss/transform/_rotate.scss
@@ -3027,15 +3362,80 @@ $kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
 /// @group transform
 /// @contextType css
 
-$kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
-
 // sass-lint:disable function-name-format
 @function __rotate( $val ) {
     @return rotate( $val );
 }
 // sass-lint:enable function-name-format
 
-@include generate-utils( rotate, transform, $kendo-utils-rotate, __rotate );
+@mixin kendo-utils--transform--rotate() {
+
+    // Rotate utility classes
+    $kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
+    @include generate-utils( rotate, transform, $kendo-utils-rotate, __rotate );
+
+}
+
+// #endregion
+// #region @import "./_scale.scss"; -> packages/utils/scss/transform/_scale.scss
+/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
+/// @name .k-scale-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
+/// @name .k-scale-1
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions.
+/// @name .k-scale-2
+/// @group transform
+/// @contextType css
+
+// sass-lint:disable function-name-format
+@function __scale( $val ) {
+    @return scale( $val );
+}
+@function __scale-x( $val ) {
+    @return scaleX( $val );
+}
+@function __scale-y( $val ) {
+    @return scaleY( $val );
+}
+// sass-lint:enable function-name-format
+
+@mixin kendo-utils--transform--scale() {
+
+    // Scale utility classes
+    $kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
+    @include generate-utils( scale, transform, $kendo-utils-scale, __scale );
+    @include generate-utils( scale-x, transform, $kendo-utils-scale, __scale-x );
+    @include generate-utils( scale-y, transform, $kendo-utils-scale, __scale-y );
+
+}
+
+// #endregion
+// #region @import "./_skew.scss"; -> packages/utils/scss/transform/_skew.scss
+// TODO: docs
+
+// sass-lint:disable function-name-format
+@function __skew-x( $val ) {
+    @return skewX( $val );
+}
+@function __skew-y( $val ) {
+    @return skewY( $val );
+}
+// sass-lint:enable function-name-format
+
+@mixin kendo-utils--transform--skew() {
+
+    // Transform skew utility classes
+    $kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
+    @include generate-utils( skew-x, transform, $kendo-utils-skew, __skew-x );
+    @include generate-utils( skew-y, transform, $kendo-utils-skew, __skew-y );
+
+}
 
 // #endregion
 // #region @import "./_translate.scss"; -> packages/utils/scss/transform/_translate.scss
@@ -3084,19 +3484,6 @@ $kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
 /// @group transform
 /// @contextType css
 
-$kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
-$kendo-utils-translate-xy: (
-    "0": ( 0, 0 ),
-    "0-50": ( 0, 50% ),
-    "0-100": ( 0, 100% ),
-    "50-0": ( 50%, 0 ),
-    "50-50": ( 50%, 50% ),
-    "50-100": ( 50%, 100% ),
-    "100-0": ( 100%, 0 ),
-    "100-50": ( 100%, 50% ),
-    "100-100": ( 100%, 100% )
-) !default;
-
 // sass-lint:disable function-name-format
 @function __translate( $val ) {
     @return translate( $val );
@@ -3109,46 +3496,51 @@ $kendo-utils-translate-xy: (
 }
 // sass-lint:enable function-name-format
 
-@include generate-utils( translate, transform, $kendo-utils-translate-xy, __translate );
-@include generate-utils( translate-x, transform, $kendo-utils-translate, __translate-x );
-@include generate-utils( translate-y, transform, $kendo-utils-translate, __translate-y );
+@mixin kendo-utils--transform--translate() {
 
-// #endregion
-// #region @import "./_skew.scss"; -> packages/utils/scss/transform/_skew.scss
-// TODO DOCS
+    // Translate utility classes
+    $kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
+    $kendo-utils-translate-xy: (
+        "0": ( 0, 0 ),
+        "0-50": ( 0, 50% ),
+        "0-100": ( 0, 100% ),
+        "50-0": ( 50%, 0 ),
+        "50-50": ( 50%, 50% ),
+        "50-100": ( 50%, 100% ),
+        "100-0": ( 100%, 0 ),
+        "100-50": ( 100%, 50% ),
+        "100-100": ( 100%, 100% )
+    ) !default;
+    @include generate-utils( translate, transform, $kendo-utils-translate-xy, __translate );
+    @include generate-utils( translate-x, transform, $kendo-utils-translate, __translate-x );
+    @include generate-utils( translate-y, transform, $kendo-utils-translate, __translate-y );
 
-$kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
-
-// sass-lint:disable function-name-format
-@function __skew-x( $val ) {
-    @return skewX( $val );
 }
-@function __skew-y( $val ) {
-    @return skewY( $val );
-}
-// sass-lint:enable function-name-format
-
-@include generate-utils( skew-x, transform, $kendo-utils-skew, __skew-x );
-@include generate-utils( skew-y, transform, $kendo-utils-skew, __skew-y );
 
 // #endregion
-// #region @import "./_origin.scss"; -> packages/utils/scss/transform/_origin.scss
-// TODO DOCS
 
-$kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
 
-@include generate-utils( origin, transform-origin, $kendo-utils-origin );
-
-// #endregion
+@mixin kendo-utils--transform() {
+    @include kendo-utils--transform--flip();
+    @include kendo-utils--transform--origin();
+    @include kendo-utils--transform--rotate();
+    @include kendo-utils--transform--scale();
+    @include kendo-utils--transform--skew();
+    @include kendo-utils--transform--translate();
+}
 
 // #endregion
 // #region @import "./interactivity/index.import.scss"; -> packages/utils/scss/interactivity/index.import.scss
 // #region @import "./_accent-color.scss"; -> packages/utils/scss/interactivity/_accent-color.scss
-// TODO DOCS
+// TODO: docs
+
+@mixin kendo-utils--interactivity--accent-color() {
 
-$kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
+    // Accent color utility classes
+    $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
+    @include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
 
-@include generate-utils( accent-color, accent-color, $kendo-utils-accent-color );
+}
 
 // #endregion
 // #region @import "./_appearance.scss"; -> packages/utils/scss/interactivity/_appearance.scss
@@ -3162,26 +3554,37 @@ $kendo-utils-accent-color: k-map-get( $kendo-utils, "accent-color" ) !default;
 /// @group appearance
 /// @contextType css
 
-// Appearance utility classes
-$kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
+@mixin kendo-utils--interactivity--appearance() {
 
-@include generate-utils( appearance, appearance, $kendo-utils-appearance );
+    // Appearance utility classes
+    $kendo-utils-appearance: k-map-get( $kendo-utils, "appearance" ) !default;
+    @include generate-utils( appearance, appearance, $kendo-utils-appearance );
+
+}
 
 // #endregion
-// #region @import "./_cursor.scss"; -> packages/utils/scss/interactivity/_cursor.scss
-// TODO DOCS
+// #region @import "./_caret-color.scss"; -> packages/utils/scss/interactivity/_caret-color.scss
+// TODO: docs
 
-$kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
+@mixin kendo-utils--interactivity--caret-color() {
 
-@include generate-utils( cursor, cursor, $kendo-utils-cursor );
+    // Caret color utility classes
+    $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
+    @include generate-utils( caret, caret-color, $kendo-utils-caret-color );
+
+}
 
 // #endregion
-// #region @import "./_caret-color.scss"; -> packages/utils/scss/interactivity/_caret-color.scss
-// TODO DOCS
+// #region @import "./_cursor.scss"; -> packages/utils/scss/interactivity/_cursor.scss
+// TODO: docs
 
-$kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
+@mixin kendo-utils--interactivity--cursor() {
 
-@include generate-utils( caret, caret-color, $kendo-utils-caret-color );
+    // Cursor utility classes
+    $kendo-utils-cursor: k-map-get( $kendo-utils, "cursor" ) !default;
+    @include generate-utils( cursor, cursor, $kendo-utils-cursor );
+
+}
 
 // #endregion
 // #region @import "./_pointer-events.scss"; -> packages/utils/scss/interactivity/_pointer-events.scss
@@ -3197,10 +3600,13 @@ $kendo-utils-caret-color: k-map-get( $kendo-utils, "caret-color" ) !default;
 /// @group pointer-events
 /// @contextType css
 
-// Pointer events utility classes
-$kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
+@mixin kendo-utils--interactivity--pointer-events() {
 
-@include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
+    // Pointer events utility classes
+    $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !default;
+    @include generate-utils( pointer-events, pointer-events, $kendo-utils-pointer-events );
+
+}
 
 // #endregion
 // #region @import "./_resize.scss"; -> packages/utils/scss/interactivity/_resize.scss
@@ -3226,62 +3632,70 @@ $kendo-utils-pointer-events: k-map-get( $kendo-utils, "pointer-events" ) !defaul
 /// @group resize
 /// @contextType css
 
-// Resize utility classes
-$kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
+@mixin kendo-utils--interactivity--resize() {
+
+    // Resize utility classes
+    $kendo-utils-resize: k-map-get( $kendo-utils, "resize" ) !default;
+    @include generate-utils( resize, resize, $kendo-utils-resize );
 
-@include generate-utils( resize, resize, $kendo-utils-resize );
+}
 
 // #endregion
 // #region @import "./_scroll.scss"; -> packages/utils/scss/interactivity/_scroll.scss
-// TODO DOCS
-
-$kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
+// TODO: docs
 
-@include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
+@mixin kendo-utils--interactivity--scroll() {
 
+    // Scroll behavior utility classes
+    $kendo-utils-scroll-behavior: k-map-get( $kendo-utils, "scroll-behavior" ) !default;
+    @include generate-utils( scroll, scroll-behavior, $kendo-utils-scroll-behavior );
 
-$kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
 
-@include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
+    // Scroll snap type utility classes
+    $kendo-utils-scroll-snap-type: k-map-get( $kendo-utils, "scroll-snap-type" ) !default;
+    @include generate-utils( scroll-snap, scroll-snap-type, $kendo-utils-scroll-snap-type );
 
-.#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
-.#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
+    // Custom scroll snap type utility classes
+    .#{$kendo-prefix}scroll-snap-mandatory { #{--#{$kendo-prefix}scroll-snap-strictness}: mandatory; }
+    .#{$kendo-prefix}scroll-snap-proximity { #{--#{$kendo-prefix}scroll-snap-strictness}: proximity; }
 
 
-$kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+    // Scroll snap stop utility classes
+    $kendo-utils-scroll-snap-stop: k-map-get( $kendo-utils, "scroll-snap-stop" ) !default;
+    @include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
 
-@include generate-utils( scroll-snap-stop, scroll-snap-stop, $kendo-utils-scroll-snap-stop );
 
+    // Scroll snap align utility classes
+    $kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
+    @include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
 
-$kendo-utils-scroll-snap-align: k-map-get( $kendo-utils, "scroll-snap-align" ) !default;
 
-@include generate-utils( scroll-snap-align, scroll-snap-align, $kendo-utils-scroll-snap-align );
+    // Scroll margin utility classes
+    $kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
+    @include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
+    @include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
 
 
-$kendo-utils-scroll-margin: k-map-get( $kendo-utils, "scroll-margin" ) !default;
+    // Scroll padding utility classes
+    $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
+    @include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
+    @include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );
 
-@include generate-utils( scroll-m, scroll-margin, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mt, scroll-margin-top, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mr, scroll-margin-right, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mb, scroll-margin-bottom, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-ml, scroll-margin-left, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-mx, scroll-margin-inline, $kendo-utils-scroll-margin );
-@include generate-utils( scroll-my, scroll-margin-block, $kendo-utils-scroll-margin );
-
-
-$kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !default;
-
-@include generate-utils( scroll-p, scroll-padding, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pt, scroll-padding-top, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pr, scroll-padding-right, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pb, scroll-padding-bottom, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-pl, scroll-padding-left, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-px, scroll-padding-inline, $kendo-utils-scroll-padding );
-@include generate-utils( scroll-py, scroll-padding-block, $kendo-utils-scroll-padding );
+}
 
 // #endregion
 // #region @import "./_touch-action.scss"; -> packages/utils/scss/interactivity/_touch-action.scss
-// TODO DOCS
+// TODO: docs
 
 /// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
 /// @name .k-touch-action-none
@@ -3293,10 +3707,13 @@ $kendo-utils-scroll-padding: k-map-get( $kendo-utils, "scroll-padding" ) !defaul
 /// @group touch-action
 /// @contextType css
 
-// Touch-action utility classes
-$kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
+@mixin kendo-utils--interactivity--touch-action() {
 
-@include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
+    // Touch-action utility classes
+    $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
+    @include generate-utils( touch-action, touch-action, $kendo-utils-touch-action );
+
+}
 
 // #endregion
 // #region @import "./_user-select.scss"; -> packages/utils/scss/interactivity/_user-select.scss
@@ -3327,21 +3744,60 @@ $kendo-utils-touch-action: k-map-get( $kendo-utils, "touch-action" ) !default;
 /// @group user-select
 /// @contextType css
 
-// User select utility classes
-$kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
+@mixin kendo-utils--interactivity--user-select() {
+
+    // User select utility classes
+    $kendo-utils-user-select: k-map-get( $kendo-utils, "user-select" ) !default;
+    @include generate-utils( user-select, user-select, $kendo-utils-user-select );
 
-@include generate-utils( user-select, user-select, $kendo-utils-user-select );
+}
 
 // #endregion
 // #region @import "./_will-change.scss"; -> packages/utils/scss/interactivity/_will-change.scss
-// TODO DOCS
+// TODO: docs
 
-$kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
+@mixin kendo-utils--interactivity--will-change() {
 
-@include generate-utils( will-change, will-change, $kendo-utils-will-change );
+    // Will change utility classes
+    $kendo-utils-will-change: k-map-get( $kendo-utils, "will-change" ) !default;
+    @include generate-utils( will-change, will-change, $kendo-utils-will-change );
+
+}
 
 // #endregion
 
+
+@mixin kendo-utils--interactivity() {
+    @include kendo-utils--interactivity--accent-color();
+    @include kendo-utils--interactivity--appearance();
+    @include kendo-utils--interactivity--caret-color();
+    @include kendo-utils--interactivity--cursor();
+    @include kendo-utils--interactivity--pointer-events();
+    @include kendo-utils--interactivity--resize();
+    @include kendo-utils--interactivity--scroll();
+    @include kendo-utils--interactivity--touch-action();
+    @include kendo-utils--interactivity--user-select();
+    @include kendo-utils--interactivity--will-change();
+}
+
 // #endregion
 
+
+// Mixin for all styles
+@mixin kendo-utils() {
+    @include kendo-utils--accessibility();
+    @include kendo-utils--layout();
+    @include kendo-utils--flex-grid();
+    @include kendo-utils--spacing();
+    @include kendo-utils--sizing();
+    @include kendo-utils--typography();
+    @include kendo-utils--background();
+    @include kendo-utils--border();
+    @include kendo-utils--table();
+    @include kendo-utils--transform();
+    @include kendo-utils--interactivity();
+}
+
 // #endregion
+
+@include kendo-utils();