@coreui/coreui 4.2.5 → 5.0.0-alpha.0

package/scss/mixins/_border-radius.scss

@@ -33,8 +33,8 @@
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-top-right-radius", valid-radius($radius));
-    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));
+    border-top-right-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
   }
 }
 
@@ -47,8 +47,8 @@
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-top-left-radius", valid-radius($radius));
-    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));
+    border-top-left-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
   }
 }
 
@@ -60,19 +60,19 @@
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-top-right-radius", valid-radius($radius));
+    border-top-right-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));
+    border-bottom-right-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));
+    border-bottom-left-radius: valid-radius($radius);
   }
 }
 // scss-docs-end border-radius-mixins

package/scss/mixins/_breakpoints.scss

@@ -22,19 +22,6 @@
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
-// Name of the previous breakpoint, or null for the first breakpoint.
-//
-//    >> breakpoint-before(lg)
-//    md
-//    >> breakpoint-next(lg, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(lg, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-before($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n - 1), null);
-}
-
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))

package/scss/mixins/_buttons.scss

@@ -4,91 +4,87 @@
 // and disabled options for all buttons
 
 // scss-docs-start btn-variant-mixin
-@mixin button-variant($variant) {
-  $background: map-get($variant, "bg");
-  $border-color: map-get($variant, "border-color");
-  $color: map-get($variant, "color");
-  $hover-background: map-get($variant, "hover-bg");
-  $hover-border-color: map-get($variant, "hover-border-color");
-  $hover-color: map-get($variant, "hover-color");
-  $active-background: map-get($variant, "active-bg");
-  $active-border-color: map-get($variant, "active-border-color");
-  $active-color: map-get($variant, "active-color");
-  $disabled-background: map-get($variant, "disabled-bg");
-  $disabled-border-color: map-get($variant, "disabled-border-color");
-  $disabled-color: map-get($variant, "disabled-color");
-  $shadow: map-get($variant, "shadow");
-
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
+) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-bg: #{$background};
-  --#{$prefix}btn-border-color: #{$border-color};
+  --#{$prefix}btn-border-color: #{$border};
   --#{$prefix}btn-hover-color: #{$hover-color};
   --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border-color, 15%))};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-border-color: #{$active-border};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
   --#{$prefix}btn-disabled-color: #{$disabled-color};
   --#{$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-border-color};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
 }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant($variant) {
-  $color: map-get($variant, "color");
-  $hover-background: map-get($variant, "hover-bg");
-  $hover-border-color: map-get($variant, "hover-border-color");
-  $hover-color: map-get($variant, "hover-color");
-  $active-background: map-get($variant, "active-bg");
-  $active-border-color: map-get($variant, "active-border-color");
-  $active-color: map-get($variant, "active-color");
-  $disabled-color: map-get($variant, "disabled-color");
-  $shadow: map-get($variant, "shadow");
-
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
   --#{$prefix}btn-color: #{$color};
   --#{$prefix}btn-border-color: #{$color};
-  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
   --#{$prefix}btn-hover-bg: #{$active-background};
-  --#{$prefix}btn-hover-border-color: #{$active-border-color};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-border-color: #{$active-border};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
   --#{$prefix}btn-disabled-color: #{$color};
   --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
   --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-ghost-variant-mixin
-@mixin button-ghost-variant($variant) {
-  $color: map-get($variant, "color");
-  $hover-background: map-get($variant, "hover-bg");
-  $hover-border-color: map-get($variant, "hover-border-color");
-  $hover-color: map-get($variant, "hover-color");
-  $active-background: map-get($variant, "active-bg");
-  $active-border-color: map-get($variant, "active-border-color");
-  $active-color: map-get($variant, "active-color");
-  $disabled-color: map-get($variant, "disabled-color");
-  $shadow: map-get($variant, "shadow");
-
+@mixin button-ghost-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
   --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-hover-bg: #{$hover-background};
-  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
-  --#{$prefix}btn-hover-color: #{$hover-color};
-  --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
-  --#{$prefix}btn-disabled-color: #{$disabled-color};
-  --#{$prefix}btn-shadow: #{$shadow};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
+  --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-ghost-variant-mixin
 
-// Button sizes
+
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}btn-padding-y: #{$padding-y};

package/scss/mixins/_caret.scss

@@ -1,44 +1,49 @@
 // scss-docs-start caret-mixins
-@mixin caret-down {
-  border-top: $caret-width solid;
-  border-right: $caret-width solid transparent;
+@mixin caret-down($width: $caret-width) {
+  border-top: $width solid;
+  border-right: $width solid transparent;
   border-bottom: 0;
-  border-left: $caret-width solid transparent;
+  border-left: $width solid transparent;
 }
 
-@mixin caret-up {
+@mixin caret-up($width: $caret-width) {
   border-top: 0;
-  border-right: $caret-width solid transparent;
-  border-bottom: $caret-width solid;
-  border-left: $caret-width solid transparent;
+  border-right: $width solid transparent;
+  border-bottom: $width solid;
+  border-left: $width solid transparent;
 }
 
-@mixin caret-end {
-  border-top: $caret-width solid transparent;
+@mixin caret-end($width: $caret-width) {
+  border-top: $width solid transparent;
   border-right: 0;
-  border-bottom: $caret-width solid transparent;
-  border-left: $caret-width solid;
+  border-bottom: $width solid transparent;
+  border-left: $width solid;
 }
 
-@mixin caret-start {
-  border-top: $caret-width solid transparent;
-  border-right: $caret-width solid;
-  border-bottom: $caret-width solid transparent;
+@mixin caret-start($width: $caret-width) {
+  border-top: $width solid transparent;
+  border-right: $width solid;
+  border-bottom: $width solid transparent;
 }
 
-@mixin caret($direction: down) {
+@mixin caret(
+  $direction: down,
+  $width: $caret-width,
+  $spacing: $caret-spacing,
+  $vertical-align: $caret-vertical-align
+) {
   @if $enable-caret {
     &::after {
       display: inline-block;
-      @include ltr-rtl("margin-left", $caret-spacing);
-      vertical-align: $caret-vertical-align;
+      margin-left: $spacing;
+      vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
-        @include caret-down();
+        @include caret-down($width);
       } @else if $direction == up {
-        @include caret-up();
+        @include caret-up($width);
       } @else if $direction == end {
-        @include caret-end();
+        @include caret-end($width);
       }
     }
 
@@ -49,15 +54,15 @@
 
       &::before {
         display: inline-block;
-        @include ltr-rtl("margin-right", $caret-spacing);
-        vertical-align: $caret-vertical-align;
+        margin-right: $spacing;
+        vertical-align: $vertical-align;
         content: "";
-        @include caret-start();
+        @include caret-start($width);
       }
     }
 
     &:empty::after {
-      @include ltr-rtl("margin-left", 0);
+      margin-left: 0;
     }
   }
 }

package/scss/mixins/_color-mode.scss

@@ -0,0 +1,21 @@
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $root: false) {
+  @if $color-mode-type == "media-query" {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
+          @content;
+        }
+      }
+    } @else {
+      @media (prefers-color-scheme: $mode) {
+        @content;
+      }
+    }
+  } @else {
+    [data-coreui-theme="#{$mode}"] {
+      @content;
+    }
+  }
+}
+// scss-docs-end color-mode-mixin

package/scss/mixins/_forms.scss

@@ -21,7 +21,8 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
 ) {
   .#{$state}-feedback {
     display: none;
@@ -56,18 +57,18 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
-        @include ltr-rtl("padding-right", $input-height-inner);
+        padding-right: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
-        @include ltr-rtl-value-only("background-position", right $input-height-inner-quarter center, left $input-height-inner-quarter center);
+        background-position: right $input-height-inner-quarter center;
         background-size: $input-height-inner-half $input-height-inner-half;
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -77,28 +78,28 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        @include ltr-rtl("padding-right", $input-height-inner);
-        @include ltr-rtl-value-only("background-position", top $input-height-inner-quarter right $input-height-inner-quarter, top $input-height-inner-quarter left $input-height-inner-quarter);
+        padding-right: $input-height-inner;
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
   }
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
-          @include ltr-rtl("padding-right", $form-select-feedback-icon-padding-end);
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
-          @include ltr-rtl-value-only("background-position", #{$form-select-bg-position, $form-select-feedback-icon-position});
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -114,7 +115,7 @@
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       &:checked {
         background-color: $color;
@@ -131,7 +132,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      @include ltr-rtl("margin-left", .5em);
+      margin-left: .5em;
     }
   }
 

package/scss/mixins/_grid.scss

@@ -45,13 +45,13 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  @include ltr-rtl("margin-left", if($num == 0, 0, percentage($num)));
+  margin-left: if($num == 0, 0, percentage($num));
 }
 
 // Row columns
 //
 // Specify on a parent element(e.g., .row) to force immediate children into NN
-// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
 // style grid.
 @mixin row-cols($count) {
   > * {

package/scss/mixins/_list-group.scss

@@ -1,16 +1,27 @@
+@include deprecate("`list-group-item-variant()`", "v5.0.0", "v6.0.0");
+
+
 // List Groups
+
 // scss-docs-start list-group-mixin
-@mixin list-group-item-variant($state, $variant) {
-  $background: map-get($variant, "bg");
-  $background-hover: map-get($variant, "bg-hover");
-  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    &.list-group-item-action {
+      &:hover,
+      &:focus {
+        color: $color;
+        background-color: shade-color($background, 10%);
+      }
 
-  --#{$prefix}list-group-color: #{$color};
-  --#{$prefix}list-group-bg: #{$background};
-  --#{$prefix}list-group-hover-bg: #{$background-hover};
-  --#{$prefix}list-group-action-hover-color: #{$color};
-  --#{$prefix}list-group-action-active-color: #{$white};
-  --#{$prefix}list-group-action-active-bg: #{$color};
-  --#{$prefix}list-group-action-active-border-color: #{$color};
+      &.active {
+        color: $white;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+  }
 }
 // scss-docs-end list-group-mixin

package/scss/mixins/_lists.scss

@@ -2,6 +2,6 @@
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 @mixin list-unstyled {
-  @include ltr-rtl("padding-left", 0);
+  padding-left: 0;
   list-style: none;
 }

package/scss/mixins/_utilities.scss

@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map
@@ -31,9 +31,6 @@
     // Don't prefix if value key is null (e.g. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    // Generate RTL version
-    $generate-rtl: if(map-has-key($utility, rtl), map-get($utility, rtl), false);
-
     @if map-get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
@@ -48,6 +45,7 @@
     }
 
     $is-css-var: map-get($utility, css-var);
+    $is-dark-mode: map-get($utility, dark-mode);
     $is-local-vars: map-get($utility, local-vars);
     $is-rtl: map-get($utility, rtl);
 
@@ -57,8 +55,15 @@
       }
 
       @if $is-css-var {
-        .#{$property-class + $infix + $property-class-modifier} {
-          --#{$prefix}#{$css-variable-name}: #{$value};
+        @if $enable-dark-mode and $is-dark-mode {
+          #{theme-prefix("dark", "#{$property-class + $infix + $property-class-modifier}")},
+          .#{$property-class + $infix + $property-class-modifier} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        } @else {
+          .#{$property-class + $infix + $property-class-modifier} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
         }
 
         @each $pseudo in $state {
@@ -67,16 +72,26 @@
           }
         }
       } @else {
-        .#{$property-class + $infix + $property-class-modifier} {
-          @each $property in $properties {
-            @if $is-local-vars {
-              @each $local-var, $variable in $is-local-vars {
-                --#{$prefix}#{$local-var}: #{$variable};
+        @if $enable-dark-mode and $is-dark-mode {
+          #{theme-prefix("dark", "#{$property-class + $infix + $property-class-modifier}")},
+          .#{$property-class + $infix + $property-class-modifier} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
               }
+              #{$property}: $value if($enable-important-utilities, !important, null);
             }
-            @if $generate-rtl == true {
-              @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
-            } @else {
+          }
+        } @else {
+          .#{$property-class + $infix + $property-class-modifier} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
               #{$property}: $value if($enable-important-utilities, !important, null);
             }
           }

package/scss/sidebar/_sidebar-narrow.scss

@@ -39,12 +39,12 @@
       bottom: 0;
 
       &::before {
-        @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
+        transform: rotate(180deg) #{"/* rtl:rotate(0deg) */"};
       }
     }
 
     &.sidebar-end .sidebar-toggler::before {
-      transform: rotate(0deg);
+      transform: rotate(0deg) #{"/* rtl:rotate(180deg) */"};
     }
   }
 }
@@ -77,12 +77,12 @@
   &:hover {
     .sidebar-toggler {
       &::before {
-        @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
+        transform: rotate(-180deg) #{"/* rtl:rotate(0deg) */"};
       }
     }
 
     &.sidebar-end .sidebar-toggler::before {
-      transform: rotate(0deg);
+      transform: rotate(0deg) #{"/* rtl:rotate(180deg) */"};
     }
   }
 }
@@ -95,10 +95,10 @@
       &.sidebar-narrow,
       &.sidebar-narrow-unfoldable {
         &:not(.sidebar-end) {
-          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
+          margin-left: calc(var(--#{$prefix}sidebar-narrow-width) * -1); // stylelint-disable-line function-disallowed-list
         }
         &.sidebar-end {
-          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
+          margin-right: calc(var(--#{$prefix}sidebar-narrow-width) * -1); // stylelint-disable-line function-disallowed-list
         }
       }
     }

package/scss/sidebar/_sidebar-nav.scss

@@ -94,7 +94,7 @@
     @include transition(inherit);
 
     &:first-child {
-      @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) * -1));
+      margin-left: calc(var(--#{$prefix}sidebar-nav-link-padding-x) * -1); // stylelint-disable-line function-disallowed-list
     }
   }
   // stylelint-disable-next-line selector-no-qualifying-type
@@ -140,7 +140,7 @@
       display: block;
       flex: 0 12px;
       height: 12px;
-      @include ltr-rtl("margin-left", auto);
+      margin-left: auto;
       content: "";
       background-image: var(--#{$prefix}sidebar-nav-group-indicator);
       background-repeat: no-repeat;
@@ -154,10 +154,10 @@
     list-style: none;
 
     .nav-link {
-      @include ltr-rtl("padding-left", var(--#{$prefix}sidebar-nav-icon-width));
+      padding-left: var(--#{$prefix}sidebar-nav-icon-width);
 
       .nav-icon {
-        @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-icon-width) * -1));
+        margin-left: calc(var(--#{$prefix}sidebar-nav-icon-width) * -1); // stylelint-disable-line function-disallowed-list
       }
     }
   }