@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

package/assets/sass/elements/forms.scss

@@ -1,1338 +1,1337 @@
-@use 'sass:map';
-@use 'sass:math';
-
-@use '../_func' as *;
-
-@use './label' as *;
-@use './input' as *;
-@use './textarea' 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>");
-
-@layer elements {
-  // #region RESETS
-
-
-  // 1. Remove the margin in Firefox and Safari
-  select,
-  optgroup {
-    margin: 0; // 1
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  // 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;
-    }
-  }
-
-  
-  // 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
-  }
-
-  // Correct element displays
-
-  output {
-    display: inline-block;
-  }
-
-  // Remove border from iframe
-
-  iframe {
-    border: 0;
-  }
-
-  // Summary
-  //
-  // 1. Add the correct display in all browsers
-
-  summary {
-    display: list-item; // 1
-    cursor: pointer;
-  }
-
-  // Progress
-  //
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  // Hidden attribute
-  //
-  // Always hide an element with the `hidden` HTML attribute.
-
-  // #endregion
-
-  // #region input field
-  :is(select:not(.select--minimal, .btn)) {
-    
-    display: block;
-    width: 100%;
-    display: block;
-    width: 100%;
-    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
-    font-size: var(--input-fs, 1rem);
-    line-height: var(--input-lh, 1.25rem);
-    color: var(--colour-heading);
-    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: 0.5rem;
-    margin-bottom: 1.5rem;
-    min-height: calc(
-      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
-        4px
-    );
-    max-height: calc(
-      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
-        4px
-    );
-
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    &:is(:focus, .focus):not(:disabled) {
-      border-color: var(--colour-info);
-      outline: 0;
-    }
-
-    &:is(:focus, .focus):not(:disabled):not(:invalid) {
-      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
-    }
-    
-    // Disabled inputs
-    &:disabled {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-  }
-
-  [disabled] :is(
-    select:not(.select--minimal, .btn)
-  ) {
-      background-color: #ccd6d8;
-      opacity: 0.4;
-      cursor: not-allowed;
-      pointer-events: none;
-  }
-
-  [disabled] label {
-
-      cursor: not-allowed;
-      pointer-events: none;
-  }
-  // #endregion
-
-  // #region legend
-  fieldset {
-    width: 100%;
-    position: relative;
-  }
-  legend {
-    font-family: var(--font-heading);
-    font-style: normal;
-    font-weight: var(--heading-weight);
-    line-height: 2rem;
-    color: var(--colour-heading);
-    margin: 0;
-    clear: both;
-    display: block;
-    float: none;
-    font-size: var(--h4-fs);
-    line-height: var(--heading-lh);
-    padding-bottom: 0.5rem;
-    max-width: var(--content-max-width);
-    min-width: 100%;
-  }
-
-  // #endregion
-
-  // #region wrappers
-  div:has(> label:first-child):has(> input) {
-    position: relative;
-    max-width: var(--input-max-width);
-    margin-bottom: 1.5rem;
-
-    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) {
-      flex-shrink: 0;
-      width: 100%;
-    }
-
-    :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), output) {
-      flex-shrink: 1;
-      flex-grow: 1;
-      width: 0;
-    }
-
-    input ~ *:not(output) {
-      order: 5;
-      margin-top: 0.5rem;
-    }
-  }
-
-
-  *:has(> :is(.form-control-sm, .input--sm)) {
-    --input-fs: 0.875rem; /* 14/16 */
-    --input-lh: 1rem;
-    --input-padding-block: #{0.625rem};
-    --input-padding-inline: 0.875rem; /* 14/16 */
-  }
-  *:has(> :is(.form-control-lg, .input--lg)) {
-    --input-fs: 1.5rem;
-    --input-lh: 1.8125rem; /* 29 */ 
-    --input-padding-block: 1.25rem;
-    --input-padding-inline: 1.375rem; /* 22 */ 
-  }
-
-  *: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 readonly
-  *:has(> input[readonly]) {
-    position: relative;
-
-    max-width: var(--input-max-width);
-
-    &:after {
-      font-family: 'Font Awesome 7 Pro';
-      font-weight: 300;
-      content: '\f023';
-      position: absolute;
-      font-size: var(--input-lh, 1.25rem);
-      height: var(--input-lh, 1.25rem);
-      width: var(--input-lh, 1.25rem);
-      bottom: calc(var(--input-padding-block, 0.75rem) + 2px);
-      right: calc(var(--input-padding-block, 1rem) + 2px);
-      text-align: center;
-    }
-  }
-
-  // #endregion
-
-  // #region prefix
-  
-  @supports selector(:has(*)) {
-    
-    
-
-    .suffix
-      ~ :is(
-        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
-            [type='time']
-          ),
-        output
-      ),
-    :is(
-      input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
-          [type='time']
-        ),
-      output
-    ):has(~ .suffix) {
-      order: 1;
-
-      border-start-end-radius: 0 !important;
-      border-end-end-radius: 0 !important;
-    }
-
-    :is(
-        input
-      ):has(~ iam-password-indicator) {
-      border-start-end-radius: 0 !important;
-      border-end-end-radius: 0 !important;
-    }
-  }
-
-  // #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;
-    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 select:not(.btn):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:
-      var(--icon-select) 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,
-      var(--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) {
-    background-image: var(--icon-error);
-    background-repeat: no-repeat;
-    background-position: right var(--input-padding-inline, 1rem) center;
-    background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
-    padding-right: calc(
-      var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)
-    ) !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: var(--icon-tick);
-    background-repeat: no-repeat;
-    background-position: right var(--input-padding-inline, 1rem) center;
-    background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
-    padding-right: calc(
-      var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)
-    ) !important;
-  }
-
-  .invalid-feedback {
-    color: var(--colour-danger);
-    margin-top: 0.5rem;
-    background-image: var(--icon-error);
-    background-repeat: no-repeat;
-    background-position: left top 1px;
-    background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
-    padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
-    display: none;
-  }
-
-  // Postcode lookup validation
-  iam-address-lookup:has([required]) {
-    --req-display: none;
-  }
-
-  .was-validated :is(:invalid, .is-invalid) ~ .invalid-feedback {
-    display: block;
-  }
-
-  .was-validated iam-address-lookup:has([required]:invalid) {
-    --error-border: var(--colour-danger);
-    --error-bg: #{var(--icon-error)};
-    --error-display: block;
-    --error-hide: 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;
-    }
-
-    :is(div, fieldset, label:not(.tag)):has(> input:is([type='radio'], [type='checkbox'])):not(:has(label input)) {
-      position: relative;
-      margin-bottom: 1.5rem;
-    }
-
-    :is(div, fieldset, label:not(.tag)):has(> input[type='radio']) {
-      --border-radius: 50%;
-      --outline-width: 0.5rem;
-    }
-
-    :is(div, fieldset, label:not(.tag)):has(> input[type='checkbox']) {
-      --border-radius: 0.25rem;
-      --outline-width: 0.25rem;
-    }
-
-    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: 1rem;
-      line-height: 1.25rem;
-      padding-left: 2.5rem;
-      padding-top: 0.625rem; /* 10 */
-      padding-bottom: 0.625rem; /* 10 */
-      margin-bottom: 1.5rem;
-      margin-right: 1.5rem;
-      cursor: pointer;
-
-      &:has(+ span) {
-        margin-bottom: 0;
-      }
-
-      &:has(+ input) {
-        margin-bottom: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &:before {
-        content: '';
-        border: 2px solid var(--colour-check-border, var(--colour-primary));
-        background: var(--colour-check-bg, transparent);
-        border-radius: var(--border-radius);
-        height: var(--radio-size, 1.5rem);
-        width: var(--radio-size, 1.5rem);
-        display: inline-block;
-        position: absolute;
-        top: 0.5rem;
-        left: var(--outline-width);
-      }
-
-      &.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: 0.875rem; /* 14/16 */
-        width: 0.875rem; /* 14/16 */
-
-        height: var(--radio-inner-size, 0.875rem);
-        width: var(--radio-inner-size, 0.875rem);
-
-        display: none;
-        position: absolute;
-        top: var(--radio-inner-top, 0.8125rem);
-        left: var(--radio-inner-left, calc(0.3125rem + var(--outline-width)));
-      }
-
-      &.radio--tick {
-        &:before {
-          content: '\f00c';
-          position: absolute;
-          font-size: 1.5em;
-          line-height: 1;
-          color: var(--tick-colour);
-          font-family: 'Font Awesome 7 Pro';
-
-          background: none !important;
-          border: none !important;
-          outline: none !important;
-          left: 0.25rem;
-        }
-        &:after {
-          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;
-      }
-    }
-
-    fieldset:has(label > input:is([type="radio"],[type="checkbox"])){
-
-      label {
-        margin-bottom: 0!important;
-      }
-
-      margin-bottom: 1.5rem;
-    }
-
-    input:is([type='radio'], [type='checkbox']):checked + label,
-    label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked) {
-      --tick-colour: var(--colour-info);
-
-      &:before {
-        border-color: var(--colour-info);
-      }
-
-      &:after {
-        display: inline-block;
-      }
-
-      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']:checked + label:not(:has(> iam-card)),
-    label:not(.tag):has(input[type='checkbox']:checked) {
-      &:after {
-        content: '\f00c';
-        position: absolute;
-        font-size: var(--checkbox-tick-size, 1em);
-        line-height: 1;
-        color: var(--colour-primary-theme);
-        font-family: 'Font Awesome 7 Pro';
-        font-weight: bold;
-        height: var(--checkbox-inner-size, 1.5rem);
-        width: var(--checkbox-inner-size, 1.5rem);
-        line-height: 1.625rem; /* 26 */
-        background: none !important;
-        border: none !important;
-        outline: none !important;
-        top: var(--checkbox-inner-top, 0.5rem);
-        left: var(--checkbox-inner-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: var(--checkbox-tick-size, 1em);
-        line-height: 1;
-        color: var(--colour-primary-theme);
-        font-family: 'Font Awesome 7 Pro';
-        font-weight: bold;
-        height: var(--checkbox-inner-size, 1.5rem);
-        width: var(--checkbox-inner-size, 1.5rem);
-        line-height: 1.625rem; /* 26 */
-        background: none !important;
-        border: none !important;
-        outline: none !important;
-        top: var(--checkbox-inner-top, 0.5rem);
-        left: var(--checkbox-inner-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']):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, light-dark(var(--colour-light), #444444));
-        outline: var(--outline-width) solid light-dark(var(--colour-light), #444444);
-      }
-    }
-    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;
-      }
-    }
-
-    // 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;
-      }
-
-      &: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='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
-  .conditional {
-    display: none;
-  }
-
-  input:checked + .conditional,
-  input:checked + label + .conditional,
-  label:has(:checked) + .conditional,
-  .was-validated .conditional:has(input[required]:invalid),
-  .was-validated .conditional:focus-within {
-    display: block;
-    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.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,
-  label:has(input.conditional-input-1:checked) ~ .conditional-1,
-  label:has(input.conditional-input-2:checked) ~ .conditional-2,
-  label:has(input.conditional-input-3:checked) ~ .conditional-3,
-  label:has(input.conditional-input-4:checked) ~ .conditional-4,
-  label:has(input.conditional-input-5:checked) ~ .conditional-5 {
-    display: block;
-    clear: both;
-  }
-  // #endregion
-
-  // #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
-
-  // #region Select
-
-  select:not(.select--minimal, .btn) {
-    $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:
-      var(--icon-select) 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,
-      linear-gradient(to right, var(--colour-canvas-2), var(--colour-canvas-2));
-
-    padding-right: calc(
-      var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem) + var(--input-lh, 1.25rem)
-    ) !important;
-    option {
-      font-size: 1.2em;
-    }
-
-    box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
-
-    max-width: var(--select-max-width);
-
-    &[multiple],
-    &[size]:not([size='1']) {
-      background: none;
-      max-height: none !important;
-    }
-
-    &:disabled {
-
-      background-color: gray;
-      border-color: black;
-    }
-
-    // Remove outline from select box in FF
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 inherit;
-    }
-  }
-
-  div:has(> select) {
-    margin-bottom: 1.5rem;
-
-    select {
-      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;
-    }
-
-    &:hover {
-      //border: none;
-      background: var(--colour-light);
-    }
-
-    &: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) {
-    position: relative;
-    display: inline-block !important;
-    width: auto !important;
-    font-size: inherit !important;
-    line-height: 1 !important;
-
-    padding: 0 !important;
-    margin: 0 !important;
-
-    font-family: var(--font-body) !important;
-
-    &:after {
-      font-size: 0.8em;
-      line-height: 1em;
-      content: '\f078';
-      font-family: 'Font Awesome 7 Pro';
-      position: absolute;
-      top: 40%;
-      transform: translate(0, -50%);
-      right: calc(0.8ch);
-      pointer-events: none;
-
-      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, textarea)) {
-    display: block;
-    margin-bottom: 1.5rem;
-    max-width: var(--input-max-width);
-
-    :is(input:not([type='range']), select) {
-      margin-top: 0.5rem;
-      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)),
-    .hint-text {
-      all: initial;
-      font-family: var(--font-body);
-      color: var(--colour-body);
-      margin-top: 0.5rem;
-      display: block;
-      line-height: 1.2;
-    }
-    .invalid-feedback {
-      font-size: 1rem;
-      font-weight: normal;
-      line-height: 1.2;
-    }
-
-    span:has(:is(input, select)) {
-      display: flex;
-      width: 100%;
-    }
-
-    :is(.suffix, .prefix):not(.mt-0) {
-      margin: 0.5rem 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) {
-    margin-bottom: 1.5rem;
-
-    &:has(:is(:invalid, .is-invalid)):after {
-      content: 'This field is required';
-      color: var(--colour-danger);
-      margin-top: 0.5rem;
-      background-image: var(--icon-error);
-      background-repeat: no-repeat;
-      background-position: left top 1px;
-      background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
-      padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
-      display: block;
-      width: 100%;
-      font-size: 1rem;
-      line-height: 1.2;
-    }
-
-    &[data-error]:has(:is(:invalid, .is-invalid)):after {
-      content: attr(data-error) !important;
-    }
-
-    &.error-nowrap:after {
-      white-space: nowrap;
-    }
-  }
-
-  // #endregion
-
-  // #region input range
-  input[type='range'] {
-    --track-size: 0.5rem;
-    --track-colour: var(--colour-light);
-    --thumb-colour: var(--colour-info);
-    --thumb-size: 1.5rem;
-    width: 100%;
-    background: transparent;
-    cursor: pointer;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    accent-color: var(--thumb-colour);
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  *:has(> input[type='range']) {
-    position: relative;
-    padding-bottom: 6rem;
-    max-width: var(--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: -0.5rem; /* 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']: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;
-  }
-
-  // #endregion
-
-  // #region Date and time fields
-  :is(input[type='date'],input[type='datetime-local'],input[type='year'],input[type='month'],input[type='week'], input[type='time']) {
-    position: relative;
-    margin-right: -3rem;
-    padding-right: 3rem !important;
-    background-position: right 4rem center;
-    border-radius: 0.5rem !important;
-  }
-  ::-webkit-calendar-picker-indicator {
-    background: transparent;
-    bottom: 0;
-    color: transparent;
-    cursor: pointer;
-    height: auto;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: auto;
-    order: 3;
-    z-index: 98;
-  }
-  ::-webkit-datetime-edit {
-    position: relative;
-    z-index: 99;
-    max-width: fit-content;
-  }
-  // #endregion
-}
-
-// #region datalist
-:is(iam-advanced-select, iam-search, .postcode-lookup) {
-  position: relative;
-  display: block;
-
-  label {
-    position: relative;
-  }
-
-  input {
-    padding-right: 3rem;
-  }
-
-  .empty {
-    position: absolute;
-    bottom: 0.5rem;
-    right: 3.5rem;
-    margin: 0;
-    aspect-ratio: 1 / 1;
-
-    width: 2rem;
-    height: 2rem;
-
-    text-align: center;
-    line-height: 1;
-
-    &:not(:hover, :focus) {
-      border-color: transparent;
-      background-color: transparent;
-    }
-
-    i {
-      font-size: 1.2rem;
-    }
-  }
-  
-  &:has([name="postcode"][disabled]) .empty{
-
-    display: none;
-  }
-
-  &:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .empty {
-    display: none;
-  }
-
-  label:after,
-  .hint-text {
-    position: absolute;
-    top: 100%;
-  }
-
-  label[for="use"]:after {
-    top: var(--checkbox-inner-top, 0.5rem);
-  }
-}
-
-.was-validated :is(iam-advanced-select, iam-search, postcode-lookup) label:has(:is(input:not([type='radio']):not([type='checkbox']), select)),
-:is(iam-advanced-select, iam-search, postcode-lookup).was-validated label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
-  margin-bottom: 2.5rem;
-
-  input {
-    background: none !important;
-  }
-
-  &:has(:invalid, .is-invalid) .hint-text {
-    display: none;
-  }
-}
-
-
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup) datalist {
-  
-  &:empty {
-    display: none !important;
-  }
-
-  z-index: 100;
-  top: 100%;
-  position: absolute;
-  background-color: var(--colour-canvas);
-  border-top: none;
-
-  &:not(:empty):has(option:not(.hide)){
-
-    padding: 0.5rem;
-  }
-
-
-  max-height: 25rem;
-  overflow-y: auto;
-  width: 100%;
-  max-width: var(--input-max-width, 50rem);
-  border: none !important;
-  border-radius: 0.5rem;
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-  display: none;
-
-  option {
-    background-color: var(--colour-canvas);
-    padding: 0.5rem;
-    
-    cursor: pointer;
-    background: unset !important;
-    border: unset !important;
-    color: var(--colour-primary) !important;
-    font-weight: inherit !important;
-    font-family: inherit !important;
-    font-size: 1rem !important;
-    line-height: 1.5rem !important;
-    margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
-    padding-block: var(--menu-item-padding, 0.25rem) !important;
-    width: 100% !important;
-    max-width: 100% !important;
-    text-align: var(--menu-item-text-align, left) !important;
-
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    white-space: normal;
-    text-overflow: ellipsis;
-    overflow: clip;
-
-    &:is(:hover, :focus) {
-      background: var(--colour-light) !important;
-      color: #595959 !important;
-      border-radius: 0.25rem !important;
-    }
-
-    &:active {
-      background: rgba(224, 224, 224, 1) !important;
-      border-radius: 0.25rem !important;
-    }
-
-    &.active {
-      border-left: 4px solid var(--colour-info) !important;
-      border-radius: 0.25rem !important;
-      background: hsl(from var(--colour-info) h s l / 10%) !important;
-    }
-  }
-}
-
-.dark-theme :is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup) datalist {
-
-  color-scheme: dark;
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not(.light-theme) :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
-
-    --colour-heading: var(--colour-primary-theme);
-    --colour-body: var(--colour-primary-theme);
-    color: var(--colour-primary-theme);
-
-    // Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten
-    > * {
-      color-scheme: light;
-    }
-  }
-
-  html:not(.light-theme) .bg-light {
-
-    color-scheme: light;
-  }
-}
-
-
-
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active),:active) datalist {
-
-  display: block;
-
-  &:empty {
-    display: block !important;
-  }
-}
-
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper {
-
-  top: 100%;
-  position: absolute;
-  border-radius: 0.5rem;
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-  width: 100% !important;
-  //max-width: var(--menu-item-width, 50rem) !important;
-  z-index: 100;
-  display: none;
-  max-height: 25rem;
-  overflow-y: auto;
-  
-  max-width: var(--input-max-width) !important;
-
-  > datalist {
-    border: none!important;
-    box-shadow: none!important;
-    position: relative;
-    display: block!important;
-    border-radius: 0!important;
-    max-height: 100%!important;
-  }
-
-  &:focus {
-    outline: none!important;
-  }
-}
-
-iam-address-lookup [slot="preloadedList"]{
-  border: none!important;
-  box-shadow: none!important;
-  position: relative;
-  display: block!important;
-  border-radius: 0!important;
-  max-height: 100%!important;
-
-  &.noresults {
-    display: block !important;
-  }
-
-  &.noresults:before {
-    content: "No addresses found";
-    background-color: white;
-    padding: 1rem 0.5rem;
-    color: var(--colour-primary) !important;
-    font-weight: inherit !important;
-    font-family: inherit !important;
-    font-size: 1rem !important;
-    line-height: 1.1875rem !important;
-    padding-block: var(--menu-item-padding, 1rem) !important;
-    display: block;
-  }
-}
-
-
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist:not(:empty)),
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist.loading),
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist.noresults),
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper:hover {
-
-  display: block;
-}
-
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper:has(datalist.noresults){
-  datalist {
-
-    display: block;
-
-    &:before {
-      content: "No addresses found";
-      background-color: white;
-      padding: 0.5rem;
-      color: var(--colour-primary) !important;
-      font-weight: inherit !important;
-      font-family: inherit !important;
-      font-size: 1rem !important;
-      line-height: 1.1875rem !important;
-      padding-block: var(--menu-item-padding, 0.5rem) !important;
-      display: block;
-    }
-  }
-}
-
-:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(option:active)) .datalist__wrapper:has(datalist.loading) {
-
-  datalist {
-
-    height: 5rem;
-
-    &:before {
-      content: "\f021";
-      font-family: "Font Awesome 7 Pro";
-      font-size: 1.75rem;
-      font-weight: 300;
-      display: block;
-      position: absolute;
-      top: calc(50% - 1rem);
-      left: calc(50% - 1rem);
-      /*transform: translate(-50%,-50%);*/
-
-      animation-name: spin;
-      animation-duration: 4000ms;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-  }
-}
-
-@-ms-keyframes spin {
-    from { -ms-transform: rotate(0deg); }
-    to { -ms-transform: rotate(360deg); }
-}
-@-moz-keyframes spin {
-    from { -moz-transform: rotate(0deg); }
-    to { -moz-transform: rotate(360deg); }
-}
-@-webkit-keyframes spin {
-    from { -webkit-transform: rotate(0deg); }
-    to { -webkit-transform: rotate(360deg); }
-}
-@keyframes spin {
-    from {
-        transform:rotate(0deg);
-    }
-    to {
-        transform:rotate(360deg);
-    }
-}
-
-:is(iam-advanced-select, iam-search, .postcode-lookup) {
-
-  [name="beforeList"] {
-    display: none;
-  }
-
-  [name="beforeList"]:has(+ .show-welsh-banner) {
-    display: block;
-  }
-  .datalist__wrapper.show-welsh-banner [name="beforeList"] {
-    display: block;
-  }
-}
-// #endregion
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+@use './label' as *;
+@use './input' as *;
+@use './textarea' 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>");
+
+@layer elements {
+  /* #region RESETS */
+
+
+  /*  1. Remove the margin in Firefox and Safari */
+  select,
+  optgroup {
+    margin: 0; /*  1 */
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  /*  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;
+    }
+  }
+
+  
+  /*  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 */
+  }
+
+  /*  Correct element displays */
+
+  output {
+    display: inline-block;
+  }
+
+  /*  Remove border from iframe */
+
+  iframe {
+    border: 0;
+  }
+
+  /*  Summary */
+  /*  */
+  /*  1. Add the correct display in all browsers */
+
+  summary {
+    display: list-item; /*  1 */
+    cursor: pointer;
+  }
+
+  /*  Progress */
+  /*  */
+  /*  Add the correct vertical alignment in Chrome, Firefox, and Opera. */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*  Hidden attribute */
+  /*  */
+  /*  Always hide an element with the `hidden` HTML attribute. */
+
+  /* #endregion */
+
+  /* #region input field */
+  :is(select:not(.select--minimal, .btn)) {
+    
+    display: block;
+    width: 100%;
+    display: block;
+    width: 100%;
+    padding: var(--input-padding-block, 0.75rem) var(--input-padding-inline, 1rem);
+    font-size: var(--input-fs, 1rem);
+    line-height: var(--input-lh, 1.25rem);
+    color: var(--colour-heading);
+    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: 0.5rem;
+    margin-bottom: 1.5rem;
+    min-height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+    max-height: calc(
+      var(--input-padding-block, 0.75rem) + var(--input-padding-block, 0.75rem) + var(--input-lh, 1.25rem) +
+        4px
+    );
+
+
+    /*  Customize the `:focus` state to imitate native WebKit styles. */
+    &:is(:focus, .focus):not(:disabled) {
+      border-color: var(--colour-info);
+      outline: 0;
+    }
+
+    &:is(:focus, .focus):not(:disabled):not(:invalid) {
+      box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
+    }
+    
+    /*  Disabled inputs */
+    &:disabled {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  [disabled] :is(
+    select:not(.select--minimal, .btn)
+  ) {
+      background-color: #ccd6d8;
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+
+  [disabled] label {
+
+      cursor: not-allowed;
+      pointer-events: none;
+  }
+  /* #endregion */
+
+  /* #region legend */
+  fieldset {
+    width: 100%;
+    position: relative;
+  }
+  legend {
+    font-family: var(--font-heading);
+    font-style: normal;
+    font-weight: var(--heading-weight);
+    line-height: 2rem;
+    color: var(--colour-heading);
+    margin: 0;
+    clear: both;
+    display: block;
+    float: none;
+    font-size: var(--h4-fs);
+    line-height: var(--heading-lh);
+    padding-bottom: 0.5rem;
+    max-width: var(--content-max-width);
+    min-width: 100%;
+  }
+
+  /* #endregion */
+
+  /* #region wrappers */
+  div:has(> label:first-child):has(> input) {
+    position: relative;
+    max-width: var(--input-max-width);
+    margin-bottom: 1.5rem;
+
+    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) {
+      flex-shrink: 0;
+      width: 100%;
+    }
+
+    :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), output) {
+      flex-shrink: 1;
+      flex-grow: 1;
+      width: 0;
+    }
+
+    input ~ *:not(output) {
+      order: 5;
+      margin-top: 0.5rem;
+    }
+  }
+
+
+  *:has(> :is(.form-control-sm, .input--sm)) {
+    --input-fs: 0.875rem; /* 14/16 */
+    --input-lh: 1rem;
+    --input-padding-block: #{0.625rem};
+    --input-padding-inline: 0.875rem; /* 14/16 */
+  }
+  *:has(> :is(.form-control-lg, .input--lg)) {
+    --input-fs: 1.5rem;
+    --input-lh: 1.8125rem; /* 29 */ 
+    --input-padding-block: 1.25rem;
+    --input-padding-inline: 1.375rem; /* 22 */ 
+  }
+
+  *: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 readonly */
+  *:has(> input[readonly]) {
+    position: relative;
+
+    max-width: var(--input-max-width);
+
+    &:after {
+      font-family: 'Font Awesome 7 Pro';
+      font-weight: 300;
+      content: '\f023';
+      position: absolute;
+      font-size: var(--input-lh, 1.25rem);
+      height: var(--input-lh, 1.25rem);
+      width: var(--input-lh, 1.25rem);
+      bottom: calc(var(--input-padding-block, 0.75rem) + 2px);
+      right: calc(var(--input-padding-block, 1rem) + 2px);
+      text-align: center;
+    }
+  }
+
+  /* #endregion */
+
+  /* #region prefix */
+  
+  @supports selector(:has(*)) {
+    
+    
+
+    .suffix
+      ~ :is(
+        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
+            [type='time']
+          ),
+        output
+      ),
+    :is(
+      input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
+          [type='time']
+        ),
+      output
+    ):has(~ .suffix) {
+      order: 1;
+
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
+    }
+
+    :is(
+        input
+      ):has(~ iam-password-indicator) {
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
+    }
+  }
+
+  /* #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;
+    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 select:not(.btn):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:
+      var(--icon-select) 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,
+      var(--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) {
+    background-image: var(--icon-error);
+    background-repeat: no-repeat;
+    background-position: right var(--input-padding-inline, 1rem) center;
+    background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
+    padding-right: calc(
+      var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)
+    ) !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: var(--icon-tick);
+    background-repeat: no-repeat;
+    background-position: right var(--input-padding-inline, 1rem) center;
+    background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
+    padding-right: calc(
+      var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)
+    ) !important;
+  }
+
+  .invalid-feedback {
+    color: var(--colour-danger);
+    margin-top: 0.5rem;
+    background-image: var(--icon-error);
+    background-repeat: no-repeat;
+    background-position: left top 1px;
+    background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
+    padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
+    display: none;
+  }
+
+  /*  Postcode lookup validation */
+  iam-address-lookup:has([required]) {
+    --req-display: none;
+  }
+
+  .was-validated :is(:invalid, .is-invalid) ~ .invalid-feedback {
+    display: block;
+  }
+
+  .was-validated iam-address-lookup:has([required]:invalid) {
+    --error-border: var(--colour-danger);
+    --error-bg: #{var(--icon-error)};
+    --error-display: block;
+    --error-hide: 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;
+    }
+
+    :is(div, fieldset, label:not(.tag)):has(> input:is([type='radio'], [type='checkbox'])):not(:has(label input)) {
+      position: relative;
+      margin-bottom: 1.5rem;
+    }
+
+    :is(div, fieldset, label:not(.tag)):has(> input[type='radio']) {
+      --border-radius: 50%;
+      --outline-width: 0.5rem;
+    }
+
+    :is(div, fieldset, label:not(.tag)):has(> input[type='checkbox']) {
+      --border-radius: 0.25rem;
+      --outline-width: 0.25rem;
+    }
+
+    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: 1rem;
+      line-height: 1.25rem;
+      padding-left: 2.5rem;
+      padding-top: 0.625rem; /* 10 */
+      padding-bottom: 0.625rem; /* 10 */
+      margin-bottom: 1.5rem;
+      margin-right: 1.5rem;
+      cursor: pointer;
+
+      &:has(+ span) {
+        margin-bottom: 0;
+      }
+
+      &:has(+ input) {
+        margin-bottom: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:before {
+        content: '';
+        border: 2px solid var(--colour-check-border, var(--colour-primary));
+        background: var(--colour-check-bg, transparent);
+        border-radius: var(--border-radius);
+        height: var(--radio-size, 1.5rem);
+        width: var(--radio-size, 1.5rem);
+        display: inline-block;
+        position: absolute;
+        top: 0.5rem;
+        left: var(--outline-width);
+      }
+
+      &.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: 0.875rem; /* 14/16 */
+        width: 0.875rem; /* 14/16 */
+
+        height: var(--radio-inner-size, 0.875rem);
+        width: var(--radio-inner-size, 0.875rem);
+
+        display: none;
+        position: absolute;
+        top: var(--radio-inner-top, 0.8125rem);
+        left: var(--radio-inner-left, calc(0.3125rem + var(--outline-width)));
+      }
+
+      &.radio--tick {
+        &:before {
+          content: '\f00c';
+          position: absolute;
+          font-size: 1.5em;
+          line-height: 1;
+          color: var(--tick-colour);
+          font-family: 'Font Awesome 7 Pro';
+
+          background: none !important;
+          border: none !important;
+          outline: none !important;
+          left: 0.25rem;
+        }
+        &:after {
+          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;
+      }
+    }
+
+    fieldset:has(label > input:is([type="radio"],[type="checkbox"])){
+
+      label {
+        margin-bottom: 0!important;
+      }
+
+      margin-bottom: 1.5rem;
+    }
+
+    input:is([type='radio'], [type='checkbox']):checked + label,
+    label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked) {
+      --tick-colour: var(--colour-info);
+
+      &:before {
+        border-color: var(--colour-info);
+      }
+
+      &:after {
+        display: inline-block;
+      }
+
+      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']:checked + label:not(:has(> iam-card)),
+    label:not(.tag):has(input[type='checkbox']:checked) {
+      &:after {
+        content: '\f00c';
+        position: absolute;
+        font-size: var(--checkbox-tick-size, 1em);
+        line-height: 1;
+        color: var(--colour-primary-theme);
+        font-family: 'Font Awesome 7 Pro';
+        font-weight: bold;
+        height: var(--checkbox-inner-size, 1.5rem);
+        width: var(--checkbox-inner-size, 1.5rem);
+        line-height: 1.625rem; /* 26 */
+        background: none !important;
+        border: none !important;
+        outline: none !important;
+        top: var(--checkbox-inner-top, 0.5rem);
+        left: var(--checkbox-inner-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: var(--checkbox-tick-size, 1em);
+        line-height: 1;
+        color: var(--colour-primary-theme);
+        font-family: 'Font Awesome 7 Pro';
+        font-weight: bold;
+        height: var(--checkbox-inner-size, 1.5rem);
+        width: var(--checkbox-inner-size, 1.5rem);
+        line-height: 1.625rem; /* 26 */
+        background: none !important;
+        border: none !important;
+        outline: none !important;
+        top: var(--checkbox-inner-top, 0.5rem);
+        left: var(--checkbox-inner-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']):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, light-dark(var(--colour-light), #444444));
+        outline: var(--outline-width) solid light-dark(var(--colour-light), #444444);
+      }
+    }
+    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;
+      }
+    }
+
+    /*  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;
+      }
+
+      &: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='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 */
+  .conditional {
+    display: none;
+  }
+
+  input:checked + .conditional,
+  input:checked + label + .conditional,
+  label:has(:checked) + .conditional,
+  .was-validated .conditional:has(input[required]:invalid),
+  .was-validated .conditional:focus-within {
+    display: block;
+    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.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,
+  label:has(input.conditional-input-1:checked) ~ .conditional-1,
+  label:has(input.conditional-input-2:checked) ~ .conditional-2,
+  label:has(input.conditional-input-3:checked) ~ .conditional-3,
+  label:has(input.conditional-input-4:checked) ~ .conditional-4,
+  label:has(input.conditional-input-5:checked) ~ .conditional-5 {
+    display: block;
+    clear: both;
+  }
+  /* #endregion */
+
+  /* #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 */
+
+  /* #region Select */
+
+  select:not(.select--minimal, .btn) {
+    $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:
+      var(--icon-select) 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,
+      linear-gradient(to right, var(--colour-canvas-2), var(--colour-canvas-2));
+
+    padding-right: calc(
+      var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem) + var(--input-lh, 1.25rem)
+    ) !important;
+    option {
+      font-size: 1.2em;
+    }
+
+    box-shadow: inset -2px 0px 0px var(--colour-primary-theme);
+
+    max-width: var(--select-max-width);
+
+    &[multiple],
+    &[size]:not([size='1']) {
+      background: none;
+      max-height: none !important;
+    }
+
+    &:disabled {
+
+      background-color: gray;
+      border-color: black;
+    }
+
+    /*  Remove outline from select box in FF */
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 inherit;
+    }
+  }
+
+  div:has(> select) {
+    margin-bottom: 1.5rem;
+
+    select {
+      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;
+    }
+
+    &:hover {
+      /* border: none; */
+      background: var(--colour-light);
+    }
+
+    &: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) {
+    position: relative;
+    display: inline-block !important;
+    width: auto !important;
+    font-size: inherit !important;
+    line-height: 1 !important;
+
+    padding: 0 !important;
+    margin: 0 !important;
+
+    font-family: var(--font-body) !important;
+
+    &:after {
+      font-size: 0.8em;
+      line-height: 1em;
+      content: '\f078';
+      font-family: 'Font Awesome 7 Pro';
+      position: absolute;
+      top: 40%;
+      transform: translate(0, -50%);
+      right: calc(0.8ch);
+      pointer-events: none;
+
+      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, textarea)) {
+    display: block;
+    margin-bottom: 1.5rem;
+    max-width: var(--input-max-width);
+
+    :is(input:not([type='range']), select) {
+      margin-top: 0.5rem;
+      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)),
+    .hint-text {
+      all: initial;
+      font-family: var(--font-body);
+      color: var(--colour-body);
+      margin-top: 0.5rem;
+      display: block;
+      line-height: 1.2;
+    }
+    .invalid-feedback {
+      font-size: 1rem;
+      font-weight: normal;
+      line-height: 1.2;
+    }
+
+    span:has(:is(input, select)) {
+      display: flex;
+      width: 100%;
+    }
+
+    :is(.suffix, .prefix):not(.mt-0) {
+      margin: 0.5rem 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) {
+    margin-bottom: 1.5rem;
+
+    &:has(:is(:invalid, .is-invalid)):after {
+      content: 'This field is required';
+      color: var(--colour-danger);
+      margin-top: 0.5rem;
+      background-image: var(--icon-error);
+      background-repeat: no-repeat;
+      background-position: left top 1px;
+      background-size: var(--input-fs, 1rem) var(--input-fs, 1rem);
+      padding-left: calc(var(--input-fs, 1rem) + 0.5rem);
+      display: block;
+      width: 100%;
+      font-size: 1rem;
+      line-height: 1.2;
+    }
+
+    &[data-error]:has(:is(:invalid, .is-invalid)):after {
+      content: attr(data-error) !important;
+    }
+
+    &.error-nowrap:after {
+      white-space: nowrap;
+    }
+  }
+
+  /* #endregion */
+
+  /* #region input range */
+  input[type='range'] {
+    --track-size: 0.5rem;
+    --track-colour: var(--colour-light);
+    --thumb-colour: var(--colour-info);
+    --thumb-size: 1.5rem;
+    width: 100%;
+    background: transparent;
+    cursor: pointer;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    accent-color: var(--thumb-colour);
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  *:has(> input[type='range']) {
+    position: relative;
+    padding-bottom: 6rem;
+    max-width: var(--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: -0.5rem; /* 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']: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;
+  }
+
+  /* #endregion */
+
+  /* #region Date and time fields */
+  :is(input[type='date'],input[type='datetime-local'],input[type='year'],input[type='month'],input[type='week'], input[type='time']) {
+    position: relative;
+    margin-right: -3rem;
+    padding-right: 3rem !important;
+    background-position: right 4rem center;
+    border-radius: 0.5rem !important;
+  }
+  ::-webkit-calendar-picker-indicator {
+    background: transparent;
+    bottom: 0;
+    color: transparent;
+    cursor: pointer;
+    height: auto;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+    order: 3;
+    z-index: 98;
+  }
+  ::-webkit-datetime-edit {
+    position: relative;
+    z-index: 99;
+    max-width: fit-content;
+  }
+  /* #endregion */
+}
+
+/* #region datalist */
+:is(iam-advanced-select, iam-search, .postcode-lookup) {
+  position: relative;
+  display: block;
+
+  label {
+    position: relative;
+  }
+
+  input {
+    padding-right: 3rem;
+  }
+
+  .empty {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 3.5rem;
+    margin: 0;
+    aspect-ratio: 1 / 1;
+
+    width: 2rem;
+    height: 2rem;
+
+    text-align: center;
+    line-height: 1;
+
+    &:not(:hover, :focus) {
+      border-color: transparent;
+      background-color: transparent;
+    }
+
+    i {
+      font-size: 1.2rem;
+    }
+  }
+  
+  &:has([name="postcode"][disabled]) .empty{
+
+    display: none;
+  }
+
+  &:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .empty {
+    display: none;
+  }
+
+  label:after,
+  .hint-text {
+    position: absolute;
+    top: 100%;
+  }
+
+  label[for="use"]:after {
+    top: var(--checkbox-inner-top, 0.5rem);
+  }
+}
+
+.was-validated :is(iam-advanced-select, iam-search, postcode-lookup) label:has(:is(input:not([type='radio']):not([type='checkbox']), select)),
+:is(iam-advanced-select, iam-search, postcode-lookup).was-validated label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
+  margin-bottom: 2.5rem;
+
+  input {
+    background: none !important;
+  }
+
+  &:has(:invalid, .is-invalid) .hint-text {
+    display: none;
+  }
+}
+
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup) datalist {
+  
+  &:empty {
+    display: none !important;
+  }
+
+  z-index: 100;
+  top: 100%;
+  position: absolute;
+  background-color: var(--colour-canvas);
+  border-top: none;
+
+  &:not(:empty):has(option:not(.hide)){
+
+    padding: 0.5rem;
+  }
+
+
+  max-height: 25rem;
+  overflow-y: auto;
+  width: 100%;
+  max-width: var(--input-max-width, 50rem);
+  border: none !important;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  display: none;
+
+  option {
+    background-color: var(--colour-canvas);
+    padding: 0.5rem;
+    
+    cursor: pointer;
+    background: unset !important;
+    border: unset !important;
+    color: var(--colour-primary) !important;
+    font-weight: inherit !important;
+    font-family: inherit !important;
+    font-size: 1rem !important;
+    line-height: 1.5rem !important;
+    margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+    padding-block: var(--menu-item-padding, 0.25rem) !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    text-align: var(--menu-item-text-align, left) !important;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    text-overflow: ellipsis;
+    overflow: clip;
+
+    &:is(:hover, :focus) {
+      background: var(--colour-light) !important;
+      color: #595959 !important;
+      border-radius: 0.25rem !important;
+    }
+
+    &:active {
+      background: rgba(224, 224, 224, 1) !important;
+      border-radius: 0.25rem !important;
+    }
+
+    &.active {
+      border-left: 4px solid var(--colour-info) !important;
+      border-radius: 0.25rem !important;
+      background: hsl(from var(--colour-info) h s l / 10%) !important;
+    }
+  }
+}
+
+.dark-theme :is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup) datalist {
+
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light-theme) :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
+
+    --colour-heading: var(--colour-primary-theme);
+    --colour-body: var(--colour-primary-theme);
+    color: var(--colour-primary-theme);
+
+    /*  Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten */
+    > * {
+      color-scheme: light;
+    }
+  }
+
+  html:not(.light-theme) .bg-light {
+
+    color-scheme: light;
+  }
+}
+
+
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active),:active) datalist {
+
+  display: block;
+
+  &:empty {
+    display: block !important;
+  }
+}
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper {
+
+  top: 100%;
+  position: absolute;
+  border-radius: 0.5rem;
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  width: 100% !important;
+  /* max-width: var(--menu-item-width, 50rem) !important; */
+  z-index: 100;
+  display: none;
+  max-height: 25rem;
+  overflow-y: auto;
+  
+  max-width: var(--input-max-width) !important;
+
+  > datalist {
+    border: none!important;
+    box-shadow: none!important;
+    position: relative;
+    display: block!important;
+    border-radius: 0!important;
+    max-height: 100%!important;
+  }
+
+  &:focus {
+    outline: none!important;
+  }
+}
+
+iam-address-lookup [slot="preloadedList"]{
+  border: none!important;
+  box-shadow: none!important;
+  position: relative;
+  display: block!important;
+  border-radius: 0!important;
+  max-height: 100%!important;
+
+  &.noresults {
+    display: block !important;
+  }
+
+  &.noresults:before {
+    content: "No addresses found";
+    background-color: white;
+    padding: 1rem 0.5rem;
+    color: var(--colour-primary) !important;
+    font-weight: inherit !important;
+    font-family: inherit !important;
+    font-size: 1rem !important;
+    line-height: 1.1875rem !important;
+    padding-block: var(--menu-item-padding, 1rem) !important;
+    display: block;
+  }
+}
+
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist:not(:empty)),
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist.loading),
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(*:active)) .datalist__wrapper:has(datalist.noresults),
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper:hover {
+
+  display: block;
+}
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div) .datalist__wrapper:has(datalist.noresults){
+  datalist {
+
+    display: block;
+
+    &:before {
+      content: "No addresses found";
+      background-color: white;
+      padding: 0.5rem;
+      color: var(--colour-primary) !important;
+      font-weight: inherit !important;
+      font-family: inherit !important;
+      font-size: 1rem !important;
+      line-height: 1.1875rem !important;
+      padding-block: var(--menu-item-padding, 0.5rem) !important;
+      display: block;
+    }
+  }
+}
+
+:is(iam-advanced-select, iam-search, iam-address-lookup, .postcode-lookup > div):is(:focus-within,:has(option:active)) .datalist__wrapper:has(datalist.loading) {
+
+  datalist {
+
+    height: 5rem;
+
+    &:before {
+      content: "\f021";
+      font-family: "Font Awesome 7 Pro";
+      font-size: 1.75rem;
+      font-weight: 300;
+      display: block;
+      position: absolute;
+      top: calc(50% - 1rem);
+      left: calc(50% - 1rem);
+      /*transform: translate(-50%,-50%);*/
+
+      animation-name: spin;
+      animation-duration: 4000ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+    }
+  }
+}
+
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); }
+    to { -ms-transform: rotate(360deg); }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); }
+    to { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}
+
+:is(iam-advanced-select, iam-search, .postcode-lookup) {
+
+  [name="beforeList"] {
+    display: none;
+  }
+
+  [name="beforeList"]:has(+ .show-welsh-banner) {
+    display: block;
+  }
+  .datalist__wrapper.show-welsh-banner [name="beforeList"] {
+    display: block;
+  }
+}
+/* #endregion */