@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/components/charts.scss

@@ -1,32 +1,35 @@
-@use "../_func" as *;
-
-$chart-colour-1: #1EBEE6!default;
-$chart-colour-2: #FFD2D2!default;
-$chart-colour-3: #B4E6A5!default;
-$chart-colour-4: #ffa500!default;
-$chart-colour-5: #46003c!default;
-$chart-colour-6: #b4e6a5!default;
-$chart-colour-7: #1ebee6!default;
-$chart-colour-8: #ffd2d2!default;
-$chart-colour-9: #9d9d9d!default;
-$chart-colour-10: #66838a!default;
+@use '../_func' as *;
+
+$chart-colour-1: #1ebee6 !default;
+$chart-colour-2: #ffd2d2 !default;
+$chart-colour-3: #b4e6a5 !default;
+$chart-colour-4: #ffa500 !default;
+$chart-colour-5: #46003c !default;
+$chart-colour-6: #b4e6a5 !default;
+$chart-colour-7: #1ebee6 !default;
+$chart-colour-8: #ffd2d2 !default;
+$chart-colour-9: #9d9d9d !default;
+$chart-colour-10: #66838a !default;
 
 $chart-colors: ();
-$chart-colors: map-merge((
-  1: $chart-colour-1,
-  2: $chart-colour-2,
-  3: $chart-colour-3,
-  4: $chart-colour-4,
-  5: $chart-colour-5,
-  6: $chart-colour-6,
-  7: $chart-colour-7,
-  8: $chart-colour-8,
-  9: $chart-colour-9,
-  10: $chart-colour-10
-), $chart-colors);
-
-$chart-height: 56.25%!default;
-$chart-height-lg: 42.86%!default;
+$chart-colors: map-merge(
+  (
+    1: $chart-colour-1,
+    2: $chart-colour-2,
+    3: $chart-colour-3,
+    4: $chart-colour-4,
+    5: $chart-colour-5,
+    6: $chart-colour-6,
+    7: $chart-colour-7,
+    8: $chart-colour-8,
+    9: $chart-colour-9,
+    10: $chart-colour-10,
+  ),
+  $chart-colors
+);
+
+$chart-height: 56.25% !default;
+$chart-height-lg: 42.86% !default;
 
 // Selectors
 $default-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__wrapper';
@@ -38,7 +41,6 @@ $bar-chart: 'input[type=radio]:is([value="bar"],[value="comparison"]):not([value
 $responsive-chart: 'input[type=radio][value="responsive"]:not([value=none]):not([value=pie]):checked~.chart__wrapper';
 $scatter-line-chart: 'input[type="radio"]:not([value="pie"]):is([value="line"],[value="scatter"],[value="bubble"],[value="radar"],[value="proportional"],[value="combo"]):checked ~ .chart__wrapper';
 
-
 $line-chart: 'input[type="radio"]:not([value="pie"])[value="line"]:checked ~ .chart__wrapper';
 //$bubble-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="bubble"]:checked ~ .chart__wrapper';
 //$radar-chart: 'input[type="radio"]:not([value="none"]):not([value="pie"])[value="radar"]:checked ~ .chart__wrapper';
@@ -51,17 +53,15 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
 //$dumbbell-chart: 'input[type="radio"]:not([value="none"])[value="dumbbell"]:checked ~ .chart__wrapper';
 //$waffle-chart: 'input[type="radio"]:not([value="none"])[value="waffle"]:checked ~ .chart__wrapper';
 
-
-// #region Basic setup - including: container setup, css vars 
+// #region Basic setup - including: container setup, css vars
 
 ::slotted(table) {
-  display: none!important;
+  display: none !important;
 }
 
 .chart__outer {
-
   container-type: inline-size;
-  
+
   // CSS vars that can be overwritten by declaring them without the -set on the end of the variable i.e. --chart-colour-1: red; would overwrite --chart-colour-1-set
   --body-colour-set: var(--body-colour, white);
   --text-colour-set: var(--text-colour, black);
@@ -71,12 +71,11 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
 
   tbody {
     --chart-direction: 360deg;
-    --chart-day-bg-pos: 100% calc(var(--single-day) * 7)
+    --chart-day-bg-pos: 100% calc(var(--single-day) * 7);
   }
-  
 
   @each $index, $value in $chart-colors {
-    --chart-colour-#{$index}-set: var(--chart-colour-#{$index},#{$value});
+    --chart-colour-#{$index}-set: var(--chart-colour-#{$index}, #{$value});
   }
 
   // Non-configurable css vars
@@ -93,23 +92,20 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   --line-thickness: 1px;
   --yaxis-width: auto;
   --yaxis-point-display: block;
-  --yaxis-last-point-transform: translate(0,-50%);
+  --yaxis-last-point-transform: translate(0, -50%);
   --bar-gap: min(10%, 0.75rem);
 
   @container (max-width: 36em) {
-
     :has(tr:nth-child(5) td:nth-child(4)),
-    :has(tr:nth-child(10)){
-        
+    :has(tr:nth-child(10)) {
       --yaxis-width: 0;
       --yaxis-point-display: none;
-      --yaxis-last-point-transform: translate(0,-100%);
+      --yaxis-last-point-transform: translate(0, -100%);
       --bar-gap: 0;
     }
   }
   @container (max-width: 63em) {
-    :has(tr:nth-child(10)){
-        
+    :has(tr:nth-child(10)) {
       --bar-gap: 0;
     }
   }
@@ -120,25 +116,23 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
       --line-thickness: 0.8px;
       --yaxis-width: auto;
       --yaxis-point-display: block;
-      --yaxis-last-point-transform: translate(0,-50%);
+      --yaxis-last-point-transform: translate(0, -50%);
     }
   }
-  
-  @container (min-width: 62em) {
 
+  @container (min-width: 62em) {
     .chart__wrapper {
-      
       --label-size: #{rem(14)};
       --pie-size: calc(25% - 1.5rem);
       --line-thickness: 0.5px;
     }
   }
 
-  &:has(.chart__options){
+  &:has(.chart__options) {
     position: relative;
     padding-top: rem(24);
   }
-  
+
   margin-bottom: 2rem;
   display: flex;
   flex-direction: column;
@@ -151,7 +145,7 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   > figcaption {
     display: contents;
 
-    p:not(.chart__strapline,.chart__title) {
+    p:not(.chart__strapline, .chart__title) {
       margin-bottom: 0.25rem;
       font-size: var(--label-size);
     }
@@ -182,51 +176,52 @@ $pie-chart: 'input[type="radio"]:not([value="none"]):is([value="pie"],[value="po
   border-top: 1px solid black;
   position: relative;
   padding-top: rem(4);
-
 }
 // #endregion
 
 // #region Apply chart colours
 @for $i from 1 to 10 {
-  
   .chart__key .key:nth-child(10n - #{10 - $i}),
   .chart__outer table tbody tr td:not(:first-child):nth-child(10n - #{10 - ($i+1)}) {
-    
-    --chart-colour: var(#{'--chart-colour-'+$i+'-set'});
+    --chart-colour: var(#{'--chart-colour-' + $i + '-set'});
   }
 
-  input:is([value="line"],[value="radar"],[value="combo"],[value="proportional"]):checked ~ .chart__wrapper .line:nth-child(10n - #{10 - $i}) {
-    color: var(#{'--chart-colour-'+$i+'-set'});
+  input:is([value='line'], [value='radar'], [value='combo'], [value='proportional']):checked
+    ~ .chart__wrapper
+    .line:nth-child(10n - #{10 - $i}) {
+    color: var(#{'--chart-colour-' + $i + '-set'});
     stroke: currentColor;
     fill: currentColor;
     z-index: #{10 - $i};
   }
-  input:is([value="pie"],[value="polar"]):checked ~ .chart__wrapper .pie path:nth-child(10n - #{10 - $i}) {
-    fill: var(#{'--chart-colour-'+$i+'-set'});
+  input:is([value='pie'], [value='polar']):checked ~ .chart__wrapper .pie path:nth-child(10n - #{10 - $i}) {
+    fill: var(#{'--chart-colour-' + $i + '-set'});
   }
 }
 
 .chart__key .key:nth-child(10n),
-input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__outer table tbody tr td:not(:first-child):nth-child(10n + 1) {
-  
+input[type='radio']:not([value='none']):not([value='pie']):checked
+  ~ .chart__outer
+  table
+  tbody
+  tr
+  td:not(:first-child):nth-child(10n + 1) {
   --chart-colour: var(#{'--chart-colour-10-set'});
 }
 // #endregion
 
 // #region Chart type switcher
-.chart__outer > [type="radio"]{
+.chart__outer > [type='radio'] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
 }
 
 .chart__options {
-
-  &:has(span:first-child:last-child){
+  &:has(span:first-child:last-child) {
     display: none;
   }
 
-
   position: absolute;
   display: block;
   width: fit-content;
@@ -234,7 +229,6 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
   top: 0;
   right: 0;
   background-color: var(--body-colour-set);
-  
 
   > span:first-child {
     text-align: right;
@@ -242,7 +236,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     height: rem(24);
 
     &:before {
-      content: "";
+      content: '';
       height: rem(16);
       width: rem(16);
       background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3e%3cpath d='M31 19.3v-6.5l-3.9-.5c-.1-.4-.3-.9-.5-1.5l2.4-3-4.7-4.7-3.1 2.4c-.4-.2-.9-.4-1.5-.6L19.2 1h-6.5l-.5 3.9c-.6.2-1.1.4-1.5.6l-3-2.4L3 7.7l2.4 3c-.2.5-.4 1.1-.5 1.5l-3.9.5v6.5l3.9.5c.2.5.3 1 .6 1.5l-2.4 3 4.7 4.7 3-2.3c.4.2 1 .5 1.5.6l.5 3.8h6.5l.5-3.8c.5-.2 1.1-.4 1.5-.6l3 2.3 4.7-4.7-2.4-3 .6-1.5 3.8-.4zm-2.1-1.9-3.4.5c-.3 1.5-.8 2.7-1.6 3.6l2.1 2.6-1.9 2-2.6-2c-1 .7-2.5 1.3-3.7 1.5l-.5 3.3h-2.6l-.5-3.3c-1.2-.2-2.7-.8-3.7-1.5l-2.6 2-1.9-2 2.1-2.6c-.8-.9-1.2-2.1-1.6-3.6l-3.4-.5v-2.7l3.5-.5c.2-1.1.6-2.3 1.4-3.7L6 7.9l1.9-2L10.6 8c.8-.7 1.7-1.1 3.6-1.6l.5-3.4h2.6l.5 3.4c1.9.5 2.8.9 3.6 1.6l2.7-2L26 8l-2 2.5c.8 1.4 1.2 2.6 1.4 3.7l3.5.5v2.7zM16 20.8c-2.7 0-4.7-2-4.7-4.8 0-2.7 2-4.7 4.7-4.7s4.7 2 4.7 4.7-2 4.8-4.7 4.8zm0 2.2c3.9 0 6.9-3 6.9-7 0-3.9-3-6.9-6.9-6.9s-6.9 3-6.9 6.9c0 4 3 7 6.9 7z'%3e%3c/path%3e%3c/svg%3e");
@@ -256,15 +250,13 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
   }
 
   > *:not(:first-child) {
-
     display: none;
   }
 
   label {
     cursor: pointer;
-    
-    &:hover {
 
+    &:hover {
       background: var(--label-bg, rgb(220, 220, 220));
     }
   }
@@ -272,7 +264,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
   &:hover {
     outline: 3px solid black;
 
-    box-shadow: 0 0 0 calc(0.125rem + 0.125rem) #FFFFFF;
+    box-shadow: 0 0 0 calc(0.125rem + 0.125rem) #ffffff;
     outline-offset: calc(0.125rem + 0.125rem);
 
     > * {
@@ -286,7 +278,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
   }
 }
 
-.chart > [type="radio"]:focus ~ .chart__switcher{
+.chart > [type='radio']:focus ~ .chart__switcher {
   label {
     display: block;
   }
@@ -294,14 +286,13 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
 // #endregion
 
 // #region Chart key
-.chart__outer > input[type="checkbox"] {
+.chart__outer > input[type='checkbox'] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
 }
 
 .chart__key {
-
   padding: 0 0 0 0;
   margin-bottom: 1.5rem;
   //background: var(--colour-key-bg, rgb(220, 220, 220));
@@ -313,12 +304,11 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
   gap: 0.5rem;
 
   .key {
-
-    font-size: 1rem!important;
+    font-size: 1rem !important;
     margin: 0;
 
     &:before {
-      content: "";
+      content: '';
       height: 0.8em;
       width: 0.8em;
       margin-right: 0.3em;
@@ -343,8 +333,8 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     }
     */
 
-    &[data-label="Min"],
-    &[data-label="Max"] {
+    &[data-label='Min'],
+    &[data-label='Max'] {
       display: none;
     }
 
@@ -356,35 +346,39 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
 // #endregion
 
 // #region Hide data sets
-.chart__outer > input[type="checkbox"]:not(:checked) ~ .chart__key .key {
-  
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__key .key {
   opacity: 0.25;
 }
 
-.chart__outer > input[type="checkbox"]:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child) {
   display: none;
 }
 
-.chart__outer > input[type="checkbox"]:not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line {
-  display: none!important;
+.chart__outer > input[type='checkbox']:not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line {
+  display: none !important;
 }
 
 @for $i from 1 to 10 {
-  
-  .chart__outer > input[type="checkbox"]:nth-of-type(#{$i}):focus ~ .chart__key .key:nth-of-type(#{$i}) {
+  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):focus ~ .chart__key .key:nth-of-type(#{$i}) {
     //outline: 3px solid var(--chart-colour);
   }
 
-  .chart__outer > input[type="checkbox"]:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
+  .chart__outer > input[type='checkbox']:nth-of-type(#{$i}):not(:checked) ~ .chart__key .key:nth-of-type(#{$i}) {
     opacity: 1;
   }
 
-  .chart__outer > input[type="checkbox"]:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child):nth-child(#{$i+1}) {
+  .chart__outer
+    > input[type='checkbox']:nth-of-type(#{$i}):not(:checked)
+    ~ .chart__wrapper
+    table
+    tbody
+    tr
+    td:not(:first-child):nth-child(#{$i + 1}) {
     display: block;
   }
 
-  input:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper :is(.chart__lines,.radar) .line:nth-child(#{$i}) {
-    display: block!important;
+  input:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper :is(.chart__lines, .radar) .line:nth-child(#{$i}) {
+    display: block !important;
   }
 }
 // #endregion
@@ -398,7 +392,6 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
 
 // #region Default column chart (Also applies to line chart)
 .chart__wrapper {
-
   display: block;
   display: flex;
   flex-direction: row;
@@ -411,26 +404,24 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     width: var(--yaxis-width);
 
     .axis__point {
-      
       bottom: var(--percent);
       position: relative;
       height: 0;
       white-space: nowrap;
 
-      &:not(:last-child){
+      &:not(:last-child) {
         display: var(--yaxis-point-display);
       }
 
       span {
         display: block;
-        transform: translate(0,-50%);
+        transform: translate(0, -50%);
         padding-right: 0.25rem;
         text-align: right;
         font-size: var(--label-size);
       }
 
       &:last-child span {
-
         transform: var(--yaxis-last-point-transform);
       }
     }
@@ -446,7 +437,6 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     bottom: -1rem;
 
     .axis__point {
-      
       left: var(--percent);
       width: 1px;
       position: absolute;
@@ -465,7 +455,6 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
   }
 
   .chart__guidelines {
-
     position: absolute;
     top: 0;
     left: 0;
@@ -476,7 +465,6 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     pointer-events: none;
 
     .guideline {
-
       bottom: var(--percent);
       position: absolute;
       right: 0;
@@ -488,13 +476,12 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
       z-index: var(--index-below);
       //overflow: hidden;
 
-      &:not(.guideline--target) span{
+      &:not(.guideline--target) span {
         display: none;
-      } 
+      }
     }
 
     .guideline--target {
-
       border-bottom: 1px dashed #000000;
       z-index: var(--index-above);
       text-shadow: 1px solid white;
@@ -505,28 +492,26 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
         bottom: 0;
         font-size: var(--label-size);
         text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
-        background: rgba(255,255,255,0.6);
+        background: rgba(255, 255, 255, 0.6);
       }
     }
-    [data-value="0"] {
+    [data-value='0'] {
       border-bottom: 1px solid var(--colour-primary);
 
-      &:not(:first-child){
-
+      &:not(:first-child) {
         border-bottom: 1px dashed var(--colour-primary);
       }
     }
   }
 
   .chart {
-    
     position: relative;
     flex-grow: 1;
   }
 
   table {
     display: block;
-    width: 100%!important;
+    width: 100% !important;
     padding-top: var(--chart-height-resp); // 16:9 ratio
     position: relative;
     margin-bottom: 0;
@@ -537,7 +522,6 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     }
 
     tbody {
-
       display: flex;
       position: absolute;
       width: 100%;
@@ -547,7 +531,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
       flex-direction: row;
       border: none;
     }
-    
+
     tbody tr {
       display: flex;
       flex-direction: row;
@@ -568,7 +552,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
         position: absolute;
         top: 100%;
         left: 50%;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         width: fit-content;
         padding: 0;
         white-space: nowrap;
@@ -580,28 +564,26 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
         text-align: center;
 
         @container (min-width: 62em) {
-    
           display: block;
-          left: 50%!important;
-          transform: translate(-50%,0)!important;
+          left: 50% !important;
+          transform: translate(-50%, 0) !important;
         }
       }
 
-      td[data-label="Min"],
-      td[data-label="Max"] {
+      td[data-label='Min'],
+      td[data-label='Max'] {
         display: none;
       }
 
       &:first-child td:first-child,
       &:last-child td:first-child {
-
         display: block;
       }
 
       td:not(:first-child) {
         height: 100%;
         height: var(--percent, 0%);
-        bottom: var(--bottom,0%);
+        bottom: var(--bottom, 0%);
         width: 100%;
         max-width: 1.5rem;
         position: relative;
@@ -612,7 +594,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
         border-top-left-radius: 4px;
 
         &:has(span:empty),
-        &:empty{
+        &:empty {
           display: none;
         }
 
@@ -626,7 +608,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
           left: 50%;
           font-size: var(--label-size);
           line-height: 1.2;
-          transform: translate(-50%,0);
+          transform: translate(-50%, 0);
           background: var(--chart-colour);
           opacity: 0;
           pointer-events: none;
@@ -638,7 +620,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
           text-align: center;
 
           &::before {
-            content: attr(data-label)'\A'attr(data-group)'\A';
+            content: attr(data-label) '\A' attr(data-group) '\A';
           }
 
           &[data-second]:after {
@@ -653,12 +635,10 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
       }
 
       @container (min-width: 36em) {
-
         &:first-child td:not(:first-child) span,
         &:last-child td:not(:first-child) span {
-          
           left: 50%;
-          transform: translate(-50%,0);
+          transform: translate(-50%, 0);
           text-align: center;
         }
       }
@@ -674,87 +654,78 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
     @container (max-width: 36em) {
       tbody:has(tr:nth-child(5) td:nth-child(4)) tr,
       tbody:has(tr:nth-child(10)) tr {
-
         td:first-child {
           display: none;
         }
-        
-        &:first-child td:first-child {
 
+        &:first-child td:first-child {
           left: 0%;
-          transform: translate(0,0);
+          transform: translate(0, 0);
           display: block;
           text-align: left;
         }
         &:last-child td:first-child {
-
           left: 100%;
-          transform: translate(-100%,0);
+          transform: translate(-100%, 0);
           display: block;
           text-align: right;
         }
-        
-        &:first-child td:not(:first-child) span {
 
+        &:first-child td:not(:first-child) span {
           left: -20%;
-          transform: translate(0%,0);
+          transform: translate(0%, 0);
           text-align: left;
         }
 
         &:last-child td:not(:first-child) span {
-            
           left: 120%;
-          transform: translate(-100%,0);
+          transform: translate(-100%, 0);
           text-align: right;
         }
       }
     }
     // Hide labels when it gets crowded
     @container (min-width: 62em) {
-
-      tbody:has(tr:nth-child(25)){
+      tbody:has(tr:nth-child(25)) {
         tr td:first-child {
-          display: none!important;
+          display: none !important;
         }
 
         tr:is(:first-child, :nth-child(5n)) td:first-child {
-          display: block!important;
+          display: block !important;
         }
       }
 
-      tbody:has(tr:nth-child(50)){
-
+      tbody:has(tr:nth-child(50)) {
         tr:is(:first-child, :nth-child(5n)) td:first-child,
         tr td:first-child {
-          display: none!important;
+          display: none !important;
         }
 
         tr:is(:first-child, :nth-child(10n)) td:first-child {
-          display: block!important;
+          display: block !important;
         }
       }
 
-      tbody:has(tr:nth-child(100)){
-
+      tbody:has(tr:nth-child(100)) {
         tr:is(:first-child, :nth-child(10n)) td:first-child,
         tr td:first-child {
-          display: none!important;
+          display: none !important;
         }
 
         tr:is(:first-child, :nth-child(20n)) td:first-child {
-          display: block!important;
+          display: block !important;
         }
       }
     }
 
     // Hide items when theres too many too display
-    tbody:has(tr:nth-child(1001)){
-
+    tbody:has(tr:nth-child(1001)) {
       tr {
         display: none;
       }
 
-      tr:nth-last-child(-n+1001) ~ tr {
+      tr:nth-last-child(-n + 1001) ~ tr {
         display: flex;
       }
     }
@@ -770,11 +741,10 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
 // #region Bar chart
 @mixin barchart($selector) {
   #{$selector} {
-
     tbody {
       --chart-direction: 90deg;
-    --chart-day-bg-pos: calc(var(--single-day) * 7) 100%;
-    --bar-gap: 0;
+      --chart-day-bg-pos: calc(var(--single-day) * 7) 100%;
+      --bar-gap: 0;
     }
 
     .chart__guidelines {
@@ -787,28 +757,25 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
         border-left: 1px dashed #eee;
         width: 0;
 
-        span{
+        span {
           display: block;
           font-size: var(--label-size);
           position: absolute;
           top: 100%;
-          transform: translate(-50%,0.2em);
-        } 
+          transform: translate(-50%, 0.2em);
+        }
       }
     }
 
     .chart__yaxis {
-
       display: none;
     }
 
     table {
-
       padding-top: 0;
     }
 
     table tbody {
-
       flex-direction: column;
       position: relative;
     }
@@ -820,11 +787,10 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
       padding: 0;
 
       td {
-        
         height: 3rem;
         bottom: 0;
         left: var(--bottom, 0%);
-        width: var(--comparison,var(--percent));
+        width: var(--comparison, var(--percent));
         max-width: 100%;
         border-top-left-radius: 0;
         border-bottom-right-radius: 4px;
@@ -833,7 +799,7 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
       td:first-child {
         position: static;
         transform: none;
-        display: block!important;
+        display: block !important;
         max-height: 1.5rem;
       }
     }
@@ -847,34 +813,33 @@ input[type="radio"]:not([value="none"]):not([value="pie"]):checked ~ .chart__out
         opacity: 0;
         pointer-events: none;
         white-space: nowrap;
-      }   
+      }
     }
 
     &[data-longest-label] table tbody tr {
       td:first-child {
         position: absolute;
-        transform: translate(-100%, -50%)!important;
+        transform: translate(-100%, -50%) !important;
         display: block !important;
         max-height: 1.5rem;
         z-index: var(--index-above);
         top: 50%;
-        left: 0!important;
+        left: 0 !important;
         padding-right: 0.5em;
       }
     }
-
   }
 }
 
-@include barchart('.chart__outer '+$bar-chart);
+@include barchart('.chart__outer ' + $bar-chart);
 
 @container (max-width: 36em) {
-  @include barchart('.chart__outer '+$responsive-chart);
+  @include barchart('.chart__outer ' + $responsive-chart);
 }
 // #endregion
 
 // #region stacked
-input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrapper {
+input[type='radio']:not([value='pie'])[value='stacked']:checked ~ .chart__wrapper {
   table tbody tr {
     --bar-gap: 0;
     flex-direction: column-reverse;
@@ -882,32 +847,28 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
     align-items: center;
 
     td {
-      border-radius: 0!important;
+      border-radius: 0 !important;
     }
   }
 }
 // #endregion
 
 // #region Scatter and line chart
-#{'.chart__outer '+$scatter-line-chart} {
-
+#{'.chart__outer ' + $scatter-line-chart} {
   table tbody {
     justify-content: space-between;
 
     tr {
       td:not(.chart__bar):first-child {
-        left: 50%!important;
+        left: 50% !important;
         width: 4rem;
       }
     }
   }
 }
 
-#{'.chart__outer '+$scatter-line-chart} {
-
-
+#{'.chart__outer ' + $scatter-line-chart} {
   table tbody {
-    
     tr:not(:has(.chart__bar)) {
       width: 2px;
       margin-left: -1px;
@@ -916,7 +877,6 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
     }
 
     tr {
-
       td:not(.chart__bar):not(:first-child) {
         position: absolute;
         left: 50%;
@@ -933,7 +893,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
       }
 
       &:before {
-        content: "";
+        content: '';
         border-left: 1px dashed #eeeeee;
         height: 100%;
         width: 0;
@@ -952,7 +912,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
         }
       }
 
-      &:is([data-event],[data-event-right]) {
+      &:is([data-event], [data-event-right]) {
         &:before {
           opacity: 1;
           border-left: 1px dashed #000000;
@@ -965,22 +925,22 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
           width: max-content;
           z-index: var(--index-below);
           font-size: var(--label-size);
-          background: rgba(255,255,255,0.5);
+          background: rgba(255, 255, 255, 0.5);
         }
       }
       &[data-event] {
         &:after {
-          transform: translate(-50%,-0.5em);
+          transform: translate(-50%, -0.5em);
         }
       }
       &[data-event-right] {
         &:after {
-          transform: translate(-101%,-0.5em);
+          transform: translate(-101%, -0.5em);
         }
       }
       &[data-event-left] {
         &:after {
-          transform: translate(1%,-0.5em);
+          transform: translate(1%, -0.5em);
         }
       }
     }
@@ -991,8 +951,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
   }
 }
 
-#{':host([data-increment][data-start][data-end]) .chart__outer '+$scatter-line-chart} {
-
+#{':host([data-increment][data-start][data-end]) .chart__outer ' + $scatter-line-chart} {
   table tbody tr {
     position: absolute;
     left: var(--position);
@@ -1003,7 +962,6 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
   }
 
   .slope {
-    
     pointer-events: none;
   }
   .slope svg {
@@ -1017,14 +975,13 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
     width: 100%;
     height: calc(100% - 1rem);
     pointer-events: none;
-    z-index: var(--index-above)
+    z-index: var(--index-above);
   }
 }
 // #endregion
 
 // #region Line chart
-#{'.chart__outer '+$line-chart} {
-
+#{'.chart__outer ' + $line-chart} {
   .chart__lines ~ table tbody {
     tr {
       td:not(.chart__bar):not(:first-child):not(:hover) {
@@ -1042,15 +999,13 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: var(--index-above)
+    z-index: var(--index-above);
   }
 }
 // #endregion
 
-
 // #region Pie chart
-#{'.chart__outer '+$pie-chart} {
-
+#{'.chart__outer ' + $pie-chart} {
   margin-bottom: 2rem;
 
   .chart__yaxis,
@@ -1095,7 +1050,6 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
   }
 
   .pie > div {
-
     position: absolute;
     top: 50%;
     left: 50%;
@@ -1140,7 +1094,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
       display: block;
     }
   }
-  
+
   .pie {
     path:nth-child(1):hover ~ foreignObject:nth-of-type(1),
     path:nth-child(2):hover ~ foreignObject:nth-of-type(2),
@@ -1150,36 +1104,30 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
     path:nth-child(6):hover ~ foreignObject:nth-of-type(6),
     path:nth-child(7):hover ~ foreignObject:nth-of-type(7),
     path:nth-child(8):hover ~ foreignObject:nth-of-type(8),
-    path:nth-child(9):hover ~ foreignObject:nth-of-type(9){
+    path:nth-child(9):hover ~ foreignObject:nth-of-type(9) {
       display: block;
     }
   }
 }
 // #endregion
 
-
-
-
-
 // #region Modifiers
 
 // #region Display data modifier class
 :host(.chart--display-data) {
   table tbody tr {
-
     td:not(:first-child) {
-      
       span {
         &:before {
           display: none;
         }
-        opacity: 1!important;
+        opacity: 1 !important;
         z-index: var(--index-above);
         top: 0%;
-        transform: translate(-50%, 0%)!important;
-        display: block!important;
+        transform: translate(-50%, 0%) !important;
+        display: block !important;
         height: fit-content;
-        
+
         margin: 0;
       }
     }
@@ -1190,7 +1138,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
       top: 50%;
       right: 0;
       left: 0;
-      transform: translate(0%, -50%)!important;
+      transform: translate(0%, -50%) !important;
       text-align: right;
       width: calc(100% - 0.4rem);
       min-width: fit-content;
@@ -1206,7 +1154,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
     }
   }
 
-  #{$line-chart} .chart__lines~table tbody tr td:not(:first-child):not(:hover) {
+  #{$line-chart} .chart__lines ~ table tbody tr td:not(:first-child):not(:hover) {
     opacity: 1;
   }
 }
@@ -1216,7 +1164,6 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 :host(.chart--show-totals) {
   .chart__key {
     .key {
-      
       .chart__total {
         display: flex;
         font-size: var(--label-size);
@@ -1236,29 +1183,29 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 }
 // #endregion
 
-// #endregion 
-
+// #endregion
 
 // #region aniamtion
 
 #{'.chart--animate.animating.inview'} {
-
   --animation-left: 2s;
 
-  table tbody tr td:not(:first-child){
-
-    transition: height 2s ease-out, width 2s ease-out, bottom 2s ease-out, left var(--animation-left) ease-out;
+  table tbody tr td:not(:first-child) {
+    transition:
+      height 2s ease-out,
+      width 2s ease-out,
+      bottom 2s ease-out,
+      left var(--animation-left) ease-out;
     transition-delay: calc(var(--row-index) * 0.1s);
   }
 }
 
 #{'.chart--animate:not(.inview)'} {
-
   table tbody tr td:not(:first-child) {
-    --bottom: var(--min-bottom, 0%)!important;
-    --percent: 0%!important;
-    --axis: 0%!important;
-    --comparison: 0%!important;
+    --bottom: var(--min-bottom, 0%) !important;
+    --percent: 0% !important;
+    --axis: 0% !important;
+    --comparison: 0% !important;
   }
 }
 
@@ -1277,10 +1224,8 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 }
 */
 
-
 // #region Animate bar and column chart
 #{'.chart--animate.animating ' + $default-chart} {
-
   table tbody tr td:not(:first-child) {
     overflow: hidden;
   }
@@ -1290,29 +1235,27 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 // #region scatter and line charts
 
 #{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
-
   table tbody tr td:not(:first-child) {
-    --percent: 0%!important;
+    --percent: 0% !important;
   }
 }
 
 #{'.chart--animate.animating ' + $scatter-line-chart} {
-
   .slope path {
     transition: 2s ease-out;
   }
 }
 
-#{'.chart--animate:not(.inview) '+$scatter-line-chart} {
+#{'.chart--animate:not(.inview) ' + $scatter-line-chart} {
   .slope path {
     d: var(--path);
   }
 }
 
-// Line chart 
+// Line chart
 #{'.chart--animate.animating '+$line-chart}
 //#{'.chart--animate '+proportional-chart},
-//#{'.chart--animate '+combo-chart} 
+//#{'.chart--animate '+combo-chart}
 {
   .line path {
     transition: 2s ease-out;
@@ -1321,7 +1264,7 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 
 #{'.chart--animate:not(.inview) '+$line-chart}
 //#{'.chart--animate:not(.inview) '+proportional-chart},
-//#{'.chart--animate:not(.inview) '+combo-chart} 
+//#{'.chart--animate:not(.inview) '+combo-chart}
 {
   .line path {
     d: var(--path);
@@ -1330,14 +1273,14 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 // #endregion
 
 // #region pie charts
-#{'.chart--animate '+$pie-chart} {
+#{'.chart--animate ' + $pie-chart} {
   .pie path {
     transition: calc(2s * var(--second-fraction, 1)) ease-out;
     transition-delay: calc((var(--row-index) * var(--path-index)) * 0.1s);
   }
 }
 
-#{'.chart--animate:not(.inview) '+$pie-chart} {
+#{'.chart--animate:not(.inview) ' + $pie-chart} {
   .pie path {
     transform: scale(60%) !important;
   }
@@ -1351,6 +1294,4 @@ input[type="radio"]:not([value="pie"])[value="stacked"]:checked ~ .chart__wrappe
 */
 // #endregion
 
-
 // #endregion
-