@nuvoui/core 1.2.5 → 1.2.6

package/src/styles/utilities/_tooltips.scss

@@ -1,8 +1,10 @@
-:root {
+@use "../abstracts/config" as VAR;
+
+@mixin tooltip-variables {
   // Tooltip core variables
   --tooltip-bg: rgba(17 17 17 / 90%);
   --tooltip-shadow-color: rgb(0 0 0 / 20%);
-  --tooltip-text-color: #FFF;
+  --tooltip-text-color: #fff;
 
   // Animation variables
   --microtip-transition-duration: 0.18s;
@@ -21,7 +23,18 @@
   --tooltip-border-radius: 4px;
 }
 
-[data-tooltip][role~="tooltip"] {
+// Apply variables based on parent selector
+@if VAR.$parent-selector == "" {
+  :root {
+    @include tooltip-variables;
+  }
+} @else {
+  #{VAR.$parent-selector} {
+    @include tooltip-variables;
+  }
+}
+
+#{VAR.$parent-selector} [data-tooltip][role~="tooltip"] {
   position: relative;
 
   &::before,
@@ -31,8 +44,7 @@
     will-change: transform;
     opacity: 0;
     pointer-events: none;
-    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing)
-      var(--microtip-transition-delay);
+    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing) var(--microtip-transition-delay);
     position: absolute;
     box-sizing: border-box;
     z-index: 10;
@@ -68,13 +80,12 @@
 }
 
 // Top position tooltips
-[role~="tooltip"][data-microtip-position|="top"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="top"] {
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 6px;
     width: 18px;
-    margin-bottom: 5px;
+    margin-bottom: 6px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
     left: 50%;
@@ -90,15 +101,13 @@
   &:hover::before {
     transform: translate3d(-50%, -5px, 0);
   }
-}
 
-[role~="tooltip"][data-microtip-position="top"] {
   &:hover::after {
     transform: translate3d(-50%, -5px, 0);
   }
 }
 
-[role~="tooltip"][data-microtip-position="top-left"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-left"] {
   &::after {
     transform: translate3d(calc(-100% + 16px), 0, 0);
     bottom: 100%;
@@ -109,7 +118,7 @@
   }
 }
 
-[role~="tooltip"][data-microtip-position="top-right"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="top-right"] {
   &::after {
     transform: translate3d(calc(0% + -16px), 0, 0);
     bottom: 100%;
@@ -121,10 +130,9 @@
 }
 
 // Bottom position tooltips
-[role~="tooltip"][data-microtip-position|="bottom"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position|="bottom"] {
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 6px;
     width: 18px;
     margin-top: 5px;
@@ -145,15 +153,13 @@
   &:hover::before {
     transform: translate3d(-50%, 0, 0);
   }
-}
 
-[role~="tooltip"][data-microtip-position="bottom"] {
   &:hover::after {
     transform: translate3d(-50%, 0, 0);
   }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-left"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-left"] {
   &::after {
     transform: translate3d(calc(-100% + 16px), -10px, 0);
     top: 100%;
@@ -164,7 +170,7 @@
   }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-right"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="bottom-right"] {
   &::after {
     transform: translate3d(calc(0% + -16px), -10px, 0);
     top: 100%;
@@ -176,19 +182,18 @@
 }
 
 // Left position tooltips
-[role~="tooltip"][data-microtip-position="left"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="left"] {
   &::before,
   &::after {
     inset: auto auto auto 100%;
-    left: auto;    // Remove any left positioning
-    right: 100%;   // Position to the left of the element
+    left: auto; // Remove any left positioning
+    right: 100%; // Position to the left of the element
     top: 50%;
     transform: translate3d(10px, -50%, 0);
   }
 
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 18px;
     width: 6px;
     margin-right: 5px;
@@ -206,7 +211,7 @@
 }
 
 // Right position tooltips
-[role~="tooltip"][data-microtip-position="right"] {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-position="right"] {
   &::before,
   &::after {
     bottom: auto;
@@ -216,8 +221,7 @@
   }
 
   &::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-      no-repeat;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
     height: 18px;
     width: 6px;
     margin-bottom: 0;
@@ -235,17 +239,17 @@
 }
 
 // Tooltip sizes
-[role~="tooltip"][data-microtip-size="small"]::after {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="small"]::after {
   white-space: initial;
   width: var(--tooltip-small-width);
 }
 
-[role~="tooltip"][data-microtip-size="medium"]::after {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="medium"]::after {
   white-space: initial;
   width: var(--tooltip-medium-width);
 }
 
-[role~="tooltip"][data-microtip-size="large"]::after {
+#{VAR.$parent-selector} [role~="tooltip"][data-microtip-size="large"]::after {
   white-space: initial;
   width: var(--tooltip-large-width);
 }

package/src/styles/utilities/_transforms.scss

@@ -1,5 +1,5 @@
-@use '../abstracts' as *;
-@use 'sass:map';
+@use "../abstracts/config" as VAR;
+@use "sass:map";
 
 /**
  * Transform Utilities
@@ -11,21 +11,11 @@
  * - Transform origin
  */
 
- // Common transform function to avoid repetition
+// Common transform function to avoid repetition
 @mixin apply-transform {
-  transform: 
-    translateX(var(--translate-x, 0)) 
-    translateY(var(--translate-y, 0)) 
-    translateZ(var(--translate-z, 0)) 
-    rotate(var(--rotate, 0)) 
-    skewX(var(--skew-x, 0)) 
-    skewY(var(--skew-y, 0)) 
-    scaleX(var(--scale-x, 1)) 
-    scaleY(var(--scale-y, 1)) 
-    scaleZ(var(--scale-z, 1));
+  transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
 }
 
-
 // Translation mixins
 @mixin translate-x($value) {
   // Store the value in a CSS variable
@@ -48,12 +38,12 @@
 @mixin translate($x, $y: null) {
   // Always set the x value
   --translate-x: #{$x};
-  
+
   // Only set y if provided
   @if $y {
     --translate-y: #{$y};
   }
-  
+
   @include apply-transform;
 }
 
@@ -93,195 +83,228 @@
 
 // Transform origin
 @mixin origin($value) {
-    transform-origin: $value;
+  transform-origin: $value;
 }
 
 // Common transform values
 $translate-values: (
-  '0': 0,
-  '1': 0.25rem,
-  '2': 0.5rem,
-  '3': 0.75rem,
-  '4': 1rem,
-  '5': 1.25rem,
-  '6': 1.5rem,
-  '8': 2rem,
-  '10': 2.5rem,
-  '12': 3rem,
-  '16': 4rem,
-  '20': 5rem,
-  '25p': 25%,
-  '33p': 33.333%,
-  '50p': 50%,
-  '66p': 66.667%,
-  '75p': 75%,
-  '100p': 100%,
+  "0": 0,
+  "1": 0.25rem,
+  "2": 0.5rem,
+  "3": 0.75rem,
+  "4": 1rem,
+  "5": 1.25rem,
+  "6": 1.5rem,
+  "8": 2rem,
+  "10": 2.5rem,
+  "12": 3rem,
+  "16": 4rem,
+  "20": 5rem,
+  "25p": 25%,
+  "33p": 33.333%,
+  "50p": 50%,
+  "66p": 66.667%,
+  "75p": 75%,
+  "100p": 100%,
 );
 
 $negative-translate-values: (
-  '1': -0.25rem,
-  '2': -0.5rem,
-  '3': -0.75rem,
-  '4': -1rem,
-  '5': -1.25rem,
-  '6': -1.5rem,
-  '8': -2rem,
-  '10': -2.5rem,
-  '12': -3rem,
-  '16': -4rem,
-  '20': -5rem,
-  '25p': 25%,
-  '33p': 33.333%,
-  '50p': 50%,
-  '66p': 66.667%,
-  '75p': 75%,
-  '100p': -100%,
+  "1": -0.25rem,
+  "2": -0.5rem,
+  "3": -0.75rem,
+  "4": -1rem,
+  "5": -1.25rem,
+  "6": -1.5rem,
+  "8": -2rem,
+  "10": -2.5rem,
+  "12": -3rem,
+  "16": -4rem,
+  "20": -5rem,
+  "25p": -25%,
+  "33p": -33.333%,
+  "50p": -50%,
+  "66p": -66.667%,
+  "75p": -75%,
+  "100p": -100%,
 );
 
 // Scale hover utilities
 $scale-values: (
-  '0': 0,
-  '50': 0.5,
-  '75': 0.75,
-  '90': 0.9,
-  '95': 0.95, 
-  '100': 1,
-  '105': 1.05,
-  '110': 1.1,
-  '125': 1.25,
-  '150': 1.5
+  "0": 0,
+  "50": 0.5,
+  "75": 0.75,
+  "90": 0.9,
+  "95": 0.95,
+  "100": 1,
+  "105": 1.05,
+  "110": 1.1,
+  "125": 1.25,
+  "150": 1.5,
+);
+
+// Rotation hover utilities
+$rotation-values: (
+  "0": 0deg,
+  "45": 45deg,
+  "90": 90deg,
+  "180": 180deg,
+  "270": 270deg,
+);
+
+// Separate map for negative rotations
+$negative-rotation-values: (
+  "45": -45deg,
+  "90": -90deg,
+  "180": -180deg,
+  "270": -270deg,
 );
 
-  // Rotation hover utilities
-  $rotation-values: (
-    '0': 0deg,
-    '45': 45deg,
-    '90': 90deg,
-    '180': 180deg,
-    '270': 270deg
-  );
-
-  // Separate map for negative rotations
-  $negative-rotation-values: (
-    '45': -45deg,
-    '90': -90deg,
-    '180': -180deg,
-    '270': -270deg
-  );
-
-   // Origin hover utilities
-   $origin-values: (
-    'center': center,
-    'top': top,
-    'top-right': top right,
-    'right': right,
-    'bottom-right': bottom right,
-    'bottom': bottom,
-    'bottom-left': bottom left,
-    'left': left,
-    'top-left': top left
-  );
+// Origin hover utilities
+$origin-values: (
+  "center": center,
+  "top": top,
+  "top-right": top right,
+  "right": right,
+  "bottom-right": bottom right,
+  "bottom": bottom,
+  "bottom-left": bottom left,
+  "left": left,
+  "top-left": top left,
+);
 
 // Generate utility classes
-@if $generate-utility-classes {
+@if VAR.$generate-utility-classes {
   // Translate utilities
   @each $key, $value in $translate-values {
-    .translate-x-#{$key},
-    .hover\:translate-x-#{$key}:hover,
-    .group:hover .group-hover\:translate-x-#{$key} { @include translate-x($value); }
-    
-    .translate-y-#{$key},
-    .hover\:translate-y-#{$key}:hover,
-    .group:hover .group-hover\:translate-y-#{$key} { @include translate-y($value); }
+    #{VAR.$parent-selector} .translate-x-#{$key},
+    #{VAR.$parent-selector} .hover\:translate-x-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:translate-x-#{$key} {
+      @include translate-x($value);
+    }
+
+    #{VAR.$parent-selector} .translate-y-#{$key},
+    #{VAR.$parent-selector} .hover\:translate-y-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:translate-y-#{$key} {
+      @include translate-y($value);
+    }
   }
   @each $key, $value in $negative-translate-values {
-    .-translate-x-#{$key},
-    .hover\:-translate-x-#{$key}:hover,
-    .group:hover .group-hover\:-translate-x-#{$key} { @include translate-x($value); }
-    
-    .-translate-y-#{$key},
-    .hover\:-translate-y-#{$key}:hover,
-    .group:hover .group-hover\:-translate-y-#{$key} { @include translate-y($value); }
+    #{VAR.$parent-selector} .-translate-x-#{$key},
+    #{VAR.$parent-selector} .hover\:-translate-x-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:-translate-x-#{$key} {
+      @include translate-x($value);
+    }
+
+    #{VAR.$parent-selector} .-translate-y-#{$key},
+    #{VAR.$parent-selector} .hover\:-translate-y-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key} {
+      @include translate-y($value);
+    }
   }
-  
+
   @each $key, $value in $scale-values {
-    .scale-#{$key},
-    .hover\:scale-#{$key}:hover,
-    .group:hover .group-hover\:scale-#{$key} { @include scale($value); }
+    #{VAR.$parent-selector} .scale-#{$key},
+    #{VAR.$parent-selector} .hover\:scale-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:scale-#{$key} {
+      @include scale($value);
+    }
 
-    .scale-x-#{$key},
-    .hover\:scale-x-#{$key}:hover,
-    .group:hover .group-hover\:scale-x-#{$key} { @include scale-x($value); }
+    #{VAR.$parent-selector} .scale-x-#{$key},
+    #{VAR.$parent-selector} .hover\:scale-x-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:scale-x-#{$key} {
+      @include scale-x($value);
+    }
 
-    .scale-y-#{$key},
-    .hover\:scale-y-#{$key}:hover,
-    .group:hover .group-hover\:scale-y-#{$key} { @include scale-y($value); }
+    #{VAR.$parent-selector} .scale-y-#{$key},
+    #{VAR.$parent-selector} .hover\:scale-y-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:scale-y-#{$key} {
+      @include scale-y($value);
+    }
   }
-  
+
   // Rotation utilities
   @each $key, $value in $rotation-values {
-    .rotate-#{$key},
-    .hover\:rotate-#{$key}:hover,
-    .group:hover .group-hover\:rotate-#{$key} { @include rotate($value); }
+    #{VAR.$parent-selector} .rotate-#{$key},
+    #{VAR.$parent-selector} .hover\:rotate-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:rotate-#{$key} {
+      @include rotate($value);
+    }
   }
 
   // Negative rotation utilities
   @each $key, $value in $negative-rotation-values {
-    .-rotate-#{$key},
-    .hover\:-rotate-#{$key}:hover,
-    .group:hover .group-hover\:-rotate-#{$key} { @include rotate($value); }
+    #{VAR.$parent-selector} .-rotate-#{$key},
+    #{VAR.$parent-selector} .hover\:-rotate-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:-rotate-#{$key} {
+      @include rotate($value);
+    }
   }
-  
+
   // Origin utilities
   @each $key, $value in $origin-values {
-    .origin-#{$key},
-    .hover\:origin-#{$key}:hover,
-    .group:hover .group-hover\:origin-#{$key} { @include origin($value); }
+    #{VAR.$parent-selector} .origin-#{$key},
+    #{VAR.$parent-selector} .hover\:origin-#{$key}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:origin-#{$key} {
+      @include origin($value);
+    }
   }
-   
+
   // Responsive variants
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       @each $key, $value in $translate-values {
-        .translate-x-#{$key}\@#{$breakpoint},
-        .hover\:translate-x-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:translate-x-#{$key}\@#{$breakpoint} { @include translate-x($value); }
+        #{VAR.$parent-selector} .translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:translate-x-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:translate-x-#{$key}\@#{$breakpoint} {
+          @include translate-x($value);
+        }
 
-        .translate-x-#{$key}\@#{$breakpoint},
-        .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} { @include translate-y($value); }
+        #{VAR.$parent-selector} .translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} {
+          @include translate-y($value);
+        }
       }
       @each $key, $value in $negative-translate-values {
-        .-translate-x-#{$key}\@#{$breakpoint},
-        .hover\:-translate-x-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:-translate-x-#{$key}\@#{$breakpoint} { @include translate-x($value); }
+        #{VAR.$parent-selector} .-translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:-translate-x-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:-translate-x-#{$key}\@#{$breakpoint} {
+          @include translate-x($value);
+        }
 
-        .-translate-x-#{$key}\@#{$breakpoint},
-        .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} { @include translate-y($value); }
+        #{VAR.$parent-selector} .-translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} {
+          @include translate-y($value);
+        }
       }
-      
-       // Scale hover responsive
-       @each $key, $value in $scale-values {
-        .scale-#{$key}\@#{$breakpoint},
-        .hover\:scale-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} { @include scale($value); }
+
+      // Scale hover responsive
+      @each $key, $value in $scale-values {
+        #{VAR.$parent-selector} .scale-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:scale-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} {
+          @include scale($value);
+        }
       }
-      
+
       // Rotation hover responsive
       @each $key, $value in $rotation-values {
-        .rotate-#{$key}\@#{$breakpoint},
-        .hover\:rotate-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:rotate-#{$key}\@#{$breakpoint} { @include rotate($value); }
+        #{VAR.$parent-selector} .rotate-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:rotate-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:rotate-#{$key}\@#{$breakpoint} {
+          @include rotate($value);
+        }
       }
 
       // Negative rotation utilities
       @each $key, $value in $negative-rotation-values {
-        .-rotate-#{$key}\@#{$breakpoint},
-        .hover\:-rotate-#{$key}\@#{$breakpoint}:hover,
-        .group:hover .group-hover\:-rotate-#{$key}\@#{$breakpoint} { @include rotate($value); }
+        #{VAR.$parent-selector} .-rotate-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:-rotate-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:-rotate-#{$key}\@#{$breakpoint} {
+          @include rotate($value);
+        }
       }
-
     }
   }
-}
+}