@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/elements/forms.scss

@@ -1,4 +1,4 @@
-@use "../_func" as *;
+@use '../_func' as *;
 
 $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
 
@@ -6,7 +6,6 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 
 // #region RESETS
 
-
 label {
   display: inline-block; // 1
 }
@@ -31,7 +30,6 @@ select {
 //
 // Details at https://github.com/twbs/bootstrap/pull/30562
 
-
 select {
   // Remove the inheritance of word-wrap in Safari.
   // See https://github.com/twbs/bootstrap/issues/24990
@@ -46,7 +44,9 @@ select {
 // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
 // See https://stackoverflow.com/a/54997118
 
-[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
+    [type='time']
+  )::-webkit-calendar-picker-indicator {
   display: none !important;
 }
 
@@ -55,7 +55,6 @@ select {
 // 2. Correct the inability to style clickable types in iOS and Safari.
 // 3. Opinionated: add "hand" cursor to non-disabled button elements.
 
-
 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
 
 ::-moz-focus-inner {
@@ -125,7 +124,7 @@ legend {
 //    be added to `.form-control` as it's not specific enough. For details, see
 //    https://github.com/twbs/bootstrap/issues/11586.
 
-[type="search"] {
+[type='search'] {
   outline-offset: -2px; // 1
   -webkit-appearance: textfield; // 2
 }
@@ -156,7 +155,6 @@ legend {
   padding: 0;
 }
 
-
 // 1. Inherit font family and line height for file input buttons
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
@@ -186,7 +184,6 @@ summary {
   cursor: pointer;
 }
 
-
 // Progress
 //
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@@ -195,7 +192,6 @@ progress {
   vertical-align: baseline;
 }
 
-
 // Hidden attribute
 //
 // Always hide an element with the `hidden` HTML attribute.
@@ -203,7 +199,7 @@ progress {
 // #endregion
 
 // #region Form label
-:is(label:not(.tag),.label) {
+:is(label:not(.tag), .label) {
   font-size: rem(18);
   line-height: rem(21);
   margin-bottom: rem(8);
@@ -214,23 +210,34 @@ progress {
 // #endregion
 
 // #region Optional text
-:is(label:not(.tag),.label) {
-
-  @if $optionalText == "true" {
-    &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
-      content: " (Optional)";
+:is(label:not(.tag), .label) {
+  @if $optionalText == 'true' {
+    &:has(
+        + input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not(
+            [type='file']
+          )
+      ):after {
+      content: ' (Optional)';
     }
   }
 
-  &:has(input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])) .optional-text:before {
-    content: " (Optional)";
+  &:has(
+      input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])
+    )
+    .optional-text:before {
+    content: ' (Optional)';
   }
 }
 
 // #endregion
 
 // #region input field
-:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output,select:not(.select--minimal)) {
+:is(
+  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+  textarea,
+  output,
+  select:not(.select--minimal)
+) {
   display: block;
   width: 100%;
   display: block;
@@ -245,15 +252,19 @@ progress {
   appearance: none; // Fix appearance for date inputs in Safari
   border-radius: rem(8);
   margin-bottom: rem(24);
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+  min-height: calc(
+    var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px
+  );
+  max-height: calc(
+    var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px
+  );
 
   &:is(textarea) {
-    max-height: 100%
+    max-height: 100%;
   }
 
   // Customize the `:focus` state to imitate native WebKit styles.
-  &:is(:focus,.focus):not(:disabled) {
+  &:is(:focus, .focus):not(:disabled) {
     border-color: var(--colour-info);
     outline: 0;
     box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
@@ -264,25 +275,27 @@ progress {
   // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
   &::-webkit-date-and-time-value {
     // Multiply line-height by 1em if it has no unit
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
   }
 
   // Disabled inputs
   &:disabled {
-    background-color: #CCD6D8;
+    background-color: #ccd6d8;
     opacity: 0.4;
     cursor: not-allowed;
   }
 }
 
-:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])){
-
+:is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
   max-width: $input-max-width;
 }
 
 textarea {
   --textarea-height-scale: 3;
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px)!important;
+  min-height: calc(
+    var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) +
+      (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px
+  ) !important;
 }
 // #endregion
 
@@ -300,8 +313,8 @@ legend {
   clear: both;
   display: block;
   float: none;
-  font-size: rem(map-get($heading-sizes,"h4_fs"));
-  line-height: rem(map-get($heading-sizes,"h4_lh"));
+  font-size: rem(map-get($heading-sizes, 'h4_fs'));
+  line-height: rem(map-get($heading-sizes, 'h4_lh'));
   padding-bottom: 0.5rem;
   max-width: var(--content-max-width);
   min-width: 100%;
@@ -315,22 +328,25 @@ div:has(> label:first-child):has(> input) {
   max-width: $input-max-width;
   margin-bottom: rem(24);
 
-
-  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), output, .prefix, .suffix {
-    margin-bottom: 0!important;
+  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+  output,
+  .prefix,
+  .suffix {
+    margin-bottom: 0 !important;
   }
 
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 
-
-  > *:not(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])):not(output):not(.prefix):not(.suffix) {
+  > *:not(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])):not(output):not(
+      .prefix
+    ):not(.suffix) {
     flex-shrink: 0;
     width: 100%;
   }
 
-  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output) {
+  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
     flex-shrink: 1;
     flex-grow: 1;
     width: 0;
@@ -340,44 +356,40 @@ div:has(> label:first-child):has(> input) {
     order: 5;
     margin-top: rem(8);
   }
-
 }
 
 // #region colors
 
-input[type="color"]{
-  width: 3rem!important;
-  flex-shrink: 0!important;
-  flex-grow: 0!important;
-  border-start-end-radius: 0!important;
-  border-end-end-radius: 0!important;
-  padding: 0!important;
+input[type='color'] {
+  width: 3rem !important;
+  flex-shrink: 0 !important;
+  flex-grow: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  padding: 0 !important;
   overflow: hidden;
-  cursor: pointer!important;
-
+  cursor: pointer !important;
 
   &::-moz-color-swatch {
-    
     border-radius: 0;
     border: none;
   }
 
   &::-webkit-color-swatch {
-    
     border-radius: 0;
     border: none;
   }
 }
 
-label :is(div,span,fieldset):has(input[type="color"] + output){
+label :is(div, span, fieldset):has(input[type='color'] + output) {
   display: flex;
 }
 
-input[type="color"] + output {
-  border-left: none!important;
-  border-end-start-radius: 0!important;
-  border-start-start-radius: 0!important;
-  margin: 0!important;
+input[type='color'] + output {
+  border-left: none !important;
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  margin: 0 !important;
 }
 
 output {
@@ -387,7 +399,6 @@ output {
 // #endregion
 
 div:has(> :is(.form-control-sm, .input--sm)) {
-  
   --input-fs: #{rem(14)};
   --input-lh: #{rem(16)};
   --input-padding-block: #{rem(10)};
@@ -400,12 +411,11 @@ div:has(> :is(.form-control-lg, .input--sm)) {
   --input-padding-inline: #{rem(22)};
 }
 
-div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input--inline)) { 
-
+div:has(> label:first-child):has(> input):has(> :is(.form-control-inline, .input--inline)) {
   label {
     flex-shrink: 0;
     white-space: nowrap;
-    width: fit-content!important;
+    width: fit-content !important;
     margin: 0;
     margin-inline-end: 1rem;
   }
@@ -413,17 +423,15 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 // #endregion
 
 // #region readonly
-*:has( > input[readonly]) {
-
+*:has(> input[readonly]) {
   position: relative;
-  
+
   max-width: $input-max-width;
 
-    
-  &:after{
-    font-family: "Font Awesome 6 Pro";
+  &:after {
+    font-family: 'Font Awesome 6 Pro';
     font-weight: 300;
-    content: "\f023";
+    content: '\f023';
     position: absolute;
     font-size: var(--input-lh, #{rem(20)});
     height: var(--input-lh, #{rem(20)});
@@ -442,7 +450,6 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
   pointer-events: none;
 }
 @supports selector(:has(*)) {
-
   :is(.prefix, .suffix) {
     display: inline-block;
     width: auto;
@@ -453,7 +460,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     background-color: var(--colour-primary-theme);
     border: 2px solid var(--colour-primary);
     color: var(--colour-white);
-    margin-top: 0!important;
+    margin-top: 0 !important;
     margin-bottom: 1rem;
     border-end-start-radius: rem(8);
     border-start-start-radius: rem(8);
@@ -463,9 +470,15 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     text-align: center;
     text-overflow: ellipsis;
     position: relative;
-    
-    min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-    max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+
+    min-height: calc(
+      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
+        4px
+    );
+    max-height: calc(
+      var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
+        4px
+    );
     flex-shrink: 0;
 
     &:after {
@@ -473,7 +486,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
       max-width: rem(20);
     }
 
-    &[class*="fa-"] {
+    &[class*='fa-'] {
       width: calc(#{rem(20 + 12 + 12)} + 4px);
       padding-inline: 0;
     }
@@ -499,35 +512,32 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
     select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
     select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
-
       display: block;
     }
 
     select ~ span:after {
-      content: " \f078";
-      font-family: "Font Awesome 6 Pro";
+      content: ' \f078';
+      font-family: 'Font Awesome 6 Pro';
       font-size: 0.8em;
       display: inline-block;
       padding-left: 1em;
     }
 
     select:focus-visible ~ span:after {
-      content: "\f077";
+      content: '\f077';
     }
   }
 
   .prefix {
-    
     border-right: none;
   }
 
   .suffix {
-    
     border-left: none;
     border-end-start-radius: 0;
     border-start-start-radius: 0;
-    border-start-end-radius: rem(8)!important;
-    border-end-end-radius: rem(8)!important;
+    border-start-end-radius: rem(8) !important;
+    border-end-end-radius: rem(8) !important;
     order: 2;
   }
 
@@ -539,94 +549,99 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     }
   }
 
-  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),textarea,output) {
-    
-    border-end-start-radius: 0!important;
-    border-start-start-radius: 0!important;
+  .prefix
+    ~ :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
+    border-end-start-radius: 0 !important;
+    border-start-start-radius: 0 !important;
   }
 
-  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="date"]),textarea,output),
-  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="date"]),textarea,output):has(~ .suffix) {
+  .suffix
+    ~ :is(
+      input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']),
+      textarea,
+      output
+    ),
+  :is(
+      input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']),
+      textarea,
+      output
+    ):has(~ .suffix) {
     order: 1;
-    
-    border-start-end-radius: 0!important;
-    border-end-end-radius: 0!important;
+
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
   }
 }
 
-
-
-
 // #endregion
 
 // #region word counter
 
-:is(input,textarea)[maxlength] + span {
-
+:is(input, textarea)[maxlength] + span {
   position: relative;
 
   &:before {
-    
     counter-reset: variable var(--char-count) var(--maxlength);
     counter-reset: variable2 var(--maxlength);
-    content: attr(data-count) " / " counter(variable2);
+    content: attr(data-count) ' / ' counter(variable2);
     float: right;
-    
+
     margin: 0 0 1em 1em;
   }
 }
 
 // #endregion
 
-
 // #region Form validation
 
-
 .was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid) + label,
 .was-validated label:has(*:not(button):is(:invalid, .is-invalid, [aria-invalid]):not(.is-valid)) {
-
   --colour-check-border: var(--colour-danger);
-  --colour-check-bg: #FCEBEC;
+  --colour-check-bg: #fcebec;
   border-color: var(--colour-danger);
 }
 
-.was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid],:-internal-autofill-selected) {
-
-  border-color: var(--colour-danger)!important;
+.was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
+  border-color: var(--colour-danger) !important;
 }
 
-
-.was-validated select:is(:invalid, .is-invalid, [aria-invalid],:-internal-autofill-selected) {
-
+.was-validated select:is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
   $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
-  background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
-              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top / calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat,
-              escape-svg($icon-error) right var(--input-padding-block, 3.5rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat;
-  padding-right: 6rem!important;
+  background:
+    escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top
+      var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+    linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top /
+      calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem))
+      calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem))
+      no-repeat,
+    escape-svg($icon-error) right var(--input-padding-block, 3.5rem) top var(--input-padding-block, 0.75rem) /
+      var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat;
+  padding-right: 6rem !important;
 }
 
-.was-validated input:is(:invalid, .is-invalid,[aria-invalid],:-internal-autofill-selected) {
-
+.was-validated input:is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
   background-image: escape-svg($icon-error);
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
-  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}))!important;
+  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});
+  padding-right: calc(
+    var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)})
+  ) !important;
 }
 
 .was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
-
   border-color: var(--colour-complete);
 }
 
 .was-validated input:is(:valid, .is-valid):not(:is(:invalid, .is-invalid)) {
-
   background-image: escape-svg($icon-tick);
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
-  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}))!important;
+  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});
+  padding-right: calc(
+    var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)})
+  ) !important;
 }
 
 .invalid-feedback {
@@ -641,8 +656,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 }
 
 // Postcode lookup validation
-iam-address-lookup:has([required]){
-  
+iam-address-lookup:has([required]) {
   --req-display: none;
 }
 
@@ -657,302 +671,278 @@ iam-address-lookup:has([required]){
 
 // Password checker
 .pwd-checker {
-  
   display: block;
-  background-repeat: no-repeat!important;
+  background-repeat: no-repeat !important;
   background-position: left center;
   background-size: 1em 1em;
-  padding-left: 1.5rem!important;
+  padding-left: 1.5rem !important;
 }
 .pwd-checker.invalid-feedback {
   background-image: escape-svg($icon-error);
 }
 
 .pwd-checker:not(.invalid-feedback) {
-  background-image: escape-svg($icon-tick)!important;
+  background-image: escape-svg($icon-tick) !important;
 }
 label:has(.pwd-checker.invalid-feedback):after {
-  display: none!important;
+  display: none !important;
 }
 // #endregion
 
-// #region radio/checkbox field 
+// #region radio/checkbox field
 @supports selector(:has(*)) {
-
-input:is([type="radio"],[type="checkbox"]) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  height: 0;
-  width: 0;
-  margin: 0;
-  pointer-events: none;
-}
-
-:is(div,fieldset,label:not(.tag)):has(> input:is([type="radio"],[type="checkbox"])):not(:has(label input)) {
-  position: relative;
-  margin-bottom: rem(24);
-}
-
-:is(div,fieldset,label:not(.tag)):has( > input[type="radio"]){
-
-  --border-radius: 50%;
-  --outline-width: #{rem(8)};
-}
-
-:is(div,fieldset,label:not(.tag)):has( > input[type="checkbox"]) {
-
-  --border-radius: #{rem(4)};
-  --outline-width: #{rem(4)};
-}
-
-input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)),
-label:not(.tag):has(input:is([type="radio"],[type="checkbox"])):not(:has(> iam-card)){
-
-  --tick-colour: transparent;
-
-  color: var(--colour-heading);
-  position: relative;
-  font-size: rem(16);
-  line-height: rem(20);
-  padding-left: rem(40);
-  padding-top: rem(10);
-  padding-bottom: rem(10);
-  margin-bottom: rem(24);
-  margin-right: rem(24);
-  cursor: pointer;
-
-  &:has(+ span){
-    margin-bottom: 0;
+  input:is([type='radio'], [type='checkbox']) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    margin: 0;
+    pointer-events: none;
   }
 
-  &:has(+ input){
-    margin-bottom: 0;
-  }
-  
-  &:last-child {
-    
-    margin-bottom: 0;
+  :is(div, fieldset, label:not(.tag)):has(> input:is([type='radio'], [type='checkbox'])):not(:has(label input)) {
+    position: relative;
+    margin-bottom: rem(24);
   }
 
-  &:before {
-    content: "";
-    border: 2px solid var(--colour-check-border, var(--colour-primary));
-    background: var(--colour-check-bg, transparent);
-    border-radius: var(--border-radius);
-    height: rem(24);
-    width: rem(24);
-    display: inline-block;
-    position: absolute;
-    top: rem(10 - 2);
-    left: var(--outline-width);
+  :is(div, fieldset, label:not(.tag)):has(> input[type='radio']) {
+    --border-radius: 50%;
+    --outline-width: #{rem(8)};
   }
-  
-  &.btn:before {
-    opacity: 0;
+
+  :is(div, fieldset, label:not(.tag)):has(> input[type='checkbox']) {
+    --border-radius: #{rem(4)};
+    --outline-width: #{rem(4)};
   }
-}
 
+  input:is([type='radio'], [type='checkbox']) + label:not(:has(> iam-card)),
+  label:not(.tag):has(input:is([type='radio'], [type='checkbox'])):not(:has(> iam-card)) {
+    --tick-colour: transparent;
 
-input[type="radio"] + label:not(:has(> iam-card)),
-label:not(.tag):has(input[type="radio"]):not(:has(> iam-card)) {
+    color: var(--colour-heading);
+    position: relative;
+    font-size: rem(16);
+    line-height: rem(20);
+    padding-left: rem(40);
+    padding-top: rem(10);
+    padding-bottom: rem(10);
+    margin-bottom: rem(24);
+    margin-right: rem(24);
+    cursor: pointer;
+
+    &:has(+ span) {
+      margin-bottom: 0;
+    }
 
-  &:after {
-    content: ""!important;
-    background: var(--colour-info);
-    border-radius: var(--border-radius);
-    height: rem(14);
-    width: rem(14);
-    display: none;
-    position: absolute;
-    top: rem(15 - 2);
-    left: calc(#{rem(5)} + var(--outline-width));
-  }
+    &:has(+ input) {
+      margin-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-  &.radio--tick {
     &:before {
-      
-      content: "\f00c";
+      content: '';
+      border: 2px solid var(--colour-check-border, var(--colour-primary));
+      background: var(--colour-check-bg, transparent);
+      border-radius: var(--border-radius);
+      height: rem(24);
+      width: rem(24);
+      display: inline-block;
       position: absolute;
-      font-size: 1.5em;
-      line-height: 1;
-      color: var(--tick-colour);
-      font-family: "Font Awesome 6 Pro";
+      top: rem(10 - 2);
+      left: var(--outline-width);
+    }
 
-      background: none !important;
-      border: none!important;
-      outline: none!important;
-      left: 0.25rem;
+    &.btn:before {
+      opacity: 0;
     }
+  }
+
+  input[type='radio'] + label:not(:has(> iam-card)),
+  label:not(.tag):has(input[type='radio']):not(:has(> iam-card)) {
     &:after {
+      content: '' !important;
+      background: var(--colour-info);
+      border-radius: var(--border-radius);
+      height: rem(14);
+      width: rem(14);
       display: none;
+      position: absolute;
+      top: rem(15 - 2);
+      left: calc(#{rem(5)} + var(--outline-width));
     }
-  }
-}
-
-@media (forced-colors: active) {
 
-  input:is([type="radio"],[type="checkbox"]):not(:checked) + label.radio--tick:not(:has(> iam-card)),
-  label:has(input:is([type="radio"],[type="checkbox"]):not(:checked)).radio--tick:not(:has(> iam-card)) {
+    &.radio--tick {
+      &:before {
+        content: '\f00c';
+        position: absolute;
+        font-size: 1.5em;
+        line-height: 1;
+        color: var(--tick-colour);
+        font-family: 'Font Awesome 6 Pro';
+
+        background: none !important;
+        border: none !important;
+        outline: none !important;
+        left: 0.25rem;
+      }
+      &:after {
+        display: none;
+      }
+    }
+  }
 
-    &:before {
-    
-      display: none;
+  @media (forced-colors: active) {
+    input:is([type='radio'], [type='checkbox']):not(:checked) + label.radio--tick:not(:has(> iam-card)),
+    label:has(input:is([type='radio'], [type='checkbox']):not(:checked)).radio--tick:not(:has(> iam-card)) {
+      &:before {
+        display: none;
+      }
     }
   }
-}
 
-// multiple radio's together
-:is(div,fieldset):has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
-  label:not(.tag):not(:has(> iam-card)) {
-    margin-bottom: 0rem;
+  // multiple radio's together
+  :is(div, fieldset):has(> :is(input[type='radio'], input[type='checkbox']):nth-of-type(2)) {
+    label:not(.tag):not(:has(> iam-card)) {
+      margin-bottom: 0rem;
+    }
   }
-}
 
-input:is([type="radio"],[type="checkbox"]):checked + label,
-label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):checked) {
+  input:is([type='radio'], [type='checkbox']):checked + label,
+  label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked) {
+    --tick-colour: var(--colour-info);
 
-  --tick-colour: var(--colour-info);
+    &:before {
+      border-color: var(--colour-info);
+    }
 
-  &:before {
-    border-color: var(--colour-info);
-  }
+    &:after {
+      display: inline-block;
+    }
 
-  &:after {
-    display: inline-block;
+    iam-card {
+      --colour: var(--colour, var(--colour-info));
+    }
   }
 
-  iam-card {
-    --colour: var(--colour,var(--colour-info));
+  input[type='checkbox']:not([disabled]):checked + label,
+  label:not(.tag):has(input[type='checkbox']:not([disabled]):checked) {
+    &:before {
+      background: var(--colour-info) !important;
+    }
   }
-}
-
-input[type="checkbox"]:not([disabled]):checked + label,
-label:not(.tag):has(input[type="checkbox"]:not([disabled]):checked) {
 
-  &:before {
-    background: var(--colour-info)!important;
+  input[type='checkbox']:checked + label:not(:has(> iam-card)),
+  label:not(.tag):has(input[type='checkbox']:checked) {
+    &:after {
+      content: '\f00c';
+      position: absolute;
+      font-size: 1em;
+      line-height: 1;
+      color: var(--colour-primary-theme);
+      font-family: 'Font Awesome 6 Pro';
+      font-weight: bold;
+      height: rem(24);
+      width: rem(24);
+      line-height: rem(26);
+      background: none !important;
+      border: none !important;
+      outline: none !important;
+      top: rem(10 - 2);
+      left: var(--outline-width);
+      text-align: center;
+    }
   }
-}
 
-input[type="checkbox"]:checked + label:not(:has(> iam-card)),
-label:not(.tag):has(input[type="checkbox"]:checked) {
+  input[type='checkbox']:indeterminate + label,
+  label:not(.tag):has(input[type='checkbox']:indeterminate) {
+    &:before {
+      background: var(--colour-info) !important;
+      border-color: var(--colour-info) !important;
+    }
 
-  &:after {
-    content: "\f00c";
-    position: absolute;
-    font-size: 1em;
-    line-height: 1;
-    color: var(--colour-primary-theme);
-    font-family: "Font Awesome 6 Pro";
-    font-weight: bold;
-    height: rem(24);
-    width: rem(24);
-    line-height: rem(26);
-    background: none !important;
-    border: none!important;
-    outline: none!important;
-    top: rem(10 - 2);
-    left: var(--outline-width);
-    text-align: center;
+    &:after {
+      content: '\f068';
+      position: absolute;
+      font-size: 1em;
+      line-height: 1;
+      color: var(--colour-primary-theme);
+      font-family: 'Font Awesome 6 Pro';
+      font-weight: bold;
+      height: rem(24);
+      width: rem(24);
+      line-height: rem(26);
+      background: none !important;
+      border: none !important;
+      outline: none !important;
+      top: rem(10 - 2);
+      left: var(--outline-width);
+      text-align: center;
+    }
   }
-}
 
-input[type="checkbox"]:indeterminate + label,
-label:not(.tag):has(input[type="checkbox"]:indeterminate) {
-
-  &:before {
-    background: var(--colour-info) !important;
-    border-color: var(--colour-info) !important;
-  }
-  
-  &:after {
-    content: "\f068";
-    position: absolute;
-    font-size: 1em;
-    line-height: 1;
-    color: var(--colour-primary-theme);
-    font-family: "Font Awesome 6 Pro";
-    font-weight: bold;
-    height: rem(24);
-    width: rem(24);
-    line-height: rem(26);
-    background: none !important;
-    border: none!important;
-    outline: none!important;
-    top: rem(10 - 2);
-    left: var(--outline-width);
-    text-align: center;
+  input:is([type='radio'], [type='checkbox']):checked:is(:focus, :hover, .focus) + label,
+  label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked:is(:focus, :hover, .focus)) {
+    --tick-colour: var(--colour-info);
   }
-}
-
-
-input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus) + label,
-label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):checked:is(:focus,:hover,.focus)) {
-
-  --tick-colour: var(--colour-info);
-}
-
-input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label,
-input:is([type="radio"],[type="checkbox"]) + label.hover,
-label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus)) {
 
-  --tick-colour: var(--colour-muted);
+  input:is([type='radio'], [type='checkbox']):is(:focus, :hover, .focus) + label,
+  input:is([type='radio'], [type='checkbox']) + label.hover,
+  label:not(.tag):has(input:is([type='radio'], [type='checkbox']):is(:focus, :hover, .focus)) {
+    --tick-colour: var(--colour-muted);
 
-  &:before {
-    background: var(--colour-check-bg, var(--colour-light));
-    outline: var(--outline-width) solid var(--colour-light);
+    &:before {
+      background: var(--colour-check-bg, var(--colour-light));
+      outline: var(--outline-width) solid var(--colour-light);
+    }
   }
-}
-input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label,
-input:is([type="radio"],[type="checkbox"]) + label.active,
-label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):is(:active,.active)) {
-
-  --tick-colour: var(--colour-light);
+  input:is([type='radio'], [type='checkbox']):is(:active, .active) + label,
+  input:is([type='radio'], [type='checkbox']) + label.active,
+  label:not(.tag):has(input:is([type='radio'], [type='checkbox']):is(:active, .active)) {
+    --tick-colour: var(--colour-light);
 
-  &:before {
-    background: var(--colour-check-bg, #E0E0E0);
-    outline: var(--outline-width) solid #E0E0E0;
+    &:before {
+      background: var(--colour-check-bg, #e0e0e0);
+      outline: var(--outline-width) solid #e0e0e0;
+    }
   }
-}
 
-// Disabled
-input:is([type="radio"],[type="checkbox"]):disabled + label,
-label:not(.tag):has(input:is([type="radio"],[type="checkbox"]):disabled)  {
-
-  opacity: 0.4;
-  cursor: not-allowed;
+  // Disabled
+  input:is([type='radio'], [type='checkbox']):disabled + label,
+  label:not(.tag):has(input:is([type='radio'], [type='checkbox']):disabled) {
+    opacity: 0.4;
+    cursor: not-allowed;
 
-  > iam-card {
-    pointer-events: none;
-  }
+    > iam-card {
+      pointer-events: none;
+    }
 
-  &:before {
-    background-color: none!important;
-    outline: none!important;
-    border-color: var(--colour-primary)!important;
+    &:before {
+      background-color: none !important;
+      outline: none !important;
+      border-color: var(--colour-primary) !important;
+    }
   }
-}
 
-input[type="radio"][disabled]:checked + label,
-label:not(.tag):has(input[type="radio"][disabled]:checked) {
-  
-  &:after {
-    background-color: var(--colour-primary)!important;
+  input[type='radio'][disabled]:checked + label,
+  label:not(.tag):has(input[type='radio'][disabled]:checked) {
+    &:after {
+      background-color: var(--colour-primary) !important;
+    }
   }
-}
-
-input[type="checkbox"][disabled]:checked + label,
-label:not(.tag):has(input[type="checkbox"][disabled]:checked) {
 
-  &:before {
-    background: #E0E0E0!important;
-    border-color: #E0E0E0!important;
+  input[type='checkbox'][disabled]:checked + label,
+  label:not(.tag):has(input[type='checkbox'][disabled]:checked) {
+    &:before {
+      background: #e0e0e0 !important;
+      border-color: #e0e0e0 !important;
+    }
   }
 }
-
-}
 // #endregion
 
 // #region Conditional reveal
@@ -966,11 +956,11 @@ input:checked + label + .conditional {
   clear: both;
 }
 
-input:not([class*="conditional-input-"]):nth-of-type(1):checked ~ .conditional-1,
-input:not([class*="conditional-input-"]):nth-of-type(2):checked ~ .conditional-2,
-input:not([class*="conditional-input-"]):nth-of-type(3):checked ~ .conditional-3,
-input:not([class*="conditional-input-"]):nth-of-type(4):checked ~ .conditional-4,
-input:not([class*="conditional-input-"]):nth-of-type(5):checked ~ .conditional-5,
+input:not([class*='conditional-input-']):nth-of-type(1):checked ~ .conditional-1,
+input:not([class*='conditional-input-']):nth-of-type(2):checked ~ .conditional-2,
+input:not([class*='conditional-input-']):nth-of-type(3):checked ~ .conditional-3,
+input:not([class*='conditional-input-']):nth-of-type(4):checked ~ .conditional-4,
+input:not([class*='conditional-input-']):nth-of-type(5):checked ~ .conditional-5,
 input.conditional-input-1:checked ~ .conditional-1,
 input.conditional-input-2:checked ~ .conditional-2,
 input.conditional-input-3:checked ~ .conditional-3,
@@ -989,7 +979,7 @@ select[multiple]::-webkit-scrollbar {
   width: 0.7rem; // manage scrollbar width here
 }
 select[multiple]::-webkit-scrollbar * {
-  background-color:transparent; // manage scrollbar background color here
+  background-color: transparent; // manage scrollbar background color here
 }
 select[multiple]::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.2);
@@ -1000,24 +990,32 @@ select[multiple]::-webkit-scrollbar-thumb {
 
 // #region Select
 
-
 select {
   $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
-  background: escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
-              linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top / calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem)) calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem)) no-repeat;
-  
-  padding-right: calc(var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem))!important;
-  option {font-size: 1.2em;}
+  background:
+    escape-svg($form-select-indicator-new) right var(--input-padding-block, 0.75rem) top
+      var(--input-padding-block, 0.75rem) / var(--input-lh, 1.25rem) var(--input-lh, 1.25rem) no-repeat,
+    linear-gradient(to left, var(--colour-primary-theme), var(--colour-primary-theme) 100%) right top /
+      calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem))
+      calc(var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.8rem) + var(--input-lh, 1.25rem))
+      no-repeat;
+
+  padding-right: calc(
+    var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-lh, 1.25rem)
+  ) !important;
+  option {
+    font-size: 1.2em;
+  }
 
   box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
-  
+
   max-width: $select-max-width;
 
   &[multiple],
-  &[size]:not([size="1"]) {
+  &[size]:not([size='1']) {
     background: none;
-    max-height: none!important;
+    max-height: none !important;
   }
 
   &:disabled {
@@ -1033,33 +1031,31 @@ select {
   }
 }
 
-div:has(> select){
-
+div:has(> select) {
   margin-bottom: rem(24);
 
   select {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
 }
 
 .select--minimal {
-
   all: unset;
   font-size: inherit;
   line-height: inherit;
   background: none;
   border: 2px solid transparent;
   display: inline-block;
-  padding: 0.4em calc(1em + 0.8ch) 0.4rem var(--select-padding-left, 0.4em)!important;
-  font-weight: normal!important;
-  margin: -0.4em 0!important;
+  padding: 0.4em calc(1em + 0.8ch) 0.4rem var(--select-padding-left, 0.4em) !important;
+  font-weight: normal !important;
+  margin: -0.4em 0 !important;
   border-radius: 0.25em;
 
   color: var(--colour-body);
 
   height: auto;
   cursor: pointer;
-  font-family: var(--font-body)!important;
+  font-family: var(--font-body) !important;
 
   option {
     background-color: var(--colour-canvas);
@@ -1069,73 +1065,66 @@ div:has(> select){
   }
 
   &:hover {
-    
     //border: none;
     background: var(--colour-light);
   }
-  
-  &:is(:focus,.focus):not(:disabled) {
 
+  &:is(:focus, .focus):not(:disabled) {
     border-color: var(--colour-info);
     outline: 0;
     box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
   }
 }
 
-*:has(> .select--minimal){
+*:has(> .select--minimal) {
   position: relative;
-  display: inline-block!important;
-  width: auto!important;
-  font-size: inherit!important;
-  line-height: 1!important;
+  display: inline-block !important;
+  width: auto !important;
+  font-size: inherit !important;
+  line-height: 1 !important;
 
-  padding: 0!important;
-  margin: 0!important;
+  padding: 0 !important;
+  margin: 0 !important;
 
-  font-family: var(--font-body)!important;
+  font-family: var(--font-body) !important;
 
   &:after {
     font-size: 0.8em;
     line-height: 1em;
-    content: "\f078";
-    font-family: "Font Awesome 6 Pro";
+    content: '\f078';
+    font-family: 'Font Awesome 6 Pro';
     position: absolute;
     top: 40%;
-    transform: translate(0,-50%);
+    transform: translate(0, -50%);
     right: calc(0.8ch);
     pointer-events: none;
-    
-  color: var(--colour-body);
 
+    color: var(--colour-body);
   }
 }
 // #endregion
 
 // #region file upload
 iam-fileupload {
-  
   input {
     display: none;
   }
-
 }
 // #endregion
 
-
-// #region label with input field in 
-:is(label:not(.tag), .label):has(:is(input,select)){
-
+// #region label with input field in
+:is(label:not(.tag), .label):has(:is(input, select)) {
   display: block;
   margin-bottom: rem(24);
   max-width: $input-max-width;
 
-  :is(input:not([type="range"]),select,textarea) {
+  :is(input:not([type='range']), select, textarea) {
     margin-top: rem(8);
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
   }
 
-  :is(input,select) ~ span:not(:is(.suffix,.prefix,.invalid-feedback)),
-  span:has(> :is(input,select)) ~ span:not(:is(.suffix,.prefix,.invalid-feedback)) {
+  :is(input, select) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)),
+  span:has(> :is(input, select)) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)) {
     all: initial;
     font-family: var(--font-body);
     color: var(--colour-body);
@@ -1149,23 +1138,22 @@ iam-fileupload {
     line-height: 1.2;
   }
 
-  span:has(:is(input,select)) {
+  span:has(:is(input, select)) {
     display: flex;
     width: 100%;
   }
 
-  :is(.suffix,.prefix):not(.mt-0) {
-    margin: rem(8) 0 0 0!important;
+  :is(.suffix, .prefix):not(.mt-0) {
+    margin: rem(8) 0 0 0 !important;
   }
 }
 
-.was-validated label:has(:is(input:not([type="radio"]):not([type="checkbox"]),select)),
-.was-validated fieldset:has(label input:is([type="radio"],[type="checkbox"]):invalid){
-  
+.was-validated label:has(:is(input:not([type='radio']):not([type='checkbox']), select)),
+.was-validated fieldset:has(label input:is([type='radio'], [type='checkbox']):invalid) {
   margin-bottom: 1.5rem;
 
-  &:has(:is(:invalid,.is-invalid)):after {
-    content: "This field is required";
+  &:has(:is(:invalid, .is-invalid)):after {
+    content: 'This field is required';
     color: var(--colour-danger);
     margin-top: rem(8);
     background-image: escape-svg($icon-error);
@@ -1179,8 +1167,8 @@ iam-fileupload {
     line-height: 1.2;
   }
 
-  &[data-error]:has(:is(:invalid,.is-invalid)):after {
-    content: attr(data-error)!important;
+  &[data-error]:has(:is(:invalid, .is-invalid)):after {
+    content: attr(data-error) !important;
   }
 
   &.error-nowrap:after {
@@ -1191,8 +1179,7 @@ iam-fileupload {
 // #endregion
 
 // #region input range
-input[type="range"] {
-
+input[type='range'] {
   --track-size: #{rem(8)};
   --track-colour: var(--colour-light);
   --thumb-colour: var(--colour-info);
@@ -1209,35 +1196,33 @@ input[type="range"] {
   appearance: none;
 }
 
-*:has(> input[type="range"]) {
+*:has(> input[type='range']) {
   position: relative;
   padding-bottom: 6rem;
   max-width: $input-max-width;
 }
-  
-label input[type=range] {
+
+label input[type='range'] {
   position: absolute;
   top: 1.5rem;
   left: 0;
 }
 
-
-// Track Styles 
-input[type="range"]::-webkit-slider-runnable-track {
-
+// Track Styles
+input[type='range']::-webkit-slider-runnable-track {
   background: var(--track-colour);
   height: var(--track-size);
   border-radius: 0.5rem;
 }
 
-input[type="range"]::-moz-range-track {
+input[type='range']::-moz-range-track {
   background: var(--track-colour);
   height: var(--track-size);
   border-radius: 0.5rem;
 }
 
 // Thumb Styles
-input[type="range"]::-webkit-slider-thumb {
+input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
   margin-top: rem(-8); /* Centers thumb on the track */
@@ -1250,7 +1235,7 @@ input[type="range"]::-webkit-slider-thumb {
   pointer-events: all;
 }
 
-input[type="range"]::-moz-range-thumb {
+input[type='range']::-moz-range-thumb {
   border: none; /*Removes extra border that FF applies*/
   background-color: var(--thumb-colour); /*Removes default border-radius that FF applies*/
   height: var(--thumb-size);
@@ -1261,46 +1246,45 @@ input[type="range"]::-moz-range-thumb {
   pointer-events: all;
 }
 
-// Focus Styles 
-input[type="range"]:focus {
+// Focus Styles
+input[type='range']:focus {
   outline: none;
 }
 
-input[type="range"]:hover::-webkit-slider-thumb,
-input[type="range"]:focus::-webkit-slider-thumb {
-  outline: 0.5rem solid rgba(30, 190, 231, .2);
+input[type='range']:hover::-webkit-slider-thumb,
+input[type='range']:focus::-webkit-slider-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, 0.2);
 }
 
-input[type="range"]:active::-webkit-slider-thumb {
-  outline: 0.5rem solid rgba(30, 190, 231, .4);
+input[type='range']:active::-webkit-slider-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, 0.4);
 }
 
-input[type="range"]:hover::-moz-range-thumb,
-input[type="range"]:focus::-moz-range-thumb {
-  outline: 0.5rem solid rgba(30, 190, 231, .2);
+input[type='range']:hover::-moz-range-thumb,
+input[type='range']:focus::-moz-range-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, 0.2);
 }
-input[type="range"]:focus::-moz-range-thumb {
-  outline: 0.5rem solid rgba(30, 190, 231, .4);
+input[type='range']:focus::-moz-range-thumb {
+  outline: 0.5rem solid rgba(30, 190, 231, 0.4);
 }
 
-
 iam-slider input::-webkit-outer-spin-button,
 iam-slider input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 // #endregion
 
 // #region Date and time fields
-:is(input[type="date"],input[type="time"]) {
+:is(input[type='date'], input[type='time']) {
   position: relative;
   margin-right: -3rem;
   padding-right: 3rem !important;
   background-position: right 4rem center;
   border-radius: 0.5rem !important;
 }
-:is(input[type="date"],input[type="time"])::-webkit-calendar-picker-indicator {
+:is(input[type='date'], input[type='time'])::-webkit-calendar-picker-indicator {
   background: transparent;
   bottom: 0;
   color: transparent;