@iamproperty/components 7.1.0--beta6 → 7.2.0

package/assets/sass/elements/forms.scss

@@ -1,140 +1,149 @@
+@use 'sass:map';
+@use 'sass:math';
+
 @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>");
 
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 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='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
 
-// #region RESETS
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
 
-label {
-  display: inline-block; // 1
-}
+@include layer('elements', $layers) {
+  // #region RESETS
 
-// 1. Remove the margin in Firefox and Safari
+  label {
+    display: inline-block; // 1
+  }
 
-input,
-select,
-optgroup,
-textarea {
-  margin: 0; // 1
-  font-family: inherit;
-  @include font-size(inherit);
-  line-height: inherit;
-}
+  // 1. Remove the margin in Firefox and Safari
 
-// Remove the inheritance of text transform in Firefox
-select {
-  text-transform: none;
-}
-// Set the cursor for non-`<button>` buttons
-//
-// Details at https://github.com/twbs/bootstrap/pull/30562
+  input,
+  select,
+  optgroup,
+  textarea {
+    margin: 0; // 1
+    font-family: inherit;
+    @include font-size(inherit);
+    line-height: inherit;
+  }
 
-select {
-  // Remove the inheritance of word-wrap in Safari.
-  // See https://github.com/twbs/bootstrap/issues/24990
-  word-wrap: normal;
+  // Remove the inheritance of text transform in Firefox
+  select {
+    text-transform: none;
+  }
+  // Set the cursor for non-`<button>` buttons
+  //
+  // 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
+    word-wrap: normal;
 
-  // Undo the opacity change from Chrome
-  &:disabled {
-    opacity: 1;
+    // Undo the opacity change from Chrome
+    &:disabled {
+      opacity: 1;
+    }
   }
-}
 
-// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
-// See https://stackoverflow.com/a/54997118
+  // 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 {
-  display: none !important;
-}
+  [list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not(
+      [type='time']
+    )::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
 
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-//    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-// 3. Opinionated: add "hand" cursor to non-disabled button elements.
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+  //    controls in Android 4.
+  // 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.
+  // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
 
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
+  ::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
 
-// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 
-textarea {
-  resize: vertical; // 1
-}
+  textarea {
+    resize: vertical; // 1
+  }
 
-// 1. Browsers set a default `min-width: min-content;` on fieldsets,
-//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-//    So we reset that to ensure fieldsets behave more like a standard block element.
-//    See https://github.com/twbs/bootstrap/issues/12359
-//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
-
-fieldset {
-  min-width: 0; // 1
-  padding: 0; // 2
-  margin: 0; // 2
-  border: 0; // 2
-}
+  // 1. Browsers set a default `min-width: min-content;` on fieldsets,
+  //    unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  //    So we reset that to ensure fieldsets behave more like a standard block element.
+  //    See https://github.com/twbs/bootstrap/issues/12359
+  //    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
+
+  fieldset {
+    min-width: 0; // 1
+    padding: 0; // 2
+    margin: 0; // 2
+    border: 0; // 2
+  }
 
-// 1. By using `float: left`, the legend will behave like a block element.
-//    This way the border of a fieldset wraps around the legend if present.
-// 2. Fix wrapping bug.
-//    See https://github.com/twbs/bootstrap/issues/29712
+  // 1. By using `float: left`, the legend will behave like a block element.
+  //    This way the border of a fieldset wraps around the legend if present.
+  // 2. Fix wrapping bug.
+  //    See https://github.com/twbs/bootstrap/issues/29712
 
-legend {
-  float: left; // 1
-  width: 100%;
-  padding: 0;
-  margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
-  font-weight: $legend-font-weight;
-  line-height: inherit;
+  legend {
+    float: left; // 1
+    width: 100%;
+    padding: 0;
+    margin-bottom: $legend-margin-bottom;
+    @include font-size($legend-font-size);
+    font-weight: $legend-font-weight;
+    line-height: inherit;
 
-  + * {
-    clear: left; // 2
+    + * {
+      clear: left; // 2
+    }
   }
-}
 
-// Fix height of inputs with a type of datetime-local, date, month, week, or time
-// See https://github.com/twbs/bootstrap/issues/18842
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
+  // Fix height of inputs with a type of datetime-local, date, month, week, or time
+  // See https://github.com/twbs/bootstrap/issues/18842
+
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
 
-::-webkit-inner-spin-button {
-  height: auto;
-}
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
 
-// 1. Correct the outline style in Safari.
-// 2. This overrides the extra rounded corners on search inputs in iOS so that our
-//    `.form-control` class can properly style them. Note that this cannot simply
-//    be added to `.form-control` as it's not specific enough. For details, see
-//    https://github.com/twbs/bootstrap/issues/11586.
+  // 1. Correct the outline style in Safari.
+  // 2. This overrides the extra rounded corners on search inputs in iOS so that our
+  //    `.form-control` class can properly style them. Note that this cannot simply
+  //    be added to `.form-control` as it's not specific enough. For details, see
+  //    https://github.com/twbs/bootstrap/issues/11586.
 
-[type='search'] {
-  outline-offset: -2px; // 1
-  -webkit-appearance: textfield; // 2
-}
+  [type='search'] {
+    outline-offset: -2px; // 1
+    -webkit-appearance: textfield; // 2
+  }
 
-// 1. A few input types should stay LTR
-// See https://rtlstyling.com/posts/rtl-styling#form-inputs
-// 2. RTL only output
-// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+  // 1. A few input types should stay LTR
+  // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
 
-/* rtl:raw:
+  /* rtl:raw:
 [type="tel"],
 [type="url"],
 [type="email"],
@@ -143,1158 +152,1163 @@ legend {
 }
 */
 
-// Remove the inner padding in Chrome and Safari on macOS.
+  // Remove the inner padding in Chrome and Safari on macOS.
 
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 
-// Remove padding around color pickers in webkit browsers
+  // Remove padding around color pickers in webkit browsers
 
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
+  ::-webkit-color-swatch-wrapper {
+    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.
+  // 1. Inherit font family and line height for file input buttons
+  // 2. Correct the inability to style clickable types in iOS and Safari.
 
-::file-selector-button {
-  font: inherit; // 1
-  -webkit-appearance: button; // 2
-}
+  ::file-selector-button {
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
+  }
 
-// Correct element displays
+  // Correct element displays
 
-output {
-  display: inline-block;
-}
+  output {
+    display: inline-block;
+  }
 
-// Remove border from iframe
+  // Remove border from iframe
 
-iframe {
-  border: 0;
-}
+  iframe {
+    border: 0;
+  }
 
-// Summary
-//
-// 1. Add the correct display in all browsers
+  // Summary
+  //
+  // 1. Add the correct display in all browsers
 
-summary {
-  display: list-item; // 1
-  cursor: pointer;
-}
+  summary {
+    display: list-item; // 1
+    cursor: pointer;
+  }
 
-// Progress
-//
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  // Progress
+  //
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
 
-progress {
-  vertical-align: baseline;
-}
+  progress {
+    vertical-align: baseline;
+  }
 
-// Hidden attribute
-//
-// Always hide an element with the `hidden` HTML attribute.
+  // Hidden attribute
+  //
+  // Always hide an element with the `hidden` HTML attribute.
 
-// #endregion
+  // #endregion
 
-// #region Form label
-:is(label:not(.tag), .label) {
-  font-size: rem(18);
-  line-height: rem(21);
-  margin-bottom: rem(8);
-  font-weight: normal;
-  color: var(--colour-heading);
-  display: block;
-}
-// #endregion
+  // #region Form label
+  :is(label:not(.tag), .label) {
+    font-size: rem(18);
+    line-height: rem(21);
+    margin-bottom: rem(8);
+    font-weight: normal;
+    color: var(--colour-heading);
+    display: block;
+  }
+  // #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)';
+      }
+    }
 
-// #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(
+        input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not(
             [type='file']
           )
-      ):after {
+      )
+      .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)
-) {
-  display: block;
-  width: 100%;
-  display: block;
-  width: 100%;
-  padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
-  font-size: var(--input-fs, #{rem(16)});
-  line-height: var(--input-lh, #{rem(20)});
-  color: var(--colour-body);
-  background-color: var(--colour-canvas-2);
-  background-clip: padding-box;
-  border: 2px solid var(--colour-primary);
-  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
-  );
-
-  &:is(textarea) {
-    max-height: 100%;
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  &: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);
-  }
-
-  // Add some height to date inputs on iOS
-  // https://github.com/twbs/bootstrap/issues/23307
-  // 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);
-  }
-
-  // Disabled inputs
-  &:disabled {
-    background-color: #ccd6d8;
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
+  // #endregion
 
-:is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
-  max-width: $input-max-width;
-}
+  // #region input field
+  :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;
+    width: 100%;
+    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-inline, #{rem(16)});
+    font-size: var(--input-fs, #{rem(16)});
+    line-height: var(--input-lh, #{rem(20)});
+    color: var(--colour-body);
+    background-color: var(--colour-canvas-2);
+    background-clip: padding-box;
+    border: 2px solid var(--colour-primary);
+    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
+    );
 
-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;
-}
-// #endregion
+    &:is(textarea) {
+      max-height: 100%;
+    }
 
-// #region legend
-fieldset {
-  width: 100%;
-}
-legend {
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
-  margin: 0;
-  clear: both;
-  display: block;
-  float: none;
-  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%;
-}
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &: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);
+    }
 
-// #endregion
+    // Add some height to date inputs on iOS
+    // https://github.com/twbs/bootstrap/issues/23307
+    // 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(math.unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+    }
 
-// #region wrappers
-div:has(> label:first-child):has(> input) {
-  position: relative;
-  max-width: $input-max-width;
-  margin-bottom: rem(24);
+    // Disabled inputs
+    &:disabled {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
 
-  input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
-  output,
-  .prefix,
-  .suffix {
-    margin-bottom: 0 !important;
+  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])) {
+    max-width: $input-max-width;
   }
 
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  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;
+  }
+  // #endregion
 
-  > *:not(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range'])):not(output):not(
-      .prefix
-    ):not(.suffix) {
-    flex-shrink: 0;
+  // #region legend
+  fieldset {
     width: 100%;
   }
-
-  :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
-    flex-shrink: 1;
-    flex-grow: 1;
-    width: 0;
+  legend {
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
+    margin: 0;
+    clear: both;
+    display: block;
+    float: none;
+    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%;
   }
 
-  input ~ *:not(output) {
-    order: 5;
-    margin-top: rem(8);
-  }
-}
+  // #endregion
+
+  // #region wrappers
+  div:has(> label:first-child):has(> input) {
+    position: relative;
+    max-width: $input-max-width;
+    margin-bottom: rem(24);
 
-// #region colors
+    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
+    output,
+    .prefix,
+    .suffix {
+      margin-bottom: 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;
+    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) {
+      flex-shrink: 0;
+      width: 100%;
+    }
 
-  &::-moz-color-swatch {
-    border-radius: 0;
-    border: none;
-  }
+    :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
+      flex-shrink: 1;
+      flex-grow: 1;
+      width: 0;
+    }
 
-  &::-webkit-color-swatch {
-    border-radius: 0;
-    border: none;
+    input ~ *:not(output) {
+      order: 5;
+      margin-top: rem(8);
+    }
   }
-}
 
-label :is(div, span, fieldset):has(input[type='color'] + output) {
-  display: flex;
-}
+  // #region colors
 
-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'] {
+    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;
 
-output {
-  margin-top: 0.5rem !important;
-  margin-bottom: 0 !important;
-}
-// #endregion
+    &::-moz-color-swatch {
+      border-radius: 0;
+      border: none;
+    }
 
-div:has(> :is(.form-control-sm, .input--sm)) {
-  --input-fs: #{rem(14)};
-  --input-lh: #{rem(16)};
-  --input-padding-block: #{rem(10)};
-  --input-padding-inline: #{rem(14)};
-}
-div:has(> :is(.form-control-lg, .input--sm)) {
-  --input-fs: #{rem(24)};
-  --input-lh: #{rem(29)};
-  --input-padding-block: #{rem(20)};
-  --input-padding-inline: #{rem(22)};
-}
+    &::-webkit-color-swatch {
+      border-radius: 0;
+      border: none;
+    }
+  }
 
-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;
-    margin: 0;
-    margin-inline-end: 1rem;
+  label :is(div, span, fieldset):has(input[type='color'] + output) {
+    display: flex;
   }
-}
-// #endregion
 
-// #region readonly
-*:has(> input[readonly]) {
-  position: relative;
+  input[type='color'] + output {
+    border-left: none !important;
+    border-end-start-radius: 0 !important;
+    border-start-start-radius: 0 !important;
+    margin: 0 !important;
+  }
 
-  max-width: $input-max-width;
+  output {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0 !important;
+  }
+  // #endregion
 
-  &:after {
-    font-family: 'Font Awesome 6 Pro';
-    font-weight: 300;
-    content: '\f023';
-    position: absolute;
-    font-size: var(--input-lh, #{rem(20)});
-    height: var(--input-lh, #{rem(20)});
-    width: var(--input-lh, #{rem(20)});
-    bottom: calc(var(--input-padding-block, #{rem(12)}) + 2px);
-    right: calc(var(--input-padding-block, #{rem(16)}) + 2px);
-    text-align: center;
+  div:has(> :is(.form-control-sm, .input--sm)) {
+    --input-fs: #{rem(14)};
+    --input-lh: #{rem(16)};
+    --input-padding-block: #{rem(10)};
+    --input-padding-inline: #{rem(14)};
+  }
+  div:has(> :is(.form-control-lg, .input--sm)) {
+    --input-fs: #{rem(24)};
+    --input-lh: #{rem(29)};
+    --input-padding-block: #{rem(20)};
+    --input-padding-inline: #{rem(22)};
   }
-}
 
-// #endregion
+  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;
+      margin: 0;
+      margin-inline-end: 1rem;
+    }
+  }
+  // #endregion
 
-// #region prefix
-:is(.prefix, .suffix) {
-  display: none;
-  pointer-events: none;
-}
-@supports selector(:has(*)) {
-  :is(.prefix, .suffix) {
-    display: inline-block;
-    width: auto;
-    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
-    font-size: var(--input-fs, #{rem(16)});
-    line-height: var(--input-lh, #{rem(20)});
-    color: var(--colour-body);
-    background-color: var(--colour-primary-theme);
-    border: 2px solid var(--colour-primary);
-    color: var(--colour-white);
-    margin-top: 0 !important;
-    margin-bottom: 1rem;
-    border-end-start-radius: rem(8);
-    border-start-start-radius: rem(8);
-    min-width: calc(#{rem(20 + 12 + 12)} + 4px);
-    overflow: hidden;
-    white-space: nowrap;
-    text-align: center;
-    text-overflow: ellipsis;
+  // #region readonly
+  *:has(> input[readonly]) {
     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
-    );
-    flex-shrink: 0;
+    max-width: $input-max-width;
 
     &:after {
+      font-family: 'Font Awesome 6 Pro';
+      font-weight: 300;
+      content: '\f023';
+      position: absolute;
+      font-size: var(--input-lh, #{rem(20)});
+      height: var(--input-lh, #{rem(20)});
+      width: var(--input-lh, #{rem(20)});
+      bottom: calc(var(--input-padding-block, #{rem(12)}) + 2px);
+      right: calc(var(--input-padding-block, #{rem(16)}) + 2px);
+      text-align: center;
+    }
+  }
+
+  // #endregion
+
+  // #region prefix
+  :is(.prefix, .suffix) {
+    display: none;
+    pointer-events: none;
+  }
+  @supports selector(:has(*)) {
+    :is(.prefix, .suffix) {
       display: inline-block;
-      max-width: rem(20);
+      width: auto;
+      padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
+      font-size: var(--input-fs, #{rem(16)});
+      line-height: var(--input-lh, #{rem(20)});
+      color: var(--colour-body);
+      background-color: var(--colour-primary-theme);
+      border: 2px solid var(--colour-primary);
+      color: var(--colour-white);
+      margin-top: 0 !important;
+      margin-bottom: 1rem;
+      border-end-start-radius: rem(8);
+      border-start-start-radius: rem(8);
+      min-width: calc(#{rem(20 + 12 + 12)} + 4px);
+      overflow: hidden;
+      white-space: nowrap;
+      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
+      );
+      flex-shrink: 0;
+
+      &:after {
+        display: inline-block;
+        max-width: rem(20);
+      }
+
+      &[class*='fa-'] {
+        width: calc(#{rem(20 + 12 + 12)} + 4px);
+        padding-inline: 0;
+      }
+
+      select {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      span {
+        display: none;
+      }
+
+      select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+      select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+      select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+      select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+      select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+      select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+      select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+      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';
+        font-size: 0.8em;
+        display: inline-block;
+        padding-left: 1em;
+      }
+
+      select:focus-visible ~ span:after {
+        content: '\f077';
+      }
     }
 
-    &[class*='fa-'] {
-      width: calc(#{rem(20 + 12 + 12)} + 4px);
-      padding-inline: 0;
+    .prefix {
+      border-right: none;
     }
 
-    select {
-      position: absolute;
-      inset: 0;
-      opacity: 0;
-      cursor: pointer;
+    .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;
+      order: 2;
     }
 
-    span {
+    .prefix span {
       display: none;
-    }
 
-    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
-    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
-    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
-    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
-    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
-    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
-    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
-    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;
+      small {
+        font-size: 0.8em;
+      }
     }
 
-    select ~ span:after {
-      content: ' \f078';
-      font-family: 'Font Awesome 6 Pro';
-      font-size: 0.8em;
-      display: inline-block;
-      padding-left: 1em;
+    .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;
     }
 
-    select:focus-visible ~ span:after {
-      content: '\f077';
+    .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;
     }
   }
 
-  .prefix {
-    border-right: none;
-  }
+  // #endregion
 
-  .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;
-    order: 2;
-  }
+  // #region word counter
 
-  .prefix span {
-    display: none;
+  :is(input, textarea)[maxlength] + span {
+    position: relative;
 
-    small {
-      font-size: 0.8em;
+    &:before {
+      counter-reset: variable var(--char-count) var(--maxlength);
+      counter-reset: variable2 var(--maxlength);
+      content: attr(data-count) ' / ' counter(variable2);
+      float: right;
+
+      margin: 0 0 1em 1em;
     }
   }
 
-  .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;
-  }
+  // #endregion
 
-  .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;
+  // #region Form validation
 
-    border-start-end-radius: 0 !important;
-    border-end-end-radius: 0 !important;
+  .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;
+    border-color: var(--colour-danger);
   }
-}
-
-// #endregion
-
-// #region word counter
 
-: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);
-    float: right;
+  .was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
+    border-color: var(--colour-danger) !important;
+  }
 
-    margin: 0 0 1em 1em;
+  .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;
   }
-}
 
-// #endregion
+  .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;
+  }
 
-// #region Form validation
+  .was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
+    border-color: var(--colour-complete);
+  }
 
-.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;
-  border-color: var(--colour-danger);
-}
+  .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;
+  }
 
-.was-validated *:not(button):is(:invalid, .is-invalid, [aria-invalid], :-internal-autofill-selected) {
-  border-color: var(--colour-danger) !important;
-}
+  .invalid-feedback {
+    color: var(--colour-danger);
+    margin-top: rem(8);
+    background-image: escape-svg($icon-error);
+    background-repeat: no-repeat;
+    background-position: left top 1px;
+    background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
+    padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+    display: none;
+  }
 
-.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;
-}
+  // Postcode lookup validation
+  iam-address-lookup:has([required]) {
+    --req-display: none;
+  }
 
-.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;
-}
+  .was-validated :is(:invalid, .is-invalid) ~ .invalid-feedback {
+    display: block;
+  }
 
-.was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
-  border-color: var(--colour-complete);
-}
+  .was-validated iam-address-lookup:has([required]:invalid) {
+    --error-border: var(--colour-danger);
+    --error-display: block;
+  }
 
-.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;
-}
+  // Password checker
+  .pwd-checker {
+    display: block;
+    background-repeat: no-repeat !important;
+    background-position: left center;
+    background-size: 1em 1em;
+    padding-left: 1.5rem !important;
+  }
+  .pwd-checker.invalid-feedback {
+    background-image: escape-svg($icon-error);
+  }
 
-.invalid-feedback {
-  color: var(--colour-danger);
-  margin-top: rem(8);
-  background-image: escape-svg($icon-error);
-  background-repeat: no-repeat;
-  background-position: left top 1px;
-  background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
-  padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
-  display: none;
-}
+  .pwd-checker:not(.invalid-feedback) {
+    background-image: escape-svg($icon-tick) !important;
+  }
+  label:has(.pwd-checker.invalid-feedback):after {
+    display: none !important;
+  }
+  // #endregion
 
-// Postcode lookup validation
-iam-address-lookup:has([required]) {
-  --req-display: none;
-}
+  // #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;
+    }
 
-.was-validated :is(:invalid, .is-invalid) ~ .invalid-feedback {
-  display: block;
-}
+    :is(div, fieldset, label:not(.tag)):has(> input:is([type='radio'], [type='checkbox'])):not(:has(label input)) {
+      position: relative;
+      margin-bottom: rem(24);
+    }
 
-.was-validated iam-address-lookup:has([required]:invalid) {
-  --error-border: var(--colour-danger);
-  --error-display: block;
-}
+    :is(div, fieldset, label:not(.tag)):has(> input[type='radio']) {
+      --border-radius: 50%;
+      --outline-width: #{rem(8)};
+    }
 
-// Password checker
-.pwd-checker {
-  display: block;
-  background-repeat: no-repeat !important;
-  background-position: left center;
-  background-size: 1em 1em;
-  padding-left: 1.5rem !important;
-}
-.pwd-checker.invalid-feedback {
-  background-image: escape-svg($icon-error);
-}
+    :is(div, fieldset, label:not(.tag)):has(> input[type='checkbox']) {
+      --border-radius: #{rem(4)};
+      --outline-width: #{rem(4)};
+    }
 
-.pwd-checker:not(.invalid-feedback) {
-  background-image: escape-svg($icon-tick) !important;
-}
-label:has(.pwd-checker.invalid-feedback):after {
-  display: none !important;
-}
-// #endregion
+    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;
 
-// #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;
-  }
+      &:has(+ span) {
+        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);
-  }
+      &:has(+ input) {
+        margin-bottom: 0;
+      }
 
-  :is(div, fieldset, label:not(.tag)):has(> input[type='radio']) {
-    --border-radius: 50%;
-    --outline-width: #{rem(8)};
-  }
+      &:last-child {
+        margin-bottom: 0;
+      }
 
-  :is(div, fieldset, label:not(.tag)):has(> input[type='checkbox']) {
-    --border-radius: #{rem(4)};
-    --outline-width: #{rem(4)};
-  }
+      &: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);
+      }
 
-  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;
+      &.btn:before {
+        opacity: 0;
+      }
+    }
 
-    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;
+    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));
+      }
 
-    &:has(+ span) {
-      margin-bottom: 0;
+      &.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;
+        }
+      }
     }
 
-    &:has(+ input) {
-      margin-bottom: 0;
+    @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;
+        }
+      }
     }
 
-    &:last-child {
-      margin-bottom: 0;
+    // 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;
+      }
     }
 
-    &: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);
-    }
+    input:is([type='radio'], [type='checkbox']):checked + label,
+    label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked) {
+      --tick-colour: var(--colour-info);
 
-    &.btn:before {
-      opacity: 0;
-    }
-  }
+      &:before {
+        border-color: var(--colour-info);
+      }
 
-  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));
+      &:after {
+        display: inline-block;
+      }
+
+      iam-card {
+        --colour: var(--colour, var(--colour-info));
+      }
     }
 
-    &.radio--tick {
+    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: 1.5em;
+        font-size: 1em;
         line-height: 1;
-        color: var(--tick-colour);
+        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;
-        left: 0.25rem;
-      }
-      &:after {
-        display: none;
+        top: rem(10 - 2);
+        left: var(--outline-width);
+        text-align: center;
       }
     }
-  }
 
-  @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)) {
+    input[type='checkbox']:indeterminate + label,
+    label:not(.tag):has(input[type='checkbox']:indeterminate) {
       &:before {
-        display: none;
+        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;
       }
     }
-  }
 
-  // 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: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 + label,
-  label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked) {
-    --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);
 
-    &:before {
-      border-color: var(--colour-info);
+      &: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);
 
-    &:after {
-      display: inline-block;
+      &:before {
+        background: var(--colour-check-bg, #e0e0e0);
+        outline: var(--outline-width) solid #e0e0e0;
+      }
     }
 
-    iam-card {
-      --colour: var(--colour, var(--colour-info));
-    }
-  }
+    // 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;
 
-  input[type='checkbox']:not([disabled]):checked + label,
-  label:not(.tag):has(input[type='checkbox']:not([disabled]):checked) {
-    &:before {
-      background: var(--colour-info) !important;
-    }
-  }
+      > iam-card {
+        pointer-events: none;
+      }
 
-  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;
+      &:before {
+        background-color: none !important;
+        outline: none !important;
+        border-color: var(--colour-primary) !important;
+      }
     }
-  }
 
-  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;
+    input[type='radio'][disabled]:checked + label,
+    label:not(.tag):has(input[type='radio'][disabled]:checked) {
+      &:after {
+        background-color: var(--colour-primary) !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[type='checkbox'][disabled]:checked + label,
+    label:not(.tag):has(input[type='checkbox'][disabled]:checked) {
+      &:before {
+        background: #e0e0e0 !important;
+        border-color: #e0e0e0 !important;
+      }
     }
   }
+  // #endregion
 
-  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);
+  // #region Conditional reveal
+  .conditional {
+    display: none;
   }
 
-  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:checked + .conditional,
+  input:checked + label + .conditional {
+    display: block;
+    clear: both;
+  }
 
-    &:before {
-      background: var(--colour-check-bg, var(--colour-light));
-      outline: var(--outline-width) solid var(--colour-light);
-    }
+  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,
+  input.conditional-input-4:checked ~ .conditional-4,
+  input.conditional-input-5:checked ~ .conditional-5 {
+    display: block;
+    clear: both;
   }
-  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);
+  // #endregion
 
-    &:before {
-      background: var(--colour-check-bg, #e0e0e0);
-      outline: var(--outline-width) solid #e0e0e0;
-    }
+  // #region Multi-select
+  select[multiple] {
+    border-radius: 0.35rem;
+  }
+  select[multiple]::-webkit-scrollbar {
+    width: 0.7rem; // manage scrollbar width here
+  }
+  select[multiple]::-webkit-scrollbar * {
+    background-color: transparent; // manage scrollbar background color here
   }
+  select[multiple]::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    //background-color:#000000!important; // manage scrollbar thumb background color here
+    border-radius: 0.35rem;
+  }
+  // #endregion
 
-  // 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;
+  // #region Select
 
-    > iam-card {
-      pointer-events: none;
+  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;
     }
 
-    &:before {
-      background-color: none !important;
-      outline: none !important;
-      border-color: var(--colour-primary) !important;
+    box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
+
+    max-width: $select-max-width;
+
+    &[multiple],
+    &[size]:not([size='1']) {
+      background: none;
+      max-height: none !important;
     }
-  }
 
-  input[type='radio'][disabled]:checked + label,
-  label:not(.tag):has(input[type='radio'][disabled]:checked) {
-    &:after {
-      background-color: var(--colour-primary) !important;
+    &:disabled {
+      color: $form-select-disabled-color;
+      background-color: $form-select-disabled-bg;
+      border-color: $form-select-disabled-border-color;
     }
-  }
 
-  input[type='checkbox'][disabled]:checked + label,
-  label:not(.tag):has(input[type='checkbox'][disabled]:checked) {
-    &:before {
-      background: #e0e0e0 !important;
-      border-color: #e0e0e0 !important;
+    // Remove outline from select box in FF
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 $form-select-color;
     }
   }
-}
-// #endregion
 
-// #region Conditional reveal
-.conditional {
-  display: none;
-}
+  div:has(> select) {
+    margin-bottom: rem(24);
 
-input:checked + .conditional,
-input:checked + label + .conditional {
-  display: block;
-  clear: both;
-}
+    select {
+      margin-bottom: 0 !important;
+    }
+  }
 
-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,
-input.conditional-input-4:checked ~ .conditional-4,
-input.conditional-input-5:checked ~ .conditional-5 {
-  display: block;
-  clear: both;
-}
-// #endregion
+  .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;
+    border-radius: 0.25em;
 
-// #region Multi-select
-select[multiple] {
-  border-radius: 0.35rem;
-}
-select[multiple]::-webkit-scrollbar {
-  width: 0.7rem; // manage scrollbar width here
-}
-select[multiple]::-webkit-scrollbar * {
-  background-color: transparent; // manage scrollbar background color here
-}
-select[multiple]::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
-  //background-color:#000000!important; // manage scrollbar thumb background color here
-  border-radius: 0.35rem;
-}
-// #endregion
+    color: var(--colour-body);
 
-// #region Select
+    height: auto;
+    cursor: pointer;
+    font-family: var(--font-body) !important;
 
-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;
+    option {
+      background-color: var(--colour-canvas);
+      padding-left: 1em;
+      font-size: inherit;
+      line-height: inherit;
+    }
 
-  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;
+    &:hover {
+      //border: none;
+      background: var(--colour-light);
+    }
 
-  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;
+    &: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);
+    }
   }
 
-  box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
+  *:has(> .select--minimal) {
+    position: relative;
+    display: inline-block !important;
+    width: auto !important;
+    font-size: inherit !important;
+    line-height: 1 !important;
 
-  max-width: $select-max-width;
+    padding: 0 !important;
+    margin: 0 !important;
 
-  &[multiple],
-  &[size]:not([size='1']) {
-    background: none;
-    max-height: none !important;
-  }
+    font-family: var(--font-body) !important;
+
+    &:after {
+      font-size: 0.8em;
+      line-height: 1em;
+      content: '\f078';
+      font-family: 'Font Awesome 6 Pro';
+      position: absolute;
+      top: 40%;
+      transform: translate(0, -50%);
+      right: calc(0.8ch);
+      pointer-events: none;
 
-  &:disabled {
-    color: $form-select-disabled-color;
-    background-color: $form-select-disabled-bg;
-    border-color: $form-select-disabled-border-color;
+      color: var(--colour-body);
+    }
   }
+  // #endregion
 
-  // Remove outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $form-select-color;
+  // #region file upload
+  iam-fileupload {
+    input {
+      display: none;
+    }
   }
-}
+  // #endregion
 
-div:has(> select) {
-  margin-bottom: rem(24);
+  // #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;
 
-  select {
-    margin-bottom: 0 !important;
-  }
-}
+    :is(input:not([type='range']), select, textarea) {
+      margin-top: rem(8);
+      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;
-  border-radius: 0.25em;
-
-  color: var(--colour-body);
-
-  height: auto;
-  cursor: pointer;
-  font-family: var(--font-body) !important;
-
-  option {
-    background-color: var(--colour-canvas);
-    padding-left: 1em;
-    font-size: inherit;
-    line-height: inherit;
-  }
+    :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);
+      margin-top: rem(8);
+      display: block;
+      line-height: 1.2;
+    }
+    .invalid-feedback {
+      font-size: 1rem;
+      font-weight: normal;
+      line-height: 1.2;
+    }
 
-  &:hover {
-    //border: none;
-    background: var(--colour-light);
-  }
+    span:has(:is(input, select)) {
+      display: flex;
+      width: 100%;
+    }
 
-  &: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);
+    :is(.suffix, .prefix):not(.mt-0) {
+      margin: rem(8) 0 0 0 !important;
+    }
   }
-}
 
-*:has(> .select--minimal) {
-  position: relative;
-  display: inline-block !important;
-  width: auto !important;
-  font-size: inherit !important;
-  line-height: 1 !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) {
+    margin-bottom: 1.5rem;
+
+    &: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);
+      background-repeat: no-repeat;
+      background-position: left top 1px;
+      background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
+      padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+      display: block;
+      width: 100%;
+      font-size: 1rem;
+      line-height: 1.2;
+    }
 
-  padding: 0 !important;
-  margin: 0 !important;
+    &[data-error]:has(:is(:invalid, .is-invalid)):after {
+      content: attr(data-error) !important;
+    }
 
-  font-family: var(--font-body) !important;
+    &.error-nowrap:after {
+      white-space: nowrap;
+    }
+  }
 
-  &:after {
-    font-size: 0.8em;
-    line-height: 1em;
-    content: '\f078';
-    font-family: 'Font Awesome 6 Pro';
-    position: absolute;
-    top: 40%;
-    transform: translate(0, -50%);
-    right: calc(0.8ch);
-    pointer-events: none;
+  // #endregion
 
-    color: var(--colour-body);
+  // #region input range
+  input[type='range'] {
+    --track-size: #{rem(8)};
+    --track-colour: var(--colour-light);
+    --thumb-colour: var(--colour-info);
+    --thumb-size: #{rem(24)};
+    width: 100%;
+    background: transparent;
+    cursor: pointer;
+    margin-top: rem(32);
+    margin-bottom: rem(32);
+    height: rem(32);
+    border-radius: 50%;
+    accent-color: var(--thumb-colour);
+    -webkit-appearance: none;
+    appearance: none;
   }
-}
-// #endregion
 
-// #region file upload
-iam-fileupload {
-  input {
-    display: none;
+  *:has(> input[type='range']) {
+    position: relative;
+    padding-bottom: 6rem;
+    max-width: $input-max-width;
   }
-}
-// #endregion
 
-// #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) {
-    margin-top: rem(8);
-    margin-bottom: 0 !important;
+  label input[type='range'] {
+    position: absolute;
+    top: 1.5rem;
+    left: 0;
   }
 
-  :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);
-    margin-top: rem(8);
-    display: block;
-    line-height: 1.2;
-  }
-  .invalid-feedback {
-    font-size: 1rem;
-    font-weight: normal;
-    line-height: 1.2;
+  // Track Styles
+  input[type='range']::-webkit-slider-runnable-track {
+    background: var(--track-colour);
+    height: var(--track-size);
+    border-radius: 0.5rem;
   }
 
-  span:has(:is(input, select)) {
-    display: flex;
-    width: 100%;
+  input[type='range']::-moz-range-track {
+    background: var(--track-colour);
+    height: var(--track-size);
+    border-radius: 0.5rem;
   }
 
-  :is(.suffix, .prefix):not(.mt-0) {
-    margin: rem(8) 0 0 0 !important;
+  // Thumb Styles
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    margin-top: rem(-8); /* Centers thumb on the track */
+    background-color: var(--thumb-colour);
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    border-radius: 50%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
   }
-}
-
-.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';
-    color: var(--colour-danger);
-    margin-top: rem(8);
-    background-image: escape-svg($icon-error);
-    background-repeat: no-repeat;
-    background-position: left top 1px;
-    background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
-    padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
-    display: block;
-    width: 100%;
-    font-size: 1rem;
-    line-height: 1.2;
+  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);
+    width: var(--thumb-size);
+    border-radius: 50%;
+    position: relative;
+    z-index: 99;
+    pointer-events: all;
   }
 
-  &[data-error]:has(:is(:invalid, .is-invalid)):after {
-    content: attr(data-error) !important;
+  // Focus Styles
+  input[type='range']:focus {
+    outline: none;
   }
 
-  &.error-nowrap:after {
-    white-space: nowrap;
+  input[type='range']:hover::-webkit-slider-thumb,
+  input[type='range']:focus::-webkit-slider-thumb {
+    outline: 0.5rem solid rgba(30, 190, 231, 0.2);
   }
-}
-
-// #endregion
-
-// #region input range
-input[type='range'] {
-  --track-size: #{rem(8)};
-  --track-colour: var(--colour-light);
-  --thumb-colour: var(--colour-info);
-  --thumb-size: #{rem(24)};
-  width: 100%;
-  background: transparent;
-  cursor: pointer;
-  margin-top: rem(32);
-  margin-bottom: rem(32);
-  height: rem(32);
-  border-radius: 50%;
-  accent-color: var(--thumb-colour);
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-*:has(> input[type='range']) {
-  position: relative;
-  padding-bottom: 6rem;
-  max-width: $input-max-width;
-}
 
-label input[type='range'] {
-  position: absolute;
-  top: 1.5rem;
-  left: 0;
-}
-
-// 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 {
-  background: var(--track-colour);
-  height: var(--track-size);
-  border-radius: 0.5rem;
-}
-
-// Thumb Styles
-input[type='range']::-webkit-slider-thumb {
-  -webkit-appearance: none; /* Override default look */
-  appearance: none;
-  margin-top: rem(-8); /* Centers thumb on the track */
-  background-color: var(--thumb-colour);
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 99;
-  pointer-events: all;
-}
-
-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);
-  width: var(--thumb-size);
-  border-radius: 50%;
-  position: relative;
-  z-index: 99;
-  pointer-events: all;
-}
-
-// 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, 0.2);
-}
-
-input[type='range']:active::-webkit-slider-thumb {
-  outline: 0.5rem solid rgba(30, 190, 231, 0.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, 0.2);
-}
-input[type='range']:focus::-moz-range-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, 0.2);
+  }
+  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;
-}
+  iam-slider input::-webkit-outer-spin-button,
+  iam-slider input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
-// #endregion
+  // #endregion
 
-// #region Date and time fields
-: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 {
-  background: transparent;
-  bottom: 0;
-  color: transparent;
-  cursor: pointer;
-  height: auto;
-  left: 8em;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: auto;
-  order: 3;
+  // #region Date and time fields
+  :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 {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 8em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+    order: 3;
+  }
+  // #endregion
 }
-// #endregion