@cruk/cruk-react-components 7.0.0 → 7.1.0

package/lib/index.css

@@ -1,2 +1,4248 @@
-@font-face{font-family:Progress;font-weight:400;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Progress-Regular.woff2) format("woff")}@font-face{font-family:Progress;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Progress-SemiBold.woff2) format("woff")}@font-face{font-family:Poppins;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-SemiBold.woff2) format("woff")}@font-face{font-family:Poppins;font-weight:500;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Medium.woff) format("woff")}@font-face{font-family:Poppins;font-weight:400;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Regular.woff2) format("woff")}@font-face{font-family:Poppins;font-weight:300;src:url(https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Light.woff) format("woff")}@font-face{font-family:juana;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/juana-semibold-webfont.woff2) format("woff2")}@font-face{font-family:ITCAvantGarde;font-weight:700;src:url(https://rcl.assets.cancerresearchuk.org/fonts/itc_-_itcavantgardepro-bold-webfont.woff) format("woff")}@font-face{font-family:ITCAvantGarde;font-weight:600;src:url(https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardePro-Demi.woff) format("woff")}@font-face{font-family:ITCAvantGarde;font-weight:400;src:url(https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardeStd-Bk.woff) format("woff")}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-direction:reverse!important;animation-play-state:paused!important;scroll-behavior:auto!important;transition:none!important}}body{margin:0}table,td,th{border:1px solid #ccc;border-spacing:0;padding:10px}.no-focus-outline a:focus,.no-focus-outline button:focus{outline:none}img{height:auto}img,section{width:100%}button{font-size:1em}:root{--theme:"cruk";--content-max-width:1020px;--breakpoint-mobile:576px;--breakpoint-tablet:768px;--breakpoint-desktop:992px;--breakpoint-desktop-large:1200px;--spacing-none:0;--spacing-auto:auto;--spacing-xxxs:0.25rem;--spacing-xxs:0.5rem;--spacing-xs:1rem;--spacing-s:1.5rem;--spacing-m:2rem;--spacing-l:2.5rem;--spacing-xl:3rem;--spacing-xxl:3.5rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:1rem;--font-size-ml:1.125rem;--font-size-l:1.25rem;--font-size-xl:1.5625rem;--font-size-xxl:2rem;--font-size-xxxl:2.5rem;--font-size-xxxxl:3.125rem;--size-border-width:1px;--btn-border-radius:0px;--btn-border-radius-large:0px;--btn-border-thickness:1px;--btn-text-decoration:none;--btn-text-transform:none;--btn-horizontal-padding:2em;--typ-font-family-base:"Poppins",Arial,sans-serif;--typ-font-family-buttons:"Poppins",Arial,sans-serif;--typ-font-family-links:"Poppins",Arial,sans-serif;--typ-font-family-headings:"Progress",Arial,sans-serif;--typ-font-family-label:"Poppins",Arial,sans-serif;--typ-font-size-base:16px;--typ-font-weight-base:300;--typ-font-weight-headings:400;--typ-font-weight-links:700;--typ-font-weight-buttons:400;--typ-font-weight-labels:500;--typ-font-weight-heavy:700;--typ-font-weight-medium:500;--typ-font-weight-normal:400;--typ-font-weight-light:300;--typ-font-weight-vlight:100;--typ-link-text-decoration:underline;--typ-link-primary-text-decoration:underline;--typ-line-height:1.5em;--typ-header-line-height:1.25em;--typ-header-text-transform:none;--clr-cruk-navy-100:#e5e5ff;--clr-cruk-navy-600:#00007e;--clr-cruk-navy-700:#006;--clr-cruk-navy-800:#00004d;--clr-cruk-magenta-100:#ffe6f3;--clr-cruk-magenta-600:#ff0087;--clr-cruk-magenta-700:#e60079;--clr-cruk-magenta-800:#cc006c;--clr-cruk-cyan-600:#009cee;--clr-cruk-cyan-700:#006da7;--clr-cruk-grey-100:#f2f2f2;--clr-cruk-grey-200:#e6e6e6;--clr-cruk-grey-300:#c6c6c6;--clr-cruk-grey-600:#666;--clr-cruk-grey-800:#575757;--clr-cruk-grey-900:#2e2d2c;--clr-cruk-white:#fff;--clr-cruk-black:#000;--clr-cruk-red:#d51311;--clr-cruk-yellow:#fdc02f;--clr-cruk-green:#3d854d;--clr-su2c-orange-8:#bd3900;--clr-su2c-orange-7:#d74100;--clr-su2c-orange-6:#ee5a04;--clr-su2c-orange-5:#ff8e00;--clr-su2c-orange-3:#ffb04d;--clr-su2c-orange-1:#ffefdb;--clr-su2c-black:#231f20;--clr-su2c-grey-1:#555759;--clr-su2c-grey-2:#a5a5a9;--clr-su2c-red:#ef4135;--clr-su2c-yellow:#ffc325;--clr-bowelbabe-purple:#501e70;--clr-bowelbabe-light-green:#92ddcb;--clr-bowelbabe-green:#26bb98;--clr-bowelbabe-pastel-green:#d4f1ea;--clr-bowelbabe-pink:#d81272;--clr-bowelbabe-pastel-pink:#eb88b8;--clr-bowelbabe-blue:#009ed1;--clr-bowelbabe-teal:#005e85;--clr-bowelbabe-yellow:#e4b50b;--clr-bowelbabe-pastel-yellow:#f1da85;--clr-primary:var(--clr-cruk-navy-600);--clr-secondary:var(--clr-cruk-magenta-700);--clr-tertiary:var(--clr-cruk-cyan-600);--clr-text-on-primary:var(--clr-cruk-white);--clr-text-on-secondary:var(--clr-cruk-white);--clr-text-on-tertiary:var(--clr-cruk-white);--clr-text-header-default:var(--clr-cruk-black);--clr-disabled:var(--clr-cruk-grey-200);--clr-danger:var(--clr-cruk-red);--clr-warning:var(--clr-cruk-yellow);--clr-success:var(--clr-cruk-green);--clr-info:var(--clr-cruk-cyan-600);--clr-text-error:var(--clr-cruk-red);--clr-text-dark:var(--clr-cruk-black);--clr-text-light:var(--clr-cruk-white);--clr-text-mid:var(--clr-cruk-grey-600);--clr-sports-activity:var(--clr-cruk-cyan-700);--clr-link:var(--clr-cruk-magenta-700);--clr-link-hover:var(--clr-cruk-magenta-800);--clr-link-secondary:var(--clr-cruk-magenta-700);--clr-link-secondary-hover:var(--clr-cruk-magenta-800);--clr-avatar-border:var(--clr-cruk-navy-600);--clr-progress-bar:var(--clr-cruk-navy-600);--clr-progress-bar-secondary:var(--clr-cruk-magenta-700);--clr-progress-bar-background:var(--clr-cruk-grey-200);--clr-circular-progress:var(--clr-cruk-cyan-600);--clr-circular-progress-secondary:var(--clr-cruk-magenta-700);--clr-circular-progress-background:var(--clr-cruk-grey-200);--clr-button-primary-background:var(--clr-cruk-magenta-700);--clr-button-primary-text:var(--clr-cruk-white);--clr-button-primary-border:var(--clr-cruk-magenta-700);--clr-button-primary-background-hover:var(--clr-cruk-magenta-800);--clr-button-primary-text-hover:var(--clr-cruk-white);--clr-button-primary-border-hover:var(--clr-cruk-magenta-800);--clr-button-primary-disabled-background:var(--clr-cruk-grey-200);--clr-button-primary-disabled-text:var(--clr-cruk-grey-600);--clr-button-primary-disabled-border:var(--clr-cruk-grey-200);--clr-button-secondary-background:var(--clr-cruk-white);--clr-button-secondary-text:var(--clr-cruk-magenta-700);--clr-button-secondary-border:var(--clr-cruk-magenta-700);--clr-button-secondary-background-hover:var(--clr-cruk-magenta-100);--clr-button-secondary-text-hover:var(--clr-cruk-magenta-800);--clr-button-secondary-border-hover:var(--clr-cruk-magenta-100);--clr-button-secondary-disabled-background:var(--clr-cruk-grey-200);--clr-button-secondary-disabled-text:var(--clr-cruk-grey-600);--clr-button-secondary-disabled-border:var(--clr-cruk-grey-200);--clr-button-tertiary-text:var(--clr-cruk-magenta-700);--clr-button-tertiary-text-hover:var(--clr-cruk-magenta-800);--clr-button-tertiary-disabled-text:var(--clr-cruk-grey-600);--clr-collapse-header:var(--clr-cruk-navy-600);--clr-selection-border:var(--clr-cruk-grey-600);--clr-text-input-border:var(--clr-cruk-grey-900);--clr-input-border:var(--clr-cruk-grey-900);--clr-check:var(--clr-cruk-magenta-700);--clr-carousel-button:var(--clr-primary);--clr-header-background:var(--clr-cruk-white);--clr-background-light:var(--clr-cruk-white);--clr-background-light-color:var(--clr-cruk-navy-100);--clr-background-mid:var(--clr-cruk-grey-200);--clr-background-mid-light:var(--clr-cruk-grey-100);--clr-loader-color-1:var(--clr-cruk-navy-600);--clr-loader-color-2:var(--clr-cruk-magenta-600);--clr-loader-color-3:var(--clr-cruk-cyan-600);--clr-pagination-text:var(--clr-cruk-navy-600);--clr-pagination-active:var(--clr-cruk-grey-200);--clr-pagination-background:var(--clr-cruk-navy-600);--clr-footer-background:var(--clr-cruk-white);--clr-header-border:var(--clr-cruk-grey-200);--clr-header-tagline-text:var(--clr-cruk-black);--clr-step-border:var(--clr-cruk-grey-200);--clr-step-background:var(--clr-cruk-white);--clr-popover-background:var(--clr-cruk-white);--clr-text-input-extra-info:var(--clr-cruk-grey-200);--clr-totaliser-bubble:var(--clr-cruk-grey-200);--clr-totaliser-bubble-text:var(--clr-cruk-black);--clr-totaliser-bubble-total:var(--clr-cruk-navy-600);--clr-select-background:var(--clr-cruk-black);--clr-modal-backdrop:var(--clr-cruk-black);--clr-user-block-extra-text:var(--clr-cruk-grey-800);--shadow-s:0px 0px 2px 1px var(--clr-cruk-grey-300);--shadow-m:0px 0px 4px 1px var(--clr-cruk-grey-300);--shadow-l:0px 0px 7px 1px var(--clr-cruk-grey-300)}[data-theme=cruk]>*{--theme:"cruk"}[data-theme=rfl]>*{--theme:"rfl";--typ-font-weight-headings:600;--clr-text-header-default:var(--clr-cruk-navy-600);--clr-header-tagline-text:var(--clr-cruk-navy-600);--clr-progress-bar:var(--clr-cruk-magenta-700);--clr-progress-bar-secondary:var(--clr-cruk-navy-600)}[data-theme=su2c]>*{--theme:"su2c";--btn-border-radius:1.5rem;--btn-border-radius-large:2rem;--btn-text-transform:uppercase;--btn-border-thickness:2px;--typ-font-family-headings:"ITCAvantGarde",Arial,sans-serif;--typ-font-family-links:"ITCAvantGarde",Arial,sans-serif;--typ-font-family-buttons:"ITCAvantGarde",Arial,sans-serif;--typ-font-family-base:"ITCAvantGarde",Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-font-family-label:"ITCAvantGarde",Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-link-text-decoration:none;--typ-header-line-height:1.5em;--typ-header-text-transform:uppercase;--typ-font-weight-base:400;--typ-font-weight-links:700;--typ-font-weight-buttons:700;--typ-font-weight-labels:600;--typ-font-weight-headings:700;--typ-link-primary-text-decoration:none;--clr-primary:var(--clr-su2c-orange-5);--clr-secondary:var(--clr-su2c-orange-5);--clr-tertiary:var(--clr-su2c-black);--clr-text-header-default:var(--clr-su2c-black);--clr-text-on-primary:var(--clr-su2c-black);--clr-text-on-secondary:var(--clr-su2c-black);--clr-avatar-border:var(--clr-su2c-black);--clr-progress-bar:var(--clr-su2c-orange-5);--clr-progress-bar-secondary:var(--clr-su2c-red);--clr-circular-progress:var(--clr-su2c-orange-3);--clr-circular-progress-secondary:var(--clr-su2c-red);--clr-link:var(--clr-su2c-orange-7);--clr-link-hover:var(--clr-su2c-orange-8);--clr-link-secondary:var(--clr-su2c-orange-7);--clr-link-secondary-hover:var(--clr-su2c-orange-8);--clr-background-light-color:var(--clr-su2c-orange-2);--clr-loader-color-1:var(--clr-su2c-orange-5);--clr-loader-color-2:var(--clr-su2c-red);--clr-loader-color-3:var(--clr-su2c-black);--clr-pagination-text:var(--clr-su2c-black);--clr-pagination-background:var(--clr-su2c-black);--clr-totaliser-bubble:var(--clr-su2c-black);--clr-totaliser-bubble-text:var(--clr-cruk-white);--clr-totaliser-bubble-total:var(--clr-cruk-white);--clr-collapse-header:var(--clr-su2c-orange-7);--clr-check:var(--clr-su2c-black);--clr-carousel-button:var(--clr-su2c-black);--clr-header-tagline-text:var(--clr-su2c-black);--clr-button-primary-background:var(--clr-su2c-orange-5);--clr-button-primary-text:var(--clr-su2c-black);--clr-button-primary-border:var(--clr-su2c-orange-5);--clr-button-primary-background-hover:var(--clr-su2c-orange-6);--clr-button-primary-text-hover:var(--clr-su2c-black);--clr-button-primary-border-hover:var(--clr-su2c-orange-6);--clr-button-primary-disabled-background:var(--clr-grey-200);--clr-button-primary-disabled-text:var(--clr-grey-600);--clr-button-primary-disabled-border:var(--clr-grey-200);--clr-button-secondary-background:var(--clr-cruk-white);--clr-button-secondary-text:var(--clr-su2c-black);--clr-button-secondary-border:var(--clr-su2c-orange-6);--clr-button-secondary-background-hover:var(--clr-su2c-orange-1);--clr-button-secondary-text-hover:var(--clr-su2c-black);--clr-button-secondary-border-hover:var(--clr-su2c-orange-1);--clr-button-secondary-disabled-background:var(--clr-cruk-white);--clr-button-secondary-disabled-text:var(--clr-grey-200);--clr-button-secondary-disabled-border:var(--clr-grey-200);--clr-button-tertiary-text:var(--clr-su2c-orange-7);--clr-button-tertiary-text-hover:var(--clr-su2c-orange-8);--clr-button-tertiary-disabled-text:var(--clr-grey-200)}[data-theme=bowelbabe]>*{--theme:"bowelbabe";--btn-border-radius:2em;--btn-horizontal-padding:1rem;--btn-border-thickness:2px;--typ-font-family-headings:"juana",Arial,sans-serif;--typ-font-family-links:"juana",Arial,sans-serif;--typ-font-family-buttons:"juana",Arial,sans-serif;--typ-font-family-base:Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-font-family-label:Arial,Calibri,nimbussansl,liberationsans,freesans,clean,sans-serif;--typ-header-line-height:1.5em;--typ-font-weight-base:400;--typ-font-weight-links:600;--typ-font-weight-headings:600;--typ-font-weight-buttons:600;--typ-font-weight-labels:600;--typ-link-primary-text-decoration:none;--clr-primary:var(--clr-bowelbabe-purple);--clr-secondary:var(--clr-bowelbabe-green);--clr-tertiary:var(--clr-bowelbabe-teal);--clr-text-on-primary:var(--clr-cruk-white);--clr-text-on-secondary:var(--clr-bowelbabe-purple);--clr-text-on-tertiary:var(--clr-cruk-white);--clr-warning:var(--clr-bowelbabe-yellow);--clr-success:var(--clr-bowelbabe-green);--clr-info:var(--clr-bowelbabe-blue);--clr-avatar-border:var(--clr-bowelbabe-purple);--clr-progress-bar:var(--clr-bowelbabe-light-green);--clr-progress-bar-secondary:var(--clr-bowelbabe-green);--clr-circular-progress:var(--clr-bowelbabe-light-green);--clr-circular-progress-secondary:var(--clr-bowelbabe-green);--clr-link:var(--clr-bowelbabe-purple);--clr-link-hover:var(--clr-bowelbabe-pink);--clr-link-secondary:var(--clr-bowelbabe-purple);--clr-link-secondary-hover:var(--clr-bowelbabe-pink);--clr-background-light-color:var(--clr-bowelbabe-pastel-green);--clr-collapse-header:var(--clr-bowelbabe-pink);--clr-check:var(--clr-bowelbabe-purple);--clr-carousel-button:var(--clr-bowelbabe-purple);--clr-header-tagline-text:var(--clr-bowelbabe-purple);--clr-loader-color-1:var(--clr-bowelbabe-purple);--clr-loader-color-2:var(--clr-bowelbabe-light-green);--clr-loader-color-3:var(--clr-bowelbabe-pink);--clr-pagination-text:var(--clr-bowelbabe-purple);--clr-pagination-background:var(--clr-bowelbabe-purple);--clr-totaliser-bubble:var(--clr-bowelbabe-purple);--clr-totaliser-bubble-text:var(--clr-bowelbabe-light-green);--clr-totaliser-bubble-total:var(--clr-cruk-white);--clr-button-primary-background:var(--clr-bowelbabe-pastel-yellow);--clr-button-primary-text:var(--clr-bowelbabe-purple);--clr-button-primary-border:var(--clr-bowelbabe-pastel-yellow);--clr-button-primary-background-hover:var(--clr-bowelbabe-pastel-pink);--clr-button-primary-text-hover:var(--clr-bowelbabe-purple);--clr-button-primary-border-hover:var(--clr-bowelbabe-pastel-pink);--clr-button-primary-disabled-background:var(--clr-cruk-grey-200);--clr-button-primary-disabled-text:var(--clr-cruk-grey-800);--clr-button-primary-disabled-border:var(--clr-cruk-grey-200);--clr-button-secondary-background:var(--clr-cruk-white);--clr-button-secondary-text:var(--clr-bowelbabe-purple);--clr-button-secondary-border:var(--clr-bowelbabe-pastel-yellow);--clr-button-secondary-background-hover:var(--clr-bowelbabe-pastel-pink);--clr-button-secondary-text-hover:var(--clr-bowelbabe-purple);--clr-button-secondary-border-hover:var(--clr-bowelbabe-pastel-yellow);--clr-button-secondary-disabled-background:var(--clr-cruk-grey-200);--clr-button-secondary-disabled-text:var(--clr-cruk-grey-800);--clr-button-secondary-disabled-border:var(--clr-cruk-grey-200);--clr-button-tertiary-text:var(--clr-bowelbabe-purple);--clr-button-tertiary-text-hover:var(--clr-bowelbabe-pink);--clr-button-tertiary-disabled-text:var(--clr-cruk-grey-200)}@keyframes styles-module_bounce-delay__cM1SL{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.styles-module_screen-reader-only__rkMmb{height:1px;left:-10000px;overflow:hidden;position:absolute;top:auto;width:1px}.styles-module_spinner__FNAgO{margin-top:var(--spacing-s,1.5rem);text-align:center;width:100%;span{animation:styles-module_bounce-delay__cM1SL 1.2s ease-in-out infinite both;background-color:var(--clr-loader-color-1,#00007e);border-radius:100%;display:inline-block;height:16px;margin:0 2px;width:16px}span:first-child{animation-delay:-.32s;-webkit-animation-delay:-.32s}span:nth-child(2){animation-delay:-.16s;background-color:var(--clr-loader-color-2,#ff0087)}span:nth-child(3){background-color:var(--clr-loader-color-3,#009cee)}}
+@font-face {
+  font-family: "Progress";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/Progress-Regular.woff2")
+    format("woff");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Progress";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/Progress-SemiBold.woff2")
+    format("woff");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/Poppins-SemiBold.woff2")
+    format("woff");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Medium.woff")
+    format("woff");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Regular.woff2")
+    format("woff");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Poppins";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/Poppins-Light.woff")
+    format("woff");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "juana";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/juana-semibold-webfont.woff2")
+    format("woff2");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "ITCAvantGarde";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/itc_-_itcavantgardepro-bold-webfont.woff")
+    format("woff");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "ITCAvantGarde";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardePro-Demi.woff")
+    format("woff");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "ITCAvantGarde";
+  src: url("https://rcl.assets.cancerresearchuk.org/fonts/ITCAvantGardeStd-Bk.woff")
+    format("woff");
+  font-weight: 400;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *:after,
+  *:before {
+    animation-play-state: paused !important;
+    animation-direction: reverse !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+body {
+  margin: 0;
+  font-size: var(--typ-font-size-base, 16px);
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  line-height: var(--typ-line-height, 1.5em);
+  font-weight: var(--typ-font-weight-base, 300);
+}
+
+p {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+svg {
+  path {
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+
+table,
+td,
+th {
+  border-spacing: 0;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+.no-focus-outline a:focus,
+.no-focus-outline button:focus {
+  outline: none;
+}
+img {
+  width: 100%;
+  height: auto;
+}
+section {
+  width: 100%;
+}
+button {
+  font-size: 1em;
+}
+
+:root {
+  --theme: "cruk";
+
+  --content-max-width: 1020px;
+  --breakpoint-mobile: 576px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 992px;
+  --breakpoint-desktop-large: 1200px;
+
+  --spacing-none: 0;
+  --spacing-auto: auto;
+  --spacing-xxxs: 0.25rem; /* 4px */
+  --spacing-xxs: 0.5rem; /* 8px */
+  --spacing-xs: 1rem; /* 16px */
+  --spacing-s: 1.5rem; /* 24px */
+  --spacing-m: 2rem; /* 32px */
+  --spacing-l: 2.5rem; /* 40px */
+  --spacing-xl: 3rem; /* 48px */
+  --spacing-xxl: 3.5rem; /* 56px */
+  --spacing-full: 100%;
+
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-s: 0.875rem; /* 14px */
+  --font-size-m: 1rem; /* 16px */
+  --font-size-ml: 1.125rem; /* 18px */
+  --font-size-l: 1.25rem; /* 20px */
+  --font-size-xl: 1.5625rem; /* 25px */
+  --font-size-xxl: 2rem; /* 32px */
+  --font-size-xxxl: 2.5rem; /* 40px */
+  --font-size-xxxxl: 3.125rem; /* 45px */
+
+  --size-border-width: 1px;
+
+  --btn-border-radius: 0px;
+  --btn-border-radius-large: 0px;
+  --btn-border-thickness: 1px;
+  --btn-text-decoration: none;
+  --btn-text-transform: none;
+  --btn-horizontal-padding: 2em;
+
+  --typ-font-family-base: "Poppins", Arial, sans-serif;
+  --typ-font-family-buttons: "Poppins", Arial, sans-serif;
+  --typ-font-family-links: "Poppins", Arial, sans-serif;
+  --typ-font-family-headings: "Progress", Arial, sans-serif;
+  --typ-font-family-label: "Poppins", Arial, sans-serif;
+  --typ-font-size-base: 16px; /* Explicitly defines 1rem, only to be used on body */
+
+  --typ-font-weight-heavy: 700;
+  --typ-font-weight-medium: 500;
+  --typ-font-weight-normal: 400;
+  --typ-font-weight-light: 300;
+  --typ-font-weight-vlight: 100;
+
+  --typ-font-weight-base: 300;
+  --typ-font-weight-headings: 400;
+  --typ-font-weight-links: 700;
+  --typ-font-weight-buttons: 400;
+  --typ-font-weight-labels: 500;
+
+  --typ-link-text-decoration: underline;
+  --typ-link-primary-text-decoration: underline;
+  --typ-line-height: 1.5em;
+  --typ-header-line-height: 1.25em;
+  --typ-header-text-transform: none;
+
+  /* cruk colours */
+
+  --clr-cruk-navy-100: #e5e5ff;
+  --clr-cruk-navy-600: #00007e;
+  --clr-cruk-navy-700: #000066;
+  --clr-cruk-navy-800: #00004d;
+
+  --clr-cruk-magenta-100: #ffe6f3;
+  --clr-cruk-magenta-600: #ff0087;
+  --clr-cruk-magenta-700: #e60079;
+  --clr-cruk-magenta-800: #cc006c;
+
+  --clr-cruk-cyan-600: #009cee;
+  --clr-cruk-cyan-700: #006da7;
+
+  --clr-cruk-grey-100: #f2f2f2;
+  --clr-cruk-grey-200: #e6e6e6;
+  --clr-cruk-grey-300: #c6c6c6; /* used for shadows */
+  --clr-cruk-grey-600: #666666;
+  --clr-cruk-grey-800: #575757;
+  --clr-cruk-grey-900: #2e2d2c;
+
+  --clr-cruk-white: #fff;
+  --clr-cruk-black: #000;
+
+  --clr-cruk-red: #d51311;
+  --clr-cruk-yellow: #fdc02f;
+  --clr-cruk-green: #3d854d;
+
+  /* su2c colours */
+
+  --clr-su2c-orange-8: #bd3900;
+  --clr-su2c-orange-7: #d74100;
+  --clr-su2c-orange-6: #ee5a04;
+  --clr-su2c-orange-5: #ff8e00;
+  --clr-su2c-orange-3: #ffb04d;
+  --clr-su2c-orange-1: #ffefdb;
+
+  --clr-su2c-black: #231f20;
+  --clr-su2c-grey-1: #555759;
+  --clr-su2c-grey-2: #a5a5a9;
+
+  --clr-su2c-red: #ef4135;
+  --clr-su2c-yellow: #ffc325;
+
+  /* bowelbabe colours */
+
+  --clr-bowelbabe-purple: #501e70;
+  --clr-bowelbabe-light-green: #92ddcb;
+  --clr-bowelbabe-green: #26bb98;
+  --clr-bowelbabe-pastel-green: #d4f1ea;
+  --clr-bowelbabe-pink: #d81272;
+  --clr-bowelbabe-pastel-pink: #eb88b8;
+  --clr-bowelbabe-blue: #009ed1;
+  --clr-bowelbabe-teal: #005e85;
+  --clr-bowelbabe-yellow: #e4b50b;
+  --clr-bowelbabe-pastel-yellow: #f1da85;
+
+  /* Generic colours  */
+
+  --clr-currentColor: currentColor;
+  --clr-primary: var(--clr-cruk-navy-600);
+  --clr-secondary: var(--clr-cruk-magenta-700);
+  --clr-tertiary: var(--clr-cruk-cyan-600);
+  --clr-sports-activity: var(--clr-cruk-cyan-700);
+
+  --clr-text-on-primary: var(--clr-cruk-white);
+  --clr-text-on-secondary: var(--clr-cruk-white);
+  --clr-text-on-tertiary: var(--clr-cruk-white);
+
+  --clr-background-light: var(--clr-cruk-white);
+  --clr-background-light-color: var(--clr-cruk-navy-100);
+  --clr-background-mid: var(--clr-cruk-grey-200);
+  --clr-background-mid-light: var(--clr-cruk-grey-100);
+
+  --clr-disabled: var(--clr-cruk-grey-200);
+  --clr-danger: var(--clr-cruk-red);
+  --clr-warning: var(--clr-cruk-yellow);
+  --clr-success: var(--clr-cruk-green);
+  --clr-info: var(--clr-cruk-cyan-600);
+
+  --clr-text-dark: var(--clr-cruk-black);
+  --clr-text-light: var(--clr-cruk-white);
+  --clr-text-mid: var(--clr-cruk-grey-600);
+
+  /* Component shared colours */
+
+  --clr-input-border: var(--clr-cruk-grey-900);
+  --clr-selection-border: var(--clr-cruk-grey-600);
+
+  /* Component specific colours */
+
+  --clr-avatar-border: var(--clr-cruk-navy-600);
+
+  --clr-button-primary-background: var(--clr-cruk-magenta-700);
+  --clr-button-primary-text: var(--clr-cruk-white);
+  --clr-button-primary-border: var(--clr-cruk-magenta-700);
+  --clr-button-primary-background-hover: var(--clr-cruk-magenta-800);
+  --clr-button-primary-text-hover: var(--clr-cruk-white);
+  --clr-button-primary-border-hover: var(--clr-cruk-magenta-800);
+  --clr-button-primary-disabled-background: var(--clr-cruk-grey-200);
+  --clr-button-primary-disabled-text: var(--clr-cruk-grey-600);
+  --clr-button-primary-disabled-border: var(--clr-cruk-grey-200);
+
+  --clr-button-secondary-background: var(--clr-cruk-white);
+  --clr-button-secondary-text: var(--clr-cruk-magenta-700);
+  --clr-button-secondary-border: var(--clr-cruk-magenta-700);
+  --clr-button-secondary-background-hover: var(--clr-cruk-magenta-100);
+  --clr-button-secondary-text-hover: var(--clr-cruk-magenta-800);
+  --clr-button-secondary-border-hover: var(--clr-cruk-magenta-100);
+  --clr-button-secondary-disabled-background: var(--clr-cruk-grey-200);
+  --clr-button-secondary-disabled-text: var(--clr-cruk-grey-600);
+  --clr-button-secondary-disabled-border: var(--clr-cruk-grey-200);
+
+  --clr-button-tertiary-text: var(--clr-cruk-magenta-700);
+  --clr-button-tertiary-text-hover: var(--clr-cruk-magenta-800);
+  --clr-button-tertiary-disabled-text: var(--clr-cruk-grey-600);
+  --clr-collapse-header: var(--clr-cruk-navy-600);
+
+  --clr-carousel-button: var(--clr-primary);
+
+  --clr-check: var(--clr-cruk-magenta-700);
+
+  --clr-footer-background: var(--clr-cruk-white);
+
+  --clr-header-background: var(--clr-cruk-white);
+  --clr-header-border: var(--clr-cruk-grey-200);
+  --clr-header-tagline-text: var(--clr-cruk-black);
+
+  --clr-heading-default: var(--clr-cruk-black);
+
+  --clr-link: var(--clr-cruk-magenta-700);
+  --clr-link-hover: var(--clr-cruk-magenta-800);
+  --clr-link-secondary: var(--clr-cruk-magenta-700);
+  --clr-link-secondary-hover: var(--clr-cruk-magenta-800);
+
+  --clr-loader-color-1: var(--clr-cruk-navy-600);
+  --clr-loader-color-2: var(--clr-cruk-magenta-600);
+  --clr-loader-color-3: var(--clr-cruk-cyan-600);
+
+  --clr-modal-backdrop: var(--clr-cruk-black);
+
+  --clr-pagination-text: var(--clr-cruk-navy-600);
+  --clr-pagination-active: var(--clr-cruk-grey-200);
+  --clr-pagination-background: var(--clr-cruk-navy-600);
+
+  --clr-popover-background: var(--clr-cruk-white);
+
+  --clr-progress-bar: var(--clr-cruk-navy-600);
+  --clr-progress-bar-secondary: var(--clr-cruk-magenta-700);
+  --clr-progress-bar-background: var(--clr-cruk-grey-200);
+  --clr-progress-circular: var(--clr-cruk-cyan-600);
+  --clr-progress-circular-secondary: var(--clr-cruk-magenta-700);
+  --clr-progress-circular-background: var(--clr-cruk-grey-200);
+
+  --clr-select-background: var(--clr-cruk-black);
+
+  --clr-text-input-border: var(--clr-cruk-grey-900);
+  --clr-text-input-extra-info: var(--clr-cruk-grey-200);
+
+  --clr-step-border: var(--clr-cruk-grey-200);
+  --clr-step-background: var(--clr-cruk-white);
+
+  --clr-totaliser-bubble: var(--clr-cruk-grey-200);
+  --clr-totaliser-bubble-text: var(--clr-cruk-black);
+  --clr-totaliser-bubble-total: var(--clr-cruk-navy-600);
+
+  --clr-user-block-extra-text: var(--clr-cruk-grey-800);
+
+  /* Shadows */
+
+  --shadow-s: 0px 0px 2px 1px var(--clr-cruk-grey-300);
+  --shadow-m: 0px 0px 4px 1px var(--clr-cruk-grey-300);
+  --shadow-l: 0px 0px 7px 1px var(--clr-cruk-grey-300);
+}
+
+[data-theme="cruk"] > * {
+  --theme: "cruk";
+}
+
+[data-theme="rfl"] > * {
+  --theme: "rfl";
+
+  --typ-font-weight-headings: 600;
+
+  --clr-heading-default: var(--clr-cruk-navy-600);
+  --clr-header-tagline-text: var(--clr-cruk-navy-600);
+
+  --clr-progress-bar: var(--clr-cruk-magenta-700);
+  --clr-progress-bar-secondary: var(--clr-cruk-navy-600);
+}
+
+[data-theme="su2c"] > * {
+  --theme: "su2c";
+
+  --btn-border-radius: 1.5rem;
+  --btn-border-radius-large: 2rem;
+  --btn-text-transform: uppercase;
+  --btn-border-thickness: 2px;
+
+  --typ-font-family-headings: "ITCAvantGarde", Arial, sans-serif;
+  --typ-font-family-links: "ITCAvantGarde", Arial, sans-serif;
+  --typ-font-family-buttons: "ITCAvantGarde", Arial, sans-serif;
+  --typ-font-family-base:
+    "ITCAvantGarde", Arial, Calibri, nimbussansl, liberationsans, freesans,
+    clean, sans-serif;
+  --typ-font-family-label:
+    "ITCAvantGarde", Arial, Calibri, nimbussansl, liberationsans, freesans,
+    clean, sans-serif;
+  --typ-link-text-decoration: none;
+  --typ-header-line-height: 1.5em;
+  --typ-header-text-transform: uppercase;
+  --typ-font-weight-base: 400;
+  --typ-font-weight-links: 700;
+  --typ-font-weight-buttons: 700;
+  --typ-font-weight-labels: 600;
+  --typ-font-weight-headings: 700;
+  --typ-link-primary-text-decoration: none;
+
+  --clr-primary: var(--clr-su2c-orange-5);
+  --clr-secondary: var(--clr-su2c-orange-5);
+  --clr-tertiary: var(--clr-su2c-black);
+
+  --clr-text-on-primary: var(--clr-su2c-black);
+  --clr-text-on-secondary: var(--clr-su2c-black);
+  --clr-heading-default: var(--clr-su2c-black);
+
+  --clr-avatar-border: var(--clr-su2c-black);
+  --clr-progress-bar: var(--clr-su2c-orange-5);
+  --clr-progress-bar-secondary: var(--clr-su2c-red);
+  --clr-progress-circular: var(--clr-su2c-orange-3);
+  --clr-progress-circular-secondary: var(--clr-su2c-red);
+
+  --clr-link: var(--clr-su2c-orange-7);
+  --clr-link-hover: var(--clr-su2c-orange-8);
+  --clr-link-secondary: var(--clr-su2c-orange-7);
+  --clr-link-secondary-hover: var(--clr-su2c-orange-8);
+
+  --clr-background-light-color: var(--clr-su2c-orange-2);
+
+  --clr-loader-color-1: var(--clr-su2c-orange-5);
+  --clr-loader-color-2: var(--clr-su2c-red);
+  --clr-loader-color-3: var(--clr-su2c-black);
+
+  --clr-pagination-text: var(--clr-su2c-black);
+  --clr-pagination-background: var(--clr-su2c-black);
+
+  --clr-totaliser-bubble: var(--clr-su2c-black);
+  --clr-totaliser-bubble-text: var(--clr-cruk-white);
+  --clr-totaliser-bubble-total: var(--clr-cruk-white);
+
+  --clr-collapse-header: var(--clr-su2c-orange-7);
+  --clr-check: var(--clr-su2c-black);
+  --clr-carousel-button: var(--clr-su2c-black);
+
+  --clr-header-tagline-text: var(--clr-su2c-black);
+
+  --clr-button-primary-background: var(--clr-su2c-orange-5);
+  --clr-button-primary-text: var(--clr-su2c-black);
+  --clr-button-primary-border: var(--clr-su2c-orange-5);
+  --clr-button-primary-background-hover: var(--clr-su2c-orange-6);
+  --clr-button-primary-text-hover: var(--clr-su2c-black);
+  --clr-button-primary-border-hover: var(--clr-su2c-orange-6);
+  --clr-button-primary-disabled-background: var(--clr-grey-200);
+  --clr-button-primary-disabled-text: var(--clr-grey-600);
+  --clr-button-primary-disabled-border: var(--clr-grey-200);
+
+  --clr-button-secondary-background: var(--clr-cruk-white);
+  --clr-button-secondary-text: var(--clr-su2c-black);
+  --clr-button-secondary-border: var(--clr-su2c-orange-6);
+  --clr-button-secondary-background-hover: var(--clr-su2c-orange-1);
+  --clr-button-secondary-text-hover: var(--clr-su2c-black);
+  --clr-button-secondary-border-hover: var(--clr-su2c-orange-1);
+  --clr-button-secondary-disabled-background: var(--clr-cruk-white);
+  --clr-button-secondary-disabled-text: var(--clr-grey-200);
+  --clr-button-secondary-disabled-border: var(--clr-grey-200);
+
+  --clr-button-tertiary-text: var(--clr-su2c-orange-7);
+  --clr-button-tertiary-text-hover: var(--clr-su2c-orange-8);
+  --clr-button-tertiary-disabled-text: var(--clr-grey-200);
+}
+
+[data-theme="bowelbabe"] > * {
+  --theme: "bowelbabe";
+
+  --btn-border-radius: 2em;
+  --btn-horizontal-padding: 1rem;
+  --btn-border-thickness: 2px;
+
+  --typ-font-family-headings: "juana", Arial, sans-serif;
+  --typ-font-family-links: "juana", Arial, sans-serif;
+  --typ-font-family-buttons: "juana", Arial, sans-serif;
+  --typ-font-family-base:
+    Arial, Calibri, nimbussansl, liberationsans, freesans, clean, sans-serif;
+  --typ-font-family-label:
+    Arial, Calibri, nimbussansl, liberationsans, freesans, clean, sans-serif;
+  --typ-header-line-height: 1.5em;
+  --typ-font-weight-base: 400;
+  --typ-font-weight-links: 600;
+  --typ-font-weight-headings: 600;
+  --typ-font-weight-buttons: 600;
+  --typ-font-weight-labels: 600;
+  /* might not be needed */
+  --typ-link-primary-text-decoration: none;
+
+  --clr-primary: var(--clr-bowelbabe-purple);
+  --clr-secondary: var(--clr-bowelbabe-green);
+  --clr-tertiary: var(--clr-bowelbabe-teal);
+
+  --clr-text-on-primary: var(--clr-cruk-white);
+  --clr-text-on-secondary: var(--clr-bowelbabe-purple);
+  --clr-text-on-tertiary: var(--clr-cruk-white);
+
+  --clr-warning: var(--clr-bowelbabe-yellow);
+  --clr-success: var(--clr-bowelbabe-green);
+  --clr-info: var(--clr-bowelbabe-blue);
+
+  --clr-avatar-border: var(--clr-bowelbabe-purple);
+  --clr-progress-bar: var(--clr-bowelbabe-light-green);
+  --clr-progress-bar-secondary: var(--clr-bowelbabe-green);
+  --clr-progress-circular: var(--clr-bowelbabe-light-green);
+  --clr-progress-circular-secondary: var(--clr-bowelbabe-green);
+  --clr-link: var(--clr-bowelbabe-purple);
+  --clr-link-hover: var(--clr-bowelbabe-pink);
+  --clr-link-secondary: var(--clr-bowelbabe-purple);
+  --clr-link-secondary-hover: var(--clr-bowelbabe-pink);
+
+  --clr-background-light-color: var(--clr-bowelbabe-pastel-green);
+
+  --clr-collapse-header: var(--clr-bowelbabe-pink);
+  --clr-check: var(--clr-bowelbabe-purple);
+  --clr-carousel-button: var(--clr-bowelbabe-purple);
+
+  --clr-header-tagline-text: var(--clr-bowelbabe-purple);
+
+  --clr-loader-color-1: var(--clr-bowelbabe-purple);
+  --clr-loader-color-2: var(--clr-bowelbabe-light-green);
+  --clr-loader-color-3: var(--clr-bowelbabe-pink);
+
+  --clr-pagination-text: var(--clr-bowelbabe-purple);
+  --clr-pagination-background: var(--clr-bowelbabe-purple);
+
+  --clr-totaliser-bubble: var(--clr-bowelbabe-purple);
+  --clr-totaliser-bubble-text: var(--clr-bowelbabe-light-green);
+  --clr-totaliser-bubble-total: var(--clr-cruk-white);
+
+  --clr-button-primary-background: var(--clr-bowelbabe-pastel-yellow);
+  --clr-button-primary-text: var(--clr-bowelbabe-purple);
+  --clr-button-primary-border: var(--clr-bowelbabe-pastel-yellow);
+  --clr-button-primary-background-hover: var(--clr-bowelbabe-pastel-pink);
+  --clr-button-primary-text-hover: var(--clr-bowelbabe-purple);
+  --clr-button-primary-border-hover: var(--clr-bowelbabe-pastel-pink);
+  --clr-button-primary-disabled-background: var(--clr-cruk-grey-200);
+  --clr-button-primary-disabled-text: var(--clr-cruk-grey-800);
+  --clr-button-primary-disabled-border: var(--clr-cruk-grey-200);
+
+  --clr-button-secondary-background: var(--clr-cruk-white);
+  --clr-button-secondary-text: var(--clr-bowelbabe-purple);
+  --clr-button-secondary-border: var(--clr-bowelbabe-pastel-yellow);
+  --clr-button-secondary-background-hover: var(--clr-bowelbabe-pastel-pink);
+  --clr-button-secondary-text-hover: var(--clr-bowelbabe-purple);
+  --clr-button-secondary-border-hover: var(--clr-bowelbabe-pastel-yellow);
+  --clr-button-secondary-disabled-background: var(--clr-cruk-grey-200);
+  --clr-button-secondary-disabled-text: var(--clr-cruk-grey-800);
+  --clr-button-secondary-disabled-border: var(--clr-cruk-grey-200);
+
+  --clr-button-tertiary-text: var(--clr-bowelbabe-purple);
+  --clr-button-tertiary-text-hover: var(--clr-bowelbabe-pink);
+  --clr-button-tertiary-disabled-text: var(--clr-cruk-grey-200);
+}
+
+/* Adding body to all utility class selectors to have enough specificity to beat component module css */
+
+.spacing-props {
+  /* Margin */
+  body &[data-margin="none"] {
+    margin: var(--spacing-none);
+  }
+  body &[data-margin="auto"] {
+    margin: var(--spacing-auto);
+  }
+  body &[data-margin="xxxs"] {
+    margin: var(--spacing-xxxs);
+  }
+  body &[data-margin="xxs"] {
+    margin: var(--spacing-xxs);
+  }
+  body &[data-margin="xs"] {
+    margin: var(--spacing-xs);
+  }
+  body &[data-margin="s"] {
+    margin: var(--spacing-s);
+  }
+  body &[data-margin="m"] {
+    margin: var(--spacing-m);
+  }
+  body &[data-margin="l"] {
+    margin: var(--spacing-l);
+  }
+  body &[data-margin="xl"] {
+    margin: var(--spacing-xl);
+  }
+  body &[data-margin="xxl"] {
+    margin: var(--spacing-xxl);
+  }
+  body &[data-margin="xxxl"] {
+    margin: var(--spacing-xxxl);
+  }
+
+  /* Margin vertical */
+  body &[data-margin-vertical="none"] {
+    margin-top: var(--spacing-none);
+    margin-bottom: var(--spacing-none);
+  }
+  body &[data-margin-vertical="auto"] {
+    margin-top: var(--spacing-auto);
+    margin-bottom: var(--spacing-auto);
+  }
+  body &[data-margin-vertical="xxxs"] {
+    margin-top: var(--spacing-xxxs);
+    margin-bottom: var(--spacing-xxxs);
+  }
+  body &[data-margin-vertical="xxs"] {
+    margin-top: var(--spacing-xxs);
+    margin-bottom: var(--spacing-xxs);
+  }
+  body &[data-margin-vertical="xs"] {
+    margin-top: var(--spacing-xs);
+    margin-bottom: var(--spacing-xs);
+  }
+  body &[data-margin-vertical="s"] {
+    margin-top: var(--spacing-s);
+    margin-bottom: var(--spacing-s);
+  }
+  body &[data-margin-vertical="m"] {
+    margin-top: var(--spacing-m);
+    margin-bottom: var(--spacing-m);
+  }
+  body &[data-margin-vertical="l"] {
+    margin-top: var(--spacing-l);
+    margin-bottom: var(--spacing-l);
+  }
+  body &[data-margin-vertical="xl"] {
+    margin-top: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+  }
+  body &[data-margin-vertical="xxl"] {
+    margin-top: var(--spacing-xxl);
+    margin-bottom: var(--spacing-xxl);
+  }
+  body &[data-margin-vertical="xxxl"] {
+    margin-top: var(--spacing-xxxl);
+    margin-bottom: var(--spacing-xxxl);
+  }
+  /* Margin horizontal */
+  body &[data-margin-horizontal="none"] {
+    margin-left: var(--spacing-none);
+    margin-right: var(--spacing-none);
+  }
+  body &[data-margin-horizontal="auto"] {
+    margin-left: var(--spacing-auto);
+    margin-right: var(--spacing-auto);
+  }
+  body &[data-margin-horizontal="xxxs"] {
+    margin-left: var(--spacing-xxxs);
+    margin-right: var(--spacing-xxxs);
+  }
+  body &[data-margin-horizontal="xxs"] {
+    margin-left: var(--spacing-xxs);
+    margin-right: var(--spacing-xxs);
+  }
+  body &[data-margin-horizontal="xs"] {
+    margin-left: var(--spacing-xs);
+    margin-right: var(--spacing-xs);
+  }
+  body &[data-margin-horizontal="s"] {
+    margin-left: var(--spacing-s);
+    margin-right: var(--spacing-s);
+  }
+  body &[data-margin-horizontal="m"] {
+    margin-left: var(--spacing-m);
+    margin-right: var(--spacing-m);
+  }
+  body &[data-margin-horizontal="l"] {
+    margin-left: var(--spacing-l);
+    margin-right: var(--spacing-l);
+  }
+  body &[data-margin-horizontal="xl"] {
+    margin-left: var(--spacing-xl);
+    margin-right: var(--spacing-xl);
+  }
+  body &[data-margin-horizontal="xxl"] {
+    margin-left: var(--spacing-xxl);
+    margin-right: var(--spacing-xxl);
+  }
+  body &[data-margin-horizontal="xxxl"] {
+    margin-left: var(--spacing-xxxl);
+    margin-right: var(--spacing-xxxl);
+  }
+  /* Margin top */
+  body &[data-margin-top="none"] {
+    margin-top: var(--spacing-none);
+  }
+  body &[data-margin-top="auto"] {
+    margin-top: var(--spacing-auto);
+  }
+  body &[data-margin-top="xxxs"] {
+    margin-top: var(--spacing-xxxs);
+  }
+  body &[data-margin-top="xxs"] {
+    margin-top: var(--spacing-xxs);
+  }
+  body &[data-margin-top="xs"] {
+    margin-top: var(--spacing-xs);
+  }
+  body &[data-margin-top="s"] {
+    margin-top: var(--spacing-s);
+  }
+  body &[data-margin-top="m"] {
+    margin-top: var(--spacing-m);
+  }
+  body &[data-margin-top="l"] {
+    margin-top: var(--spacing-l);
+  }
+  body &[data-margin-top="xl"] {
+    margin-top: var(--spacing-xl);
+  }
+  body &[data-margin-top="xxl"] {
+    margin-top: var(--spacing-xxl);
+  }
+  body &[data-margin-top="xxxl"] {
+    margin-top: var(--spacing-xxxl);
+  }
+  /* Margin right */
+  body &[data-margin-right="none"] {
+    margin-right: var(--spacing-none);
+  }
+  body &[data-margin-right="auto"] {
+    margin-right: var(--spacing-auto);
+  }
+  body &[data-margin-right="xxxs"] {
+    margin-right: var(--spacing-xxxs);
+  }
+  body &[data-margin-right="xxs"] {
+    margin-right: var(--spacing-xxs);
+  }
+  body &[data-margin-right="xs"] {
+    margin-right: var(--spacing-xs);
+  }
+  body &[data-margin-right="s"] {
+    margin-right: var(--spacing-s);
+  }
+  body &[data-margin-right="m"] {
+    margin-right: var(--spacing-m);
+  }
+  body &[data-margin-right="l"] {
+    margin-right: var(--spacing-l);
+  }
+  body &[data-margin-right="xl"] {
+    margin-right: var(--spacing-xl);
+  }
+  body &[data-margin-right="xxl"] {
+    margin-right: var(--spacing-xxl);
+  }
+  body &[data-margin-right="xxxl"] {
+    margin-right: var(--spacing-xxxl);
+  }
+
+  /* Margin bottom */
+  body &[data-margin-bottom="none"] {
+    margin-bottom: var(--spacing-none);
+  }
+  body &[data-margin-bottom="auto"] {
+    margin-bottom: var(--spacing-auto);
+  }
+  body &[data-margin-bottom="xxxs"] {
+    margin-bottom: var(--spacing-xxxs);
+  }
+  body &[data-margin-bottom="xxs"] {
+    margin-bottom: var(--spacing-xxs);
+  }
+  body &[data-margin-bottom="xs"] {
+    margin-bottom: var(--spacing-xs);
+  }
+  body &[data-margin-bottom="s"] {
+    margin-bottom: var(--spacing-s);
+  }
+  body &[data-margin-bottom="m"] {
+    margin-bottom: var(--spacing-m);
+  }
+  body &[data-margin-bottom="l"] {
+    margin-bottom: var(--spacing-l);
+  }
+  body &[data-margin-bottom="xl"] {
+    margin-bottom: var(--spacing-xl);
+  }
+  body &[data-margin-bottom="xxl"] {
+    margin-bottom: var(--spacing-xxl);
+  }
+  body &[data-margin-bottom="xxxl"] {
+    margin-bottom: var(--spacing-xxxl);
+  }
+  /* Margin left */
+  body &[data-margin-left="none"] {
+    margin-left: var(--spacing-none);
+  }
+  body &[data-margin-left="auto"] {
+    margin-left: var(--spacing-auto);
+  }
+  body &[data-margin-left="xxxs"] {
+    margin-left: var(--spacing-xxxs);
+  }
+  body &[data-margin-left="xxs"] {
+    margin-left: var(--spacing-xxs);
+  }
+  body &[data-margin-left="xs"] {
+    margin-left: var(--spacing-xs);
+  }
+  body &[data-margin-left="s"] {
+    margin-left: var(--spacing-s);
+  }
+  body &[data-margin-left="m"] {
+    margin-left: var(--spacing-m);
+  }
+  body &[data-margin-left="l"] {
+    margin-left: var(--spacing-l);
+  }
+  body &[data-margin-left="xl"] {
+    margin-left: var(--spacing-xl);
+  }
+  body &[data-margin-left="xxl"] {
+    margin-left: var(--spacing-xxl);
+  }
+  body &[data-margin-left="xxxl"] {
+    margin-left: var(--spacing-xxxl);
+  }
+  /* Padding */
+  body &[data-padding="none"] {
+    padding: var(--spacing-none);
+  }
+  body &[data-padding="auto"] {
+    padding: var(--spacing-auto);
+  }
+  body &[data-padding="xxxs"] {
+    padding: var(--spacing-xxxs);
+  }
+  body &[data-padding="xxs"] {
+    padding: var(--spacing-xxs);
+  }
+  body &[data-padding="xs"] {
+    padding: var(--spacing-xs);
+  }
+  body &[data-padding="s"] {
+    padding: var(--spacing-s);
+  }
+  body &[data-padding="m"] {
+    padding: var(--spacing-m);
+  }
+  body &[data-padding="l"] {
+    padding: var(--spacing-l);
+  }
+  body &[data-padding="xl"] {
+    padding: var(--spacing-xl);
+  }
+  body &[data-padding="xxl"] {
+    padding: var(--spacing-xxl);
+  }
+  body &[data-padding="xxxl"] {
+    padding: var(--spacing-xxxl);
+  }
+  /* Padding vertical */
+  body &[data-padding-vertical="none"] {
+    padding-top: var(--spacing-none);
+    padding-bottom: var(--spacing-none);
+  }
+  body &[data-padding-vertical="auto"] {
+    padding-top: var(--spacing-auto);
+    padding-bottom: var(--spacing-auto);
+  }
+  body &[data-padding-vertical="xxxs"] {
+    padding-top: var(--spacing-xxxs);
+    padding-bottom: var(--spacing-xxxs);
+  }
+  body &[data-padding-vertical="xxs"] {
+    padding-top: var(--spacing-xxs);
+    padding-bottom: var(--spacing-xxs);
+  }
+  body &[data-padding-vertical="xs"] {
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+  }
+  body &[data-padding-vertical="s"] {
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
+  body &[data-padding-vertical="m"] {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-m);
+  }
+  body &[data-padding-vertical="l"] {
+    padding-top: var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  body &[data-padding-vertical="xl"] {
+    padding-top: var(--spacing-xl);
+    padding-bottom: var(--spacing-xl);
+  }
+  body &[data-padding-vertical="xxl"] {
+    padding-top: var(--spacing-xxl);
+    padding-bottom: var(--spacing-xxl);
+  }
+  body &[data-padding-vertical="xxxl"] {
+    padding-top: var(--spacing-xxxl);
+    padding-bottom: var(--spacing-xxxl);
+  }
+  /* Padding horizontal */
+  body &[data-padding-horizontal="none"] {
+    padding-left: var(--spacing-none);
+    padding-right: var(--spacing-none);
+  }
+  body &[data-padding-horizontal="auto"] {
+    padding-left: var(--spacing-auto);
+    padding-right: var(--spacing-auto);
+  }
+  body &[data-padding-horizontal="xxxs"] {
+    padding-left: var(--spacing-xxxs);
+    padding-right: var(--spacing-xxxs);
+  }
+  body &[data-padding-horizontal="xxs"] {
+    padding-left: var(--spacing-xxs);
+    padding-right: var(--spacing-xxs);
+  }
+  body &[data-padding-horizontal="xs"] {
+    padding-left: var(--spacing-xs);
+    padding-right: var(--spacing-xs);
+  }
+  body &[data-padding-horizontal="s"] {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  body &[data-padding-horizontal="m"] {
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+  }
+  body &[data-padding-horizontal="l"] {
+    padding-left: var(--spacing-l);
+    padding-right: var(--spacing-l);
+  }
+  body &[data-padding-horizontal="xl"] {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+  body &[data-padding-horizontal="xxl"] {
+    padding-left: var(--spacing-xxl);
+    padding-right: var(--spacing-xxl);
+  }
+  body &[data-padding-horizontal="xxxl"] {
+    padding-left: var(--spacing-xxxl);
+    padding-right: var(--spacing-xxxl);
+  }
+  /* Padding top */
+  body &[data-padding-top="none"] {
+    padding-top: var(--spacing-none);
+  }
+  body &[data-padding-top="auto"] {
+    padding-top: var(--spacing-auto);
+  }
+  body &[data-padding-top="xxxs"] {
+    padding-top: var(--spacing-xxxs);
+  }
+  body &[data-padding-top="xxs"] {
+    padding-top: var(--spacing-xxs);
+  }
+  body &[data-padding-top="xs"] {
+    padding-top: var(--spacing-xs);
+  }
+  body &[data-padding-top="s"] {
+    padding-top: var(--spacing-s);
+  }
+  body &[data-padding-top="m"] {
+    padding-top: var(--spacing-m);
+  }
+  body &[data-padding-top="l"] {
+    padding-top: var(--spacing-l);
+  }
+  body &[data-padding-top="xl"] {
+    padding-top: var(--spacing-xl);
+  }
+  body &[data-padding-top="xxl"] {
+    padding-top: var(--spacing-xxl);
+  }
+  body &[data-padding-top="xxxl"] {
+    padding-top: var(--spacing-xxxl);
+  }
+  /* Padding right */
+  body &[data-padding-right="none"] {
+    padding-right: var(--spacing-none);
+  }
+  body &[data-padding-right="auto"] {
+    padding-right: var(--spacing-auto);
+  }
+  body &[data-padding-right="xxxs"] {
+    padding-right: var(--spacing-xxxs);
+  }
+  body &[data-padding-right="xxs"] {
+    padding-right: var(--spacing-xxs);
+  }
+  body &[data-padding-right="xs"] {
+    padding-right: var(--spacing-xs);
+  }
+  body &[data-padding-right="s"] {
+    padding-right: var(--spacing-s);
+  }
+  body &[data-padding-right="m"] {
+    padding-right: var(--spacing-m);
+  }
+  body &[data-padding-right="l"] {
+    padding-right: var(--spacing-l);
+  }
+  body &[data-padding-right="xl"] {
+    padding-right: var(--spacing-xl);
+  }
+  body &[data-padding-right="xxl"] {
+    padding-right: var(--spacing-xxl);
+  }
+  body &[data-padding-right="xxxl"] {
+    padding-right: var(--spacing-xxxl);
+  }
+  /* Padding bottom */
+  body &[data-padding-bottom="none"] {
+    padding-bottom: var(--spacing-none);
+  }
+  body &[data-padding-bottom="auto"] {
+    padding-bottom: var(--spacing-auto);
+  }
+  body &[data-padding-bottom="xxxs"] {
+    padding-bottom: var(--spacing-xxxs);
+  }
+  body &[data-padding-bottom="xxs"] {
+    padding-bottom: var(--spacing-xxs);
+  }
+  body &[data-padding-bottom="xs"] {
+    padding-bottom: var(--spacing-xs);
+  }
+  body &[data-padding-bottom="s"] {
+    padding-bottom: var(--spacing-s);
+  }
+  body &[data-padding-bottom="m"] {
+    padding-bottom: var(--spacing-m);
+  }
+  body &[data-padding-bottom="l"] {
+    padding-bottom: var(--spacing-l);
+  }
+  body &[data-padding-bottom="xl"] {
+    padding-bottom: var(--spacing-xl);
+  }
+  body &[data-padding-bottom="xxl"] {
+    padding-bottom: var(--spacing-xxl);
+  }
+  body &[data-padding-bottom="xxxl"] {
+    padding-bottom: var(--spacing-xxxl);
+  }
+  /* Padding left */
+  body &[data-padding-left="none"] {
+    padding-left: var(--spacing-none);
+  }
+  body &[data-padding-left="auto"] {
+    padding-left: var(--spacing-auto);
+  }
+  body &[data-padding-left="xxxs"] {
+    padding-left: var(--spacing-xxxs);
+  }
+  body &[data-padding-left="xxs"] {
+    padding-left: var(--spacing-xxs);
+  }
+  body &[data-padding-left="xs"] {
+    padding-left: var(--spacing-xs);
+  }
+  body &[data-padding-left="s"] {
+    padding-left: var(--spacing-s);
+  }
+  body &[data-padding-left="m"] {
+    padding-left: var(--spacing-m);
+  }
+  body &[data-padding-left="l"] {
+    padding-left: var(--spacing-l);
+  }
+  body &[data-padding-left="xl"] {
+    padding-left: var(--spacing-xl);
+  }
+  body &[data-padding-left="xxl"] {
+    padding-left: var(--spacing-xxl);
+  }
+  body &[data-padding-left="xxxl"] {
+    padding-left: var(--spacing-xxxl);
+  }
+}
+
+.text-props {
+  /* word-break */
+  body &[data-word-break="normal"] {
+    word-break: normal;
+  }
+  body &[data-word-break="break-all"] {
+    word-break: break-all;
+  }
+  body &[data-word-break="keep-all"] {
+    word-break: keep-all;
+  }
+  body &[data-word-break="break-word"] {
+    word-break: break-word;
+  }
+  body &[data-word-break="inherit"] {
+    word-break: inherit;
+  }
+  body &[data-word-break="initial"] {
+    word-break: initial;
+  }
+  body &[data-word-break="unset"] {
+    word-break: unset;
+  }
+
+  /* overflow-wrap */
+  body &[data-overflow-wrap="normal"] {
+    overflow-wrap: normal;
+  }
+  body &[data-overflow-wrap="break-word"] {
+    overflow-wrap: break-word;
+  }
+  body &[data-overflow-wrap="anywhere"] {
+    overflow-wrap: anywhere;
+  }
+  body &[data-overflow-wrap="inherit"] {
+    overflow-wrap: inherit;
+  }
+  body &[data-overflow-wrap="initial"] {
+    overflow-wrap: initial;
+  }
+  body &[data-overflow-wrap="unset"] {
+    overflow-wrap: unset;
+  }
+
+  /* Text align */
+  body &[data-text-align="left"] {
+    text-align: left;
+  }
+  body &[data-text-align="center"] {
+    text-align: center;
+  }
+  body &[data-text-align="right"] {
+    text-align: right;
+  }
+  body &[data-text-align="justify"] {
+    text-align: justify;
+  }
+  /* Text family */
+  body &[data-text-font-family="base"] {
+    font-family: var(--typ-font-family-base);
+  }
+  body &[data-text-font-family="headings"] {
+    font-family: var(--typ-font-family-headings);
+  }
+  body &[data-text-font-family="links"] {
+    font-family: var(--typ-font-family-links);
+  }
+  body &[data-text-font-family="buttons"] {
+    font-family: var(--typ-font-family-buttons);
+  }
+  body &[data-text-font-family="label"] {
+    font-family: var(--typ-font-family-label);
+  }
+
+  /* Text weight */
+  body &[data-text-weight="base"] {
+    font-weight: var(--typ-font-weight-base);
+  }
+  body &[data-text-weight="headings"] {
+    font-weight: var(--typ-font-weight-headings);
+  }
+  body &[data-text-weight="links"] {
+    font-weight: var(--typ-font-weight-links);
+  }
+  body &[data-text-weight="buttons"] {
+    font-weight: var(--typ-font-weight-buttons);
+  }
+  body &[data-text-weight="labels"] {
+    font-weight: var(--typ-font-weight-labels);
+  }
+  body &[data-text-weight="heavy"] {
+    font-weight: var(--typ-font-weight-heavy);
+  }
+  body &[data-text-weight="medium"] {
+    font-weight: var(--typ-font-weight-medium);
+  }
+  body &[data-text-weight="normal"] {
+    font-weight: var(--typ-font-weight-normal);
+  }
+  body &[data-text-weight="light"] {
+    font-weight: var(--typ-font-weight-light);
+  }
+  body &[data-text-weight="vlight"] {
+    font-weight: var(--typ-font-weight-vlight);
+  }
+
+  /* Text size */
+  body &[data-text-size="s"] {
+    font-size: var(--font-size-s);
+  }
+  body &[data-text-size="m"] {
+    font-size: var(--font-size-m);
+  }
+  body &[data-text-size="ml"] {
+    font-size: var(--font-size-ml);
+  }
+  body &[data-text-size="l"] {
+    font-size: var(--font-size-l);
+  }
+  body &[data-text-size="xl"] {
+    font-size: var(--font-size-xl);
+  }
+  body &[data-text-size="xxl"] {
+    font-size: var(--font-size-xxl);
+  }
+  body &[data-text-size="xxxl"] {
+    font-size: var(--font-size-xxxl);
+  }
+  body &[data-text-size="xxxxl"] {
+    font-size: var(--font-size-xxxxl);
+  }
+}
+
+.color-props {
+  /* Text color */
+
+  /* Generic colours */
+  body &[data-color="currentColor"] {
+    color: currentColor;
+  }
+  body &[data-color="primary"] {
+    color: var(--clr-primary);
+  }
+  body &[data-color="secondary"] {
+    color: var(--clr-secondary);
+  }
+  body &[data-color="tertiary"] {
+    color: var(--clr-tertiary);
+  }
+  body &[data-color="sports-activity"] {
+    color: var(--clr-sports-activity);
+  }
+
+  body &[data-color="text-on-primary"] {
+    color: var(--clr-text-on-primary);
+  }
+  body &[data-color="text-on-secondary"] {
+    color: var(--clr-text-on-secondary);
+  }
+  body &[data-color="text-on-tertiary"] {
+    color: var(--clr-text-on-tertiary);
+  }
+
+  body &[data-color="background-light"] {
+    color: var(--clr-background-light);
+  }
+  body &[data-color="background-light-color"] {
+    color: var(--clr-background-light-color);
+  }
+  body &[data-color="background-mid"] {
+    color: var(--clr-background-mid);
+  }
+  body &[data-color="background-mid-light"] {
+    color: var(--clr-background-mid-light);
+  }
+
+  body &[data-color="disabled"] {
+    color: var(--clr-disabled);
+  }
+  body &[data-color="danger"] {
+    color: var(--clr-danger);
+  }
+  body &[data-color="warning"] {
+    color: var(--clr-warning);
+  }
+  body &[data-color="success"] {
+    color: var(--clr-success);
+  }
+  body &[data-color="info"] {
+    color: var(--clr-info);
+  }
+
+  body &[data-color="text-dark"] {
+    color: var(--clr-text-dark);
+  }
+  body &[data-color="text-light"] {
+    color: var(--clr-text-light);
+  }
+  body &[data-color="text-mid"] {
+    color: var(--clr-text-mid);
+  }
+
+  /* Background color */
+  body &[data-bg-color="currentColor"] {
+    background-color: currentColor;
+  }
+  body &[data-bg-color="primary"] {
+    background-color: var(--clr-primary);
+  }
+  body &[data-bg-color="secondary"] {
+    background-color: var(--clr-secondary);
+  }
+  body &[data-bg-color="tertiary"] {
+    background-color: var(--clr-tertiary);
+  }
+  body &[data-bg-color="sports-activity"] {
+    background-color: var(--clr-sports-activity);
+  }
+
+  body &[data-bg-color="text-on-primary"] {
+    background-color: var(--clr-text-on-primary);
+  }
+  body &[data-bg-color="text-on-secondary"] {
+    background-color: var(--clr-text-on-secondary);
+  }
+  body &[data-bg-color="text-on-tertiary"] {
+    background-color: var(--clr-text-on-tertiary);
+  }
+
+  body &[data-bg-color="background-light"] {
+    background-color: var(--clr-background-light);
+  }
+  body &[data-bg-color="background-light-color"] {
+    background-color: var(--clr-background-light-color);
+  }
+  body &[data-bg-color="background-mid"] {
+    background-color: var(--clr-background-mid);
+  }
+  body &[data-bg-color="background-mid-light"] {
+    background-color: var(--clr-background-mid-light);
+  }
+
+  body &[data-bg-color="disabled"] {
+    background-color: var(--clr-disabled);
+  }
+  body &[data-bg-color="danger"] {
+    background-color: var(--clr-danger);
+  }
+  body &[data-bg-color="warning"] {
+    background-color: var(--clr-warning);
+  }
+  body &[data-bg-color="success"] {
+    background-color: var(--clr-success);
+  }
+  body &[data-bg-color="info"] {
+    background-color: var(--clr-info);
+  }
+
+  body &[data-bg-color="text-dark"] {
+    background-color: var(--clr-text-dark);
+  }
+  body &[data-bg-color="text-light"] {
+    background-color: var(--clr-text-light);
+  }
+  body &[data-bg-color="text-mid"] {
+    background-color: var(--clr-text-mid);
+  }
+
+  /* Border colour */
+  body &[data-border-color="currentColor"] {
+    border-color: currentColor;
+  }
+  body &[data-border-color="primary"] {
+    border-color: var(--clr-primary);
+  }
+  body &[data-border-color="secondary"] {
+    border-color: var(--clr-secondary);
+  }
+  body &[data-border-color="tertiary"] {
+    border-color: var(--clr-tertiary);
+  }
+  body &[data-border-color="sports-activity"] {
+    border-color: var(--clr-sports-activity);
+  }
+
+  body &[data-border-color="text-on-primary"] {
+    border-color: var(--clr-text-on-primary);
+  }
+  body &[data-border-color="text-on-secondary"] {
+    border-color: var(--clr-text-on-secondary);
+  }
+  body &[data-border-color="text-on-tertiary"] {
+    border-color: var(--clr-text-on-tertiary);
+  }
+  body &[data-border-color="background-light"] {
+    border-color: var(--clr-background-light);
+  }
+  body &[data-border-color="background-light-color"] {
+    border-color: var(--clr-background-light-color);
+  }
+  body &[data-border-color="background-mid"] {
+    border-color: var(--clr-background-mid);
+  }
+  body &[data-border-color="background-mid-light"] {
+    border-color: var(--clr-background-mid-light);
+  }
+
+  body &[data-border-color="disabled"] {
+    border-color: var(--clr-disabled);
+  }
+  body &[data-border-color="danger"] {
+    border-color: var(--clr-danger);
+  }
+  body &[data-border-color="warning"] {
+    border-color: var(--clr-warning);
+  }
+  &[data-border-color="success"] {
+    border-color: var(--clr-success);
+  }
+  body &[data-border-color="info"] {
+    border-color: var(--clr-info);
+  }
+
+  body &[data-border-color="text-dark"] {
+    border-color: var(--clr-text-dark);
+  }
+  body &[data-border-color="text-light"] {
+    border-color: var(--clr-text-light);
+  }
+  body &[data-border-color="text-mid"] {
+    border-color: var(--clr-text-mid);
+  }
+}
+
+.screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+.address-lookup-list-wrapper {
+  position: relative;
+
+  ul {
+    background-color: var(--clr-background-light, #ffffff);
+    border-radius: 3px;
+    border: 2px solid #ccc;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
+    list-style: none;
+    margin-top: 0;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 999;
+
+    li {
+      align-items: center;
+      background-color: var(--clr-background-light, #ffffff);
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      padding: 5px;
+
+      &:hover,
+      &:focus {
+        background-color: var(--clr-background-mid, #f0f0f0);
+      }
+    }
+  }
+}
+
+.component-avatar {
+  --avatar-size-s: 32px;
+  --avatar-size-m: 48px;
+  --avatar-size-l: 64px;
+  --avatar-size-xl: 128px;
+
+  &[data-size="s"] {
+    --_avatar-size: var(--avatar-size-s);
+  }
+  &[data-size="m"] {
+    --_avatar-size: var(--avatar-size-m);
+  }
+  &[data-size="l"] {
+    --_avatar-size: var(--avatar-size-l);
+  }
+  &[data-size="xl"] {
+    --_avatar-size: var(--avatar-size-xl);
+  }
+  &[data-size="full"] {
+    --_avatar-size: 100%;
+  }
+
+  height: var(--_avatar-size);
+  width: var(--_avatar-size);
+  --_avatar-size: var(--avatar-size-m);
+  --_avatar-size: var(--avatar-size-$ {({$size}) => $size});
+  box-sizing: border-box;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--clr-avatar-border, #cccccc);
+}
+
+.component-badge {
+  --_badge-size: var(--spacing-xs, 1rem);
+
+  &[data-size="xs"] {
+    --_badge-size: var(--spacing-xs, 0.5rem);
+  }
+
+  &[data-size="s"] {
+    --_badge-size: var(--spacing-xs, 1rem);
+  }
+
+  &[data-size="m"] {
+    --_badge-size: var(--spacing-s, 1.5rem);
+  }
+
+  &[data-size="l"] {
+    --_badge-size: var(--spacing-m, 2rem);
+  }
+
+  &[data-size="xl"] {
+    --_badge-size: var(--spacing-l, 3rem);
+  }
+
+  display: inline-block;
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+  font-size: var(--font-size-m, 1rem);
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  min-width: calc(var(--_badge-size) + var(--spacing-xs, 1rem));
+  border-color: transparent;
+  background-color: var(--clr-primary);
+  color: var(--clr-text-on-primary);
+
+  padding: var(--spacing-xxs, 0.5rem);
+  border-radius: 1.5rem;
+  height: auto;
+  width: auto;
+  line-height: 1em;
+  /* width: calc(
+    var(--_badge-size) + var(--spacing-xs, 1rem) + var(--_border-width, 1px) * 2
+  ); */
+
+  &[data-is-square="true"] {
+    padding: 0;
+    border-radius: 50%;
+    height: calc(
+      var(--_badge-size) + var(--spacing-xs, 1rem) + var(--_border-width, 1px) *
+        2
+    );
+    width: auto;
+    line-height: calc(var(--_badge-size) + var(--spacing-xs, 1rem));
+  }
+}
+
+.component-box {
+  background-color: transparent;
+  padding: 0;
+  margin: 0 0 var(--spacing-m, 2rem) 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+  /* if we have a background color, add padding */
+  &[data-bg-color] {
+    padding: var(--spacing-s, 1.5rem);
+  }
+}
+
+.component-button {
+  --_button-height: 3rem;
+  --_button-height-large: 4rem;
+
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+
+  height: -moz-min-content;
+
+  height: min-content;
+  min-height: var(--_button-height, 3rem);
+  width: auto;
+  min-width: auto;
+
+  /* If we know the button height the border height and the line height we can calculate the padding */
+  padding: calc(
+      (
+          var(--_button-height, 3rem) - (var(--btn-border-thickness, 2px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    2em;
+
+  border-radius: var(--btn-border-radius, 0px);
+  border-style: solid;
+  border-width: var(--btn-border-thickness, 2px);
+
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+  cursor: pointer;
+
+  font-size: var(--font-size-m, 1rem);
+  font-family: var(--typ-font-family-buttons, "Poppins", Arial, sans-serif);
+  font-weight: var(--typ-font-weight-buttons, 400);
+  text-align: center;
+  text-transform: var(--btn-text-transform, none);
+  -webkit-text-decoration: var(--btn-text-decoration, none);
+          text-decoration: var(--btn-text-decoration, none);
+
+  &:focus-visible {
+    outline: auto;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &[data-is-icon-button="true"] {
+    padding: 0;
+    width: var(--_button-height, 3rem);
+    min-width: var(--_button-height, 3rem);
+  }
+
+  &[data-full="true"] {
+    width: 100%;
+  }
+
+  &[data-appearance="primary"] {
+    background-color: var(--clr-button-primary-background, #e60079);
+    border-color: var(--clr-button-primary-border, #e60079);
+    color: var(--clr-button-primary-text, #ffffff);
+    &:focus,
+    &:hover {
+      background-color: var(--clr-button-primary-background-hover, #cc006c);
+      border-color: var(--clr-button-primary-border-hover, #cc006c);
+      color: var(--clr-button-primary-text-hover, #ffffff);
+    }
+    &:disabled {
+      background-color: var(--clr-button-primary-disabled-background, #e6e6e6);
+      color: var(--clr-button-primary-disabled-text, #666666);
+      border-color: var(--clr-button-primary-disabled-border, #e6e6e6);
+    }
+  }
+
+  &[data-appearance="secondary"] {
+    background-color: var(--clr-button-secondary-background, #ffffff);
+    border-color: var(--clr-button-secondary-border, #e60079);
+    color: var(--clr-button-secondary-text, #e60079);
+    &:focus,
+    &:hover {
+      background-color: var(--clr-button-secondary-background-hover, #ffe6f3);
+      border-color: var(--clr-button-secondary-border-hover, #ffe6f3);
+      color: var(--clr-button-secondary-text-hover, #e60079);
+    }
+    &:disabled {
+      background-color: var(
+        --clr-button-secondary-disabled-background,
+        #e6e6e6
+      );
+      color: var(--clr-button-secondary-disabled-text, #666666);
+      border-color: var(--clr-button-secondary-disabled-border, #e6e6e6);
+    }
+  }
+
+  &[data-appearance="tertiary"] {
+    display: inline-block;
+    padding: 0;
+    border: 0px;
+    background-color: rgba(255, 255, 255, 0);
+    transition: color 0.2s ease;
+    color: var(--clr-button-tertiary-text, #e60079);
+    &:focus,
+    &:hover {
+      color: var(--clr-button-tertiary-text-hover, #cc006c);
+    }
+    &:disabled {
+      background-color: transparent;
+      color: var(--clr-button-tertiary-disabled-text, #666666);
+      border-color: transparent;
+    }
+  }
+
+  .spacer {
+    margin-left: var(--spacing-xxs, 1rem);
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+}
+
+/* div */
+.component-carousel {
+  position: relative;
+  width: 100%;
+  overflow-y: hidden;
+
+  ul {
+    --_smooth-scrolling: auto;
+
+    position: relative;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+    padding-left: 0;
+    padding-right: 0;
+    height: 100%;
+    scroll-behavior: var(--_smooth-scrolling);
+
+    &[data-smooth-scrolling="true"] {
+      --_smooth-scrolling: smooth;
+    }
+
+    li {
+      scroll-snap-align: center;
+      display: inline-block;
+      width: var(--_full-width-child);
+
+      --_full-width-child: 80%;
+
+      [data-full-width-child="true"] {
+        --_full-width-child: 100%;
+      }
+
+      .carousel-card-inner {
+        --_selected: "false";
+        --_shrink-unselected-pages: "false";
+        --_only-child: "false";
+        --_full-width-child: "false";
+
+        transition: transform 0.2s linear;
+        transform: scale(0.9);
+
+        &[data-only-child="true"] {
+          transform: scale(1);
+        }
+
+        &[data-selected="true"][data-shrink-unselected-pages="true"] {
+          transform: scale(1);
+        }
+        &[data-full-width-child="true"] {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
+  .button-wrapper {
+    display: flex;
+    justify-content: center;
+    font-size: 1em;
+  }
+
+  .vertical-align {
+    display: block;
+    margin: auto;
+    height: 1.25em; /* should be same size a icon size */
+  }
+
+  .carousel-button {
+    height: 100%;
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0);
+    border: none;
+    /* TODO if this makes it into the component library carouselButtonColor should be a theme prop */
+    color: var(--clr-carousel-button, #e60079);
+    font-size: var(--font-size-xxxl, 2rem);
+    font-weight: 600;
+    transition:
+      color 0.3s ease,
+      transform 0.3s ease;
+    max-width: 3rem;
+    padding: 0;
+    vertical-align: middle;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+
+    transform: scale(0.8);
+    &:hover {
+      transform: scale(1);
+
+      &:disabled {
+        transform: scale(0.8);
+      }
+    }
+
+    &:disabled {
+      color: var(--clr-disabled, #e6e6e6);
+    }
+  }
+
+  .dot-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    display: none;
+
+    /* on mobile hide dots if count is greater than 6 */
+    &[data-count="1"],
+    &[data-count="2"],
+    &[data-count="3"],
+    &[data-count="4"],
+    &[data-count="5"],
+    &[data-count="6"] {
+      display: flex;
+    }
+
+    /* on tablet hide dots if count is greater than 10 */
+    @media (min-width: 768px) {
+      &[data-count="7"],
+      &[data-count="8"],
+      &[data-count="9"],
+      &[data-count="10"] {
+        display: flex;
+      }
+    }
+    /* on tablet hide dots if count is greater than 20 */
+    @media (min-width: 1024px) {
+      &[data-count="11"],
+      &[data-count="12"],
+      &[data-count="13"],
+      &[data-count="14"],
+      &[data-count="15"],
+      &[data-count="16"],
+      &[data-count="17"],
+      &[data-count="18"],
+      &[data-count="19"],
+      &[data-count="20"] {
+        display: flex;
+      }
+    }
+    /* button */
+    .dot {
+      border: none;
+      outline-offset: var(--spacing-xxs, 1rem);
+      padding: 0;
+      margin: auto var(--spacing-xxs, 1rem);
+      width: var(--font-size-l, 1.25rem);
+      height: var(--font-size-l, 1.25rem);
+      border-radius: 50%;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
+      border: solid 1px var(--clr-carousel-button, #000000);
+      background-color: var(--clr-background-light, #ffffff);
+      transition:
+        background-color 0.3s ease,
+        transform 0.3s ease;
+      transform: scale(0.8);
+
+      &:hover {
+        transform: scale(1);
+      }
+
+      &[aria-checked="true"] {
+        background-color: var(--clr-carousel-button, #000000);
+      }
+    }
+  }
+}
+
+.component-checkbox {
+  --_check-box-size: 1.5rem;
+  --_button-height: 3em;
+  --_border-width: 2px;
+
+  box-sizing: border-box;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+
+  display: block;
+  line-height: var(--typ-line-height, 1.5rem);
+  min-height: 2rem;
+  font-size: var(--font-size-m, 1rem);
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  background-color: var(--clr-background-light, #fff);
+  color: var(--clr-text-dark, #000);
+  position: relative;
+  padding: calc(
+      (
+          var(--_button-height, 3em) - (var(--size-border-width, 1px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    var(--spacing-m, 2rem)
+    calc(
+      (
+          var(--_button-height, 3em) - (var(--size-border-width, 1px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    var(--spacing-xl, 3rem);
+  cursor: pointer;
+
+  /* increase font size for desktop */
+  @media (min-width: 1200px) {
+    font-size: var(--font-size-ml, 1.125rem);
+  }
+
+  &:focus-within {
+    outline: none !important;
+    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2d2c);
+    box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;
+  }
+
+  input {
+    margin-right: 5px !important;
+    /* This hides the original input */
+    height: var(--_check-box-size, 1.5rem);
+    width: var(--_check-box-size, 1.5rem);
+    position: absolute;
+    left: var(--spacing-xxs, 0.5rem);
+    opacity: 0;
+  }
+
+  .check-wrapper {
+    display: inline-block;
+    height: var(--_check-box-size, 1.5rem);
+    width: var(--_check-box-size, 1.5rem);
+    position: absolute;
+    top: calc(50% - (var(--_check-box-size, 1.5rem) / 2));
+    left: var(--spacing-xs, 0.5rem);
+
+    .check {
+      display: block;
+      position: relative;
+      border: 2px solid var(--clr-input-border, #2e2d2c);
+      height: var(--_check-box-size, 1.5rem);
+      width: var(--_check-box-size, 1.5rem);
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 5;
+      transition:
+        border,
+        background-color 0.25s ease;
+      overflow: hidden;
+
+      /* do not increase font size of check icon at this breakpoint */
+      @media (min-width: 1200px) {
+        font-size: var(--font-size-m, 1rem);
+      }
+
+      svg {
+        vertical-align: baseline;
+        width: 100%;
+        height: 100%;
+        path {
+          fill: var(--clr-check, #e60079);
+          transition: transform 0.25s ease;
+          transform: rotateY(90deg);
+          transform-origin: center;
+        }
+      }
+
+      &:hover {
+        border-color: var(--clr-check, #e60079);
+      }
+    }
+  }
+
+  &:has(input:is(:checked)) {
+    .check-wrapper {
+      .check {
+        border-color: var(--clr-check, #e60079);
+        background-color: var(--clr-check, #e60079);
+        svg {
+          path {
+            fill: var(--clr-text-light, #ffffff);
+            transform: rotateY(0deg);
+          }
+        }
+      }
+    }
+  }
+
+  &:has(input[aria-invalid="true"]) {
+    .check-wrapper {
+      .check {
+        border-color: var(--clr-danger, #ff0000);
+        background-color: var(--clr-background-light, #fff);
+
+        svg {
+          path {
+            fill: var(--clr-danger, #ff0000);
+            transform: rotateY(0deg);
+          }
+        }
+      }
+    }
+  }
+
+  &:has(input:is(:disabled)) {
+    cursor: not-allowed;
+    .check-wrapper {
+      .check {
+        border-color: var(--clr-disabled, #e6e6e6);
+        background-color: var(--clr-disabled, #e6e6e6);
+        svg {
+          path {
+            fill: var(--clr-text-light, #ffffff);
+          }
+        }
+      }
+    }
+  }
+}
+
+.component-collapse {
+  --_rc-collapse-transition-duration: 0.5s;
+
+  /* button , need colour props and text props */
+  .default-header {
+    --_button-height: 3rem;
+
+    box-sizing: border-box;
+    display: inline-block;
+    vertical-align: middle;
+
+    height: -moz-min-content;
+
+    height: min-content;
+    min-height: var(--_button-height, 3rem);
+    width: auto;
+    min-width: auto;
+
+    /* If we know the button height the border height and the line height we can calculate the padding */
+    padding: 0;
+
+    display: flex;
+    font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+    font-weight: normal;
+    margin-bottom: 0;
+    height: initial;
+    text-decoration: none;
+    text-align: left;
+    border-radius: 0;
+    color: var(--clr-collapse-header, #00007e);
+    border: none;
+
+    cursor: pointer;
+
+    font-size: var(--font-size-m, 1rem);
+    font-weight: var(--typ-font-weight-normal, 400);
+    text-align: center;
+    text-transform: var(--btn-text-transform, none);
+    -webkit-text-decoration: var(--btn-text-decoration, none);
+            text-decoration: var(--btn-text-decoration, none);
+
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: auto;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--clr-collapse-header, #00007e);
+    }
+
+    .flipping-icon {
+      display: inline-block;
+      transition: var(--_rc-collapse-transition-duration) ease;
+      transform: initial;
+    }
+
+    &[aria-expanded="true"] {
+      .flipping-icon {
+        transform: translateY(0.1em) scaleY(-1);
+      }
+    }
+  }
+
+  .collapse-content {
+    display: grid;
+    margin: 0;
+    transition: var(--_rc-collapse-transition-duration) ease;
+    /* height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight}; */
+    visibility: visible;
+    grid-template-rows: 1fr;
+
+    & > * {
+      overflow: hidden;
+    }
+
+    & > p {
+      margin-top: 0;
+    }
+
+    &[aria-hidden="true"] {
+      grid-template-rows: 0fr;
+    }
+
+    &[data-is-visible="false"] {
+      visibility: hidden;
+    }
+  }
+
+  /* div */
+  .custom-header {
+    cursor: pointer;
+  }
+  .spacer {
+    margin-left: var(--spacing-xxs, 1rem);
+    &:first-of-type {
+      margin-left: 0;
+    }
+  }
+}
+
+.component-date-field {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+
+  legend {
+    font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-labels, 500);
+    margin-bottom: var(--spacing-xxs, 1rem);
+
+    /* do not increase font size of check icon at this breakpoint */
+    @media (min-width: 1200px) {
+      font-size: var(--font-size-ml, 1.125rem);
+    }
+  }
+
+  /* export const TextAsLabel = styled(Text)`
+  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+`; */
+
+  .date-text-field-wrapper {
+    display: inline-block;
+    width: 60px;
+    margin-right: var(--spacing-xs, 1rem);
+    span {
+      margin-bottom: var(--spacing-xxxs, 0.25rem);
+      font-weight: var(--typ-font-weight-base, 300);
+    }
+  }
+
+  .large-date-text-field-wrapper {
+    display: inline-block;
+    width: 80px;
+    margin-right: var(--spacing-xs, 1rem);
+    span {
+      margin-bottom: var(--spacing-xxxs, 0.25rem);
+      font-weight: var(--typ-font-weight-base, 300);
+    }
+  }
+
+  .error-text-wrapper {
+    clear: left;
+  }
+}
+
+.component-error-text {
+  word-break: normal;
+  overflow-wrap: break-word;
+  text-align: left;
+  font-size: var(--font-size-m, 1rem);
+  line-height: var(--typ-line-height, 1.5em);
+  padding: 0;
+  margin: 0;
+  margin-bottom: var(--spacing-xs, 1rem);
+
+  display: inline-block;
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  font-weight: var(--typ-font-weight-heavy, 700);
+  color: var(--clr-danger, #d51311);
+}
+
+.component-footer {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  width: 100%;
+  background-color: var(--clr-footer-background, #fff);
+  padding-bottom: var(--spacing-m, 2rem);
+
+  .footer-wrapper {
+    max-width: var(--content-max-width, 1020px);
+    display: block;
+    margin: 0 auto;
+
+    @media (min-width: 1200px) {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  .footer-section {
+    box-sizing: border-box;
+    display: inline-block;
+    padding: var(--spacing-s, 1.5rem) var(--spacing-s, 1.5rem) 0;
+    position: relative;
+    width: 100%;
+    flex: 0 1 auto;
+  }
+
+  /* nav */
+  .footer-nav {
+    display: flex;
+    flex-direction: column;
+    a {
+      font-size: var(--font-size-m, 1rem);
+      font-weight: var(--typ-font-weight-links, 700);
+    }
+  }
+
+  .footer-ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  .footer-li {
+    list-style-type: none;
+    display: block;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    padding-bottom: var(--spacing-xxs, 0.5rem);
+  }
+
+  .footer-regulator-logo {
+    height: 40px;
+    width: auto;
+  }
+
+  .footer-address {
+    display: inline;
+    font-style: normal;
+  }
+
+  .footer-bar {
+    opacity: 1;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-right: calc(50% - 50vw);
+    /* to be removed when every page has a white background */
+    margin-left: calc(100% - 100vw);
+    border-width: 0px 0px 0.25rem;
+    -o-border-image: initial;
+       border-image: initial;
+    border-color: var(--clr-cruk-black, #000);
+    border-style: solid;
+    width: auto;
+  }
+}
+
+.component-header {
+  --_header-height-large: 120px;
+  --_header-height-small: 72px;
+  --_header-logo-height-large: 80px;
+  --_header-logo-height-small: 40px;
+  --_header-padding: var(--spacing-xs, 1rem);
+  --_animation-speed: 0.2s;
+  --_box-shadow: none;
+  --_container_top: auto;
+  --_container_position: relative;
+  --_sticky-container-height: 100%;
+  --_header-content-max-width: var(--content-max-width, 1000px);
+  --_logo-height: var(--_header-logo-height-small, 40px);
+  --_tagline-opacity: 0;
+
+  --_header-height: var(--_header-height-small, 72px);
+
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  background-color: var(--clr-header-background, #ffffff);
+  z-index: 9998;
+
+  &[data-full-width="true"] {
+    --_header-content-max-width: 100%;
+  }
+
+  &[data-is-sticky="true"] {
+    --_box-shadow: var(--shadow-l);
+    --_container_top: 0;
+    --_container_position: fixed;
+    --_sticky-container-height: var(--_header-height, 72px);
+  }
+
+  @media (min-width: 992px) {
+    &[data-is-small="false"] {
+      --_sticky-container-height: var(--_header-height-large, 120px);
+      --_header-height: var(--_header-height-large, 120px);
+      --_logo-height: var(--_header-logo-height-large, 80px);
+      --_tagline-opacity: 1;
+    }
+  }
+
+  .header-sticky-placeholder {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--_header-height-small, 72px);
+
+    @media (min-width: 992px) {
+      height: var(--_header-height-large, 120px);
+    }
+  }
+
+  .header-sticky-container {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--_header-padding, 1rem);
+    background-color: var(--clr-header-background, #ffffff);
+    position: relative;
+    border-bottom: solid 1px var(--clr-header-border, #e6e6e6);
+    height: var(--_header-height, 72px);
+
+    box-shadow: var(--_box-shadow, none);
+    top: var(--_container_top, auto);
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--_sticky-container-height, 100%);
+    padding: 0 var(--_header-padding, 1rem);
+    background-color: var(--clr-header-background, #ffffff);
+    position: relative;
+    border-bottom: solid 1px var(--clr-header-border, #e6e6e6);
+    position: var(--_container_position, relative);
+
+    transition: height var(--_animation-speed, 0.2s) ease;
+  }
+
+  .header-main-content {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    max-width: var(--_header-content-max-width, 1000px);
+  }
+
+  /* img  */
+  .logo {
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .logo-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: auto;
+    transition: height var(--_animation-speed, 0.2s) ease;
+
+    height: var(--_logo-height, 40px);
+  }
+
+  .link {
+    display: inline-block;
+  }
+
+  /* link */
+  .skip-to-main {
+    left: -999px;
+    position: absolute;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    z-index: -999;
+    &:focus,
+    &:active,
+    &:focus-within {
+      left: auto;
+      top: auto;
+      width: 30%;
+      height: auto;
+      overflow: auto;
+      margin: 10px 35%;
+      padding: var(--spacing-xs, 1rem);
+      border-radius: 15px;
+      border: 4px solid yellow;
+      text-align: center;
+      font-size: 1.2em;
+      z-index: 999;
+    }
+  }
+
+  /* p */
+  .tagline {
+    flex: 1 1 auto;
+    font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-headings, 400);
+    font-size: var(--font-size-xl, 1.5625rem);
+    color: var(--clr-header-tagline-text, #000000);
+    text-align: center;
+    opacity: var(--_tagline-opacity, 0);
+    transition: opacity var(--_animation-speed, 0.2s) ease;
+    display: none;
+
+    @media (min-width: 992px) {
+      display: block;
+    }
+  }
+
+  .child-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .child-inner {
+    height: auto;
+    margin: auto 0;
+  }
+}
+
+.component-heading {
+  color: var(--clr-heading-default, #000);
+  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+  font-weight: var(--typ-font-weight-headings, 400);
+  line-height: var(--typ-header-line-height, 1.25em);
+  text-transform: var(--typ-header-text-transform, none);
+  margin-top: var(--spacing-m, 2rem);
+  margin-bottom: var(--spacing-s, 1.5rem);
+  max-width: 100%;
+  text-align: left;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  /* mobile size */
+  /* H2 as default */
+  font-size: var(--font-size-xl, 1.5rem);
+  /* Heading appearance sizes */
+  &[data-appearance="h1"] {
+    font-size: var(--font-size-xxl, 1.75rem);
+  }
+  &[data-appearance="h2"] {
+    font-size: var(--font-size-xl, 1.5rem);
+  }
+  &[data-appearance="h3"] {
+    font-size: var(--font-size-l, 1.25rem);
+  }
+  &[data-appearance="h4"] {
+    font-size: var(--font-size-l, 1.25rem);
+  }
+  &[data-appearance="h5"] {
+    font-size: var(--font-size-l, 1.25rem);
+  }
+  &[data-appearance="h6"] {
+    font-size: var(--font-size-m, 1rem);
+  }
+
+  /* Explicit text sizes */
+  &[data-text-size="m"] {
+    font-size: var(--font-size-m, 1rem);
+  }
+  &[data-text-size="l"] {
+    font-size: var(--font-size-l, 1.25rem);
+  }
+  &[data-text-size="xl"] {
+    font-size: var(--font-size-1, 1.25rem);
+  }
+  &[data-text-size="xxl"] {
+    font-size: var(--font-size-l, 1.25rem);
+  }
+  &[data-text-size="xxxl"] {
+    font-size: var(--font-size-xxxl, 1.5rem);
+  }
+  &[data-text-size="xxxxl"] {
+    font-size: var(--font-size-xxxxl, 1.75rem);
+  }
+
+  @media (min-width: 768px) {
+    /* tablet font sizes  */
+    /* H2 as default */
+    font-size: var(--font-size-xxl, 1.75rem);
+    /* Heading appearance sizes */
+    &[data-appearance="h1"] {
+      font-size: var(--font-size-xxxl, 2rem);
+    }
+    &[data-appearance="h2"] {
+      font-size: var(--font-size-xxl, 1.75rem);
+    }
+    &[data-appearance="h3"] {
+      font-size: var(--font-size-xl, 1.5rem);
+    }
+    &[data-appearance="h4"] {
+      font-size: var(--font-size-l, 1.25rem);
+    }
+    &[data-appearance="h5"] {
+      font-size: var(--font-size-l, 1.25rem);
+    }
+    &[data-appearance="h6"] {
+      font-size: var(--font-size-m, 1rem);
+    }
+
+    /* Explicit text sizes */
+    &[data-text-size="m"] {
+      font-size: var(--font-size-m, 1rem);
+    }
+    &[data-text-size="l"] {
+      font-size: var(--font-size-l, 1.25rem);
+    }
+    &[data-text-size="xl"] {
+      font-size: var(--font-size-l, 1.25rem);
+    }
+    &[data-text-size="xxl"] {
+      font-size: var(--font-size-xl, 1.5rem);
+    }
+    &[data-text-size="xxxl"] {
+      font-size: var(--font-size-xxl, 1.75rem);
+    }
+    &[data-text-size="xxxxl"] {
+      font-size: var(--font-size-xxxl, 2rem);
+    }
+  }
+  @media (min-width: 992px) {
+    /* Desktop */
+    /* H2 as default */
+    font-size: var(--font-size-xxxl, 2rem);
+    /* Heading appearance sizes */
+    &[data-appearance="h1"] {
+      font-size: var(--font-size-xxxxl, 2.25rem);
+    }
+    &[data-appearance="h2"] {
+      font-size: var(--font-size-xxxl, 2rem);
+    }
+    &[data-appearance="h3"] {
+      font-size: var(--font-size-xxl, 1.75rem);
+    }
+    &[data-appearance="h4"] {
+      font-size: var(--font-size-xl, 1.5rem);
+    }
+    &[data-appearance="h5"] {
+      font-size: var(--font-size-l, 1.25rem);
+    }
+    &[data-appearance="h6"] {
+      font-size: var(--font-size-m, 1rem);
+    }
+
+    /* Explicit text sizes */
+    &[data-text-size="m"] {
+      font-size: var(--font-size-m, 1rem);
+    }
+    &[data-text-size="l"] {
+      font-size: var(--font-size-l, 1.25rem);
+    }
+    &[data-text-size="xl"] {
+      font-size: var(--font-size-xl, 1.5rem);
+    }
+    &[data-text-size="xxl"] {
+      font-size: var(--font-size-xxl, 1.75rem);
+    }
+    &[data-text-size="xxxl"] {
+      font-size: var(--font-size-xxxl, 2rem);
+    }
+    &[data-text-size="xxxxl"] {
+      font-size: var(--font-size-xxxxl, 2.25rem);
+    }
+  }
+}
+
+.component-icon-fa {
+  display: inline-block;
+  vertical-align: middle;
+  --_icon-size: var(--spacing-xs, 1rem);
+  height: var(--_icon-size, 1rem);
+  width: var(--_icon-size, 1rem);
+
+  path {
+    fill: currentColor;
+  }
+}
+
+.component-info-box {
+  display: flex;
+  flex-shrink: 0;
+  background-color: background-mid;
+  color: "text-dark";
+
+  margin: 0 0 var(--spacing-m, 2rem) 0;
+
+  /* if we have a background color, add padding */
+  &[data-bg-color] {
+    padding: var(--spacing-s, 1.5rem);
+  }
+
+  svg {
+    margin-top: 0;
+  }
+}
+
+.label-component {
+  position: relative;
+  display: block;
+  width: 100%;
+  font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+  font-weight: var(--typ-font-weight-labels, 500);
+  margin-bottom: var(--spacing-s, 1.5rem);
+
+  .hint-text {
+    font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-base, 300);
+    display: block;
+    color: var(--clr-text-mid, #666);
+    margin-bottom: var(--spacing-xs, 1rem);
+  }
+
+  .required-indication-text {
+    font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-base, 300);
+  }
+
+  .label-text {
+    font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-labels, 500);
+    display: block;
+    margin-bottom: var(--spacing-xs, 1rem);
+    /* increase font size for desktop */
+    @media (min-width: 1200px) {
+      font-size: var(--font-size-ml, 1.125rem);
+    }
+
+    &[data-hintext] {
+      margin-bottom: var(--spacing-xxxs, 0.25rem);
+    }
+  }
+}
+
+.component-legend-wrapper {
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+  border: none;
+  padding: 0;
+
+  .hint-text {
+    display: block;
+    font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-base, 300);
+    color: var(--clr-text-mid, #666);
+    margin-bottom: var(--spacing-xs, 1rem);
+  }
+
+  legend {
+    position: relative;
+    display: block;
+    width: 100%;
+    font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+    font-weight: var(--typ-font-weight-labels, 500);
+
+    .legend-span {
+      display: block;
+      color: var(--clr-text-dark, #000);
+      font-size: var(--font-size-m, 1rem);
+      line-height: var(--typ-line-height, 1.5em);
+      font-weight: var(--typ-font-weight-labels, 500);
+      font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+      min-width: 3em;
+      margin-bottom: 0;
+
+      /* increase font size for desktop */
+      @media (min-width: 1200px) {
+        font-size: var(--font-size-ml, 1.125rem);
+      }
+      & > * {
+        font-weight: var(--typ-font-weight-base, 300);
+      }
+
+      &[data-has-hint-text="true"] {
+        margin-bottom: var(--spacing-xxxs, 0.25rem);
+      }
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .required-indication-text {
+        font-family: var(--typ-font-family-label, "Poppins", Arial, sans-serif);
+        font-weight: var(--typ-font-weight-base, 300);
+      }
+    }
+  }
+}
+
+.component-link {
+  overflow-wrap: break-word;
+  background-color: rgba(255, 255, 255, 0);
+  border: none;
+  padding: 0;
+  color: var(--clr-link, #e60079);
+  text-decoration: underline;
+  font-family: var(--typ-font-family-links, "Poppins", Arial, sans-serif);
+  font-weight: var(--typ-font-weight-links, 700);
+  line-height: var(--typ-line-height, 1.5em);
+  transition:
+    color 0.2s ease,
+    background-size 0.3s ease;
+
+  &:focus-visible {
+    outline: auto;
+  }
+
+  &[data-appearance="secondary"] {
+    color: var(--clr-link-secondary, #e60079);
+    text-decoration: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: var(--clr-link-hover, #a5005f);
+
+    &[data-appearance="secondary"] {
+      color: var(--clr-link-secondary-hover, #a5005f);
+    }
+  }
+}
+
+@keyframes bounce-delay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+.component-loader {
+  .spinner {
+    width: 100%;
+    text-align: center;
+    margin-top: var(--spacing-s, 1.5rem);
+
+    span {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin: 0 2px;
+      background-color: var(--clr-loader-color-1, #00007e);
+      border-radius: 100%;
+      animation: bounce-delay 1.2s infinite ease-in-out both;
+    }
+
+    span:nth-child(1) {
+      animation-delay: -0.32s;
+      -webkit-animation-delay: -0.32s;
+    }
+
+    span:nth-child(2) {
+      background-color: var(--clr-loader-color-2, #ff0087);
+      animation-delay: -0.16s;
+    }
+
+    span:nth-child(3) {
+      background-color: var(--clr-loader-color-3, #009cee);
+    }
+  }
+}
+
+@keyframes grow {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+
+.component-modal {
+  .wrapper {
+    box-sizing: border-box;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+  }
+
+  .content {
+    position: relative;
+    background-color: var(--clr-background-light, #fff);
+    min-height: 10rem;
+    width: 90%;
+    max-width: 500px;
+    margin: var(--spacing-xs) auto auto auto;
+    margin-bottom: var(--spacing-xxl);
+    padding: var(--spacing-xs);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+    animation-direction: normal;
+    transform-origin: top center;
+    animation: none;
+
+    &[data-is-animated="true"] {
+      animation: grow 0.2s ease-in-out;
+    }
+  }
+
+  .close-button {
+    float: right;
+    margin-left: var(--spacing-xs, 1rem);
+    font-size: 1.2rem;
+    padding: 0;
+  }
+
+  .background {
+    position: fixed;
+    background: var(--clr-modal-backdrop, #000);
+    bottom: 0;
+    left: 0;
+    opacity: 0.5;
+    right: 0;
+    top: 0;
+    transition:
+      opacity 0.3s,
+      bottom 0s 0.3s;
+    z-index: 100;
+    animation-direction: normal;
+    animation-timing-function: ease-in-out;
+    animation-duration: 0.3s;
+    animation-name: none;
+
+    &[data-is-animated="true"] {
+      animation-name: fade;
+    }
+  }
+}
+
+.component-pagination {
+  display: table;
+  width: 100%;
+  clear: both;
+  text-align: center;
+
+  /* ul */
+  .pager-list {
+    display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+  }
+
+  /* a */
+  .pager-link {
+    font-weight: normal;
+    font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+    font-size: var(--font-size-s, 0.875rem);
+    color: var(--clr-text-light, #fff);
+    background-color: var(--clr-pagination-background, #00007e);
+    cursor: pointer;
+    border-radius: 0;
+    margin: var(--spacing-xxs, 0.5rem);
+    padding: 7px 11px;
+    text-decoration: none;
+
+    &:active,
+    &:focus,
+    &:hover {
+      opacity: 0.88;
+      text-decoration: underline;
+    }
+    &:visited {
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline: auto;
+    }
+
+    &[data-is-active="true"] {
+      color: var(--clr-text-dark, #000);
+      background-color: var(--clr-pagination-active, #e6e6e6);
+      cursor: default;
+      &:hover {
+        background-color: var(--clr-pagination-active, #e6e6e6);
+        text-decoration: none;
+      }
+    }
+
+    &[data-name="Prev"],
+    &[data-name="Next"] {
+      color: var(--clr-pagination-text, #00007e);
+      background-color: transparent;
+      font-weight: bold;
+      padding: 8px 6px;
+      background-color: transparent;
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        text-decoration: underline;
+      }
+      &:active,
+      &:visited {
+        text-decoration: none;
+      }
+      &[data-is-disabled="true"] {
+        color: var(--clr-disabled, #e6e6e6);
+      }
+    }
+
+    &[data-is-disabled="true"] {
+      color: var(--clr-disabled, #e6e6e6);
+      cursor: not-allowed;
+      pointer-events: none;
+      text-decoration: none;
+      &:hover,
+      &:focus,
+      &:active,
+      &:visited {
+        color: var(--clr-disabled, #e6e6e6);
+        text-decoration: none;
+      }
+    }
+  }
+
+  /* li */
+  .pager-item {
+    display: none;
+    &:first-child,
+    &:last-child {
+      display: inline;
+    }
+    @media (min-width: 576px) {
+      display: inline;
+    }
+    span {
+      border: none;
+      min-width: 30px;
+      padding: 5px;
+      margin: 1px;
+      border-radius: 0;
+      border-width: var(--breakpoint-mobile, 576px);
+    }
+  }
+}
+
+.component-popover {
+  --_position: "top";
+  --_display: inline-block;
+
+  display: var(--_display, inline-block);
+  position: relative;
+
+  --_modal-margin-top: 0;
+  --_modal-margin-bottom: 10px;
+  --_modal-position-top: auto;
+  --_modal-position-bottom: 100%;
+  --_modal-position-left: 0;
+  --_modal-position-right: auto;
+
+  --_triangle-top: 100%;
+  --_triangle-bottom: auto;
+  --_triangle-left: var(--spacing-s, 1.5rem);
+  --_triangle-right: auto;
+
+  --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
+  --_triangle-shadow-margin: -1px 0 0 0;
+
+  --_triangle-border-color: var(--clr-popover-background, #fff) transparent
+    transparent;
+
+  @media (min-width: 992px) {
+    --_modal-margin-top: 0;
+    --_modal-margin-left: 0;
+    --_modal-margin-right: 0;
+
+    --_triangle-top: 100%;
+    --_triangle-bottom: auto;
+    --_triangle-left: var(--spacing-s, 1.5rem);
+    --_triangle-right: auto;
+
+    --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
+    --_triangle-shadow-margin: -1px 0 0 0;
+    --_triangle-border-color: var(--clr-popover-background, #fff) transparent
+      transparent;
+  }
+
+  &[data-full="true"] {
+    --_display: block;
+  }
+
+  &[data-position="top"] {
+    --_position: "top";
+    --_modal-margin-top: 0;
+    --_modal-margin-bottom: 10px;
+    --_modal-position-top: auto;
+    --_modal-position-bottom: 100%;
+    --_modal-position-left: 0;
+    --_modal-position-right: auto;
+
+    --_triangle-top: 100%;
+    --_triangle-bottom: auto;
+    --_triangle-left: var(--spacing-s, 1.5rem);
+    --_triangle-right: auto;
+
+    --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
+    --_triangle-shadow-margin: -1px 0 0 0;
+
+    --_triangle-border-color: var(--clr-popover-background, #fff) transparent
+      transparent;
+
+    @media (min-width: 992px) {
+      --_modal-margin-top: 0;
+      --_modal-margin-left: 0;
+      --_modal-margin-right: 0;
+
+      --_modal-position-top: auto;
+      --_modal-position-left: 0;
+      --_modal-position-right: auto;
+
+      --_triangle-top: 100%;
+      --_triangle-bottom: auto;
+      --_triangle-left: var(--spacing-s, 1.5rem);
+      --_triangle-right: auto;
+
+      --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent
+        transparent;
+      --_triangle-shadow-margin: -1px 0 0 0;
+      --_triangle-border-color: var(--clr-popover-background, #fff) transparent
+        transparent;
+    }
+  }
+  &[data-position="left"] {
+    --_position: "left";
+
+    --_modal-margin-top: 10px;
+    --_modal-margin-bottom: 0;
+    --_modal-margin-left: 0;
+    --_modal-margin-right: 0;
+    --_modal-position-top: 100%;
+    --_modal-position-bottom: auto;
+    --_modal-position-left: auto;
+    --_modal-position-right: auto;
+
+    --_triangle-top: auto;
+    --_triangle-bottom: 100%;
+    --_triangle-left: var(--spacing-s, 1.5rem);
+    --_triangle-right: auto;
+
+    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
+    --_triangle-shadow-margin: 0 0 -1px 0;
+
+    --_triangle-border-color: transparent transparent
+      var(--clr-popover-background, #fff);
+
+    @media (min-width: 992px) {
+      --_modal-margin-top: 0;
+      --_modal-margin-left: 0;
+      --_modal-margin-right: 10px;
+
+      --_modal-position-top: 100%;
+      --_modal-position-left: auto;
+      --_modal-position-right: auto;
+
+      --_triangle-top: var(--spacing-s, 1.5rem);
+      --_triangle-bottom: auto;
+      --_triangle-left: 100%;
+      --_triangle-right: auto;
+
+      --_triangle-shadow-border-color: transparent transparent transparent
+        rgba(0, 0, 0, 0.25);
+      --_triangle-shadow-margin: 0 0 0 -1px;
+
+      --_triangle-border-color: transparent transparent transparent
+        var(--clr-popover-background, #fff);
+    }
+  }
+  &[data-position="right"] {
+    --_position: "right";
+
+    --_modal-margin-top: 10px;
+    --_modal-margin-bottom: 0;
+    --_modal-position-top: 100%;
+    --_modal-position-bottom: auto;
+    --_modal-position-left: auto;
+    --_modal-position-right: 0;
+
+    --_triangle-top: auto;
+    --_triangle-bottom: 100%;
+    --_triangle-left: auto;
+    --_triangle-right: var(--spacing-s, 1.5rem);
+
+    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
+    --_triangle-shadow-margin: 0 0 -1px 0;
+
+    --_triangle-border-color: transparent transparent
+      var(--clr-popover-background, #fff);
+
+    @media (min-width: 992px) {
+      --_modal-margin-top: 0;
+      --_modal-margin-left: 10px;
+      --_modal-margin-right: 0;
+
+      --_modal-position-top: 0;
+      --_modal-position-left: 100%;
+      --_modal-position-right: auto;
+
+      --_triangle-top: var(--spacing-s, 1.5rem);
+      --_triangle-bottom: auto;
+      --_triangle-left: -20px;
+      --_triangle-right: auto;
+
+      --_triangle-shadow-border-color: transparent rgba(0, 0, 0, 0.25)
+        transparent transparent;
+      --_triangle-shadow-margin: 0 0 0 1px;
+
+      --_triangle-border-color: transparent var(--clr-popover-background, #fff)
+        transparent transparent;
+    }
+  }
+  &[data-position="bottom"] {
+    --_position: "bottom";
+
+    --_modal-margin-top: 10px;
+    --_modal-margin-bottom: 0;
+    --_modal-position-top: 100%;
+    --_modal-position-bottom: auto;
+    --_modal-position-left: auto;
+    --_modal-position-right: auto;
+
+    --_triangle-top: auto;
+    --_triangle-bottom: 100%;
+    --_triangle-left: var(--spacing-s, 1.5rem);
+    --_triangle-right: auto;
+
+    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
+    --_triangle-shadow-margin: 0 0 -1px 0;
+
+    --_triangle-border-color: transparent transparent
+      var(--clr-popover-background, #fff);
+
+    @media (min-width: 992px) {
+      --_modal-margin-top: 10px;
+      --_modal-margin-left: 0;
+      --_modal-margin-right: 0;
+
+      --_modal-position-top: 100%;
+      --_modal-position-left: auto;
+      --_modal-position-right: auto;
+
+      --_triangle-top: auto;
+      --_triangle-bottom: 100%;
+      --_triangle-left: var(--spacing-s, 1.5rem);
+      --_triangle-right: auto;
+
+      --_triangle-shadow-border-color: transparent transparent
+        rgba(0, 0, 0, 0.25);
+      --_triangle-shadow-margin: 0 0 -1px 0;
+
+      --_triangle-border-color: transparent transparent
+        var(--clr-popover-background, #fff);
+    }
+  }
+  &[data-position="topLeft"] {
+    --_position: "topLeft";
+
+    --_modal-margin-top: 0;
+    --_modal-margin-bottom: 10px;
+    --_modal-position-top: auto;
+    --_modal-position-bottom: 100%;
+    --_modal-position-left: auto;
+    --_modal-position-right: 0;
+
+    --_triangle-top: 100%;
+    --_triangle-bottom: auto;
+    --_triangle-left: auto;
+    --_triangle-right: var(--spacing-s, 1.5rem);
+
+    --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
+    --_triangle-shadow-margin: -1px 0 0 0;
+
+    --_triangle-border-color: var(--clr-popover-background, #fff) transparent
+      transparent;
+
+    @media (min-width: 992px) {
+      --_modal-margin-top: 0;
+      --_modal-margin-left: 0;
+      --_modal-margin-right: 0;
+
+      --_modal-position-top: auto;
+      --_modal-position-left: auto;
+      --_modal-position-right: 0;
+
+      --_triangle-top: 100%;
+      --_triangle-bottom: auto;
+      --_triangle-left: var(--spacing-s, 1.5rem);
+      --_triangle-right: var(--spacing-s, 1.5rem);
+
+      --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent
+        transparent;
+      --_triangle-shadow-margin: -1px 0 0 0;
+
+      --_triangle-border-color: var(--clr-popover-background, #fff) transparent
+        transparent;
+    }
+  }
+
+  &[data-position="bottomLeft"] {
+    --_position: "bottomLeft";
+
+    --_modal-margin-top: 10px;
+    --_modal-margin-bottom: 10px;
+    --_modal-position-top: 100%;
+    --_modal-position-bottom: auto;
+    --_modal-position-left: auto;
+    --_modal-position-right: 0;
+
+    --_triangle-top: auto;
+    --_triangle-bottom: 100%;
+    --_triangle-left: auto;
+    --_triangle-right: var(--spacing-s, 1.5rem);
+
+    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
+    --_triangle-shadow-margin: 0 0 -1px 0;
+
+    --_triangle-border-color: transparent transparent
+      var(--clr-popover-background, #fff);
+
+    @media (min-width: 992px) {
+      --_modal-margin-top: 10px;
+      --_modal-margin-left: 0;
+      --_modal-margin-right: 0;
+
+      --_modal-position-top: 100%;
+      --_modal-position-left: auto;
+      --_modal-position-right: 0;
+
+      --_triangle-top: auto;
+      --_triangle-bottom: 100%;
+      --_triangle-left: auto;
+      --_triangle-right: var(--spacing-s, 1.5rem);
+
+      --_triangle-shadow-border-color: transparent transparent
+        rgba(0, 0, 0, 0.25);
+      --_triangle-shadow-margin: 0 0 -1px 0;
+
+      --_triangle-border-color:
+        transparent transparent, var(--clr-popover-background, #fff);
+    }
+  }
+
+  .popover-modal {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    word-wrap: break-word;
+    z-index: 9999;
+    /* allow inline override */
+    max-width: none;
+    /* allow inline override */
+    min-width: auto;
+    font-size: var(--font-size-s, 0.875rem);
+    background-color: var(--clr-popover-background, #fff);
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+    margin-top: var(--_modal-margin-top, 0);
+    margin-bottom: var(--_modal-margin-bottom, 10px);
+    margin-left: var(--_modal-margin-left, 0);
+    margin-right: var(--_modal-margin-right, 0);
+
+    top: var(--_modal-position-top, auto);
+    bottom: var(--_modal-position-bottom, 100%);
+    left: var(--_modal-position-left, 0);
+    right: var(--_modal-position-right, auto);
+
+    &:after,
+    &:before {
+      content: "";
+      border-style: solid;
+      border-width: 10px;
+      width: 0;
+      height: 0;
+      position: absolute;
+      top: var(--_triangle-top, 100%);
+      bottom: var(--_triangle-bottom, auto);
+      left: var(--_triangle-left, var(--spacing-s, 1.5rem));
+      right: var(--_triangle-right, auto);
+    }
+
+    &:before {
+      border-color: var(
+        --_triangle-shadow-border-color,
+        rgba(0, 0, 0, 0.25) transparent transparent
+      );
+    }
+
+    &:after {
+      margin: var(--_triangle-shadow-margin, -1px 0 0 0);
+      border-color: var(
+        --_triangle-border-color,
+        var(--clr-popover-background, #fff) transparent transparent
+      );
+    }
+  }
+}
+
+/* type CircleKeyCircleFillKeyFramesProps = {
+  $strokeDashoffsetInit: number;
+  strokeDashoffset: number;
+}; */
+@keyframes target-bar-pulse {
+  0% {
+    width: 0px;
+    height: 0px;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    width: 64px;
+    height: 64px;
+    right: -32px;
+  }
+}
+
+@keyframes line-bar-pulse {
+  0% {
+    transform: scale(1);
+    border-radius: 0px;
+  }
+  50% {
+    transform: scale(1.025);
+  }
+  100% {
+    transform: scale(1);
+    border-radius: 0px;
+  }
+}
+
+@keyframes line-fill {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: var(--_line-bar-width);
+  }
+  100% {
+    width: var(--_line-bar-width);
+  }
+}
+
+@keyframes secondary-line-fill {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: var(--_line-bar-width);
+  }
+}
+
+@keyframes circle-fill {
+  0% {
+    stroke-dashoffset: var(--_stroke-dashoffset-init);
+  }
+  50% {
+    stroke-dashoffset: var(--_stroke-dashoffset);
+  }
+  100% {
+    stroke-dashoffset: var(--_stroke-dashoffset);
+  }
+}
+
+@keyframes secondary-circle-fill {
+  0% {
+    stroke-dashoffset: var(--_stroke-dashoffset-init);
+  }
+  100% {
+    stroke-dashoffset: var(--_stroke-dashoffset);
+  }
+}
+
+.component-progress-bar {
+  --_progress-bar-height: 16px;
+  margin-top: var(--_progress-bar-height, 16px);
+
+  /* is-complete  is-secondary-complete */
+  .line-progress-bar-wrapper {
+    position: relative;
+    height: var(--_progress-bar-height, 16px);
+    margin-bottom: 0;
+    background-color: var(--clr-progress-bar-background, #e6e6e6);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  /* width% is-secondary bar-colour, is-complete */
+  .line-progress-bar {
+    position: absolute;
+    left: 0;
+    height: var(--_progress-bar-height, 16px);
+    width: var(--_line-bar-width);
+    transition: width 0.6s ease;
+    animation: line-fill 1s ease forwards;
+    &[data-is-secondary="true"] {
+      animation: secondary-line-fill 1s ease forwards;
+    }
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+
+    --_line-progress-bar-color: var(--clr-progress-bar, #00007e);
+    &[data-is-secondary="true"] {
+      --_line-progress-bar-color: var(--clr-progress-bar-secondary, #e60079);
+    }
+
+    background-color: var(--_line-progress-bar-color);
+
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      width: 0px;
+      height: 0px;
+      border-radius: 50%;
+      opacity: 0;
+      filter: blur(2px);
+      background-color: var(--_line-progress-bar-color);
+      animation: none;
+    }
+
+    &[data-is-complete="true"] {
+      /* animation: line-bar-pulse 0.3s 0.5s 1 ease-out; */
+
+      &::before {
+        animation: target-bar-pulse 0.3s 0.5s 1 ease-in;
+      }
+    }
+  }
+
+  /* circle-size */
+  .circular-wrapper {
+    position: relative;
+    width: 90px;
+    height: 90px;
+    background: none;
+    margin: 0 auto;
+    box-shadow: none;
+  }
+
+  .circle-svg {
+    position: absolute;
+    transform: rotate(-90deg);
+    fill: none;
+    stroke-linecap: round;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* circle */
+  .empty-circle {
+    stroke: var(--clr-cruk-grey-200, #e6e6e6);
+  }
+
+  .full-circle {
+    --_circular-progress-color: var(--clr-progress-circular, #00007e);
+    &[data-is-secondary="true"] {
+      --_circular-progress-color: var(
+        --clr-progress-circular-secondary,
+        #e60079
+      );
+    }
+
+    stroke: var(--_circular-progress-color);
+
+    animation: circle-fill 1s linear;
+
+    &[data-is-secondary="true"] {
+      animation: secondary-circle-fill 1s linear;
+    }
+  }
+
+  .circle-value {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    z-index: 2;
+    font-size: var(--font-size-l, 1.25rem);
+    line-height: var(--font-size-l, 1.25rem);
+    font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+    text-align: center;
+    height: 100%;
+    color: var(--clr-text-dark, #000);
+  }
+}
+
+.component-radio {
+  --_radio-size: 1.5rem;
+  --_radio-inner-size: 0.75rem;
+  --_button-height: 3em;
+
+  box-sizing: border-box;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+
+  line-height: var(--typ-line-height, 1.5em);
+  font-size: var(--font-size-m, 16px);
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  background-color: var(--clr-background-light, #fff);
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+  padding: calc(
+      (
+          var(--_button-height, 3em) - (var(--size-border-width, 1px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    var(--spacing-m, 2rem)
+    calc(
+      (
+          var(--_button-height, 3em) - (var(--size-border-width, 1px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    var(--spacing-xl, 4rem);
+
+  min-height: 2rem;
+
+  cursor: pointer;
+  transition: color 0.25s linear;
+  color: var(--clr-text-dark, #000);
+
+  &:focus-within {
+    outline: none !important;
+    box-shadow: inset 0 0 0 2px var(--clr-input-border, #2e2d2c);
+    box-shadow: inset 0 0 0 2px -webkit-focus-ring-color;
+  }
+
+  /* div */
+  .check-wrapper {
+    display: inline-block;
+    height: var(--_radio-size, 1.5rem);
+    width: var(--_radio-size, 1.5rem);
+    position: absolute;
+    top: calc(50% - (var(--_radio-size, 1.5rem) / 2));
+    left: var(--spacing-xs, 1rem);
+
+    /* span */
+    .check {
+      display: block;
+      position: relative;
+      border: 2px solid var(--clr-input-border, #2e2d2c);
+      pointer-events: none;
+      border-radius: 100%;
+      height: var(--_radio-size, 1.5rem);
+      width: var(--_radio-size, 1.5rem);
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 5;
+      transition:
+        border 0.25s linear,
+        box-shadow 0.25s linear;
+
+      &:hover {
+        border-color: var(--clr-check, #d5007d);
+      }
+
+      &:before {
+        display: block;
+        position: absolute;
+        content: "";
+        border-radius: 100%;
+        pointer-events: none;
+        height: var(--_radio-inner-size, 0.75rem);
+        width: var(--_radio-inner-size, 0.75rem);
+        top: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));
+        left: calc(50% - (var(--_radio-inner-size, 0.75rem) / 2));
+        margin: auto;
+        background-color: rgba(255, 255, 255, 0);
+        transition: background-color 0.25s linear;
+      }
+    }
+  }
+
+  &:has(input:checked) {
+    .check-wrapper {
+      .check {
+        border-color: var(--clr-check, #d5007d);
+
+        &:before {
+          background-color: var(--clr-check, #d5007d);
+        }
+      }
+    }
+  }
+
+  &:has(input[aria-invalid="true"]) {
+    /* color: var(--clr-danger, #f00); */
+    .check-wrapper {
+      .check {
+        border-color: var(--clr-danger, #f00);
+
+        &:before {
+          background-color: var(--clr-danger, #f00);
+        }
+      }
+    }
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+    color: var(--clr-disabled, #e6e6e6);
+
+    .check-wrapper {
+      .check {
+        border-color: var(--clr-disabled, #e6e6e6);
+        &:hover {
+          border-color: var(--clr-disabled, #e6e6e6);
+        }
+        &:before {
+          background-color: var(--clr-disabled, #e6e6e6);
+        }
+      }
+    }
+  }
+
+  /* increase font size for desktop */
+  @media (min-width: 1200px) {
+    font-size: var(--font-size-ml, 1.125rem);
+  }
+
+  /* span */
+  .vertical-align {
+    display: inline;
+    vertical-align: middle;
+    line-height: 100%;
+    background-color: var(--clr-background-light, #fff);
+    min-height: 2em;
+    z-index: 1;
+  }
+
+  .input {
+    *,
+    *:after,
+    *:before {
+      box-sizing: border-box;
+    }
+    margin-right: var(--spacing-xxs, 1rem);
+
+    position: absolute;
+    left: var(--spacing-xxs, 1rem);
+    opacity: 0;
+  }
+}
+
+.component-radio-consent {
+  box-sizing: border-box;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(8em, 100%), 0.25fr));
+  position: relative;
+  border: none;
+  padding: 0;
+  margin: 0 0 var(--spacing-s, 1.5rem) 0;
+
+  legend {
+    display: block;
+    float: left;
+    font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+
+    /* increase font size for desktop */
+    @media (min-width: 1200px) {
+      font-size: var(--font-size-ml, 1.125rem);
+    }
+  }
+
+  .option-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-m, 2rem);
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 0px;
+    label {
+      min-width: 0px;
+    }
+  }
+}
+
+.component-select {
+  --_button-height: 3rem;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background:
+    linear-gradient(
+      45deg,
+      var(--clr-background-light, #fff) 50%,
+      var(--clr-select-background, #000) 50%
+    ),
+    linear-gradient(
+      135deg,
+      var(--clr-select-background, #000) 50%,
+      var(--clr-background-light, #fff) 50%
+    );
+  background-color: var(--clr-background-light, #fff);
+  background-position:
+    calc(100% - 16px) 50%,
+    calc(100% - 10px) 50%;
+  background-size: 6px 6px;
+  background-repeat: no-repeat;
+  border: solid var(--size-border-width, 1px)
+    var(--clr-text-input-border, #2e2c2d);
+
+  color: var(--clr-text-dark, #000);
+  display: block;
+  font-size: var(--font-size-m, 1rem);
+  min-height: var(--_button-height, 3rem);
+  padding: calc(
+      (
+          var(--_button-height, 3rem) - (var(--size-border-width, 1px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    var(--spacing-m, 2rem)
+    calc(
+      (
+          var(--_button-height, 3rem) - (var(--size-border-width, 1px) * 2) -
+            var(--typ-line-height, 1.5em)
+        ) /
+        2
+    )
+    var(--spacing-xs, 1rem);
+  width: 100%;
+  transition: border-color 150ms linear;
+
+  &:hover {
+    border-color: var(--clr-secondary, #e60079);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--clr-danger, #d51311);
+  }
+
+  &:disabled {
+    color: var(--clr-disabled, #e6e6e6);
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: var(--clr-text-input-border, #2e2c2d);
+    }
+  }
+
+  /* increase font size for desktop */
+  @media (min-width: 1200px) {
+    font-size: var(--font-size-ml, 1.125rem);
+  }
+}
+
+.component-step {
+  box-sizing: border-box;
+  *,
+  *:after,
+  *:before {
+    box-sizing: border-box;
+  }
+  text-align: center;
+  text-transform: capitalize;
+
+  .step-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    /* li */
+    .step-item {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+      width: var(--_step-item-width, auto);
+
+      &:last-child {
+        .step-bar::after {
+          display: none;
+        }
+      }
+
+      .step-bar {
+        border-radius: 50%;
+        background-clip: padding-box;
+        width: 24px;
+        height: 24px;
+        display: block;
+        margin: 0 auto 0.5em auto;
+        background-color: var(--clr-step-background, #fff);
+        border: 2px solid var(--clr-step-border, #e6e6e6);
+        text-indent: -999px;
+
+        &:after {
+          display: block;
+          position: absolute;
+          width: 100%;
+          height: 2px;
+          content: "";
+          background-color: transparent;
+          border-bottom: 2px solid var(--clr-step-border, #e6e6e6);
+          left: 50%;
+          top: 11px;
+          margin-left: 12px;
+        }
+
+        .step-tick {
+          display: block;
+          transform: rotate(45deg);
+          transform-origin: center center;
+          height: 14px;
+          width: 8px;
+          border-bottom: 2px solid var(--clr-text-light, #fff);
+          border-right: 2px solid var(--clr-text-light, #fff);
+          margin-top: 2px;
+          margin-left: 6px;
+        }
+      }
+
+      &[data-is-active="true"] {
+        .step-bar,
+        &:after {
+          background-color: var(--clr-tertiary, #009cee);
+          border-color: var(--clr-tertiary, #009cee) !important;
+        }
+      }
+
+      &[data-is-done="true"] {
+        .step-bar,
+        &:after {
+          background-color: var(--clr-tertiary, #009cee) !important;
+          border-color: var(--clr-tertiary, #009cee);
+        }
+        .step-bar::after {
+          border-bottom-color: var(--clr-tertiary, #009cee);
+        }
+      }
+    }
+  }
+}
+
+.component-text {
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  word-break: normal;
+  overflow-wrap: break-word;
+  text-align: left;
+  font-size: var(--font-size-m, 1rem);
+  line-height: var(--typ-line-height, 1.5em);
+  font-weight: var(--typ-font-weight-base, 300);
+  padding: 0;
+  margin: 0;
+  margin-bottom: var(--spacing-xs, 1rem);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.component-textarea-field {
+  cursor: auto;
+  background-color: var(--clr-background-light, #ffffff);
+  background-image: none;
+  border: solid var(--size-border-width, 1px) var(--clr-text-input-border, #2e2d2c);
+  color: var(--clr-text-dark, #000000);
+  display: block;
+  font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  font-size: var(--font-size-m, 1rem);
+  padding: 6px 8px;
+  width: 100%;
+  transition: border-color 150ms linear;
+
+  /* increase font size for desktop */
+  @media (min-width: 1200px) {
+    font-size: var(--font-size-ml, 1.125rem);
+  }
+
+  &:hover {
+    border-color: var(--clr-secondary, #e60079);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    border-color: var(--clr-disabled, #e6e6e6);
+    color: var(--clr-disabled, #e6e6e6);
+  }
+
+  &[aria-invalid="true"] {
+    border-color: var(--clr-danger, #d51311);
+  }
+}
+
+.component-text-field {
+  --_min-height: 48px;
+  --_border-color: var(--clr-text-input-border, #2e2d2c);
+  --_border-color-hover: var(--clr-secondary, #e60079);
+  --_background-color: var(--clr-background-light, #ffffff);
+  --_text-color: var(--clr-text-dark, #000000);
+  --_cursor: auto;
+  --_pointer-events: auto;
+
+  --_crossBase64: "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";
+  --_checkBase64: "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";
+  box-sizing: border-box;
+
+  cursor: var(--_cursor, auto);
+
+  /* has child input which is invalid */
+  &:has(input[aria-invalid="true"]) {
+    --_border-color: var(--clr-danger, #d51311);
+  }
+
+  &:has(input:hover) {
+    --_border-color: var(--_border-color-hover, #e60079);
+  }
+  /* has child input which is disabled */
+  &:has(input[disabled]),
+  &:has(input[disabled]:hover) {
+    --_cursor: not-allowed;
+    --_pointer-events: none;
+    --_background-color: var(--clr-background-mid, #f2f2f2);
+    --_border-color-hover: var(--clr-text-input-border, #2e2d2c);
+  }
+
+  .extra {
+    box-sizing: border-box;
+    display: block;
+    cursor: var(--_cursor, auto);
+    pointer-events: var(--_pointer-events, auto);
+
+    border-right: 0;
+
+    color: var(--_text-color, #000);
+    font-size: var(--font-size-m, 1em);
+    line-height: var(--typ-line-height, 1.5em);
+    font-weight: var(--typ-font-weight-base, 300);
+    font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+    padding: calc((var(--_min-height, 48px) - 1em) / 2) var(--spacing-xs, 1rem);
+    margin: 0;
+    line-height: 1rem;
+    width: auto;
+
+    transition: border-color 150ms linear;
+    background-color: var(--_background-color, #fff);
+    border: solid var(--size-border-width, 1px) var(--_border-color, #2e2d2c);
+  }
+
+  .extra-left {
+    box-sizing: border-box;
+    width: auto;
+    vertical-align: middle;
+    height: var(--_min-height, 48px);
+    border-right: 0;
+    button {
+      min-height: calc(
+        var(--_min-height, 48px) - (2 * var(--size-border-width, 1px))
+      ) !important;
+    }
+  }
+
+  .extra-right {
+    box-sizing: border-box;
+    width: auto;
+    border: solid var(--size-border-width, 1px) var(--_border-color, #2e2d2c);
+    border-left: 0;
+    padding: 0;
+    height: var(--_min-height, 48px);
+    vertical-align: middle;
+
+    button {
+      min-height: calc(
+        var(--_min-height, 48px) - (2 * var(--size-border-width, 1px))
+      ) !important;
+    }
+  }
+
+  .extra-wrapper {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .input-wrapper {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    flex: 1 1;
+
+    &:after {
+      position: absolute;
+      width: 2em;
+      z-index: 1;
+      bottom: 0;
+      right: 0;
+      content: "";
+      top: 0;
+      background-repeat: no-repeat;
+      background-position: calc(100% - var(--spacing-xxs, 0.5rem)) 50%;
+    }
+    &[data-is-valid-visible="true"] {
+      display: block;
+      &:has(input[aria-invalid="false"]) {
+        &:after {
+          background-image: url("data:image/png;base64,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");
+        }
+      }
+    }
+
+    &[data-is-invalid-visible="true"] {
+      display: block;
+      &:has(input[aria-invalid="true"]) {
+        &:after {
+          background-image: url("data:image/png;base64,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");
+        }
+      }
+    }
+  }
+
+  .input {
+    box-sizing: border-box;
+    cursor: var(--_cursor, auto);
+    pointer-events: var(--_pointer-events, auto);
+
+    display: block;
+    background-image: none;
+    min-width: 3em;
+    width: 100%;
+
+    transition: border-color 150ms linear;
+    border: solid var(--size-border-width, 1px) var(--_border-color, #2e2d2c);
+    border-radius: 0;
+
+    line-height: var(--typ-line-height, 1.5em);
+    font-size: var(--font-size-m, 1rem);
+
+    background-color: var(--_background-color, #ffffff);
+    color: var(--_text-color, #000);
+    padding: calc(
+        (
+            var(--_min-height, 48px) - (var(--size-border-width, 1px) * 2) -
+              var(--typ-line-height, 1.5em)
+          ) /
+          2
+      )
+      var(--spacing-xs, 1rem);
+
+    &[data-has-error="true"] {
+      border-color: var(--clr-danger, #d51311);
+    }
+
+    /* Make sure text doesn't go behind the valid indicatior icon */
+    &[data-is-valid-visible="true"] {
+      padding-right: 3rem;
+    }
+    &[data-is-invalid-visible="true"] {
+      padding-right: 3rem;
+    }
+
+    &[aria-invalid="true"] {
+      border-color: var(--clr-danger, #d51311);
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:focus {
+      box-shadow: 0 0 0 3em white inset !important;
+    }
+
+    /* increase font size for desktop */
+    @media (min-width: 1200px) {
+      font-size: var(--font-size-ml, 1.125rem);
+    }
+  }
+}
+
+.component-totaliser {
+  font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+  margin: 0;
+
+  .bubble-wrapper {
+    text-align: center;
+    background-color: var(--clr-totaliser-bubble, #f2f2f2);
+    border-radius: 3.2rem;
+    padding: 5px;
+    position: relative;
+    p {
+      margin: 0;
+    }
+  }
+
+  .progress-bar-wrapper {
+    padding: 0 46px 12px;
+    margin-top: var(--spacing-s, 1.5rem);
+    position: relative;
+
+    &:not([data-is-compact="true"]) {
+      padding: 0;
+      border: none;
+      div > div > div:not(:first-child) {
+        &:after {
+          content: "▼";
+          color: var(--clr-totaliser-bubble, #f2f2f2);
+          position: absolute;
+          top: -36px;
+          right: -15px;
+          font-size: 32px;
+        }
+      }
+    }
+  }
+
+  /* p */
+  .total {
+    color: var(--clr-totaliser-bubble-total, #00007e);
+    font-size: 2.625rem;
+    line-height: 3rem;
+    font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+    text-transform: var(--typ-header-text-transform, none);
+    font-weight: var(--typ-font-weight-labels, 500);
+  }
+  /* p */
+  .bubble-text {
+    color: var(--clr-totaliser-bubble-text, #000);
+    font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+    text-transform: var(--typ-header-text-transform, none);
+    font-weight: var(--typ-font-weight-labels, 500);
+  }
+  /* p */
+  .gift-aid {
+    color: var(--clr-totaliser-bubble-total, #00007e);
+    font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+    text-transform: var(--typ-header-text-transform, none);
+    font-weight: var(--typ-font-weight-labels, 500);
+  }
+
+  /* span not a div so that we don't end up with two speech bubble arrows from ProgressBarWrapper */
+  .summary {
+    display: block;
+    text-align: right;
+    margin-top: 12px;
+    margin-bottom: 0;
+    font-family: var(--typ-font-family-base, "Poppins", Arial, sans-serif);
+  }
+
+  .compact-wrapper {
+    justify-content: flex-end;
+    display: flex;
+  }
+}
+
+.component-user-block {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+
+  .details {
+    flex: 1;
+    margin-left: var(--spacing-xs, 1rem);
+    text-align: left;
+    min-width: 0;
+  }
+
+  .name {
+    font-family: var(--typ-font-family-headings, "Progress", Arial, sans-serif);
+    font-size: var(--font-size-l, 1.25rem);
+    white-space: normal;
+    word-break: break-word;
+    margin: 0;
+  }
+
+  .extra {
+    color: var(--clr-user-block-extra-text, #575757);
+    margin: 0;
+    margin-top: 4px;
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
 /*# sourceMappingURL=index.css.map */