diff --git a/src/_core-elements.scss b/src/_core-elements.scss
index 9da6675..8c7923b 100644
--- a/src/_core-elements.scss
+++ b/src/_core-elements.scss
@@ -1,109 +1,116 @@
-@use "./mixins" as *;
-@use "./variables" as *;
-@use "./ui" as *;
+@use './mixins' as *;
+@use './variables' as *;
+@use './ui' as *;
 
 .z-container {
-    display: grid;
-    grid-template-columns: minmax(var(--radius), 1fr);
-    grid-template-rows: minmax(var(--radius), 1fr);
-    border: 1px dashed var(--dark);
-    place-items: center;
-    padding: 30px;
+  display: grid;
+  grid-template-columns: minmax(var(--radius), 1fr);
+  grid-template-rows: minmax(var(--radius), 1fr);
+  border: 1px dashed var(--dark);
+  place-items: center;
+  padding: 30px;
 }
 
-
-
 .item {
-    --rotation-angle: calc(var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle));
-    --rotate: calc(var(--rotation-angle) * 1deg);
-    display: grid;
-    background-color: var(--light);
-    border: 1px solid var(--dark);
-    grid-area: 1/1/1/1;
-    place-content: center;
-    //z-index: 1;
-    width: var(--m);
-    height: var(--m);
-    border-radius: 50%;
+  --rotation-angle: calc(
+    var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)
+  );
+  --rotate: calc(var(--rotation-angle) * 1deg);
+  display: grid;
+  background-color: var(--light);
+  border: 1px solid var(--dark);
+  grid-area: 1/1/1/1;
+  place-content: center;
+  //z-index: 1;
+  width: var(--m);
+  height: var(--m);
+  border-radius: 50%;
 }
 
 .item {
-    --rotate-invert: calc(var(--rotation-angle) * -1deg);
-    transform: rotate(var(--rotate)) translate(var(--x), 0) rotate(var(--rotate-invert));
+  --rotate-invert: calc(var(--rotation-angle) * -1deg);
+  transform: rotate(var(--rotate)) translate(var(--x), 0)
+    rotate(var(--rotate-invert));
 }
 .item.stationary {
-    transform: rotate(var(--rotate)) translate(var(--x), 0);
+  transform: rotate(var(--rotate)) translate(var(--x), 0);
 }
-.core>.item {
-    transform: rotate(var(--rotate));
+.core > .item {
+  transform: rotate(var(--rotate));
 }
 
 .arc {
-    --half: calc(var(--length)/2);
-    --quarter: calc(var(--half)/2);
-    // ademas del offset el angulo debe dividirse por 2, distinto de item
-    --semi: calc(var(--angle) / 2 * 1deg);
-    --arc-gap: 1px;
-    --length-percent: calc(var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi)));
-    --color: var(--accent2);
-    --tickness: 49px;
-    --rotate: calc((var(--angle) * var(--item-number) + var(--offset-angle) - (var(--angle)/2)) * 1deg); 
-    display: grid;
-    grid-area: 1/1/1/1;
-    height: var(--length);
-    width: var(--half);
-    border: var(--tickness) solid var(--color);
-    border-left: none;
-    background-color: transparent;
-    border-radius: 0% 100% 100% 0% / 100% 51% 51% 0%;
-    box-sizing: border-box;
-    clip-path: polygon(
-      0 50%,
+  --half: calc(var(--length) / 2);
+  --quarter: calc(var(--half) / 2);
+  // ademas del offset el angulo debe dividirse por 2, distinto de item
+  --semi: calc(var(--angle) / 2 * 1deg);
+  --arc-gap: 1px;
+  --length-percent: calc(
+    var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi))
+  );
+  --color: var(--accent2);
+  --tickness: 49px;
+  --rotate: calc(
+    (
+        var(--angle) * var(--item-number) + var(--offset-angle) -
+          (var(--angle) / 2)
+      ) * 1deg
+  );
+  display: grid;
+  grid-area: 1/1/1/1;
+  height: var(--length);
+  width: var(--half);
+  border: var(--tickness) solid var(--color);
+  border-left: none;
+  background-color: transparent;
+  border-radius: 0% 100% 100% 0% / 100% 51% 51% 0%;
+  box-sizing: border-box;
+  clip-path: polygon(
+    0 50%,
     /* left center pivot*/ 100% calc(100% - var(--length-percent)),
     /* right to bottom arc increase*/ 100% 100%,
     /* right top corner*/ 100% 0,
     /* right bottom corner*/ 100% var(--length-percent)
-    ); /* right to top ar decrease*/
-    transform:rotate(var(--rotate)) translate(var(--quarter), 0);
+  ); /* right to top ar decrease*/
+  transform: rotate(var(--rotate)) translate(var(--quarter), 0);
 }
 .arc:hover {
-    border-color: var(--accent3);
-  }
+  border-color: var(--accent3);
+}
 .content {
-    padding: 5px;
-    width: inherit;
-    height: inherit;
-    display: grid;
-    border-radius: inherit;
-    background-color: rgba(0, 170, 248, 0.815);
-    grid-area: 1/1/1/1;
-    @include alignment;
-    overflow: hidden;
-    z-index: 10;
+  padding: 5px;
+  width: inherit;
+  height: inherit;
+  display: grid;
+  border-radius: inherit;
+  background-color: rgba(0, 170, 248, 0.815);
+  grid-area: 1/1/1/1;
+  @include alignment;
+  overflow: hidden;
+  z-index: 10;
 }
 
-
 .core {
-    width: 0px;
-    height: 0px;
-    display: grid;
-    border-radius: 50%;
-    border: 1px solid rgb(255, 5, 5);
-    grid-area: 1/1/1/1;
-    //place-items: center;
-    z-index: $max-rings;
+  width: 0px;
+  height: 0px;
+  display: grid;
+  border-radius: 50%;
+  border: 1px solid rgb(255, 5, 5);
+  grid-area: 1/1/1/1;
+  //place-items: center;
+  z-index: $max-rings;
 }
 
-div[class^="ring-"] {
-    display: grid;
-    border-radius: 50%;
-    border: 0.1px solid var(--dark);
-    grid-area: 1/1/1/1;
-    place-items: center;
-    box-sizing: content-box;
-    width: var(--diam);
-    height: var(--diam);
-    z-index: var(--z-index);
+div[class^='ring-'] {
+  display: grid;
+  border-radius: 50%;
+  border: 0.1px solid var(--dark);
+  grid-area: 1/1/1/1;
+  place-items: center;
+  box-sizing: content-box;
+  width: var(--diam);
+  height: var(--diam);
+  z-index: var(--z-index);
 }
 /* hack doesnt work on ffox 
 div[class^="ring-"]:has(.item) {
@@ -111,43 +118,39 @@ div[class^="ring-"]:has(.item) {
 }
 */
 
-@each $size,
-$var in $sizes {
-    .item.#{$size} {
-        width: $var;
-        height: $var;
-    }
+@each $size, $var in $sizes {
+  .item.#{$size} {
+    width: $var;
+    height: $var;
+  }
 }
 
 @for $i from $min-rings through $max-rings {
-    .z-container>.ring-#{$i} {
-        --diam: calc(var(--radius-#{$i}) * 2);
-        --z-index:  $max-rings - $i;
-    }
+  .z-container > .ring-#{$i} {
+    --diam: calc(var(--radius-#{$i}) * 2);
+    --z-index: $max-rings - $i;
+  }
 }
 
 @for $i from $min-items through $max-items {
-    .item:nth-child(#{$i}), .arc:nth-child(#{$i}) {
-        --item-number:#{$i};
-    }
+  .item:nth-child(#{$i}),
+  .arc:nth-child(#{$i}) {
+    --item-number: #{$i};
+  }
 }
 
-
-@each $sector,
-$angle in $sectors {
-    .#{$sector} {
-        --offset-angle:#{$angle};
-    }
+@each $sector, $angle in $sectors {
+  .#{$sector} {
+    --offset-angle: #{$angle};
+  }
 }
 
-@each $arc,
-$value in $arcs {
-    .#{$arc} {
-        --arc: #{$value};
-    }
+@each $arc, $value in $arcs {
+  .#{$arc} {
+    --arc: #{$value};
+  }
 }
 
-
 .ccw {
-    --direction: -1;
-}
\ No newline at end of file
+  --direction: -1;
+}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 5e4ec01..4b548ee 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,6 +1,6 @@
 @mixin alignment {
-    align-items: center;
-    justify-items: center;
-    align-content: center;
-    justify-content: center;
-  }
\ No newline at end of file
+  align-items: center;
+  justify-items: center;
+  align-content: center;
+  justify-content: center;
+}
diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
index d44c4a7..7ac46a8 100644
--- a/src/_radial-grid.scss
+++ b/src/_radial-grid.scss
@@ -1,163 +1,152 @@
-@use "./mixins" as *;
-@use "./variables" as *;
-@use "./ui" as *;
-
- /* Initial Reset */
- * {
-   box-sizing: border-box;
-   margin: 0;
-   padding: 0;
- }
-
- /* Main elements */
- .z-container {
-   /* Layout vars */
-   --arc: 360;
-   --offset-angle: 0;
-   --direction: 1;
-   --angle: 1;
-   --radius: 50px;
-   --item-number: 1;
-   --radius-padding: 8px;
-
-   @for $i from $min-rings through $max-rings {
-     --radius-#{$i}: var(--radius) * #{$i};
-   }
-
-   /* Shape sizes */
-   --xxs: 8px;
-   --xs: 24px;
-   --s: 44px;
-   --m: 68px;
-   --l: 110px;
-   --xl: 180px;
-   --xxl: 288px;
+@use './mixins' as *;
+@use './variables' as *;
+@use './ui' as *;
+
+/* Initial Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Main elements */
+.z-container {
+  /* Layout vars */
+  --arc: 360;
+  --offset-angle: 0;
+  --direction: 1;
+  --angle: 1;
+  --radius: 50px;
+  --item-number: 1;
+  --radius-padding: 8px;
+
+  @for $i from $min-rings through $max-rings {
+    --radius-#{$i}: var(--radius) * #{$i};
+  }
+
+  /* Shape sizes */
+  --xxs: 8px;
+  --xs: 24px;
+  --s: 44px;
+  --m: 68px;
+  --l: 110px;
+  --xl: 180px;
+  --xxl: 288px;
 
   /* Color */
   --transparent: transparent;
   --white: white;
   --black: black;
 
-   /* width connector */
-   --connector-width: 40px;
-   --label-width: 50px;
-
-   /* svg */
-   --val: 0;
-   --stroke: 10;
-   --π: 3.14159265359;
+  /* width connector */
+  --connector-width: 40px;
+  --label-width: 50px;
 
- }
+  /* svg */
+  --val: 0;
+  --stroke: 10;
+  --π: 3.14159265359;
+}
 
- @for $i from $min-items  through $max-items {
-  @each $arc,
-  $value in $arcs {
-    .items-#{$i}.#{$arc}>.item {
-      --angle: calc((var(--arc) / #{$i - 1})  * var(--direction));
+@for $i from $min-items through $max-items {
+  @each $arc, $value in $arcs {
+    .items-#{$i}.#{$arc} > .item {
+      --angle: calc((var(--arc) / #{$i - 1}) * var(--direction));
     }
   }
 }
- @for $i from $min-items  through $max-items {
-  .items-#{$i}>.item {
-     --angle: calc((var(--arc) / #{$i})  * var(--direction));
-   }
- }
-
- @for $i from $min-items  through $max-items {
-  @each $arc,
-  $value in $arcs {
-    .items-#{$i}.#{$arc}>.arc {
+@for $i from $min-items through $max-items {
+  .items-#{$i} > .item {
+    --angle: calc((var(--arc) / #{$i}) * var(--direction));
+  }
+}
+
+@for $i from $min-items through $max-items {
+  @each $arc, $value in $arcs {
+    .items-#{$i}.#{$arc} > .arc {
       // No hay que restar un angulo debido a la forma del arco
-      --angle: calc((var(--arc) / #{$i})  * var(--direction));
+      --angle: calc((var(--arc) / #{$i}) * var(--direction));
     }
   }
 }
- @for $i from $min-items  through $max-items {
-  .items-#{$i}>.arc {
-     --angle: calc((var(--arc) / #{$i})  * var(--direction));
-   }
- }
-
+@for $i from $min-items through $max-items {
+  .items-#{$i} > .arc {
+    --angle: calc((var(--arc) / #{$i}) * var(--direction));
+  }
+}
 
- @for $i from $min-rings through $max-rings {
-    $resta: 1;
-    @if $i == 1 {
-      $resta: 0
-    }
-  @each $size,
-   $var in $sizes {
-    .z-container>.ring-#{$i}>.item.#{$size} {
+@for $i from $min-rings through $max-rings {
+  $resta: 1;
+  @if $i == 1 {
+    $resta: 0;
+  }
+  @each $size, $var in $sizes {
+    .z-container > .ring-#{$i} > .item.#{$size} {
       --x: calc(var(--radius-#{$i}));
     }
     @each $class in $align {
-      $math: "";
-      $translate: "";
+      $math: '';
+      $translate: '';
 
-       @if $class ==".upper" {
-         $math: "+ (calc(#{$var} / 2))";
-         $translate: "translate(-55px, 55px)";
-       }
+      @if $class == '.upper' {
+        $math: '+ (calc(#{$var} / 2))';
+        $translate: 'translate(-55px, 55px)';
+      }
 
-       @if $class ==".lower" {
-         $math: "- (calc(#{$var} / 2))";
-         $translate: "translate(-8px, 8px)";
-       }
+      @if $class == '.lower' {
+        $math: '- (calc(#{$var} / 2))';
+        $translate: 'translate(-8px, 8px)';
+      }
 
-      .z-container>.ring-#{$i}> .item.#{$size}#{$class} {
+      .z-container > .ring-#{$i} > .item.#{$size}#{$class} {
         --x: calc(var(--radius-#{$i}) #{$math});
       }
     }
-   }
+  }
 
-   .z-container>.ring-#{$i}>.arc {
-    --length: calc(var(--radius-#{$i})*2); 
+  .z-container > .ring-#{$i} > .arc {
+    --length: calc(var(--radius-#{$i}) * 2);
   }
 
-  .z-container>.ring-#{$i}>svg {
-    --diam: calc(var(--radius-#{$i})*2);
+  .z-container > .ring-#{$i} > svg {
+    --diam: calc(var(--radius-#{$i}) * 2);
   }
- 
- }
-
- @for $i from $min-rings through $max-rings {
-   @each $size,
-   $var in $sizes {
-     .item.#{$size}>.ring-#{$i} {
-       --diam: calc(#{$var} * #{$i});
-       --z-index: $max-rings - $i;
-     }
-     .item.#{$size}>.ring-#{$i}>.item {
+}
+
+@for $i from $min-rings through $max-rings {
+  @each $size, $var in $sizes {
+    .item.#{$size} > .ring-#{$i} {
+      --diam: calc(#{$var} * #{$i});
+      --z-index: $max-rings - $i;
+    }
+    .item.#{$size} > .ring-#{$i} > .item {
       --x: calc((#{$var} / 2 * #{$i}));
     }
-    
-     @each $class in $align {
-       $math: "";
-       @if $class ==".upper" {
-         $math: "+ (calc(#{$var} / 4))";
-       }
-
-       @if $class ==".lower" {
-         $math: "- (calc(#{$var} / 4))";
-       }
-
-       .item.#{$size}>.ring-#{$i}>.item#{$class} {
-         --x: calc((#{$var} / 2 * #{$i}) #{$math});
-       }
-
-     }
-     .item.#{$size}>.ring-#{$i}>svg {
+
+    @each $class in $align {
+      $math: '';
+      @if $class == '.upper' {
+        $math: '+ (calc(#{$var} / 4))';
+      }
+
+      @if $class == '.lower' {
+        $math: '- (calc(#{$var} / 4))';
+      }
+
+      .item.#{$size} > .ring-#{$i} > .item#{$class} {
+        --x: calc((#{$var} / 2 * #{$i}) #{$math});
+      }
+    }
+    .item.#{$size} > .ring-#{$i} > svg {
       --diam: calc(#{$var} * #{$i});
     }
-
-   }
- }
+  }
+}
 //arcs nested
 @for $i from $min-rings through $max-rings {
-  @each $size,
-  $var in $sizes {
-    .item.#{$size}>.ring-#{$i}>.arc {
+  @each $size, $var in $sizes {
+    .item.#{$size} > .ring-#{$i} > .arc {
       --length: calc(#{$var} * #{$i});
     }
   }
 }
- 
\ No newline at end of file
diff --git a/src/_shapes.scss b/src/_shapes.scss
index 8459d71..932f347 100644
--- a/src/_shapes.scss
+++ b/src/_shapes.scss
@@ -1,38 +1,38 @@
-@use "./ui" as *;
+@use './ui' as *;
 /* 
 * based on item element
 */
 
 .item.line {
-    transform-origin: 0 50%;
-    height: 0;
-    width: calc(var(--radius-3));
-    border-radius: 0%;
-    border: none;
-    border-top: 1px dashed var(--dark);
+  transform-origin: 0 50%;
+  height: 0;
+  width: calc(var(--radius-3));
+  border-radius: 0%;
+  border: none;
+  border-top: 1px dashed var(--dark);
 }
 
 .item.circle {
-    border-radius: 50%;
+  border-radius: 50%;
 }
 
 .item.box {
-    border-radius: 0%;
+  border-radius: 0%;
 }
 
 .item.rounded {
-    border-radius: 25%;
+  border-radius: 25%;
 }
 
 .item.bubble {
-    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
 }
 
 .item.transparent {
-    border: none;
-    background-color: var(--transparent);
+  border: none;
+  background-color: var(--transparent);
 }
 
-div[class^="ring-"].transparent{
-    border: none;
-}
\ No newline at end of file
+div[class^='ring-'].transparent {
+  border: none;
+}
diff --git a/src/_ui.scss b/src/_ui.scss
index af08f0c..524b708 100644
--- a/src/_ui.scss
+++ b/src/_ui.scss
@@ -1,22 +1,22 @@
-@use "./mixins" as *;
-@use "./variables" as *;
+@use './mixins' as *;
+@use './variables' as *;
 
-  // Instead of $theme-color-#{warning}
-  // https://huemint.com/bootstrap-plus/
-  //background-color: map.get($theme-colors, "warning");
+// Instead of $theme-color-#{warning}
+// https://huemint.com/bootstrap-plus/
+//background-color: map.get($theme-colors, "warning");
 
- .z-container {
+.z-container {
   /* Color */
   --transparent: transparent;
-  --light:      #c7e9fe;
-  --dark:       #000300;
-  --primary:    #e23a48;
-  --secondary:  #685ca0;
-  --info:       #7085b7;
-  --accent1:    #a0dbf7;
-  --accent2:    #e7508a;
-  --accent3:    #ccc1d3;
-  --success:    #6fb72b;
-  --warning:    #fec785;
-  --danger:     #f8166b;
- }
\ No newline at end of file
+  --light: #c7e9fe;
+  --dark: #000300;
+  --primary: #e23a48;
+  --secondary: #685ca0;
+  --info: #7085b7;
+  --accent1: #a0dbf7;
+  --accent2: #e7508a;
+  --accent3: #ccc1d3;
+  --success: #6fb72b;
+  --warning: #fec785;
+  --danger: #f8166b;
+}
diff --git a/src/_variables.scss b/src/_variables.scss
index 7d9355b..b76cb5d 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,15 +1,8 @@
 /* Variables */
-$sizes: "xxs" var(--xxs),
-"xs" var(--xs),
-"s" var(--s),
-"m" var(--m),
-"l" var(--l),
-"xl" var(--xl),
-"xxl" var(--xxl);
+$sizes: 'xxs' var(--xxs), 'xs' var(--xs), 's' var(--s), 'm' var(--m),
+  'l' var(--l), 'xl' var(--xl), 'xxl' var(--xxl);
 
-$align:
-".upper",
-".lower";
+$align: '.upper', '.lower';
 
 $min-rings: 1;
 $max-rings: 6;
@@ -17,26 +10,10 @@ $max-rings: 6;
 $min-items: 1;
 $max-items: 24;
 
-$sectors: "offset-45" 45,
-"offset-90" 90,
-"offset-135" 135,
-"offset-180" 180,
-"offset-225" 225,
-"offset-270" 270,
-"offset-315" 315;
-$arcs: "arc-45" 45,
-"arc-90" 90,
-"arc-135" 135,
-"arc-180" 180,
-"arc-225" 225,
-"arc-270" 270,
-"arc-315" 315;
+$sectors: 'offset-45' 45, 'offset-90' 90, 'offset-135' 135, 'offset-180' 180,
+  'offset-225' 225, 'offset-270' 270, 'offset-315' 315;
+$arcs: 'arc-45' 45, 'arc-90' 90, 'arc-135' 135, 'arc-180' 180, 'arc-225' 225,
+  'arc-270' 270, 'arc-315' 315;
 
-$position: "pos-0" 360,
-"pos-45" 45,
-"pos-90" 90,
-"pos-135" 135,
-"pos-180" 180,
-"pos-225" 225,
-"pos-270" 270,
-"pos-315" 315;
+$position: 'pos-0' 360, 'pos-45' 45, 'pos-90' 90, 'pos-135' 135, 'pos-180' 180,
+  'pos-225' 225, 'pos-270' 270, 'pos-315' 315;
diff --git a/src/components/_label.scss b/src/components/_label.scss
index 40db32a..db22584 100644
--- a/src/components/_label.scss
+++ b/src/components/_label.scss
@@ -1,70 +1,61 @@
-@use "../_variables.scss" as *;
-@use "../_mixins.scss" as *;
-@use "../ui" as *;
+@use '../_variables.scss' as *;
+@use '../_mixins.scss' as *;
+@use '../ui' as *;
 
 .label {
-   display: block;
-   border: 1px solid var(--info);
-   border-radius: 50%;
-   width: 4px;
-   height: 4px;
- }
+  display: block;
+  border: 1px solid var(--info);
+  border-radius: 50%;
+  width: 4px;
+  height: 4px;
+}
 
- .label::before {
-  content: "";
+.label::before {
+  content: '';
   display: block;
   border-bottom: 1px solid var(--info);
   width: var(--connector-width);
   height: 1px;
 }
- .label__text {
-   transform-origin: 0 0;
-   display: grid;
-   border: 1px solid black;
-   grid-area: 1/1/1/1;
-   background-color: white;
-   border-radius: 4px;
-   border-color: var(--info);
-   width: var(--label-width);
-   height: 20px;
-   color: var(--info);
-   @include alignment;
- }
+.label__text {
+  transform-origin: 0 0;
+  display: grid;
+  border: 1px solid black;
+  grid-area: 1/1/1/1;
+  background-color: white;
+  border-radius: 4px;
+  border-color: var(--info);
+  width: var(--label-width);
+  height: 20px;
+  color: var(--info);
+  @include alignment;
+}
 
- .item>.label {
+.item > .label {
   transform: rotate(var(--label-angle)) translate(var(--x), 0);
 }
 
-.label>.label__text {
-  transform: translate(calc(var(--connector-width) - 5px), var(--label-box)) rotate(var(--label-angle-invert));
+.label > .label__text {
+  transform: translate(calc(var(--connector-width) - 5px), var(--label-box))
+    rotate(var(--label-angle-invert));
 }
 
-@each $size,
-$var in $sizes {
-
-  @each $pos,
-  $angle in $position {
-    .item.#{$size}>.label.#{$pos} {
+@each $size, $var in $sizes {
+  @each $pos, $angle in $position {
+    .item.#{$size} > .label.#{$pos} {
       --label-angle: calc(#{$angle} * 1deg);
-       --x: calc(#{$var} / 1.8);
+      --x: calc(#{$var} / 1.8);
     }
   }
 }
 
- @each $pos,
- $angle in $position {
-   .label.#{$pos}>.label__text {
+@each $pos, $angle in $position {
+  .label.#{$pos} > .label__text {
     --label-angle-invert: calc(#{$angle} * -1deg);
-     @if $pos !="pos-180" {
-       --label-box: -5px;
-     }
-
-     @else {
+    @if $pos != 'pos-180' {
       --label-box: -5px;
-     }
-
-   }
- }
-
-
- 
\ No newline at end of file
+    } @else {
+      --label-box: -5px;
+    }
+  }
+}
diff --git a/src/components/_progress.scss b/src/components/_progress.scss
index 5d67710..2473756 100644
--- a/src/components/_progress.scss
+++ b/src/components/_progress.scss
@@ -1,6 +1,6 @@
-@use "../_mixins.scss" as *;
-@use "../_variables.scss" as *;
-@use "../ui" as *;
+@use '../_mixins.scss' as *;
+@use '../_variables.scss' as *;
+@use '../ui' as *;
 // Progress
 .z-progress {
   --percentage: calc(var(--progress) * 3.6);
@@ -12,9 +12,11 @@
   width: 100%;
   aspect-ratio: 1;
   //background-color: #bc26da;
-  background-image: 
-  radial-gradient(circle, var(--light) 64%, transparent 65%),
-  conic-gradient(var(--primary) calc((var(--percentage) - 1) * 1deg), var(--secondary)  calc(var(--percentage) * 1deg));
+  background-image: radial-gradient(circle, var(--light) 64%, transparent 65%),
+    conic-gradient(
+      var(--primary) calc((var(--percentage) - 1) * 1deg),
+      var(--secondary) calc(var(--percentage) * 1deg)
+    );
 }
 .z-progress::after {
   // https://codepen.io/chandrashekhar/pen/RvMVey?editors=1100
@@ -32,41 +34,40 @@ svg.z-svg {
 }
 
 .base {
-  cx: calc(var(--diam) / 2 );
-  cy: calc(var(--diam) / 2 );
-  r: calc((var(--diam) / 2 - var(--stroke)) );
+  cx: calc(var(--diam) / 2);
+  cy: calc(var(--diam) / 2);
+  r: calc((var(--diam) / 2 - var(--stroke)));
   fill: none;
   stroke: #e6e6e6;
-  stroke-dasharray: calc(360/5 - 20) 20;
-  stroke-width: var(--stroke); 
+  stroke-dasharray: calc(360 / 5 - 20) 20;
+  stroke-width: var(--stroke);
 }
 
 .markers {
   --markers: 12;
   --marker-width: 1px;
   --circumference: calc(var(--r) * var(--π) * 2);
-  --dash: calc(var(--circumference) / var(--markers) - var(--marker-width)); 
-  --r: calc(var(--diam) / 2 );
+  --dash: calc(var(--circumference) / var(--markers) - var(--marker-width));
+  --r: calc(var(--diam) / 2);
   cx: var(--r);
   cy: var(--r);
   r: var(--r);
   fill: none;
   stroke: #9119e069;
-  stroke-width: calc(var(--radius) * 2); 
+  stroke-width: calc(var(--radius) * 2);
   stroke-dasharray: var(--marker-width) var(--dash);
 }
 .percent {
-  --r: calc(var(--diam) / 2 );
+  --r: calc(var(--diam) / 2);
   cx: var(--r);
   cy: var(--r);
   r: calc(var(--r));
   fill: none;
-  stroke-width: var(--stroke); 
+  stroke-width: var(--stroke);
   stroke-dasharray: calc(var(--r) * var(--π) * 2);
-  stroke-dashoffset: calc((100 - var(--val))/100 * (var(--r) * var(--π) * 2));
+  stroke-dashoffset: calc((100 - var(--val)) / 100 * (var(--r) * var(--π) * 2));
 }
 
-
 // https://codepen.io/arrayzero/pen/LbvJvW
 .p50 {
   --val: 50;
@@ -79,4 +80,3 @@ svg.z-svg {
 .ninety {
   --val: 90;
 }
-
diff --git a/src/index.scss b/src/index.scss
index c2c52ac..d70fc2e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,12 +1,11 @@
 /* Core elements */
-@use "./core-elements";
+@use './core-elements';
 /* Radial grid */
-@use "./radial-grid";
+@use './radial-grid';
 /* Shapes */
-@use "./shapes";
+@use './shapes';
 /* Components */
 /* label */
-@use "./components/label";
+@use './components/label';
 /* progress */
-@use "./components/progress";
-
+@use './components/progress';