@design-factory/design-factory 20.0.0-next.1 → 20.0.0-next.2

package/styles/scss/components/modal/_modal.scss

@@ -1,6 +1,12 @@
 @use 'sass:map';
 @use 'sass:meta';
 
+/* stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default */
+$isBrand2023: meta.variable-exists(
+    $name: 'df-enableBranding2023'
+  )
+  and $df-enableBranding2023;
+
 .modal {
   // TODO remove this in the next major release
   --#{$prefix}modal-backdrop-opacity: #{$df-modal-backdrop-opacity};
@@ -12,22 +18,43 @@
   --#{$prefix}modal-header-button-close-padding-y: #{$df-modal-header-button-close-padding-y};
   --#{$prefix}modal-header-button-close-border-radius: #{$df-modal-header-button-close-border-radius};
 
-  --#{$prefix}modal-header-icon-font-color: #{shades-css-var(secondary, 'text-color')};
-
-  --#{$prefix}modal-header-button-color-hover: #{shades-css-var(secondary, 'text-hover-color')};
-  --#{$prefix}modal-header-button-color-hover-bg: #{shades-css-var(secondary, 'bg-subtle-hover-color')};
-
-  --#{$prefix}modal-header-button-active-bg: #{shades-css-var(secondary, 'bg-subtle-active-color')};
+  @if not $isBrand2023 {
+    --#{$prefix}modal-header-icon-font-color: #{shades-css-var(secondary, 'text-color')};
+    --#{$prefix}modal-header-button-color-hover: #{shades-css-var(secondary, 'text-hover-color')};
+  }
 
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}modal-header-button-color-focus: #{shades-css-var(secondary, 'text-color')};
-    --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var(secondary, 'text-hover-color')};
+  --#{$prefix}modal-header-button-color-hover-bg: #{shades-css-var-brand2023(
+      'button-text-basic-color-neutral-hovered-background',
+      secondary,
+      'bg-subtle-hover-color'
+    )};
+  --#{$prefix}modal-header-button-active-bg: #{shades-css-var-brand2023(
+      'button-text-basic-color-neutral-pressed-background',
+      secondary,
+      'bg-subtle-active-color'
+    )};
+
+  @if $isBrand2023 {
+    --#{$prefix}modal-header-button-color-focus: #{shades-css-var-brand2023(
+        'button-text-basic-color-neutral-default-foreground',
+        secondary,
+        'text-color'
+      )};
+    --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var-brand2023(
+        'button-text-basic-color-neutral-hovered-foreground',
+        secondary,
+        'text-hover-color'
+      )};
   } @else {
     --#{$prefix}modal-header-button-color-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-color')}, 0.5);
     --#{$prefix}modal-header-button-color-hover-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-hover-color')}, 0.5);
   }
 
-  --#{$prefix}modal-header-button-active-color: #{shades-css-var(secondary, 'bg-active-color')};
+  --#{$prefix}modal-header-button-active-color: #{shades-css-var-brand2023(
+      'button-text-basic-color-neutral-pressed-foreground',
+      secondary,
+      'bg-active-color'
+    )};
   --#{$prefix}modal-header-padding: #{$df-modal-header-padding};
 
   --#{$prefix}modal-body-padding-x: #{$df-modal-body-padding-x};
@@ -98,7 +125,7 @@
           &:focus-visible:active:hover {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
-          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          @if $isBrand2023 {
             &:hover {
               background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
             }

package/styles/scss/components/navbar/_navbar.scss

@@ -331,6 +331,18 @@
         border-left: inherit;
         border-radius: inherit;
       }
+
+      span[data-text] {
+        text-align: center;
+        &::before {
+          content: attr(data-text);
+          font-weight: var(--#{$prefix}typo-weight-bold);
+          visibility: hidden;
+          height: 0;
+          overflow: hidden;
+          display: block;
+        }
+      }
     }
 
     .active > .nav-link,

package/styles/scss/components/pagination/_pagination_container.scss

@@ -14,4 +14,4 @@
     background-color: var(--#{$prefix}pagination-disabled-bg);
     border-color: var(--#{$prefix}pagination-disabled-border-color);
   }
-}
+}

package/styles/scss/components/progressbar/_progressbar.variables.scss

@@ -4,16 +4,25 @@ $df-progress-bar-display: block !default;
 $df-progress-bar-infinite-animation-function: linear !default;
 $df-progress-border-width: 0.5px !default;
 $df-progress-border-style: solid !default;
-$df-progress-border-color: $gray-700 !default;
+$df-progress-border-color: variable-switch-brand2023('color-progressIndicator-main-border', $gray-700) !default;
 
-$df-darkBackgroundVersion-progress-border-color: $white !default;
+$df-darkBackgroundVersion-progress-border-color: variable-switch-brand2023(
+  'color-progressIndicator-alt-border',
+  $white
+) !default;
 
 /**
   Color of the progressbar background (~color of the progressbar with 0% progress) for the 'dark background' version
 */
-$df-darkBackgroundVersion-progressbar-background-color: $dark-primary !default;
+$df-darkBackgroundVersion-progressbar-background-color: variable-switch-brand2023(
+  'color-inert-neutral-alt-background',
+  $dark-primary
+) !default;
 
 /**
   Color of the progressbar (~color of the progressbar with 100% progress) for the 'dark background' version
 */
-$df-darkBackgroundVersion-progressbar-color: white !default;
+$df-darkBackgroundVersion-progressbar-color: variable-switch-brand2023(
+  'color-primary-alt-default-background',
+  white
+) !default;

package/styles/scss/components/rating/_rating.scss

@@ -71,9 +71,9 @@ ngb-rating {
 
   &.ng-invalid {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}rating-color: var(--#{$prefix}color-danger-main-default-foreground);
-      --#{$prefix}rating-hover-color: var(--#{$prefix}color-danger-main-hovered-foreground);
-      --#{$prefix}rating-active-color: var(--#{$prefix}color-danger-main-pressed-foreground);
+      --#{$prefix}rating-color: var(--#{$prefix}color-danger-alt-default-foreground);
+      --#{$prefix}rating-hover-color: var(--#{$prefix}color-danger-alt-hovered-foreground);
+      --#{$prefix}rating-active-color: var(--#{$prefix}color-danger-alt-pressed-foreground);
     } @else {
       @extend .text-danger;
     }

package/styles/scss/components/rating/_rating.variables.scss

@@ -7,7 +7,7 @@ $df-rating-tiny-color: $black !default;
 $df-rating-hover-color: shades-css-var('primary', 'bg-hover-color') !default;
 $df-rating-active-color: shades-css-var('primary', 'bg-active-color') !default;
 $df-rating-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-rating-disabled-cursor: $df-select-disabled-cursor !default;
+$df-rating-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-rating-star-to-star-distance: 0.2em !default;
 $df-rating-number-to-stars-distance: 0.4em !default;
 $df-rating-padding: $btn-padding-y !default;

package/styles/scss/components/select/_select.scss

@@ -274,15 +274,18 @@
       .ng-arrow-wrapper {
         // override
         cursor: var(--#{$prefix}select-disabled-cursor);
+
+        .ng-arrow {
+          &:before {
+            color: var(--#{$prefix}button-text-basic-color-disabled-foreground);
+          }
+        }
       }
 
       .ng-value {
         background-color: var(--#{$prefix}select-disabled-bg) !important; // override
         .badge {
-          // add
-          cursor: var(--#{$prefix}select-disabled-cursor);
-          background-color: var(--#{$prefix}select-disabled-bg);
-          color: var(--#{$prefix}select-disabled-color);
+          @extend [disabled];
         }
       }
     }
@@ -292,17 +295,6 @@
     > .ng-select-container {
       background-color: var(--#{$prefix}select-readonly-bg);
       color: var(--#{$prefix}select-readonly-color);
-
-      .badge {
-        // add
-        background-color: var(--#{$prefix}select-readonly-bg);
-        color: var(--#{$prefix}select-readonly-color);
-      }
-
-      .ng-arrow-wrapper {
-        // override
-        cursor: default;
-      }
     }
   }
   @each $state, $data in $form-validation-states {
@@ -506,7 +498,8 @@
       .ng-optgroup,
       .ng-option {
         white-space: normal;
-        word-break: break-word;
+        word-break: normal;
+        overflow-wrap: anywhere;
         &.ng-option-selected {
           background-color: var(--#{$prefix}select-optionselected-background-color);
           &.ng-option-marked {
@@ -607,9 +600,6 @@
       margin-left: var(--#{$prefix}select-arrow-wrapper-margin-right);
     }
     display: flex;
-    &:hover {
-      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
-    }
     text-align: var(--#{$prefix}select-arrow-text-align);
     .ng-arrow {
       width: var(--#{$prefix}select-arrow-width) !important;
@@ -620,6 +610,11 @@
       }
     }
   }
+  &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
+    .ng-arrow-wrapper:hover {
+      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
+    }
+  }
   @include df-select-border-radius-panel($df-select-panel-border-radius);
   .ng-dropdown-panel {
     background-color: #fff;

package/styles/scss/components/separator/_separator.variables.scss

@@ -1 +1 @@
-$df-vertical-separator-width: 1px !default;
+$df-vertical-separator-width: 1px !default;

package/styles/scss/components/sidenav/_sidenav.scss

@@ -87,7 +87,6 @@
   width: var(--#{$prefix}sidenav-expand-width);
   background-color: var(--#{$prefix}sidenav-bg-color);
   overflow-x: var(--#{$prefix}sidenav-menu-overflow-x);
-  z-index: var(--#{$prefix}sidenav-menu-zindex);
   border-inline-end: var(--#{$prefix}sidenav-menu-border);
   // When one item is active in the menu only the first element is having the has Active look
   > df-sidenavlist > .df-sidenav-list {
@@ -296,6 +295,7 @@
   &.df-sidenav-menu-overlay {
     position: var(--#{$prefix}sidenav-menu-overlay-position);
     height: var(--#{$prefix}sidenav-menu-overlay-height);
+    z-index: var(--#{$prefix}sidenav-menu-zindex);
   }
 
   .df-sidenav-icon {

package/styles/scss/components/sidenav/_sidenav.variables.scss

@@ -55,7 +55,8 @@ $df-sidenav-item-extra-icon-height: 0.5rem !default;
 $df-sidenav-item-extra-icon-height-level3: 0.25rem !default;
 $df-sidenav-item-basic-height: 2.5rem !default;
 $df-sidenav-item-height: calc(
-  var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) + var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)
+  var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) +
+    var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)
 ) !default;
 $df-sidenav-item-text-align: start !default;
 $df-sidenav-item-text-decoration: none !default;
@@ -72,11 +73,12 @@ $df-sidenav-icon-box-margin-end: calc((#{$df-sidenav-text-padding-start} - #{$df
 $df-sidenav-icon-box-margin-start: calc(
   #{$df-sidenav-icon-box-margin-end} - #{$df-sidenav-item-first-level-padding-start}
 ) !default;
-$df-sidenav-item-withicon-extra-padding-start:
-  $df-sidenav-text-padding-start - $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
+$df-sidenav-item-withicon-extra-padding-start: $df-sidenav-text-padding-start -
+  $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
 $df-sidenav-item-extra-padding-start: 0rem !default;
 $df-sidenav-item-padding-start: calc(
-  #{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)
+  #{$df-sidenav-item-first-level-padding-start} +
+    var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)
 ) !default;
 $df-sidenav-item-padding-level2-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem) !default;
 $df-sidenav-item-padding-level3-start: calc(

package/styles/scss/components/spinner/_spinner.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .spinner-border {
   --#{$prefix}spinner-overflow: #{$df-spinner-overflow};
   --#{$prefix}spinner-circumference: #{$df-spinner-circumference};
@@ -43,6 +45,18 @@
   --#{$prefix}spinner-outline-color: #{$df-darkBackgroundVersion-spinner-outline-color};
 }
 
+@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @each $state, $value in $theme-colors {
+    .spinner-border.df-spinner-#{$state} {
+      border-left-color: #{if(
+          $state == 'light',
+          var(--#{$prefix}color-primary-alt-default-background),
+          shades-css-var($state, 'bg-color')
+        )};
+    }
+  }
+}
+
 .btn {
   .spinner-border-sm {
     --#{$prefix}spinner-circumference: #{$df-spinner-btn-sm-circumference};

package/styles/scss/components/spinner/_spinner.variables.scss

@@ -4,8 +4,8 @@ $df-spinner-overflow: visible !default;
 $df-spinner-circumference: 2.7rem !default;
 $df-spinner-sm-circumference: math.div($df-spinner-circumference, 1.5) !default;
 $df-spinner-border-width: 0.19em !default;
-$df-spinner-border-color: $light !default;
-$df-spinner-dark-border-color: $dark-primary !default;
+$df-spinner-border-color: variable-switch-brand2023('color-inert-neutral-main-background', $light) !default;
+$df-spinner-dark-border-color: variable-switch-brand2023('color-inert-neutral-alt-background', $dark-primary) !default;
 $df-spinner-sm-border-width: math.div($df-spinner-border-width, 2) !default;
 // Spinner in button
 $df-spinner-btn-circumference: 1.25rem !default;
@@ -20,8 +20,11 @@ $df-progressindicator-backdrop-global-opacity: 0.5 !default;
 $df-progressindicator-backdrop-contextual-bg-color: $white !default;
 $df-progressindicator-backdrop-contextual-opacity: 0.5 !default;
 
-$df-spinner-outline-color: $gray-700 !default;
+$df-spinner-outline-color: variable-switch-brand2023('color-progressIndicator-main-border', $gray-700) !default;
 $df-spinner-outline-style: solid !default;
 $df-spinner-outline-width: 0.5px !default;
 
-$df-darkBackgroundVersion-spinner-outline-color: $white !default;
+$df-darkBackgroundVersion-spinner-outline-color: variable-switch-brand2023(
+  'color-progressIndicator-alt-border',
+  $white
+) !default;

package/styles/scss/components/tabs/_tabs.scss

@@ -202,6 +202,9 @@
 
     a.nav-link {
       border-bottom: 0;
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        padding-inline-start: var(--#{$prefix}spacing-5);
+      }
     }
 
     .nav-link {

package/styles/scss/components/toast/_toast.scss

@@ -10,7 +10,7 @@
   --#{$prefix}toast-subtle-border-color-alpha: #{$df-toast-subtle-border-color-alpha};
   --#{$prefix}toast-icon-top: #{$df-toast-insert-icon-top};
   --#{$prefix}toast-icon-font-weight: #{$df-icon-solid-font-weight};
-  --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space};
+  --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space}; //TODO: brand2023 - remove when removing old branding since new toast depends on fontsize and tokens
   --#{$prefix}toast-btn-font-weight: #{$df-toast-btn-font-weight};
   --#{$prefix}toast-btn-close-border-radius: #{$df-toast-btn-close-border-radius};
   --#{$prefix}toast-btn-close-border-width: #{$df-toast-btn-close-border-width};
@@ -33,23 +33,11 @@
   &.df-toast-dismissible {
     .toast-body,
     .toast-header {
-      @include ltr {
-        padding-right: var(--#{$prefix}toast-dismissible-padding-end);
-      }
-
-      @include rtl {
-        padding-left: var(--#{$prefix}toast-dismissible-padding-end);
-      }
+      padding-inline-end: var(--#{$prefix}toast-dismissible-padding-end);
     }
 
     .toast-header + .toast-body {
-      @include ltr {
-        padding-right: var(--#{$prefix}toast-padding-x);
-      }
-
-      @include rtl {
-        padding-left: var(--#{$prefix}toast-padding-x);
-      }
+      padding-inline-end: var(--#{$prefix}toast-padding-x);
     }
   }
 
@@ -86,6 +74,7 @@
 
       // override BS
       background: transparent;
+
       &:before {
         content: '';
         display: block;
@@ -98,6 +87,7 @@
 
       &:hover {
         background-color: var(--#{$prefix}btn-hover-bg);
+
         &:before {
           background-color: var(--#{$prefix}btn-hover-color);
         }
@@ -106,6 +96,7 @@
       // To be kept after hover as it has the same specificity
       &:active {
         background-color: var(--#{$prefix}btn-active-bg);
+
         &:before {
           background-color: var(--#{$prefix}btn-active-color);
         }
@@ -181,6 +172,7 @@
       &:active {
         color: var(--#{$prefix}primary-800);
         background-color: var(--#{$prefix}primary-200);
+
         &:focus-visible {
           --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
               'button-text-basic-color-primary-active-border',
@@ -215,25 +207,20 @@
     top: var(--#{$prefix}toast-icon-top);
     font-weight: var(--#{$prefix}toast-icon-font-weight);
 
-    @include ltr {
-      padding-left: var(--#{$prefix}toast-padding-x);
-    }
-
-    @include rtl {
-      padding-right: var(--#{$prefix}toast-padding-x);
-    }
+    padding-inline-start: var(--#{$prefix}toast-padding-x);
   }
 
   &[dfInsertToastIcon] {
     div:first-of-type {
       &.toast-body,
       &.toast-header {
-        @include ltr {
-          padding-left: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
-        }
-
-        @include rtl {
-          padding-right: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
+        @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          // --#{$prefix}toast-font-size for the size of the icon
+          padding-inline-start: calc(
+            var(--#{$prefix}toast-padding-x) + var(--#{$prefix}toast-font-size) + var(--#{$prefix}spacing-3)
+          );
+        } @else {
+          padding-inline-start: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
         }
       }
     }
@@ -247,7 +234,7 @@
       $toast-subtle-close-box-shadow-color: shades-rgb-css-var($state, 'bg-subtle-color', true);
     }
     $toast-bg-hover: shades-css-var($state, 'bg-hover-color');
-    $toast-icon-color: shades-css-var($state, 'border-color'); // todo add a icon color ?
+    $toast-icon-color: shades-css-var-brand2023($state, 'inert-color'); // todo add a icon color ?
     $toast-text-color: shades-css-var($state, 'bg-color', true);
     $toast-btn-close-color: map.get($shade-colors-text, $state + '-500');
     $toast-subtle-bg-color: shades-css-var($state, 'bg-subtle-color');
@@ -256,7 +243,11 @@
     $toast-subtle-hover-bg-color: shades-css-var($state, 'bg-subtle-hover-color');
     $toast-subtle-active-bg-color: shades-css-var($state, 'bg-subtle-active-color');
     $toast-subtle-border-color: shades-rgba-css-var-with-opacity($state, 'border-color');
-    $toast-subtle-border-start-color: shades-css-var($state, 'inert-color');
+    $toast-subtle-border-start-color: shades-css-var-brand2023(
+      'color-' + $state + '-alt-default-border',
+      $state,
+      'inert-color'
+    );
 
     &.toast-#{$state} {
       // DF CSS Variable

package/styles/scss/components/tooltip/_tooltip_container.scss

@@ -19,7 +19,7 @@
   display: block;
   padding: var(--#{$prefix}tooltip-arrow-height);
   margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+  @include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -28,7 +28,9 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+  &.show {
+    opacity: var(--#{$prefix}tooltip-opacity);
+  }
 
   .tooltip-arrow {
     display: block;
@@ -37,7 +39,7 @@
 
     &::before {
       position: absolute;
-      content: "";
+      content: '';
       border-color: transparent;
       border-style: solid;
     }
@@ -49,7 +51,7 @@
 
       &::before {
         top: -1px;
-        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
         border-top-color: var(--#{$prefix}tooltip-bg);
       }
     }
@@ -63,7 +65,8 @@
 
       &::before {
         right: -1px;
-        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height)
+          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
         border-right-color: var(--#{$prefix}tooltip-bg);
       }
     }
@@ -75,7 +78,7 @@
 
       &::before {
         bottom: -1px;
-        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
         border-bottom-color: var(--#{$prefix}tooltip-bg);
       }
     }
@@ -89,24 +92,25 @@
 
       &::before {
         left: -1px;
-        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0
+          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
         border-left-color: var(--#{$prefix}tooltip-bg);
       }
     }
   }
-  
+
   &.bs-tooltip-auto {
-    &[data-popper-placement^="top"] {
+    &[data-popper-placement^='top'] {
       @extend .bs-tooltip-top;
     }
-    &[data-popper-placement^="right"] {
+    &[data-popper-placement^='right'] {
       @extend .bs-tooltip-end;
     }
-    &[data-popper-placement^="bottom"] {
+    &[data-popper-placement^='bottom'] {
       @extend .bs-tooltip-bottom;
     }
-    &[data-popper-placement^="left"] {
+    &[data-popper-placement^='left'] {
       @extend .bs-tooltip-start;
     }
   }
-}
+}