@nuvoui/core 1.1.8 → 1.2.1

package/src/styles/utilities/_spacing.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use 'sass:string';
 @use 'sass:meta';
-@use './variables' as *; 
+@use '../abstracts'  as *; 
 
  
 /**
@@ -73,9 +73,9 @@
  * @see flex, grid, display
  */
 
-//-----------------------------------------------
+// -----------------------------------------------
 // HELPER FUNCTIONS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @function format-unit-value
@@ -108,16 +108,16 @@
 }
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // PADDING MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @mixin p
  * @description Sets padding on all sides
  * @param {Number|String} $val - Padding value
  */
-@mixin p($val) { padding: format-unit-value($val); }
+@mixin p($val) { & { padding: format-unit-value($val); }}
 
 /**
 * @mixin px
@@ -126,6 +126,7 @@
 */
 @mixin px($val) { 
   $val: format-unit-value($val); 
+  
   padding-left: $val; 
   padding-right: $val; 
 }
@@ -137,6 +138,7 @@
 */
 @mixin py($val) { 
   $val: format-unit-value($val); 
+  
   padding-top: $val; 
   padding-bottom: $val; 
 }
@@ -169,9 +171,9 @@
 */
 @mixin pl($val) { $val: format-unit-value($val); padding-left: $val; }
 
-//-----------------------------------------------
+// -----------------------------------------------
 // MARGIN MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
 * @mixin m
@@ -187,6 +189,7 @@
 */
 @mixin mx($val) { 
   $val: format-unit-value($val); 
+  
   margin-left: $val; 
   margin-right: $val; 
 }
@@ -198,6 +201,7 @@
 */
 @mixin my($val) { 
   $val: format-unit-value($val); 
+
   margin-top: $val; 
   margin-bottom: $val; 
 }
@@ -249,27 +253,39 @@
 @mixin mx-auto { @include ml-auto; @include mr-auto; }
 
 
-//-----------------------------------------------
+// -----------------------------------------------
 // SPACING MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @mixin space-y
  * @description Adds vertical spacing between direct children
  * @param {Number|String} $i - Space amount
  */
- @mixin space-y($i) { & > * + * { $i: format-unit-value($i); margin-top: $i; } } 
+@mixin space-y($i) {
+  & > * + * {
+    $i: format-unit-value($i);
+    
+    margin-top: $i;
+  }
+}
 
  /**
   * @mixin space-x
   * @description Adds horizontal spacing between direct children
   * @param {Number|String} $i - Space amount
   */
- @mixin space-x($i) { & > * + * { $i: format-unit-value($i); margin-left: $i; } } 
+@mixin space-x($i) {
+  & > * + * {
+    $i: format-unit-value($i);
+    
+    margin-left: $i;
+  }
+}
 
-//-----------------------------------------------
+// -----------------------------------------------
 // GAP MIXINS
-//-----------------------------------------------
+// -----------------------------------------------
 
 /**
  * @mixin gap
@@ -292,91 +308,93 @@
   */
  @mixin gap-y($val) { $val: format-unit-value($val); row-gap: $val; }
 
-//-----------------------------------------------
-// AUTO MARGIN UTILITY CLASSES
-//-----------------------------------------------
-
-.mx-auto { @include mx-auto; }
-.ml-auto { @include ml-auto; }
-.mr-auto { @include mr-auto; }
-
-//-----------------------------------------------
-// GAP AUTO CLASS
-//-----------------------------------------------
-
-.gap-auto { gap: auto; }
-
-//-----------------------------------------------
-// SPACING CLASSES
-//-----------------------------------------------
-
-@each $key, $value in $spacings {
-    // Padding classes
-    .p-#{$key} { @include p($value); }
-    .px-#{$key} { @include px($value); }
-    .py-#{$key} { @include py($value); }
-    .pt-#{$key} { @include pt($value); }
-    .pr-#{$key} { @include pr($value); }
-    .pb-#{$key} { @include pb($value); }
-    .pl-#{$key} { @include pl($value); }
-
-    // Margin classes
-    .m-#{$key} { @include m($value); }
-    .mx-#{$key} { @include mx($value); }
-    .my-#{$key} { @include my($value); }
-    .mt-#{$key} { @include mt($value); }
-    .mr-#{$key} { @include mr($value); }
-    .mb-#{$key} { @include mb($value); }
-    .ml-#{$key} { @include ml($value); }
-    
-    // Gap classes
-    .gap-#{$key} { @include gap($value); }
-    .gap-x-#{$key} { @include gap-x($value); }
-    .gap-y-#{$key} { @include gap-y($value); }
-
-    // Space classes
-    .space-x-#{$key} { @include space-x($value); }
-    .space-y-#{$key} { @include space-y($value); }
-}
+@if $generate-utility-classes {
+  // -----------------------------------------------
+  // AUTO MARGIN UTILITY CLASSES
+  // -----------------------------------------------
+
+  .mx-auto { @include mx-auto; }
+  .ml-auto { @include ml-auto; }
+  .mr-auto { @include mr-auto; }
+
+  // -----------------------------------------------
+  // GAP AUTO CLASS
+  // -----------------------------------------------
+
+  .gap-auto { gap: auto; }
+
+  // -----------------------------------------------
+  // SPACING CLASSES
+  // -----------------------------------------------
+
+  @each $key, $value in $spacings {
+      // Padding classes
+      .p-#{$key} { @include p($value); }
+      .px-#{$key} { @include px($value); }
+      .py-#{$key} { @include py($value); }
+      .pt-#{$key} { @include pt($value); }
+      .pr-#{$key} { @include pr($value); }
+      .pb-#{$key} { @include pb($value); }
+      .pl-#{$key} { @include pl($value); }
+
+      // Margin classes
+      .m-#{$key} { @include m($value); }
+      .mx-#{$key} { @include mx($value); }
+      .my-#{$key} { @include my($value); }
+      .mt-#{$key} { @include mt($value); }
+      .mr-#{$key} { @include mr($value); }
+      .mb-#{$key} { @include mb($value); }
+      .ml-#{$key} { @include ml($value); }
+      
+      // Gap classes
+      .gap-#{$key} { @include gap($value); }
+      .gap-x-#{$key} { @include gap-x($value); }
+      .gap-y-#{$key} { @include gap-y($value); }
+
+      // Space classes
+      .space-x-#{$key} { @include space-x($value); }
+      .space-y-#{$key} { @include space-y($value); }
+  }
 
 
-//-----------------------------------------------
-// RESPONSIVE SPACING CLASSES
-//-----------------------------------------------
-
-@each $breakpoint, $width in $breakpoints {
-    @media (min-width: #{$width}) {
-        .mx-auto\@#{$breakpoint} { @include mx-auto; }
-        .ml-auto\@#{$breakpoint} { @include ml-auto; }
-        .mr-auto\@#{$breakpoint} { @include mr-auto; }
-
-        // Generate utilities from spacing map
-        @each $key, $value in $spacings {
-            // Padding classes
-            .p-#{$key}\@#{$breakpoint} { @include p($value); }
-            .px-#{$key}\@#{$breakpoint} { @include px($value); }
-            .py-#{$key}\@#{$breakpoint} { @include py($value); }
-            .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
-            .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
-            .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
-            .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
-
-            // Margin classes
-            .m-#{$key}\@#{$breakpoint} { @include m($value); }
-            .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
-            .my-#{$key}\@#{$breakpoint} { @include my($value); }
-            .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
-            .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
-            .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
-            .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
-
-            .gap-#{$key}\@#{$breakpoint} { gap: $value; }
-            .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
-            .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
-      
-            // Space classes
-            .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
-            .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
-        }
-    }
+  // -----------------------------------------------
+  // RESPONSIVE SPACING CLASSES
+  // -----------------------------------------------
+
+  @each $breakpoint, $width in $breakpoints {
+      @media (min-width: #{$width}) {
+          .mx-auto\@#{$breakpoint} { @include mx-auto; }
+          .ml-auto\@#{$breakpoint} { @include ml-auto; }
+          .mr-auto\@#{$breakpoint} { @include mr-auto; }
+
+          // Generate utilities from spacing map
+          @each $key, $value in $spacings {
+              // Padding classes
+              .p-#{$key}\@#{$breakpoint} { @include p($value); }
+              .px-#{$key}\@#{$breakpoint} { @include px($value); }
+              .py-#{$key}\@#{$breakpoint} { @include py($value); }
+              .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
+              .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
+              .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
+              .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
+
+              // Margin classes
+              .m-#{$key}\@#{$breakpoint} { @include m($value); }
+              .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
+              .my-#{$key}\@#{$breakpoint} { @include my($value); }
+              .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
+              .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
+              .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
+              .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
+
+              .gap-#{$key}\@#{$breakpoint} { gap: $value; }
+              .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
+              .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
+        
+              // Space classes
+              .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
+              .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
+          }
+      }
+  }
 }

package/src/styles/utilities/_tooltips.scss

@@ -1,95 +1,130 @@
+:root {
+  // Tooltip core variables
+  --tooltip-bg: rgba(17 17 17 / 90%);
+  --tooltip-shadow-color: rgb(0 0 0 / 20%);
+  --tooltip-text-color: #FFF;
 
+  // Animation variables
+  --microtip-transition-duration: 0.18s;
+  --microtip-transition-easing: ease-in-out;
+  --microtip-transition-delay: 0s;
 
-[data-tooltip][role~="tooltip"] {
-    position: relative
+  // Typography variables
+  --microtip-font-size: 13px;
+  --microtip-font-weight: normal;
+  --microtip-text-transform: none;
+
+  // Sizing variables
+  --tooltip-small-width: 80px;
+  --tooltip-medium-width: 150px;
+  --tooltip-large-width: 260px;
+  --tooltip-border-radius: 4px;
 }
 
-[data-tooltip][role~="tooltip"]::before,
-[data-tooltip][role~="tooltip"]::after {
+[data-tooltip][role~="tooltip"] {
+  position: relative;
+
+  &::before,
+  &::after {
     transform: translate3d(0, 0, 0);
     backface-visibility: hidden;
     will-change: transform;
     opacity: 0;
     pointer-events: none;
-    transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+    transition: all var(--microtip-transition-duration) var(--microtip-transition-easing)
+      var(--microtip-transition-delay);
     position: absolute;
     box-sizing: border-box;
     z-index: 10;
-    transform-origin: top
-}
+    transform-origin: top;
+  }
 
-[data-tooltip][role~="tooltip"]::before {
+  &::before {
     background-size: 100% auto !important;
-    content: ""
-}
+    content: "";
+  }
 
-[data-tooltip][role~="tooltip"]::after {
-    background: var(--tooltip-bg); // todo: change to a variable
+  &::after {
+    background: var(--tooltip-bg);
     box-shadow: 0 3px 7px var(--tooltip-shadow-color);
-    border-radius: 4px;
-    color: #fff;
+    border-radius: var(--tooltip-border-radius);
+    color: var(--tooltip-text-color);
     content: attr(data-tooltip);
-    font-size: var(--microtip-font-size, 13px);
-    font-weight: var(--microtip-font-weight, normal);
-    text-transform: var(--microtip-text-transform, none);
-    padding: .5em 1em;
+    font-size: var(--microtip-font-size);
+    font-weight: var(--microtip-font-weight);
+    text-transform: var(--microtip-text-transform);
+    padding: 0.5em 1em;
     white-space: nowrap;
-    box-sizing: content-box
-}
+    box-sizing: content-box;
+  }
 
-[data-tooltip][role~="tooltip"]:hover::before,
-[data-tooltip][role~="tooltip"]:hover::after,
-[data-tooltip][role~="tooltip"]:focus::before,
-[data-tooltip][role~="tooltip"]:focus::after {
+  &:hover::before,
+  &:hover::after,
+  &:focus::before,
+  &:focus::after {
     opacity: 1;
-    pointer-events: auto
+    pointer-events: auto;
+  }
 }
 
-[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;
+// Top position tooltips
+[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;
     height: 6px;
     width: 18px;
     margin-bottom: 5px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
-    left: 50%
-}
+    left: 50%;
+  }
 
-[role~="tooltip"][data-microtip-position|="top"]::after {
+  &::after {
     margin-bottom: 11px;
     transform: translate3d(-50%, 0, 0);
     bottom: 100%;
-    left: 50%
-}
+    left: 50%;
+  }
 
-[role~="tooltip"][data-microtip-position|="top"]:hover::before {
-    transform: translate3d(-50%, -5px, 0)
+  &: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"] {
+  &:hover::after {
+    transform: translate3d(-50%, -5px, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="top-left"]::after {
+[role~="tooltip"][data-microtip-position="top-left"] {
+  &::after {
     transform: translate3d(calc(-100% + 16px), 0, 0);
-    bottom: 100%
-}
+    bottom: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), -5px, 0)
+  &:hover::after {
+    transform: translate3d(calc(-100% + 16px), -5px, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="top-right"]::after {
+[role~="tooltip"][data-microtip-position="top-right"] {
+  &::after {
     transform: translate3d(calc(0% + -16px), 0, 0);
-    bottom: 100%
-}
+    bottom: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), -5px, 0)
+  &:hover::after {
+    transform: translate3d(calc(0% + -16px), -5px, 0);
+  }
 }
 
-[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;
+// Bottom position tooltips
+[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;
     height: 6px;
     width: 18px;
     margin-top: 5px;
@@ -97,104 +132,117 @@
     transform: translate3d(-50%, -10px, 0);
     bottom: auto;
     left: 50%;
-    top: 100%
-}
+    top: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  &::after {
     margin-top: 11px;
     transform: translate3d(-50%, -10px, 0);
     top: 100%;
-    left: 50%
-}
-
-
+    left: 50%;
+  }
 
-[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
-    transform: translate3d(-50%, 0, 0)
+  &: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"] {
+  &:hover::after {
+    transform: translate3d(-50%, 0, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+[role~="tooltip"][data-microtip-position="bottom-left"] {
+  &::after {
     transform: translate3d(calc(-100% + 16px), -10px, 0);
-    top: 100%
-}
+    top: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0)
+  &:hover::after {
+    transform: translate3d(calc(-100% + 16px), 0, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+[role~="tooltip"][data-microtip-position="bottom-right"] {
+  &::after {
     transform: translate3d(calc(0% + -16px), -10px, 0);
-    top: 100%
-}
+    top: 100%;
+  }
 
-[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), 0, 0)
+  &:hover::after {
+    transform: translate3d(calc(0% + -16px), 0, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="left"]::before,
-[role~="tooltip"][data-microtip-position="left"]::after {
+// Left position tooltips
+[role~="tooltip"][data-microtip-position="left"] {
+  &::before,
+  &::after {
     inset: auto auto auto 100%;
-    transform: translate3d(10px, -50%, 0)
-}
+    transform: translate3d(10px, -50%, 0);
+  }
 
-[role~="tooltip"][data-microtip-position="left"]::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;
+  &::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;
     height: 18px;
     width: 6px;
     margin-right: 5px;
-    margin-bottom: 0
-}
+    margin-bottom: 0;
+  }
 
-[role~="tooltip"][data-microtip-position="left"]::after {
-    margin-right: 11px
-}
+  &::after {
+    margin-right: 11px;
+  }
 
-[role~="tooltip"][data-microtip-position="left"]:hover::before,
-[role~="tooltip"][data-microtip-position="left"]:hover::after {
-    transform: translate3d(0, -50%, 0)
+  &:hover::before,
+  &:hover::after {
+    transform: translate3d(0, -50%, 0);
+  }
 }
 
-[role~="tooltip"][data-microtip-position="right"]::before,
-[role~="tooltip"][data-microtip-position="right"]::after {
+// Right position tooltips
+[role~="tooltip"][data-microtip-position="right"] {
+  &::before,
+  &::after {
     bottom: auto;
     left: 100%;
     top: 50%;
-    transform: translate3d(-10px, -50%, 0)
-}
+    transform: translate3d(-10px, -50%, 0);
+  }
 
-[role~="tooltip"][data-microtip-position="right"]::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;
+  &::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;
     height: 18px;
     width: 6px;
     margin-bottom: 0;
-    margin-left: 5px
-}
+    margin-left: 5px;
+  }
 
-[role~="tooltip"][data-microtip-position="right"]::after {
-    margin-left: 11px
-}
+  &::after {
+    margin-left: 11px;
+  }
 
-[role~="tooltip"][data-microtip-position="right"]:hover::before,
-[role~="tooltip"][data-microtip-position="right"]:hover::after {
-    transform: translate3d(0, -50%, 0)
+  &:hover::before,
+  &:hover::after {
+    transform: translate3d(0, -50%, 0);
+  }
 }
 
+// Tooltip sizes
 [role~="tooltip"][data-microtip-size="small"]::after {
-    white-space: initial;
-    width: 80px
+  white-space: initial;
+  width: var(--tooltip-small-width);
 }
 
 [role~="tooltip"][data-microtip-size="medium"]::after {
-    white-space: initial;
-    width: 150px
+  white-space: initial;
+  width: var(--tooltip-medium-width);
 }
 
 [role~="tooltip"][data-microtip-size="large"]::after {
-    white-space: initial;
-    width: 260px
-}
+  white-space: initial;
+  width: var(--tooltip-large-width);
+}