:root,
:host {
  --p-border-xsmall: 1px;
  --p-border-small: 2px;
  --p-border-medium: 3px;
  --p-border-large: 4px;

  --p-border-rem-xsmall: 0.0625rem;
  --p-border-rem-small: 0.125rem;
  --p-border-rem-medium: 0.1875rem;
  --p-border-rem-large: 0.25rem;
}
/**
 * @deprecated Made internal to the ButtonIcon component only.
 */
:root,
:host {
  --p-button-icon-desktop-xl: 2rem;
  --p-button-icon-desktop-lg: 1.5rem;
  --p-button-icon-desktop-md: 1.25rem;
  --p-button-icon-desktop-sm: 1.125rem;
  --p-button-icon-desktop-xsm: 1rem;

  --p-button-icon-mobile-xl: 1.125rem;
  --p-button-icon-mobile-lg: 1.125rem;
  --p-button-icon-mobile-md: 1.125rem;
  --p-button-icon-mobile-sm: 1.125rem;
  --p-button-icon-mobile-xsm: 1rem;
}
:root,
:host {
  --p-color-red-100: #fff0f0;
  --p-color-red-200: #ffdfdf;
  --p-color-red-300: #ffb8b8;
  --p-color-red-400: #fc9797;
  --p-color-red-500: #ff6c6c;
  --p-color-red-550: #ff5d5d;
  --p-color-red-600: #b20000;
  --p-color-red-700: #940000;
  --p-color-red-800: #770000;
  --p-color-red-pale-800: #492727;
  --p-color-red-900: #560000;
  --p-color-red-1000: #310502;

  --p-color-purple-100: #f7f0ff;
  --p-color-purple-200: #f0deff;
  --p-color-purple-300: #e5ccff;
  --p-color-purple-400: #dbb8ff;
  --p-color-purple-500: #ce99ff;
  --p-color-purple-550: #ba6fff;
  --p-color-purple-600: #730099;
  --p-color-purple-700: #610080;
  --p-color-purple-800: #521264;
  --p-color-purple-pale-800: #472749;
  --p-color-purple-900: #410e44;
  --p-color-purple-1000: #29082b;

  --p-color-orange-100: #fff0eb;
  --p-color-orange-200: #ffe7e0;
  --p-color-orange-300: #ffc4b2;
  --p-color-orange-400: #ffa58f;
  --p-color-orange-500: #ff8468;
  --p-color-orange-600: #943100;
  --p-color-orange-pale-800: #493227;

  --p-color-grey-000: #ffffff;
  --p-color-grey-100: #f7f3f3;
  --p-color-grey-200: #e9e2e2;
  --p-color-grey-300: #d1c7c7;
  --p-color-grey-400: #b6a5a5;
  --p-color-grey-500: #9a8989;
  --p-color-grey-600: #7f6c6c;
  --p-color-grey-700: #5e5050;
  --p-color-grey-800: #3d3434;
  --p-color-grey-900: #2b2525;
  --p-color-grey-1000: #191515;

  --p-color-grey-cold-000: #ffffff;
  --p-color-grey-cold-100: #f2f1f4;
  --p-color-grey-cold-200: #e3e0e6;
  --p-color-grey-cold-300: #d1c7c7;
  --p-color-grey-cold-400: #afa5b6;
  --p-color-grey-cold-500: #93869c;
  --p-color-grey-cold-600: #776a81;
  --p-color-grey-cold-700: #584e5f;
  --p-color-grey-cold-800: #39323e;
  --p-color-grey-cold-900: #27222a;
  --p-color-grey-cold-1000: #171519;

  --p-color-logo-red: #da291c;

  --p-color-yellow-100: #fff7e6;
  --p-color-yellow-200: #fff0d1;
  --p-color-yellow-300: #ffe9bd;
  --p-color-yellow-400: #ffdb94;
  --p-color-yellow-500: #ffcf70;
  --p-color-yellow-600: #8f5f00;
  --p-color-yellow-700: #754e00;
  --p-color-yellow-800: #5c3d00;
  --p-color-yellow-pale-800: #433723;
  --p-color-yellow-900: #473000;
  --p-color-yellow-1000: #332200;

  --p-color-green-100: #e6f9ec;
  --p-color-green-200: #d0f5dc;
  --p-color-green-300: #adebc1;
  --p-color-green-400: #88dda3;
  --p-color-green-500: #48cb71;
  --p-color-green-550: #30a956;
  --p-color-green-600: #1f6f3d;
  --p-color-green-700: #1a5b32;
  --p-color-green-800: #134425;
  --p-color-green-pale-800: #1e3828;
  --p-color-green-900: #10381e;
  --p-color-green-1000: #0b2816;

  --p-color-blue-100: #e1f2fe;
  --p-color-blue-200: #c9e7fd;
  --p-color-blue-300: #9dd2fb;
  --p-color-blue-400: #6cb5f9;
  --p-color-blue-500: #388fe5;
  --p-color-blue-600: #1f47ad;
  --p-color-blue-700: #17368c;
  --p-color-blue-800: #0b2365;
  --p-color-blue-pale-800: #273049;
  --p-color-blue-900: #001247;
  --p-color-blue-1000: #000a29;

  --p-color-focus-1: #0000ff;
  --p-color-scrim-1: #19151560;
}
:root,
:host {
  --p-corner-radius-none: 0px;
  --p-corner-radius-small: 8px;
  --p-corner-radius-medium: 12px;
  --p-corner-radius-large: 16px;
  --p-corner-radius-extreme: 999px;

  --p-corner-radius-rem-none: 0rem;
  --p-corner-radius-rem-small: 0.5rem;
  --p-corner-radius-rem-medium: 0.75rem;
  --p-corner-radius-rem-large: 1rem;
  --p-corner-radius-rem-extreme: 62.4375rem;
}
:root,
:host {
  --p-font-styles-size-12: 12px;
  --p-font-styles-size-14: 14px;
  --p-font-styles-size-16: 16px;
  --p-font-styles-size-18: 18px;
  --p-font-styles-size-20: 20px;
  --p-font-styles-size-24: 24px;
  --p-font-styles-size-28: 28px;
  --p-font-styles-size-32: 32px;
  --p-font-styles-size-36: 36px;
  --p-font-styles-size-40: 40px;
  --p-font-styles-size-64: 64px;

  --p-font-styles-line-height-desktop-14: 18px;
  --p-font-styles-line-height-desktop-16: 22px;
  --p-font-styles-line-height-desktop-18: 26px;
  --p-font-styles-line-height-desktop-20: 28px;
  --p-font-styles-line-height-desktop-24: 32px;
  --p-font-styles-line-height-desktop-32: 40px;
  --p-font-styles-line-height-desktop-40: 52px;
  --p-font-styles-line-height-desktop-64: 72px;

  --p-font-styles-line-height-mobile-12: 16px;
  --p-font-styles-line-height-mobile-14: 20px;
  --p-font-styles-line-height-mobile-16: 22px;
  --p-font-styles-line-height-mobile-18: 26px;
  --p-font-styles-line-height-mobile-20: 28px;
  --p-font-styles-line-height-mobile-24: 32px;
  --p-font-styles-line-height-mobile-28: 36px;
  --p-font-styles-line-height-mobile-36: 44px;
}
:root,
:host {
  --p-grid-column-04: 4px;
  --p-grid-column-08: 8px;
  --p-grid-column-12: 12px;
  --p-grid-margin-16: 16px;
  --p-grid-margin-24: 24px;
  --p-grid-gutter-16: 16px;
  --p-grid-gutter-24: 24px;
}
:root,
:host {
  --p-spacing-04: 4px;
  --p-spacing-08: 8px;
  --p-spacing-12: 12px;
  --p-spacing-16: 16px;
  --p-spacing-20: 20px;
  --p-spacing-24: 24px;
  --p-spacing-28: 28px;
  --p-spacing-32: 32px;
  --p-spacing-40: 40px;
  --p-spacing-48: 48px;
  --p-spacing-56: 56px;
  --p-spacing-64: 64px;
  --p-spacing-96: 96px;

  --p-spacing-rem-04: 0.25rem;
  --p-spacing-rem-08: 0.5rem;
  --p-spacing-rem-12: 0.75rem;
  --p-spacing-rem-16: 1rem;
  --p-spacing-rem-20: 1.25rem;
  --p-spacing-rem-24: 1.5rem;
  --p-spacing-rem-28: 1.75rem;
  --p-spacing-rem-32: 2rem;
  --p-spacing-rem-40: 2.5rem;
  --p-spacing-rem-48: 3rem;
  --p-spacing-rem-56: 3.5rem;
  --p-spacing-rem-64: 4rem;
  --p-spacing-rem-96: 6rem;
}
:root,
:host {
  --p-section-away: var(--p-spacing-rem-64);
  --p-section-near: var(--p-spacing-rem-40);
  --p-subsection-away: var(--p-spacing-rem-24);
  --p-subsection-near: var(--p-spacing-rem-12);
  --p-heading-near: var(--p-spacing-rem-08);
  --p-body-away: var(--p-spacing-rem-12);
  --p-body-near: var(--p-spacing-rem-04);

  @media (min-width: 600px) {
    --p-section-away: var(--p-spacing-rem-96);
    --p-section-near: var(--p-spacing-rem-48);
    --p-subsection-away: var(--p-spacing-rem-32);
    --p-subsection-near: var(--p-spacing-rem-16);
    --p-heading-near: var(--p-spacing-rem-12);
    --p-body-away: var(--p-spacing-rem-16);
    --p-body-near: var(--p-spacing-rem-04);
  }
}
.section-away {
  margin: var(--p-section-away) 0;
}
.section-away-top {
  margin-top: var(--p-section-away);
}
.section-away-bottom {
  margin-bottom: var(--p-section-away);
}
.section-near {
  margin: var(--p-section-near) 0;
}
.section-near-top {
  margin-top: var(--p-section-near);
}
.section-near-bottom {
  margin-bottom: var(--p-section-near);
}
.subsection-away {
  margin: var(--p-subsection-away) 0;
}
.subsection-away-top {
  margin-top: var(--p-subsection-away);
}
.subsection-away-bottom {
  margin-bottom: var(--p-subsection-away);
}
.subsection-near {
  margin: var(--p-subsection-near) 0;
}
.subsection-near-top {
  margin-top: var(--p-subsection-near);
}
.subsection-near-bottom {
  margin-bottom: var(--p-subsection-near);
}
.heading-near {
  margin: var(--p-heading-near) 0;
}
.heading-near-top {
  margin-top: var(--p-heading-near);
}
.heading-near-bottom {
  margin-bottom: var(--p-heading-near);
}
.body-away {
  margin: var(--p-body-away) 0;
}
.body-away-top {
  margin-top: var(--p-body-away);
}
.body-away-bottom {
  margin-bottom: var(--p-body-away);
}
.body-near {
  margin: var(--p-body-near) 0;
}
.body-near-top {
  margin-top: var(--p-body-near);
}
.body-near-bottom {
  margin-bottom: var(--p-body-near);
}
:root,
:host {
  --p-transition-duration: 0.1s;
}
/**
 * All the semantic aliases.
 * Default theme is pretzel-light.
 * Most aliases have a default, white and grey variant to support surface layering.
 */
:root,
:host,
[data-theme='pretzel-light'] {
  /* Background */

  --p-color-background: var(--p-color-grey-000);
  --p-color-background-white: var(--p-color-grey-000);
  --p-color-background-grey: var(--p-color-grey-100);

  --p-color-background-hover: var(--p-color-grey-100);
  --p-color-background-hover-white: var(--p-color-grey-100);
  --p-color-background-hover-grey: var(--p-color-grey-200);

  --p-color-background-pressed: var(--p-color-grey-200);
  --p-color-background-pressed-white: var(--p-color-grey-200);
  --p-color-background-pressed-grey: var(--p-color-grey-300);

  --p-color-background-active: var(--p-color-red-600);
  --p-color-background-active-white: var(--p-color-red-600);
  --p-color-background-active-grey: var(--p-color-red-600);

  --p-color-background-disabled: var(--p-color-grey-200);
  --p-color-background-disabled-white: var(--p-color-grey-200);
  --p-color-background-disabled-grey: var(--p-color-grey-300);

  --p-color-background-selected: var(--p-color-red-700);
  --p-color-background-selected-white: var(--p-color-red-700);
  --p-color-background-selected-grey: var(--p-color-red-700);

  --p-color-background-selected-hover: var(--p-color-red-800);
  --p-color-background-selected-hover-white: var(--p-color-red-800);
  --p-color-background-selected-hover-grey: var(--p-color-red-800);

  --p-color-background-selected-pressed: var(--p-color-red-900);
  --p-color-background-selected-pressed-white: var(--p-color-red-900);
  --p-color-background-selected-pressed-grey: var(--p-color-red-900);

  /* Text */

  --p-color-text-primary: var(--p-color-red-900);
  --p-color-text-primary-white: var(--p-color-red-900);
  --p-color-text-primary-grey: var(--p-color-red-900);

  --p-color-text-primary-hover: var(--p-color-red-800);
  --p-color-text-primary-hover-white: var(--p-color-red-800);
  --p-color-text-primary-hover-grey: var(--p-color-red-800);

  --p-color-text-primary-pressed: var(--p-color-red-700);
  --p-color-text-primary-pressed-white: var(--p-color-red-700);
  --p-color-text-primary-pressed-grey: var(--p-color-red-700);

  --p-color-text-primary-active: var(--p-color-red-700);
  --p-color-text-primary-active-white: var(--p-color-red-700);
  --p-color-text-primary-active-grey: var(--p-color-red-700);

  --p-color-text-interactive: var(--p-color-red-600);
  --p-color-text-interactive-white: var(--p-color-red-600);
  --p-color-text-interactive-grey: var(--p-color-red-600);

  --p-color-text-interactive-hover: var(--p-color-red-700);
  --p-color-text-interactive-hover-white: var(--p-color-red-700);
  --p-color-text-interactive-hover-grey: var(--p-color-red-700);

  --p-color-text-interactive-pressed: var(--p-color-red-800);
  --p-color-text-interactive-pressed-white: var(--p-color-red-800);
  --p-color-text-interactive-pressed-grey: var(--p-color-red-800);

  --p-color-text-interactive-active: var(--p-color-red-800);
  --p-color-text-interactive-active-white: var(--p-color-red-800);
  --p-color-text-interactive-active-grey: var(--p-color-red-800);

  --p-color-text-selected: var(--p-color-red-700);
  --p-color-text-selected-white: var(--p-color-red-700);
  --p-color-text-selected-grey: var(--p-color-red-700);

  --p-color-text-selected-hover: var(--p-color-red-800);
  --p-color-text-selected-hover-white: var(--p-color-red-800);
  --p-color-text-selected-hover-grey: var(--p-color-red-800);

  --p-color-text-selected-pressed: var(--p-color-red-900);
  --p-color-text-selected-pressed-white: var(--p-color-red-900);
  --p-color-text-selected-pressed-grey: var(--p-color-red-900);

  --p-color-text-secondary: var(--p-color-grey-700);
  --p-color-text-secondary-white: var(--p-color-grey-700);
  --p-color-text-secondary-grey: var(--p-color-grey-700);

  --p-color-text-placeholder: var(--p-color-grey-600);
  --p-color-text-placeholder-white: var(--p-color-grey-600);
  --p-color-text-placeholder-grey: var(--p-color-grey-600);

  --p-color-text-on-color: var(--p-color-red-100);
  --p-color-text-on-color-white: var(--p-color-red-100);
  --p-color-text-on-color-grey: var(--p-color-red-100);

  --p-color-text-disabled: var(--p-color-grey-400);
  --p-color-text-disabled-white: var(--p-color-grey-400);
  --p-color-text-disabled-grey: var(--p-color-grey-500);

  --p-color-text-info: var(--p-color-blue-600);
  --p-color-text-info-white: var(--p-color-blue-600);
  --p-color-text-info-grey: var(--p-color-blue-600);

  --p-color-text-success: var(--p-color-green-600);
  --p-color-text-success-white: var(--p-color-green-600);
  --p-color-text-success-grey: var(--p-color-green-600);

  --p-color-text-warning: var(--p-color-yellow-600);
  --p-color-text-warning-white: var(--p-color-yellow-600);
  --p-color-text-warning-grey: var(--p-color-yellow-600);

  --p-color-text-error: var(--p-color-red-600);
  --p-color-text-error-white: var(--p-color-red-600);
  --p-color-text-error-grey: var(--p-color-red-600);

  --p-color-text-alert: var(--p-color-grey-900);
  --p-color-text-alert-white: var(--p-color-grey-900);
  --p-color-text-alert-grey: var(--p-color-grey-900);

  --p-color-text-on-brand: var(--p-color-red-100);
  --p-color-text-on-brand-white: var(--p-color-red-100);
  --p-color-text-on-brand-grey: var(--p-color-red-100);

  --p-color-text-on-error: var(--p-color-red-800);
  --p-color-text-on-info: var(--p-color-blue-900);
  --p-color-text-on-warning: var(--p-color-yellow-900);
  --p-color-text-on-success: var(--p-color-green-900);

  /* Icon */

  --p-color-icon-primary: var(--p-color-red-900);
  --p-color-icon-primary-white: var(--p-color-red-900);
  --p-color-icon-primary-grey: var(--p-color-red-900);

  --p-color-icon-primary-hover: var(--p-color-red-800);
  --p-color-icon-primary-hover-white: var(--p-color-red-800);
  --p-color-icon-primary-hover-grey: var(--p-color-red-800);

  --p-color-icon-primary-active: var(--p-color-red-700);
  --p-color-icon-primary-active-white: var(--p-color-red-700);
  --p-color-icon-primary-active-grey: var(--p-color-red-700);

  --p-color-icon-primary-pressed: var(--p-color-red-700);
  --p-color-icon-primary-pressed-white: var(--p-color-red-700);
  --p-color-icon-primary-pressed-grey: var(--p-color-red-700);

  --p-color-icon-interactive: var(--p-color-red-600);
  --p-color-icon-interactive-white: var(--p-color-red-600);
  --p-color-icon-interactive-grey: var(--p-color-red-600);

  --p-color-icon-interactive-hover: var(--p-color-red-700);
  --p-color-icon-interactive-hover-white: var(--p-color-red-700);
  --p-color-icon-interactive-hover-grey: var(--p-color-red-700);

  --p-color-icon-interactive-pressed: var(--p-color-red-800);
  --p-color-icon-interactive-pressed-white: var(--p-color-red-800);
  --p-color-icon-interactive-pressed-grey: var(--p-color-red-800);

  --p-color-icon-interactive-active: var(--p-color-red-800);
  --p-color-icon-interactive-active-white: var(--p-color-red-800);
  --p-color-icon-interactive-active-grey: var(--p-color-red-800);

  --p-color-icon-on-color: var(--p-color-red-100);
  --p-color-icon-on-color-white: var(--p-color-red-100);
  --p-color-icon-on-color-grey: var(--p-color-red-100);

  --p-color-icon-disabled: var(--p-color-grey-400);
  --p-color-icon-disabled-white: var(--p-color-grey-400);
  --p-color-icon-disabled-grey: var(--p-color-grey-500);

  --p-color-icon-error: var(--p-color-red-600);
  --p-color-icon-error-white: var(--p-color-red-600);
  --p-color-icon-error-grey: var(--p-color-red-600);

  --p-color-icon-success: var(--p-color-green-600);
  --p-color-icon-success-white: var(--p-color-green-600);
  --p-color-icon-success-grey: var(--p-color-green-600);

  --p-color-icon-warning: var(--p-color-yellow-600);
  --p-color-icon-warning-white: var(--p-color-yellow-600);
  --p-color-icon-warning-grey: var(--p-color-yellow-600);

  --p-color-icon-info: var(--p-color-blue-600);
  --p-color-icon-info-white: var(--p-color-blue-600);
  --p-color-icon-info-grey: var(--p-color-blue-600);

  --p-color-icon-neutral: var(--p-color-grey-900);
  --p-color-icon-neutral-white: var(--p-color-grey-900);
  --p-color-icon-neutral-grey: var(--p-color-grey-900);

  --p-color-icon-on-brand: var(--p-color-red-100);
  --p-color-icon-on-brand-white: var(--p-color-red-100);
  --p-color-icon-on-brand-grey: var(--p-color-red-100);

  --p-color-icon-on-error: var(--p-color-red-800);
  --p-color-icon-on-info: var(--p-color-blue-900);
  --p-color-icon-on-warning: var(--p-color-yellow-900);
  --p-color-icon-on-success: var(--p-color-green-900);

  /* Button */

  --p-color-button-brand-fill: var(--p-color-red-600);
  --p-color-button-brand-fill-white: var(--p-color-red-600);
  --p-color-button-brand-fill-grey: var(--p-color-red-600);

  --p-color-button-brand-fill-hover: var(--p-color-red-700);
  --p-color-button-brand-fill-hover-white: var(--p-color-red-700);
  --p-color-button-brand-fill-hover-grey: var(--p-color-red-700);

  --p-color-button-brand-fill-pressed: var(--p-color-red-800);
  --p-color-button-brand-fill-pressed-white: var(--p-color-red-800);
  --p-color-button-brand-fill-pressed-grey: var(--p-color-red-800);

  --p-color-button-brand-fill-active: var(--p-color-red-800);
  --p-color-button-brand-fill-active-white: var(--p-color-red-800);
  --p-color-button-brand-fill-active-grey: var(--p-color-red-800);

  --p-color-button-action-fill: var(--p-color-red-900);
  --p-color-button-action-fill-white: var(--p-color-red-900);
  --p-color-button-action-fill-grey: var(--p-color-red-900);

  --p-color-button-action-fill-hover: var(--p-color-red-800);
  --p-color-button-action-fill-hover-white: var(--p-color-red-800);
  --p-color-button-action-fill-hover-grey: var(--p-color-red-800);

  --p-color-button-action-fill-pressed: var(--p-color-red-700);
  --p-color-button-action-fill-pressed-white: var(--p-color-red-700);
  --p-color-button-action-fill-pressed-grey: var(--p-color-red-700);

  --p-color-button-action-fill-active: var(--p-color-red-700);
  --p-color-button-action-fill-active-white: var(--p-color-red-700);
  --p-color-button-action-fill-active-grey: var(--p-color-red-700);

  --p-color-button-disabled: var(--p-color-grey-200);
  --p-color-button-disabled-white: var(--p-color-grey-200);
  --p-color-button-disabled-grey: var(--p-color-grey-300);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(--p-color-red-600);
  --p-color-graphics-illustration-primary-white: var(--p-color-red-600);
  --p-color-graphics-illustration-primary-grey: var(--p-color-red-600);

  --p-color-graphics-illustration-detail: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-illustration-base: var(--p-color-purple-900);
  --p-color-graphics-illustration-base-white: var(--p-color-purple-900);
  --p-color-graphics-illustration-base-grey: var(--p-color-purple-900);

  --p-color-graphics-illustration-white: var(--p-color-grey-000);
  --p-color-graphics-illustration-white-white: var(--p-color-grey-000);
  --p-color-graphics-illustration-white-grey: var(--p-color-grey-000);

  --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800);
  --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800);
  --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800);

  /* Static Background & Static Foreground */

  --p-color-static-brand-foreground: var(--p-color-red-600);
  --p-color-static-brand-foreground-white: var(--p-color-red-600);
  --p-color-static-brand-foreground-grey: var(--p-color-red-600);

  --p-color-static-brand-background: var(--p-color-red-200);
  --p-color-static-brand-background-white: var(--p-color-red-200);
  --p-color-static-brand-background-grey: var(--p-color-red-200);

  --p-color-static-orange-foreground: var(--p-color-orange-600);
  --p-color-static-orange-foreground-white: var(--p-color-orange-600);
  --p-color-static-orange-foreground-grey: var(--p-color-orange-600);

  --p-color-static-orange-background: var(--p-color-orange-200);
  --p-color-static-orange-background-white: var(--p-color-orange-200);
  --p-color-static-orange-background-grey: var(--p-color-orange-300);

  --p-color-static-purple-foreground: var(--p-color-purple-600);
  --p-color-static-purple-foreground-white: var(--p-color-purple-600);
  --p-color-static-purple-foreground-grey: var(--p-color-purple-600);

  --p-color-static-purple-background: var(--p-color-purple-200);
  --p-color-static-purple-background-white: var(--p-color-purple-200);
  --p-color-static-purple-background-grey: var(--p-color-purple-300);

  --p-color-static-red-foreground: var(--p-color-red-600);
  --p-color-static-red-foreground-white: var(--p-color-red-600);
  --p-color-static-red-foreground-grey: var(--p-color-red-600);

  --p-color-static-red-background: var(--p-color-red-200);
  --p-color-static-red-background-white: var(--p-color-red-200);
  --p-color-static-red-background-grey: var(--p-color-red-200);

  --p-color-static-grey-foreground: var(--p-color-grey-600);
  --p-color-static-grey-foreground-white: var(--p-color-grey-600);
  --p-color-static-grey-foreground-grey: var(--p-color-grey-600);

  --p-color-static-grey-background: var(--p-color-grey-200);
  --p-color-static-grey-background-white: var(--p-color-grey-200);
  --p-color-static-grey-background-grey: var(--p-color-grey-300);

  --p-color-static-risk-filled: var(--p-color-orange-600);
  --p-color-static-risk-filled-white: var(--p-color-orange-600);
  --p-color-static-risk-filled-grey: var(--p-color-orange-600);

  --p-color-static-risk-unfilled: var(--p-color-orange-200);
  --p-color-static-risk-unfilled-white: var(--p-color-orange-200);
  --p-color-static-risk-unfilled-grey: var(--p-color-orange-300);

  --p-color-static-sustainability-filled: var(--p-color-purple-600);
  --p-color-static-sustainability-filled-white: var(--p-color-purple-600);
  --p-color-static-sustainability-filled-grey: var(--p-color-purple-600);

  --p-color-static-sustainability-unfilled: var(--p-color-purple-200);
  --p-color-static-sustainability-unfilled-white: var(--p-color-purple-200);
  --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-300);

  /* States */

  --p-color-states-focus: var(--p-color-focus-1);
  --p-color-states-focus-white: var(--p-color-focus-1);
  --p-color-states-focus-grey: var(--p-color-focus-1);

  --p-color-states-scrim: var(--p-color-scrim-1);
  --p-color-states-scrim-white: var(--p-color-scrim-1);
  --p-color-states-scrim-grey: var(--p-color-scrim-1);

  --p-color-states-toggle-off: var(--p-color-grey-400);
  --p-color-states-toggle-off-white: var(--p-color-grey-400);
  --p-color-states-toggle-off-grey: var(--p-color-grey-500);

  --p-color-states-toggle-off-hover: var(--p-color-grey-300);
  --p-color-states-toggle-off-hover-white: var(--p-color-grey-300);
  --p-color-states-toggle-off-hover-grey: var(--p-color-grey-400);

  /* Surface */

  --p-color-surface-1: var(--p-color-grey-100);
  --p-color-surface-1-white: var(--p-color-grey-100);
  --p-color-surface-1-grey: var(--p-color-grey-000);

  --p-color-surface-2: var(--p-color-grey-000);
  --p-color-surface-2-white: var(--p-color-grey-000);
  --p-color-surface-2-grey: var(--p-color-grey-100);

  --p-color-surface-1-hover: var(--p-color-grey-200);
  --p-color-surface-1-hover-white: var(--p-color-grey-200);
  --p-color-surface-1-hover-grey: var(--p-color-grey-200);

  --p-color-surface-2-hover: var(--p-color-grey-200);
  --p-color-surface-2-hover-white: var(--p-color-grey-200);
  --p-color-surface-2-hover-grey: var(--p-color-grey-200);

  --p-color-surface-inverse: var(--p-color-red-900);
  --p-color-surface-inverse-white: var(--p-color-red-900);
  --p-color-surface-inverse-grey: var(--p-color-red-900);

  --p-color-surface-inverse-hover: var(--p-color-red-800);
  --p-color-surface-inverse-hover-white: var(--p-color-red-800);
  --p-color-surface-inverse-hover-grey: var(--p-color-red-800);

  --p-color-surface-inverse-pressed: var(--p-color-red-700);
  --p-color-surface-inverse-pressed-white: var(--p-color-red-700);
  --p-color-surface-inverse-pressed-grey: var(--p-color-red-700);

  --p-color-surface-selected: var(--p-color-red-700);
  --p-color-surface-selected-white: var(--p-color-red-700);
  --p-color-surface-selected-grey: var(--p-color-red-700);

  --p-color-surface-selected-hover: var(--p-color-red-800);
  --p-color-surface-selected-hover-white: var(--p-color-red-800);
  --p-color-surface-selected-hover-grey: var(--p-color-red-800);

  --p-color-surface-selected-pressed: var(--p-color-red-800);
  --p-color-surface-selected-pressed-white: var(--p-color-red-800);
  --p-color-surface-selected-pressed-grey: var(--p-color-red-800);

  --p-color-surface-selected-active: var(--p-color-red-900);
  --p-color-surface-selected-active-white: var(--p-color-red-900);
  --p-color-surface-selected-active-grey: var(--p-color-red-900);

  --p-color-surface-error: var(--p-color-red-200);
  --p-color-surface-error-white: var(--p-color-red-200);
  --p-color-surface-error-grey: var(--p-color-red-200);

  --p-color-surface-success: var(--p-color-green-200);
  --p-color-surface-success-white: var(--p-color-green-200);
  --p-color-surface-success-grey: var(--p-color-green-200);

  --p-color-surface-warning: var(--p-color-yellow-200);
  --p-color-surface-warning-white: var(--p-color-yellow-200);
  --p-color-surface-warning-grey: var(--p-color-yellow-200);

  --p-color-surface-info: var(--p-color-blue-200);
  --p-color-surface-info-white: var(--p-color-blue-200);
  --p-color-surface-info-grey: var(--p-color-blue-200);

  --p-color-surface-neutral: var(--p-color-grey-100);
  --p-color-surface-neutral-white: var(--p-color-grey-000);
  --p-color-surface-neutral-grey: var(--p-color-grey-100);

  --p-color-surface-static: var(--p-color-grey-000);
  --p-color-surface-static-white: var(--p-color-grey-000);
  --p-color-surface-static-grey: var(--p-color-grey-000);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-red-900);
  --p-color-stroke-strong-white: var(--p-color-red-900);
  --p-color-stroke-strong-grey: var(--p-color-red-900);

  --p-color-stroke-strong-hover: var(--p-color-red-800);
  --p-color-stroke-strong-hover-white: var(--p-color-red-800);
  --p-color-stroke-strong-hover-grey: var(--p-color-red-800);

  --p-color-stroke-strong-pressed: var(--p-color-red-700);
  --p-color-stroke-strong-pressed-white: var(--p-color-red-700);
  --p-color-stroke-strong-pressed-grey: var(--p-color-red-700);

  --p-color-stroke-0: var(--p-color-grey-300);
  --p-color-stroke-0-white: var(--p-color-grey-300);
  --p-color-stroke-0-grey: var(--p-color-grey-400);

  --p-color-stroke-1: var(--p-color-grey-400);
  --p-color-stroke-1-white: var(--p-color-grey-400);
  --p-color-stroke-1-grey: var(--p-color-grey-300);

  --p-color-stroke-2: var(--p-color-grey-300);
  --p-color-stroke-2-white: var(--p-color-grey-300);
  --p-color-stroke-2-grey: var(--p-color-grey-400);

  --p-color-stroke-on-white: var(--p-color-grey-300);
  --p-color-stroke-on-white-white: var(--p-color-grey-300);
  --p-color-stroke-on-white-grey: var(--p-color-grey-300);

  --p-color-stroke-subtle-0: var(--p-color-grey-200);
  --p-color-stroke-subtle-0-white: var(--p-color-grey-200);
  --p-color-stroke-subtle-0-grey: var(--p-color-grey-300);

  --p-color-stroke-subtle-1: var(--p-color-grey-300);
  --p-color-stroke-subtle-1-white: var(--p-color-grey-300);
  --p-color-stroke-subtle-1-grey: var(--p-color-grey-200);

  --p-color-stroke-subtle-2: var(--p-color-grey-200);
  --p-color-stroke-subtle-2-white: var(--p-color-grey-200);
  --p-color-stroke-subtle-2-grey: var(--p-color-grey-300);

  --p-color-stroke-subtle-on-white: var(--p-color-grey-200);
  --p-color-stroke-subtle-on-white-white: var(--p-color-grey-200);
  --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-200);

  --p-color-stroke-subtle-hover: var(--p-color-red-800);
  --p-color-stroke-subtle-hover-white: var(--p-color-red-800);
  --p-color-stroke-subtle-hover-grey: var(--p-color-red-800);

  --p-color-stroke-subtle-pressed: var(--p-color-red-700);
  --p-color-stroke-subtle-pressed-white: var(--p-color-red-700);
  --p-color-stroke-subtle-pressed-grey: var(--p-color-red-700);

  --p-color-stroke-on-color: var(--p-color-red-100);
  --p-color-stroke-on-color-white: var(--p-color-red-100);
  --p-color-stroke-on-color-grey: var(--p-color-red-100);

  --p-color-stroke-interactive: var(--p-color-red-600);
  --p-color-stroke-interactive-white: var(--p-color-red-600);
  --p-color-stroke-interactive-grey: var(--p-color-red-600);

  --p-color-stroke-interactive-hover: var(--p-color-red-700);
  --p-color-stroke-interactive-hover-white: var(--p-color-red-700);
  --p-color-stroke-interactive-hover-grey: var(--p-color-red-700);

  --p-color-stroke-interactive-pressed: var(--p-color-red-800);
  --p-color-stroke-interactive-pressed-white: var(--p-color-red-800);
  --p-color-stroke-interactive-pressed-grey: var(--p-color-red-800);

  --p-color-stroke-selected: var(--p-color-red-700);
  --p-color-stroke-selected-white: var(--p-color-red-700);
  --p-color-stroke-selected-grey: var(--p-color-red-700);

  --p-color-stroke-selected-hover: var(--p-color-red-800);
  --p-color-stroke-selected-hover-white: var(--p-color-red-800);
  --p-color-stroke-selected-hover-grey: var(--p-color-red-800);

  --p-color-stroke-selected-pressed: var(--p-color-red-900);
  --p-color-stroke-selected-pressed-white: var(--p-color-red-900);
  --p-color-stroke-selected-pressed-grey: var(--p-color-red-900);

  --p-color-stroke-disabled: var(--p-color-grey-400);
  --p-color-stroke-disabled-white: var(--p-color-grey-400);
  --p-color-stroke-disabled-grey: var(--p-color-grey-500);

  --p-color-stroke-error: var(--p-color-red-600);
  --p-color-stroke-error-white: var(--p-color-red-600);
  --p-color-stroke-error-grey: var(--p-color-red-600);

  --p-color-stroke-success: var(--p-color-green-600);
  --p-color-stroke-success-white: var(--p-color-green-600);
  --p-color-stroke-success-grey: var(--p-color-green-600);

  --p-color-stroke-warning: var(--p-color-yellow-600);
  --p-color-stroke-warning-white: var(--p-color-yellow-600);
  --p-color-stroke-warning-grey: var(--p-color-yellow-600);

  /* Data Visualization */

  --p-color-monochromatic-red-1: var(--p-color-red-550);
  --p-color-monochromatic-red-1-white: var(--p-color-red-550);
  --p-color-monochromatic-red-1-grey: var(--p-color-red-550);

  --p-color-monochromatic-red-2: var(--p-color-red-600);
  --p-color-monochromatic-red-2-white: var(--p-color-red-600);
  --p-color-monochromatic-red-2-grey: var(--p-color-red-600);

  --p-color-monochromatic-red-3: var(--p-color-red-800);
  --p-color-monochromatic-red-3-white: var(--p-color-red-800);
  --p-color-monochromatic-red-3-grey: var(--p-color-red-800);

  --p-color-monochromatic-red-4: var(--p-color-red-900);
  --p-color-monochromatic-red-4-white: var(--p-color-red-900);
  --p-color-monochromatic-red-4-grey: var(--p-color-red-900);

  --p-color-monochromatic-purple-1: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-white: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550);

  --p-color-monochromatic-purple-2: var(--p-color-purple-600);
  --p-color-monochromatic-purple-2-white: var(--p-color-purple-600);
  --p-color-monochromatic-purple-2-grey: var(--p-color-purple-600);

  --p-color-monochromatic-purple-3: var(--p-color-purple-800);
  --p-color-monochromatic-purple-3-white: var(--p-color-purple-800);
  --p-color-monochromatic-purple-3-grey: var(--p-color-purple-800);

  --p-color-monochromatic-purple-4: var(--p-color-purple-900);
  --p-color-monochromatic-purple-4-white: var(--p-color-purple-900);
  --p-color-monochromatic-purple-4-grey: var(--p-color-purple-900);

  --p-color-categorical-1: var(--p-color-purple-800);
  --p-color-categorical-1-white: var(--p-color-purple-800);
  --p-color-categorical-1-grey: var(--p-color-purple-800);

  --p-color-categorical-2: var(--p-color-red-550);
  --p-color-categorical-2-white: var(--p-color-red-550);
  --p-color-categorical-2-grey: var(--p-color-red-550);

  --p-color-categorical-3: var(--p-color-red-600);
  --p-color-categorical-3-white: var(--p-color-red-600);
  --p-color-categorical-3-grey: var(--p-color-red-600);

  --p-color-categorical-4: var(--p-color-purple-550);
  --p-color-categorical-4-white: var(--p-color-purple-550);
  --p-color-categorical-4-grey: var(--p-color-purple-550);

  --p-color-categorical-5: var(--p-color-red-800);
  --p-color-categorical-5-white: var(--p-color-red-800);
  --p-color-categorical-5-grey: var(--p-color-red-800);

  --p-color-categorical-6: var(--p-color-grey-500);
  --p-color-categorical-6-white: var(--p-color-grey-500);
  --p-color-categorical-6-grey: var(--p-color-grey-500);

  --p-color-categorical-7: var(--p-color-blue-700);
  --p-color-categorical-7-white: var(--p-color-blue-700);
  --p-color-categorical-7-grey: var(--p-color-blue-700);

  --p-color-categorical-8: var(--p-color-green-550);
  --p-color-categorical-8-white: var(--p-color-green-550);
  --p-color-categorical-8-grey: var(--p-color-green-550);

  --p-color-categorical-9: var(--p-color-purple-600);
  --p-color-categorical-9-white: var(--p-color-purple-600);
  --p-color-categorical-9-grey: var(--p-color-purple-600);

  --p-color-categorical-10: var(--p-color-blue-500);
  --p-color-categorical-10-white: var(--p-color-blue-500);
  --p-color-categorical-10-grey: var(--p-color-blue-500);

  --p-color-categorical-11: var(--p-color-green-700);
  --p-color-categorical-11-white: var(--p-color-green-700);
  --p-color-categorical-11-grey: var(--p-color-green-700);

  --p-color-categorical-12: var(--p-color-grey-700);
  --p-color-categorical-12-white: var(--p-color-grey-700);
  --p-color-categorical-12-grey: var(--p-color-grey-700);

  /* Outline */

  --p-outline: 0.125rem solid var(--p-color-states-focus);
  --p-outline-offset: 0.125rem;
}
[data-theme='pretzel-dark'] {
  /* Background */

  --p-color-background: var(--p-color-grey-1000);
  --p-color-background-white: var(--p-color-grey-1000);
  --p-color-background-grey: var(--p-color-grey-1000);

  --p-color-background-hover: var(--p-color-grey-900);
  --p-color-background-hover-white: var(--p-color-grey-900);
  --p-color-background-hover-grey: var(--p-color-grey-800);

  --p-color-background-pressed: var(--p-color-grey-800);
  --p-color-background-pressed-white: var(--p-color-grey-800);
  --p-color-background-pressed-grey: var(--p-color-grey-700);

  --p-color-background-active: var(--p-color-red-400);
  --p-color-background-active-white: var(--p-color-red-400);
  --p-color-background-active-grey: var(--p-color-red-400);

  --p-color-background-disabled: var(--p-color-grey-800);
  --p-color-background-disabled-white: var(--p-color-grey-800);
  --p-color-background-disabled-grey: var(--p-color-grey-700);

  --p-color-background-selected: var(--p-color-red-300);
  --p-color-background-selected-white: var(--p-color-red-300);
  --p-color-background-selected-grey: var(--p-color-red-300);

  --p-color-background-selected-hover: var(--p-color-red-200);
  --p-color-background-selected-hover-white: var(--p-color-red-200);
  --p-color-background-selected-hover-grey: var(--p-color-red-200);

  --p-color-background-selected-pressed: var(--p-color-red-100);
  --p-color-background-selected-pressed-white: var(--p-color-red-100);
  --p-color-background-selected-pressed-grey: var(--p-color-red-100);

  /* Text */

  --p-color-text-primary: var(--p-color-red-100);
  --p-color-text-primary-white: var(--p-color-red-100);
  --p-color-text-primary-grey: var(--p-color-red-100);

  --p-color-text-primary-hover: var(--p-color-red-200);
  --p-color-text-primary-hover-white: var(--p-color-red-200);
  --p-color-text-primary-hover-grey: var(--p-color-red-200);

  --p-color-text-primary-pressed: var(--p-color-red-300);
  --p-color-text-primary-pressed-white: var(--p-color-red-300);
  --p-color-text-primary-pressed-grey: var(--p-color-red-300);

  --p-color-text-primary-active: var(--p-color-red-300);
  --p-color-text-primary-active-white: var(--p-color-red-300);
  --p-color-text-primary-active-grey: var(--p-color-red-300);

  --p-color-text-interactive: var(--p-color-red-200);
  --p-color-text-interactive-white: var(--p-color-red-200);
  --p-color-text-interactive-grey: var(--p-color-red-200);

  --p-color-text-interactive-hover: var(--p-color-red-400);
  --p-color-text-interactive-hover-white: var(--p-color-red-400);
  --p-color-text-interactive-hover-grey: var(--p-color-red-400);

  --p-color-text-interactive-pressed: var(--p-color-red-300);
  --p-color-text-interactive-pressed-white: var(--p-color-red-300);
  --p-color-text-interactive-pressed-grey: var(--p-color-red-300);

  --p-color-text-interactive-active: var(--p-color-red-300);
  --p-color-text-interactive-active-white: var(--p-color-red-300);
  --p-color-text-interactive-active-grey: var(--p-color-red-300);

  --p-color-text-selected: var(--p-color-red-300);
  --p-color-text-selected-white: var(--p-color-red-300);
  --p-color-text-selected-grey: var(--p-color-red-300);

  --p-color-text-selected-hover: var(--p-color-red-200);
  --p-color-text-selected-hover-white: var(--p-color-red-200);
  --p-color-text-selected-hover-grey: var(--p-color-red-200);

  --p-color-text-selected-pressed: var(--p-color-red-100);
  --p-color-text-selected-pressed-white: var(--p-color-red-100);
  --p-color-text-selected-pressed-grey: var(--p-color-red-100);

  --p-color-text-secondary: var(--p-color-grey-300);
  --p-color-text-secondary-white: var(--p-color-grey-300);
  --p-color-text-secondary-grey: var(--p-color-grey-300);

  --p-color-text-placeholder: var(--p-color-grey-400);
  --p-color-text-placeholder-white: var(--p-color-grey-400);
  --p-color-text-placeholder-grey: var(--p-color-grey-400);

  --p-color-text-on-color: var(--p-color-red-900);
  --p-color-text-on-color-white: var(--p-color-red-900);
  --p-color-text-on-color-grey: var(--p-color-red-900);

  --p-color-text-disabled: var(--p-color-grey-600);
  --p-color-text-disabled-white: var(--p-color-grey-600);
  --p-color-text-disabled-grey: var(--p-color-grey-500);

  --p-color-text-info: var(--p-color-blue-400);
  --p-color-text-info-white: var(--p-color-blue-400);
  --p-color-text-info-grey: var(--p-color-blue-400);

  --p-color-text-success: var(--p-color-green-400);
  --p-color-text-success-white: var(--p-color-green-400);
  --p-color-text-success-grey: var(--p-color-green-400);

  --p-color-text-warning: var(--p-color-yellow-400);
  --p-color-text-warning-white: var(--p-color-yellow-400);
  --p-color-text-warning-grey: var(--p-color-yellow-400);

  --p-color-text-error: var(--p-color-red-400);
  --p-color-text-error-white: var(--p-color-red-400);
  --p-color-text-error-grey: var(--p-color-red-400);

  --p-color-text-alert: var(--p-color-grey-100);
  --p-color-text-alert-white: var(--p-color-grey-100);
  --p-color-text-alert-grey: var(--p-color-grey-100);

  --p-color-text-on-brand: var(--p-color-red-900);
  --p-color-text-on-brand-white: var(--p-color-red-900);
  --p-color-text-on-brand-grey: var(--p-color-red-900);

  --p-color-text-on-error: var(--p-color-red-200);
  --p-color-text-on-info: var(--p-color-blue-100);
  --p-color-text-on-warning: var(--p-color-yellow-100);
  --p-color-text-on-success: var(--p-color-green-100);

  /* Icon */

  --p-color-icon-primary: var(--p-color-red-100);
  --p-color-icon-primary-white: var(--p-color-red-100);
  --p-color-icon-primary-grey: var(--p-color-red-100);

  --p-color-icon-primary-hover: var(--p-color-red-200);
  --p-color-icon-primary-hover-white: var(--p-color-red-200);
  --p-color-icon-primary-hover-grey: var(--p-color-red-200);

  --p-color-icon-primary-active: var(--p-color-red-300);
  --p-color-icon-primary-active-white: var(--p-color-red-300);
  --p-color-icon-primary-active-grey: var(--p-color-red-300);

  --p-color-icon-primary-pressed: var(--p-color-red-300);
  --p-color-icon-primary-pressed-white: var(--p-color-red-300);
  --p-color-icon-primary-pressed-grey: var(--p-color-red-300);

  --p-color-icon-interactive: var(--p-color-red-200);
  --p-color-icon-interactive-white: var(--p-color-red-200);
  --p-color-icon-interactive-grey: var(--p-color-red-200);

  --p-color-icon-interactive-hover: var(--p-color-red-400);
  --p-color-icon-interactive-hover-white: var(--p-color-red-400);
  --p-color-icon-interactive-hover-grey: var(--p-color-red-400);

  --p-color-icon-interactive-pressed: var(--p-color-red-300);
  --p-color-icon-interactive-pressed-white: var(--p-color-red-300);
  --p-color-icon-interactive-pressed-grey: var(--p-color-red-300);

  --p-color-icon-interactive-active: var(--p-color-red-300);
  --p-color-icon-interactive-active-white: var(--p-color-red-300);
  --p-color-icon-interactive-active-grey: var(--p-color-red-300);

  --p-color-icon-on-color: var(--p-color-red-900);
  --p-color-icon-on-color-white: var(--p-color-red-900);
  --p-color-icon-on-color-grey: var(--p-color-red-900);

  --p-color-icon-disabled: var(--p-color-grey-600);
  --p-color-icon-disabled-white: var(--p-color-grey-600);
  --p-color-icon-disabled-grey: var(--p-color-grey-500);

  --p-color-icon-error: var(--p-color-red-400);
  --p-color-icon-error-white: var(--p-color-red-400);
  --p-color-icon-error-grey: var(--p-color-red-400);

  --p-color-icon-success: var(--p-color-green-400);
  --p-color-icon-success-white: var(--p-color-green-400);
  --p-color-icon-success-grey: var(--p-color-green-400);

  --p-color-icon-warning: var(--p-color-yellow-400);
  --p-color-icon-warning-white: var(--p-color-yellow-400);
  --p-color-icon-warning-grey: var(--p-color-yellow-400);

  --p-color-icon-info: var(--p-color-blue-400);
  --p-color-icon-info-white: var(--p-color-blue-400);
  --p-color-icon-info-grey: var(--p-color-blue-400);

  --p-color-icon-neutral: var(--p-color-grey-100);
  --p-color-icon-neutral-white: var(--p-color-grey-100);
  --p-color-icon-neutral-grey: var(--p-color-grey-100);

  --p-color-icon-on-brand: var(--p-color-red-900);
  --p-color-icon-on-brand-white: var(--p-color-red-900);
  --p-color-icon-on-brand-grey: var(--p-color-red-900);

  --p-color-icon-on-error: var(--p-color-red-200);
  --p-color-icon-on-info: var(--p-color-blue-100);
  --p-color-icon-on-warning: var(--p-color-yellow-100);
  --p-color-icon-on-success: var(--p-color-green-100);

  /* Button */

  --p-color-button-brand-fill: var(--p-color-red-400);
  --p-color-button-brand-fill-white: var(--p-color-red-400);
  --p-color-button-brand-fill-grey: var(--p-color-red-400);

  --p-color-button-brand-fill-hover: var(--p-color-red-300);
  --p-color-button-brand-fill-hover-white: var(--p-color-red-300);
  --p-color-button-brand-fill-hover-grey: var(--p-color-red-300);

  --p-color-button-brand-fill-pressed: var(--p-color-red-200);
  --p-color-button-brand-fill-pressed-white: var(--p-color-red-200);
  --p-color-button-brand-fill-pressed-grey: var(--p-color-red-200);

  --p-color-button-brand-fill-active: var(--p-color-red-200);
  --p-color-button-brand-fill-active-white: var(--p-color-red-200);
  --p-color-button-brand-fill-active-grey: var(--p-color-red-200);

  --p-color-button-action-fill: var(--p-color-red-100);
  --p-color-button-action-fill-white: var(--p-color-red-100);
  --p-color-button-action-fill-grey: var(--p-color-red-100);

  --p-color-button-action-fill-hover: var(--p-color-red-200);
  --p-color-button-action-fill-hover-white: var(--p-color-red-200);
  --p-color-button-action-fill-hover-grey: var(--p-color-red-200);

  --p-color-button-action-fill-pressed: var(--p-color-red-300);
  --p-color-button-action-fill-pressed-white: var(--p-color-red-300);
  --p-color-button-action-fill-pressed-grey: var(--p-color-red-300);

  --p-color-button-action-fill-active: var(--p-color-red-300);
  --p-color-button-action-fill-active-white: var(--p-color-red-300);
  --p-color-button-action-fill-active-grey: var(--p-color-red-300);

  --p-color-button-disabled: var(--p-color-grey-800);
  --p-color-button-disabled-white: var(--p-color-grey-800);
  --p-color-button-disabled-grey: var(--p-color-grey-800);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(--p-color-red-400);
  --p-color-graphics-illustration-primary-white: var(--p-color-red-400);
  --p-color-graphics-illustration-primary-grey: var(--p-color-red-400);

  --p-color-graphics-illustration-detail: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-illustration-base: var(--p-color-purple-100);
  --p-color-graphics-illustration-base-white: var(--p-color-purple-100);
  --p-color-graphics-illustration-base-grey: var(--p-color-purple-100);

  --p-color-graphics-illustration-white: var(--p-color-grey-1000);
  --p-color-graphics-illustration-white-white: var(--p-color-grey-1000);
  --p-color-graphics-illustration-white-grey: var(--p-color-grey-1000);

  --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200);
  --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200);
  --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200);

  /* Static Background & Static Foreground */

  --p-color-static-brand-foreground: var(--p-color-red-400);
  --p-color-static-brand-foreground-white: var(--p-color-red-400);
  --p-color-static-brand-foreground-grey: var(--p-color-red-400);

  --p-color-static-brand-background: var(--p-color-red-800);
  --p-color-static-brand-background-white: var(--p-color-red-800);
  --p-color-static-brand-background-grey: var(--p-color-red-800);

  --p-color-static-orange-foreground: var(--p-color-orange-400);
  --p-color-static-orange-foreground-white: var(--p-color-orange-400);
  --p-color-static-orange-foreground-grey: var(--p-color-orange-400);

  --p-color-static-orange-background: var(--p-color-orange-200);
  --p-color-static-orange-background-white: var(--p-color-orange-200);
  --p-color-static-orange-background-grey: var(--p-color-orange-300);

  --p-color-static-purple-foreground: var(--p-color-purple-400);
  --p-color-static-purple-foreground-white: var(--p-color-purple-400);
  --p-color-static-purple-foreground-grey: var(--p-color-purple-400);

  --p-color-static-purple-background: var(--p-color-purple-800);
  --p-color-static-purple-background-white: var(--p-color-purple-800);
  --p-color-static-purple-background-grey: var(--p-color-purple-800);

  --p-color-static-red-foreground: var(--p-color-red-400);
  --p-color-static-red-foreground-white: var(--p-color-red-400);
  --p-color-static-red-foreground-grey: var(--p-color-red-400);

  --p-color-static-red-background: var(--p-color-red-800);
  --p-color-static-red-background-white: var(--p-color-red-800);
  --p-color-static-red-background-grey: var(--p-color-red-800);

  --p-color-static-grey-foreground: var(--p-color-grey-400);
  --p-color-static-grey-foreground-white: var(--p-color-grey-400);
  --p-color-static-grey-foreground-grey: var(--p-color-grey-400);

  --p-color-static-grey-background: var(--p-color-grey-800);
  --p-color-static-grey-background-white: var(--p-color-grey-800);
  --p-color-static-grey-background-grey: var(--p-color-grey-800);

  --p-color-static-risk-filled: var(--p-color-orange-300);
  --p-color-static-risk-filled-white: var(--p-color-orange-300);
  --p-color-static-risk-filled-grey: var(--p-color-orange-300);

  --p-color-static-risk-unfilled: var(--p-color-orange-pale-800);
  --p-color-static-risk-unfilled-white: var(--p-color-orange-pale-800);
  --p-color-static-risk-unfilled-grey: var(--p-color-orange-pale-800);

  --p-color-static-sustainability-filled: var(--p-color-purple-300);
  --p-color-static-sustainability-filled-white: var(--p-color-purple-300);
  --p-color-static-sustainability-filled-grey: var(--p-color-purple-300);

  --p-color-static-sustainability-unfilled: var(--p-color-purple-pale-800);
  --p-color-static-sustainability-unfilled-white: var(
    --p-color-purple-pale-800
  );
  --p-color-static-sustainability-unfilled-grey: var(--p-color-purple-pale-800);

  /* States */

  --p-color-states-focus: var(--p-color-focus-1);
  --p-color-states-focus-white: var(--p-color-focus-1);
  --p-color-states-focus-grey: var(--p-color-focus-1);

  --p-color-states-scrim: var(--p-color-scrim-1);
  --p-color-states-scrim-white: var(--p-color-scrim-1);
  --p-color-states-scrim-grey: var(--p-color-scrim-1);

  --p-color-states-toggle-off: var(--p-color-grey-600);
  --p-color-states-toggle-off-white: var(--p-color-grey-600);
  --p-color-states-toggle-off-grey: var(--p-color-grey-500);

  --p-color-states-toggle-off-hover: var(--p-color-grey-700);
  --p-color-states-toggle-off-hover-white: var(--p-color-grey-700);
  --p-color-states-toggle-off-hover-grey: var(--p-color-grey-600);

  /* Surface */

  --p-color-surface-1: var(--p-color-grey-900);
  --p-color-surface-1-white: var(--p-color-grey-900);
  --p-color-surface-1-grey: var(--p-color-grey-1000);

  --p-color-surface-2: var(--p-color-grey-800);
  --p-color-surface-2-white: var(--p-color-grey-800);
  --p-color-surface-2-grey: var(--p-color-grey-800);

  --p-color-surface-1-hover: var(--p-color-grey-800);
  --p-color-surface-1-hover-white: var(--p-color-grey-800);
  --p-color-surface-1-hover-grey: var(--p-color-grey-800);

  --p-color-surface-2-hover: var(--p-color-grey-800);
  --p-color-surface-2-hover-white: var(--p-color-grey-800);
  --p-color-surface-2-hover-grey: var(--p-color-grey-800);

  --p-color-surface-inverse: var(--p-color-red-100);
  --p-color-surface-inverse-white: var(--p-color-red-100);
  --p-color-surface-inverse-grey: var(--p-color-red-100);

  --p-color-surface-inverse-hover: var(--p-color-red-200);
  --p-color-surface-inverse-hover-white: var(--p-color-red-200);
  --p-color-surface-inverse-hover-grey: var(--p-color-red-200);

  --p-color-surface-inverse-pressed: var(--p-color-red-300);
  --p-color-surface-inverse-pressed-white: var(--p-color-red-300);
  --p-color-surface-inverse-pressed-grey: var(--p-color-red-300);

  --p-color-surface-selected: var(--p-color-red-400);
  --p-color-surface-selected-white: var(--p-color-red-400);
  --p-color-surface-selected-grey: var(--p-color-red-400);

  --p-color-surface-selected-hover: var(--p-color-red-300);
  --p-color-surface-selected-hover-white: var(--p-color-red-300);
  --p-color-surface-selected-hover-grey: var(--p-color-red-300);

  --p-color-surface-selected-pressed: var(--p-color-red-200);
  --p-color-surface-selected-pressed-white: var(--p-color-red-200);
  --p-color-surface-selected-pressed-grey: var(--p-color-red-200);

  --p-color-surface-selected-active: var(--p-color-red-200);
  --p-color-surface-selected-active-white: var(--p-color-red-200);
  --p-color-surface-selected-active-grey: var(--p-color-red-200);

  --p-color-surface-error: var(--p-color-red-800);
  --p-color-surface-error-white: var(--p-color-red-800);
  --p-color-surface-error-grey: var(--p-color-red-800);

  --p-color-surface-success: var(--p-color-green-800);
  --p-color-surface-success-white: var(--p-color-green-800);
  --p-color-surface-success-grey: var(--p-color-green-800);

  --p-color-surface-warning: var(--p-color-yellow-800);
  --p-color-surface-warning-white: var(--p-color-yellow-800);
  --p-color-surface-warning-grey: var(--p-color-yellow-800);

  --p-color-surface-info: var(--p-color-blue-800);
  --p-color-surface-info-white: var(--p-color-blue-800);
  --p-color-surface-info-grey: var(--p-color-blue-800);

  --p-color-surface-neutral: var(--p-color-grey-900);
  --p-color-surface-neutral-white: var(--p-color-grey-1000);
  --p-color-surface-neutral-grey: var(--p-color-grey-900);

  --p-color-surface-static: var(--p-color-grey-1000);
  --p-color-surface-static-white: var(--p-color-grey-900);
  --p-color-surface-static-grey: var(--p-color-grey-900);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-red-200);
  --p-color-stroke-strong-white: var(--p-color-red-200);
  --p-color-stroke-strong-grey: var(--p-color-red-200);

  --p-color-stroke-strong-hover: var(--p-color-red-400);
  --p-color-stroke-strong-hover-white: var(--p-color-red-400);
  --p-color-stroke-strong-hover-grey: var(--p-color-red-400);

  --p-color-stroke-strong-pressed: var(--p-color-red-300);
  --p-color-stroke-strong-pressed-white: var(--p-color-red-300);
  --p-color-stroke-strong-pressed-grey: var(--p-color-red-300);

  --p-color-stroke-0: var(--p-color-grey-700);
  --p-color-stroke-0-white: var(--p-color-grey-700);
  --p-color-stroke-0-grey: var(--p-color-grey-600);

  --p-color-stroke-1: var(--p-color-grey-600);
  --p-color-stroke-1-white: var(--p-color-grey-600);
  --p-color-stroke-1-grey: var(--p-color-grey-700);

  --p-color-stroke-2: var(--p-color-grey-700);
  --p-color-stroke-2-white: var(--p-color-grey-700);
  --p-color-stroke-2-grey: var(--p-color-grey-600);

  --p-color-stroke-on-white: var(--p-color-grey-700);
  --p-color-stroke-on-white-white: var(--p-color-grey-700);
  --p-color-stroke-on-white-grey: var(--p-color-grey-700);

  --p-color-stroke-subtle-0: var(--p-color-grey-800);
  --p-color-stroke-subtle-0-white: var(--p-color-grey-800);
  --p-color-stroke-subtle-0-grey: var(--p-color-grey-700);

  --p-color-stroke-subtle-1: var(--p-color-grey-700);
  --p-color-stroke-subtle-1-white: var(--p-color-grey-700);
  --p-color-stroke-subtle-1-grey: var(--p-color-grey-800);

  --p-color-stroke-subtle-2: var(--p-color-grey-800);
  --p-color-stroke-subtle-2-white: var(--p-color-grey-800);
  --p-color-stroke-subtle-2-grey: var(--p-color-grey-700);

  --p-color-stroke-subtle-on-white: var(--p-color-grey-800);
  --p-color-stroke-subtle-on-white-white: var(--p-color-grey-800);
  --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-800);

  --p-color-stroke-subtle-hover: var(--p-color-red-200);
  --p-color-stroke-subtle-hover-white: var(--p-color-red-200);
  --p-color-stroke-subtle-hover-grey: var(--p-color-red-200);

  --p-color-stroke-subtle-pressed: var(--p-color-red-300);
  --p-color-stroke-subtle-pressed-white: var(--p-color-red-300);
  --p-color-stroke-subtle-pressed-grey: var(--p-color-red-300);

  --p-color-stroke-on-color: var(--p-color-red-900);
  --p-color-stroke-on-color-white: var(--p-color-red-900);
  --p-color-stroke-on-color-grey: var(--p-color-red-900);

  --p-color-stroke-interactive: var(--p-color-red-400);
  --p-color-stroke-interactive-white: var(--p-color-red-400);
  --p-color-stroke-interactive-grey: var(--p-color-red-400);

  --p-color-stroke-interactive-hover: var(--p-color-red-300);
  --p-color-stroke-interactive-hover-white: var(--p-color-red-300);
  --p-color-stroke-interactive-hover-grey: var(--p-color-red-300);

  --p-color-stroke-interactive-pressed: var(--p-color-red-200);
  --p-color-stroke-interactive-pressed-white: var(--p-color-red-200);
  --p-color-stroke-interactive-pressed-grey: var(--p-color-red-200);

  --p-color-stroke-selected: var(--p-color-red-300);
  --p-color-stroke-selected-white: var(--p-color-red-300);
  --p-color-stroke-selected-grey: var(--p-color-red-300);

  --p-color-stroke-selected-hover: var(--p-color-red-200);
  --p-color-stroke-selected-hover-white: var(--p-color-red-200);
  --p-color-stroke-selected-hover-grey: var(--p-color-red-200);

  --p-color-stroke-selected-pressed: var(--p-color-red-100);
  --p-color-stroke-selected-pressed-white: var(--p-color-red-100);
  --p-color-stroke-selected-pressed-grey: var(--p-color-red-100);

  --p-color-stroke-disabled: var(--p-color-grey-600);
  --p-color-stroke-disabled-white: var(--p-color-grey-600);
  --p-color-stroke-disabled-grey: var(--p-color-grey-500);

  --p-color-stroke-error: var(--p-color-red-400);
  --p-color-stroke-error-white: var(--p-color-red-400);
  --p-color-stroke-error-grey: var(--p-color-red-400);

  --p-color-stroke-success: var(--p-color-green-400);
  --p-color-stroke-success-white: var(--p-color-green-400);
  --p-color-stroke-success-grey: var(--p-color-green-400);

  --p-color-stroke-warning: var(--p-color-yellow-200);
  --p-color-stroke-warning-white: var(--p-color-yellow-200);
  --p-color-stroke-warning-grey: var(--p-color-yellow-200);

  /* Outline */

  --p-outline: 2px solid var(--p-color-states-focus);
  --p-outline-offset: 2px;
}
[data-theme='kron'] {
  /* Background */

  --p-color-background: var(--p-color-grey-cold-000);
  --p-color-background-white: var(--p-color-grey-cold-000);
  --p-color-background-grey: var(--p-color-grey-cold-100);

  --p-color-background-hover: var(--p-color-grey-cold-100);
  --p-color-background-hover-white: var(--p-color-grey-cold-100);
  --p-color-background-hover-grey: var(--p-color-grey-cold-200);

  --p-color-background-pressed: var(--p-color-grey-cold-200);
  --p-color-background-pressed-white: var(--p-color-grey-cold-200);
  --p-color-background-pressed-grey: var(--p-color-grey-cold-300);

  --p-color-background-active: var(--p-color-red-600);
  --p-color-background-active-white: var(--p-color-red-600);
  --p-color-background-active-grey: var(--p-color-red-600);

  --p-color-background-disabled: var(--p-color-grey-cold-200);
  --p-color-background-disabled-white: var(--p-color-grey-cold-200);
  --p-color-background-disabled-grey: var(--p-color-grey-cold-300);

  --p-color-background-selected: var(--p-color-purple-700);
  --p-color-background-selected-white: var(--p-color-purple-700);
  --p-color-background-selected-grey: var(--p-color-purple-700);

  --p-color-background-selected-hover: var(--p-color-purple-800);
  --p-color-background-selected-hover-white: var(--p-color-purple-800);
  --p-color-background-selected-hover-grey: var(--p-color-purple-800);

  --p-color-background-selected-pressed: var(--p-color-purple-900);
  --p-color-background-selected-pressed-white: var(--p-color-purple-900);
  --p-color-background-selected-pressed-grey: var(--p-color-purple-900);

  /* Text */

  --p-color-text-primary: var(--p-color-purple-900);
  --p-color-text-primary-white: var(--p-color-purple-900);
  --p-color-text-primary-grey: var(--p-color-purple-900);

  --p-color-text-primary-hover: var(--p-color-purple-800);
  --p-color-text-primary-hover-white: var(--p-color-purple-800);
  --p-color-text-primary-hover-grey: var(--p-color-purple-800);

  --p-color-text-primary-pressed: var(--p-color-purple-700);
  --p-color-text-primary-pressed-white: var(--p-color-purple-700);
  --p-color-text-primary-pressed-grey: var(--p-color-purple-700);

  --p-color-text-primary-active: var(--p-color-purple-700);
  --p-color-text-primary-active-white: var(--p-color-purple-700);
  --p-color-text-primary-active-grey: var(--p-color-purple-700);

  --p-color-text-interactive: var(--p-color-purple-800);
  --p-color-text-interactive-white: var(--p-color-purple-800);
  --p-color-text-interactive-grey: var(--p-color-purple-800);

  --p-color-text-interactive-hover: var(--p-color-purple-600);
  --p-color-text-interactive-hover-white: var(--p-color-purple-600);
  --p-color-text-interactive-hover-grey: var(--p-color-purple-600);

  --p-color-text-interactive-pressed: var(--p-color-purple-700);
  --p-color-text-interactive-pressed-white: var(--p-color-purple-700);
  --p-color-text-interactive-pressed-grey: var(--p-color-purple-700);

  --p-color-text-interactive-active: var(--p-color-purple-700);
  --p-color-text-interactive-active-white: var(--p-color-purple-700);
  --p-color-text-interactive-active-grey: var(--p-color-purple-700);

  --p-color-text-selected: var(--p-color-purple-700);
  --p-color-text-selected-white: var(--p-color-purple-700);
  --p-color-text-selected-grey: var(--p-color-purple-700);

  --p-color-text-selected-hover: var(--p-color-purple-800);
  --p-color-text-selected-hover-white: var(--p-color-purple-800);
  --p-color-text-selected-hover-grey: var(--p-color-purple-800);

  --p-color-text-selected-pressed: var(--p-color-purple-900);
  --p-color-text-selected-pressed-white: var(--p-color-purple-900);
  --p-color-text-selected-pressed-grey: var(--p-color-purple-900);

  --p-color-text-secondary: var(--p-color-grey-cold-700);
  --p-color-text-secondary-white: var(--p-color-grey-cold-700);
  --p-color-text-secondary-grey: var(--p-color-grey-cold-700);

  --p-color-text-placeholder: var(--p-color-grey-cold-600);
  --p-color-text-placeholder-white: var(--p-color-grey-cold-600);
  --p-color-text-placeholder-grey: var(--p-color-grey-cold-600);

  --p-color-text-on-color: var(--p-color-purple-100);
  --p-color-text-on-color-white: var(--p-color-purple-100);
  --p-color-text-on-color-grey: var(--p-color-purple-100);

  --p-color-text-disabled: var(--p-color-grey-cold-500);
  --p-color-text-disabled-white: var(--p-color-grey-cold-500);
  --p-color-text-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-text-info: var(--p-color-blue-600);
  --p-color-text-info-white: var(--p-color-blue-600);
  --p-color-text-info-grey: var(--p-color-blue-600);

  --p-color-text-success: var(--p-color-green-600);
  --p-color-text-success-white: var(--p-color-green-600);
  --p-color-text-success-grey: var(--p-color-green-600);

  --p-color-text-warning: var(--p-color-yellow-600);
  --p-color-text-warning-white: var(--p-color-yellow-600);
  --p-color-text-warning-grey: var(--p-color-yellow-600);

  --p-color-text-error: var(--p-color-red-600);
  --p-color-text-error-white: var(--p-color-red-600);
  --p-color-text-error-grey: var(--p-color-red-600);

  --p-color-text-alert: var(--p-color-grey-cold-900);
  --p-color-text-alert-white: var(--p-color-grey-cold-900);
  --p-color-text-alert-grey: var(--p-color-grey-cold-900);

  --p-color-text-on-brand: var(--p-color-purple-100);
  --p-color-text-on-brand-white: var(--p-color-purple-100);
  --p-color-text-on-brand-grey: var(--p-color-purple-100);

  --p-color-text-on-error: var(--p-color-red-800);
  --p-color-text-on-info: var(--p-color-purple-900);
  --p-color-text-on-warning: var(--p-color-yellow-900);
  --p-color-text-on-success: var(--p-color-green-900);

  /* Icon */

  --p-color-icon-primary: var(--p-color-purple-900);
  --p-color-icon-primary-white: var(--p-color-purple-900);
  --p-color-icon-primary-grey: var(--p-color-purple-900);

  --p-color-icon-primary-hover: var(--p-color-purple-800);
  --p-color-icon-primary-hover-white: var(--p-color-purple-800);
  --p-color-icon-primary-hover-grey: var(--p-color-purple-800);

  --p-color-icon-primary-active: var(--p-color-purple-700);
  --p-color-icon-primary-active-white: var(--p-color-purple-700);
  --p-color-icon-primary-active-grey: var(--p-color-purple-700);

  --p-color-icon-primary-pressed: var(--p-color-purple-700);
  --p-color-icon-primary-pressed-white: var(--p-color-purple-700);
  --p-color-icon-primary-pressed-grey: var(--p-color-purple-700);

  --p-color-icon-interactive: var(--p-color-purple-800);
  --p-color-icon-interactive-white: var(--p-color-purple-800);
  --p-color-icon-interactive-grey: var(--p-color-purple-800);

  --p-color-icon-interactive-hover: var(--p-color-purple-600);
  --p-color-icon-interactive-hover-white: var(--p-color-purple-600);
  --p-color-icon-interactive-hover-grey: var(--p-color-purple-600);

  --p-color-icon-interactive-pressed: var(--p-color-purple-700);
  --p-color-icon-interactive-pressed-white: var(--p-color-purple-700);
  --p-color-icon-interactive-pressed-grey: var(--p-color-purple-700);

  --p-color-icon-interactive-active: var(--p-color-purple-700);
  --p-color-icon-interactive-active-white: var(--p-color-purple-700);
  --p-color-icon-interactive-active-grey: var(--p-color-purple-700);

  --p-color-icon-on-color: var(--p-color-purple-100);
  --p-color-icon-on-color-white: var(--p-color-purple-100);
  --p-color-icon-on-color-grey: var(--p-color-purple-100);

  --p-color-icon-disabled: var(--p-color-grey-cold-500);
  --p-color-icon-disabled-white: var(--p-color-grey-cold-500);
  --p-color-icon-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-icon-error: var(--p-color-red-600);
  --p-color-icon-error-white: var(--p-color-red-600);
  --p-color-icon-error-grey: var(--p-color-red-600);

  --p-color-icon-success: var(--p-color-green-600);
  --p-color-icon-success-white: var(--p-color-green-600);
  --p-color-icon-success-grey: var(--p-color-green-600);

  --p-color-icon-warning: var(--p-color-yellow-600);
  --p-color-icon-warning-white: var(--p-color-yellow-600);
  --p-color-icon-warning-grey: var(--p-color-yellow-600);

  --p-color-icon-info: var(--p-color-purple-600);
  --p-color-icon-info-white: var(--p-color-purple-600);
  --p-color-icon-info-grey: var(--p-color-purple-600);

  --p-color-icon-neutral: var(--p-color-grey-cold-900);
  --p-color-icon-neutral-white: var(--p-color-grey-cold-900);
  --p-color-icon-neutral-grey: var(--p-color-grey-cold-900);

  --p-color-icon-on-brand: var(--p-color-purple-100);
  --p-color-icon-on-brand-white: var(--p-color-purple-100);
  --p-color-icon-on-brand-grey: var(--p-color-purple-100);

  --p-color-icon-on-error: var(--p-color-red-800);
  --p-color-icon-on-info: var(--p-color-purple-900);
  --p-color-icon-on-warning: var(--p-color-yellow-900);
  --p-color-icon-on-success: var(--p-color-green-900);

  /* Button */

  --p-color-button-brand-fill: var(--p-color-purple-500);
  --p-color-button-brand-fill-white: var(--p-color-purple-600);
  --p-color-button-brand-fill-grey: var(--p-color-purple-600);

  --p-color-button-brand-fill-hover: var(--p-color-purple-400);
  --p-color-button-brand-fill-hover-white: var(--p-color-purple-700);
  --p-color-button-brand-fill-hover-grey: var(--p-color-purple-700);

  --p-color-button-brand-fill-pressed: var(--p-color-purple-300);
  --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800);

  --p-color-button-brand-fill-active: var(--p-color-purple-300);
  --p-color-button-brand-fill-active-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-active-grey: var(--p-color-purple-800);

  --p-color-button-action-fill: var(--p-color-purple-400);
  --p-color-button-action-fill-white: var(--p-color-purple-900);
  --p-color-button-action-fill-grey: var(--p-color-purple-900);

  --p-color-button-action-fill-hover: var(--p-color-purple-300);
  --p-color-button-action-fill-hover-white: var(--p-color-purple-800);
  --p-color-button-action-fill-hover-grey: var(--p-color-purple-800);

  --p-color-button-action-fill-pressed: var(--p-color-purple-200);
  --p-color-button-action-fill-pressed-white: var(--p-color-purple-700);
  --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700);

  --p-color-button-action-fill-active: var(--p-color-purple-200);
  --p-color-button-action-fill-active-white: var(--p-color-purple-700);
  --p-color-button-action-fill-active-grey: var(--p-color-purple-700);

  --p-color-button-disabled: var(--p-color-grey-cold-800);
  --p-color-button-disabled-white: var(--p-color-grey-cold-200);
  --p-color-button-disabled-grey: var(--p-color-grey-cold-300);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(--p-color-red-600);
  --p-color-graphics-illustration-primary-white: var(--p-color-red-600);
  --p-color-graphics-illustration-primary-grey: var(--p-color-red-600);

  --p-color-graphics-illustration-detail: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-illustration-base: var(--p-color-purple-900);
  --p-color-graphics-illustration-base-white: var(--p-color-purple-900);
  --p-color-graphics-illustration-base-grey: var(--p-color-purple-900);

  --p-color-graphics-illustration-white: var(--p-color-grey-cold-000);
  --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-000);
  --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-000);

  --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800);
  --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800);
  --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800);

  /* Static Background & Static Foreground */

  --p-color-static-brand-foreground: var(--p-color-purple-600);
  --p-color-static-brand-foreground-white: var(--p-color-purple-600);
  --p-color-static-brand-foreground-grey: var(--p-color-purple-600);

  --p-color-static-brand-background: var(--p-color-purple-200);
  --p-color-static-brand-background-white: var(--p-color-purple-200);
  --p-color-static-brand-background-grey: var(--p-color-purple-200);

  --p-color-static-orange-foreground: var(--p-color-orange-600);
  --p-color-static-orange-foreground-white: var(--p-color-orange-600);
  --p-color-static-orange-foreground-grey: var(--p-color-orange-600);

  --p-color-static-orange-background: var(--p-color-orange-200);
  --p-color-static-orange-background-white: var(--p-color-orange-200);
  --p-color-static-orange-background-grey: var(--p-color-orange-300);

  --p-color-static-purple-foreground: var(--p-color-purple-600);
  --p-color-static-purple-foreground-white: var(--p-color-purple-600);
  --p-color-static-purple-foreground-grey: var(--p-color-purple-600);

  --p-color-static-purple-background: var(--p-color-purple-200);
  --p-color-static-purple-background-white: var(--p-color-purple-200);
  --p-color-static-purple-background-grey: var(--p-color-purple-300);

  --p-color-static-red-foreground: var(--p-color-red-600);
  --p-color-static-red-foreground-white: var(--p-color-red-600);
  --p-color-static-red-foreground-grey: var(--p-color-red-600);

  --p-color-static-red-background: var(--p-color-red-200);
  --p-color-static-red-background-white: var(--p-color-red-200);
  --p-color-static-red-background-grey: var(--p-color-red-200);

  --p-color-static-grey-foreground: var(--p-color-grey-cold-600);
  --p-color-static-grey-foreground-white: var(--p-color-grey-cold-600);
  --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-600);

  --p-color-static-grey-background: var(--p-color-grey-cold-200);
  --p-color-static-grey-background-white: var(--p-color-grey-cold-200);
  --p-color-static-grey-background-grey: var(--p-color-grey-cold-300);

  --p-color-static-risk-filled: var(--p-color-purple-800);
  --p-color-static-risk-filled-white: var(--p-color-purple-800);
  --p-color-static-risk-filled-grey: var(--p-color-purple-800);

  --p-color-static-risk-unfilled: var(--p-color-purple-200);
  --p-color-static-risk-unfilled-white: var(--p-color-purple-200);
  --p-color-static-risk-unfilled-grey: var(--p-color-purple-200);

  --p-color-static-sustainability-filled: var(--p-color-green-700);
  --p-color-static-sustainability-filled-white: var(--p-color-green-700);
  --p-color-static-sustainability-filled-grey: var(--p-color-green-700);

  --p-color-static-sustainability-unfilled: var(--p-color-grey-cold-200);
  --p-color-static-sustainability-unfilled-white: var(--p-color-grey-cold-200);
  --p-color-static-sustainability-unfilled-grey: var(--p-color-grey-cold-200);

  /* States */

  --p-color-states-focus: var(--p-color-focus-1);
  --p-color-states-focus-white: var(--p-color-focus-1);
  --p-color-states-focus-grey: var(--p-color-focus-1);

  --p-color-states-scrim: var(--p-color-scrim-1);
  --p-color-states-scrim-white: var(--p-color-scrim-1);
  --p-color-states-scrim-grey: var(--p-color-scrim-1);

  --p-color-states-toggle-off: var(--p-color-grey-cold-400);
  --p-color-states-toggle-off-white: var(--p-color-grey-cold-400);
  --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);

  --p-color-states-toggle-off-hover: var(--p-color-grey-cold-300);
  --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-300);
  --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-400);

  /* Surface */

  --p-color-surface-1: var(--p-color-grey-cold-100);
  --p-color-surface-1-white: var(--p-color-grey-cold-100);
  --p-color-surface-1-grey: var(--p-color-grey-cold-000);

  --p-color-surface-2: var(--p-color-grey-cold-000);
  --p-color-surface-2-white: var(--p-color-grey-cold-000);
  --p-color-surface-2-grey: var(--p-color-grey-cold-100);

  --p-color-surface-1-hover: var(--p-color-grey-cold-200);
  --p-color-surface-1-hover-white: var(--p-color-grey-cold-200);
  --p-color-surface-1-hover-grey: var(--p-color-grey-cold-200);

  --p-color-surface-2-hover: var(--p-color-grey-cold-200);
  --p-color-surface-2-hover-white: var(--p-color-grey-cold-200);
  --p-color-surface-2-hover-grey: var(--p-color-grey-cold-200);

  --p-color-surface-inverse: var(--p-color-purple-900);
  --p-color-surface-inverse-white: var(--p-color-purple-900);
  --p-color-surface-inverse-grey: var(--p-color-purple-900);

  --p-color-surface-inverse-hover: var(--p-color-purple-800);
  --p-color-surface-inverse-hover-white: var(--p-color-purple-800);
  --p-color-surface-inverse-hover-grey: var(--p-color-purple-800);

  --p-color-surface-inverse-pressed: var(--p-color-purple-700);
  --p-color-surface-inverse-pressed-white: var(--p-color-purple-700);
  --p-color-surface-inverse-pressed-grey: var(--p-color-purple-700);

  --p-color-surface-selected: var(--p-color-purple-600);
  --p-color-surface-selected-white: var(--p-color-purple-600);
  --p-color-surface-selected-grey: var(--p-color-purple-600);

  --p-color-surface-selected-hover: var(--p-color-purple-700);
  --p-color-surface-selected-hover-white: var(--p-color-purple-700);
  --p-color-surface-selected-hover-grey: var(--p-color-purple-700);

  --p-color-surface-selected-pressed: var(--p-color-purple-800);
  --p-color-surface-selected-pressed-white: var(--p-color-purple-800);
  --p-color-surface-selected-pressed-grey: var(--p-color-purple-800);

  --p-color-surface-selected-active: var(--p-color-purple-800);
  --p-color-surface-selected-active-white: var(--p-color-purple-800);
  --p-color-surface-selected-active-grey: var(--p-color-purple-800);

  --p-color-surface-error: var(--p-color-red-200);
  --p-color-surface-error-white: var(--p-color-red-200);
  --p-color-surface-error-grey: var(--p-color-red-200);

  --p-color-surface-success: var(--p-color-green-200);
  --p-color-surface-success-white: var(--p-color-green-200);
  --p-color-surface-success-grey: var(--p-color-green-200);

  --p-color-surface-warning: var(--p-color-yellow-200);
  --p-color-surface-warning-white: var(--p-color-yellow-200);
  --p-color-surface-warning-grey: var(--p-color-yellow-200);

  --p-color-surface-info: var(--p-color-purple-200);
  --p-color-surface-info-white: var(--p-color-purple-200);
  --p-color-surface-info-grey: var(--p-color-purple-200);

  --p-color-surface-neutral: var(--p-color-grey-cold-100);
  --p-color-surface-neutral-white: var(--p-color-grey-cold-000);
  --p-color-surface-neutral-grey: var(--p-color-grey-cold-100);

  --p-color-surface-static: var(--p-color-grey-cold-000);
  --p-color-surface-static-white: var(--p-color-grey-cold-000);
  --p-color-surface-static-grey: var(--p-color-grey-cold-000);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-purple-900);
  --p-color-stroke-strong-white: var(--p-color-purple-900);
  --p-color-stroke-strong-grey: var(--p-color-purple-900);

  --p-color-stroke-strong-hover: var(--p-color-purple-800);
  --p-color-stroke-strong-hover-white: var(--p-color-purple-800);
  --p-color-stroke-strong-hover-grey: var(--p-color-purple-800);

  --p-color-stroke-strong-pressed: var(--p-color-purple-700);
  --p-color-stroke-strong-pressed-white: var(--p-color-purple-700);
  --p-color-stroke-strong-pressed-grey: var(--p-color-purple-700);

  --p-color-stroke-0: var(--p-color-grey-cold-300);
  --p-color-stroke-0-white: var(--p-color-grey-cold-300);
  --p-color-stroke-0-grey: var(--p-color-grey-cold-400);

  --p-color-stroke-1: var(--p-color-grey-cold-400);
  --p-color-stroke-1-white: var(--p-color-grey-cold-400);
  --p-color-stroke-1-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-2: var(--p-color-grey-cold-300);
  --p-color-stroke-2-white: var(--p-color-grey-cold-300);
  --p-color-stroke-2-grey: var(--p-color-grey-cold-400);

  --p-color-stroke-on-white: var(--p-color-grey-cold-300);
  --p-color-stroke-on-white-white: var(--p-color-grey-cold-300);
  --p-color-stroke-on-white-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-subtle-0: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-subtle-1: var(--p-color-grey-cold-300);
  --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-300);
  --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-200);

  --p-color-stroke-subtle-2: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-200);

  --p-color-stroke-on-color: var(--p-color-purple-100);
  --p-color-stroke-on-color-white: var(--p-color-purple-100);
  --p-color-stroke-on-color-grey: var(--p-color-purple-100);

  --p-color-stroke-interactive: var(--p-color-purple-600);
  --p-color-stroke-interactive-white: var(--p-color-purple-600);
  --p-color-stroke-interactive-grey: var(--p-color-purple-600);

  --p-color-stroke-interactive-hover: var(--p-color-purple-700);
  --p-color-stroke-interactive-hover-white: var(--p-color-purple-700);
  --p-color-stroke-interactive-hover-grey: var(--p-color-purple-700);

  --p-color-stroke-interactive-pressed: var(--p-color-purple-800);
  --p-color-stroke-interactive-pressed-white: var(--p-color-purple-800);
  --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-800);

  --p-color-stroke-selected: var(--p-color-purple-700);
  --p-color-stroke-selected-white: var(--p-color-purple-700);
  --p-color-stroke-selected-grey: var(--p-color-purple-700);

  --p-color-stroke-selected-hover: var(--p-color-purple-800);
  --p-color-stroke-selected-hover-white: var(--p-color-purple-800);
  --p-color-stroke-selected-hover-grey: var(--p-color-purple-800);

  --p-color-stroke-selected-pressed: var(--p-color-purple-900);
  --p-color-stroke-selected-pressed-white: var(--p-color-purple-900);
  --p-color-stroke-selected-pressed-grey: var(--p-color-purple-900);

  --p-color-stroke-disabled: var(--p-color-grey-cold-400);
  --p-color-stroke-disabled-white: var(--p-color-grey-cold-400);
  --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-stroke-error: var(--p-color-red-600);
  --p-color-stroke-error-white: var(--p-color-red-600);
  --p-color-stroke-error-grey: var(--p-color-red-600);

  --p-color-stroke-success: var(--p-color-green-600);
  --p-color-stroke-success-white: var(--p-color-green-600);
  --p-color-stroke-success-grey: var(--p-color-green-600);

  --p-color-stroke-warning: var(--p-color-yellow-600);
  --p-color-stroke-warning-white: var(--p-color-yellow-600);
  --p-color-stroke-warning-grey: var(--p-color-yellow-600);

  /* Data Visualization */

  --p-color-monochromatic-red-1: var(--p-color-red-550);
  --p-color-monochromatic-red-1-white: var(--p-color-red-550);
  --p-color-monochromatic-red-1-grey: var(--p-color-red-550);

  --p-color-monochromatic-red-2: var(--p-color-red-600);
  --p-color-monochromatic-red-2-white: var(--p-color-red-600);
  --p-color-monochromatic-red-2-grey: var(--p-color-red-600);

  --p-color-monochromatic-red-3: var(--p-color-red-800);
  --p-color-monochromatic-red-3-white: var(--p-color-red-800);
  --p-color-monochromatic-red-3-grey: var(--p-color-red-800);

  --p-color-monochromatic-red-4: var(--p-color-red-900);
  --p-color-monochromatic-red-4-white: var(--p-color-red-900);
  --p-color-monochromatic-red-4-grey: var(--p-color-red-900);

  --p-color-monochromatic-purple-1: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-white: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550);

  --p-color-monochromatic-purple-2: var(--p-color-purple-600);
  --p-color-monochromatic-purple-2-white: var(--p-color-purple-600);
  --p-color-monochromatic-purple-2-grey: var(--p-color-purple-600);

  --p-color-monochromatic-purple-3: var(--p-color-purple-800);
  --p-color-monochromatic-purple-3-white: var(--p-color-purple-800);
  --p-color-monochromatic-purple-3-grey: var(--p-color-purple-800);

  --p-color-monochromatic-purple-4: var(--p-color-purple-900);
  --p-color-monochromatic-purple-4-white: var(--p-color-purple-900);
  --p-color-monochromatic-purple-4-grey: var(--p-color-purple-900);

  --p-color-categorical-1: var(--p-color-purple-800);
  --p-color-categorical-1-white: var(--p-color-purple-800);
  --p-color-categorical-1-grey: var(--p-color-purple-800);

  --p-color-categorical-2: var(--p-color-purple-550);
  --p-color-categorical-2-white: var(--p-color-purple-550);
  --p-color-categorical-2-grey: var(--p-color-purple-550);

  --p-color-categorical-3: var(--p-color-red-600);
  --p-color-categorical-3-white: var(--p-color-red-600);
  --p-color-categorical-3-grey: var(--p-color-red-600);

  --p-color-categorical-4: var(--p-color-purple-550);
  --p-color-categorical-4-white: var(--p-color-purple-550);
  --p-color-categorical-4-grey: var(--p-color-purple-550);

  --p-color-categorical-5: var(--p-color-purple-800);
  --p-color-categorical-5-white: var(--p-color-purple-800);
  --p-color-categorical-5-grey: var(--p-color-purple-800);

  --p-color-categorical-6: var(--p-color-grey-cold-500);
  --p-color-categorical-6-white: var(--p-color-grey-cold-500);
  --p-color-categorical-6-grey: var(--p-color-grey-cold-500);

  --p-color-categorical-7: var(--p-color-blue-700);
  --p-color-categorical-7-white: var(--p-color-blue-700);
  --p-color-categorical-7-grey: var(--p-color-blue-700);

  --p-color-categorical-8: var(--p-color-green-550);
  --p-color-categorical-8-white: var(--p-color-green-550);
  --p-color-categorical-8-grey: var(--p-color-green-550);

  --p-color-categorical-9: var(--p-color-purple-600);
  --p-color-categorical-9-white: var(--p-color-purple-600);
  --p-color-categorical-9-grey: var(--p-color-purple-600);

  --p-color-categorical-10: var(--p-color-blue-500);
  --p-color-categorical-10-white: var(--p-color-blue-500);
  --p-color-categorical-10-grey: var(--p-color-blue-500);

  --p-color-categorical-11: var(--p-color-green-700);
  --p-color-categorical-11-white: var(--p-color-green-700);
  --p-color-categorical-11-grey: var(--p-color-green-700);

  --p-color-categorical-12: var(--p-color-grey-cold-700);
  --p-color-categorical-12-white: var(--p-color-grey-cold-700);
  --p-color-categorical-12-grey: var(--p-color-grey-cold-700);

  /* Outline */

  --p-outline: 2px solid var(--p-color-states-focus);
  --p-outline-offset: 2px;

  @media (prefers-color-scheme: dark) {
    /* Background */

    --p-color-background: var(--p-color-grey-cold-1000);
    --p-color-background-white: var(--p-color-grey-cold-1000);
    --p-color-background-grey: var(--p-color-grey-cold-900);

    --p-color-background-hover: var(--p-color-grey-cold-900);
    --p-color-background-hover-white: var(--p-color-grey-cold-900);
    --p-color-background-hover-grey: var(--p-color-grey-cold-800);

    --p-color-background-pressed: var(--p-color-grey-cold-800);
    --p-color-background-pressed-white: var(--p-color-grey-cold-800);
    --p-color-background-pressed-grey: var(--p-color-grey-cold-700);

    --p-color-background-active: var(--p-color-red-400);
    --p-color-background-active-white: var(--p-color-red-400);
    --p-color-background-active-grey: var(--p-color-red-400);

    --p-color-background-disabled: var(--p-color-grey-cold-800);
    --p-color-background-disabled-white: var(--p-color-grey-cold-800);
    --p-color-background-disabled-grey: var(--p-color-grey-cold-700);

    --p-color-background-selected: var(--p-color-purple-300);
    --p-color-background-selected-white: var(--p-color-purple-300);
    --p-color-background-selected-grey: var(--p-color-purple-300);

    --p-color-background-selected-hover: var(--p-color-purple-200);
    --p-color-background-selected-hover-white: var(--p-color-purple-200);
    --p-color-background-selected-hover-grey: var(--p-color-purple-200);

    --p-color-background-selected-pressed: var(--p-color-purple-100);
    --p-color-background-selected-pressed-white: var(--p-color-purple-100);
    --p-color-background-selected-pressed-grey: var(--p-color-purple-100);

    /* Text */

    --p-color-text-primary: var(--p-color-purple-100);
    --p-color-text-primary-white: var(--p-color-purple-100);
    --p-color-text-primary-grey: var(--p-color-purple-100);

    --p-color-text-primary-hover: var(--p-color-purple-200);
    --p-color-text-primary-hover-white: var(--p-color-purple-200);
    --p-color-text-primary-hover-grey: var(--p-color-purple-200);

    --p-color-text-primary-pressed: var(--p-color-purple-300);
    --p-color-text-primary-pressed-white: var(--p-color-purple-300);
    --p-color-text-primary-pressed-grey: var(--p-color-purple-300);

    --p-color-text-primary-active: var(--p-color-purple-300);
    --p-color-text-primary-active-white: var(--p-color-purple-300);
    --p-color-text-primary-active-grey: var(--p-color-purple-300);

    --p-color-text-interactive: var(--p-color-purple-200);
    --p-color-text-interactive-white: var(--p-color-purple-200);
    --p-color-text-interactive-grey: var(--p-color-purple-200);

    --p-color-text-interactive-hover: var(--p-color-purple-400);
    --p-color-text-interactive-hover-white: var(--p-color-purple-400);
    --p-color-text-interactive-hover-grey: var(--p-color-purple-400);

    --p-color-text-interactive-pressed: var(--p-color-purple-300);
    --p-color-text-interactive-pressed-white: var(--p-color-purple-300);
    --p-color-text-interactive-pressed-grey: var(--p-color-purple-300);

    --p-color-text-interactive-active: var(--p-color-purple-300);
    --p-color-text-interactive-active-white: var(--p-color-purple-300);
    --p-color-text-interactive-active-grey: var(--p-color-purple-300);

    --p-color-text-selected: var(--p-color-purple-300);
    --p-color-text-selected-white: var(--p-color-purple-300);
    --p-color-text-selected-grey: var(--p-color-purple-300);

    --p-color-text-selected-hover: var(--p-color-purple-200);
    --p-color-text-selected-hover-white: var(--p-color-purple-200);
    --p-color-text-selected-hover-grey: var(--p-color-purple-200);

    --p-color-text-selected-pressed: var(--p-color-purple-100);
    --p-color-text-selected-pressed-white: var(--p-color-purple-100);
    --p-color-text-selected-pressed-grey: var(--p-color-purple-100);

    --p-color-text-secondary: var(--p-color-grey-cold-300);
    --p-color-text-secondary-white: var(--p-color-grey-cold-300);
    --p-color-text-secondary-grey: var(--p-color-grey-cold-300);

    --p-color-text-placeholder: var(--p-color-grey-cold-400);
    --p-color-text-placeholder-white: var(--p-color-grey-cold-400);
    --p-color-text-placeholder-grey: var(--p-color-grey-cold-400);

    --p-color-text-on-color: var(--p-color-purple-900);
    --p-color-text-on-color-white: var(--p-color-purple-900);
    --p-color-text-on-color-grey: var(--p-color-purple-900);

    --p-color-text-disabled: var(--p-color-grey-cold-700);
    --p-color-text-disabled-white: var(--p-color-grey-cold-700);
    --p-color-text-disabled-grey: var(--p-color-grey-cold-700);

    --p-color-text-info: var(--p-color-blue-400);
    --p-color-text-info-white: var(--p-color-blue-400);
    --p-color-text-info-grey: var(--p-color-blue-400);

    --p-color-text-success: var(--p-color-green-400);
    --p-color-text-success-white: var(--p-color-green-400);
    --p-color-text-success-grey: var(--p-color-green-400);

    --p-color-text-warning: var(--p-color-yellow-400);
    --p-color-text-warning-white: var(--p-color-yellow-400);
    --p-color-text-warning-grey: var(--p-color-yellow-400);

    --p-color-text-error: var(--p-color-red-400);
    --p-color-text-error-white: var(--p-color-red-400);
    --p-color-text-error-grey: var(--p-color-red-400);

    --p-color-text-alert: var(--p-color-grey-cold-100);
    --p-color-text-alert-white: var(--p-color-grey-cold-100);
    --p-color-text-alert-grey: var(--p-color-grey-cold-100);

    --p-color-text-on-brand: var(--p-color-purple-900);
    --p-color-text-on-brand-white: var(--p-color-purple-900);
    --p-color-text-on-brand-grey: var(--p-color-purple-900);

    --p-color-text-on-error: var(--p-color-red-200);
    --p-color-text-on-info: var(--p-color-blue-200);
    --p-color-text-on-warning: var(--p-color-yellow-100);
    --p-color-text-on-success: var(--p-color-green-100);

    /* Icon */

    --p-color-icon-primary: var(--p-color-purple-100);
    --p-color-icon-primary-white: var(--p-color-purple-100);
    --p-color-icon-primary-grey: var(--p-color-purple-100);

    --p-color-icon-primary-hover: var(--p-color-purple-200);
    --p-color-icon-primary-hover-white: var(--p-color-purple-200);
    --p-color-icon-primary-hover-grey: var(--p-color-purple-200);

    --p-color-icon-primary-active: var(--p-color-purple-300);
    --p-color-icon-primary-active-white: var(--p-color-purple-300);
    --p-color-icon-primary-active-grey: var(--p-color-purple-300);

    --p-color-icon-primary-pressed: var(--p-color-purple-300);
    --p-color-icon-primary-pressed-white: var(--p-color-purple-300);
    --p-color-icon-primary-pressed-grey: var(--p-color-purple-300);

    --p-color-icon-interactive: var(--p-color-purple-200);
    --p-color-icon-interactive-white: var(--p-color-purple-200);
    --p-color-icon-interactive-grey: var(--p-color-purple-200);

    --p-color-icon-interactive-hover: var(--p-color-purple-400);
    --p-color-icon-interactive-hover-white: var(--p-color-purple-400);
    --p-color-icon-interactive-hover-grey: var(--p-color-purple-400);

    --p-color-icon-interactive-pressed: var(--p-color-purple-300);
    --p-color-icon-interactive-pressed-white: var(--p-color-purple-300);
    --p-color-icon-interactive-pressed-grey: var(--p-color-purple-300);

    --p-color-icon-interactive-active: var(--p-color-purple-300);
    --p-color-icon-interactive-active-white: var(--p-color-purple-300);
    --p-color-icon-interactive-active-grey: var(--p-color-purple-300);

    --p-color-icon-on-color: var(--p-color-purple-900);
    --p-color-icon-on-color-white: var(--p-color-purple-900);
    --p-color-icon-on-color-grey: var(--p-color-purple-900);

    --p-color-icon-disabled: var(--p-color-grey-cold-700);
    --p-color-icon-disabled-white: var(--p-color-grey-cold-700);
    --p-color-icon-disabled-grey: var(--p-color-grey-cold-700);

    --p-color-icon-error: var(--p-color-red-400);
    --p-color-icon-error-white: var(--p-color-red-400);
    --p-color-icon-error-grey: var(--p-color-red-400);

    --p-color-icon-success: var(--p-color-green-400);
    --p-color-icon-success-white: var(--p-color-green-400);
    --p-color-icon-success-grey: var(--p-color-green-400);

    --p-color-icon-warning: var(--p-color-yellow-400);
    --p-color-icon-warning-white: var(--p-color-yellow-400);
    --p-color-icon-warning-grey: var(--p-color-yellow-400);

    --p-color-icon-info: var(--p-color-purple-400);
    --p-color-icon-info-white: var(--p-color-purple-400);
    --p-color-icon-info-grey: var(--p-color-purple-400);

    --p-color-icon-neutral: var(--p-color-grey-cold-100);
    --p-color-icon-neutral-white: var(--p-color-grey-cold-100);
    --p-color-icon-neutral-grey: var(--p-color-grey-cold-100);

    --p-color-icon-on-brand: var(--p-color-purple-900);
    --p-color-icon-on-brand-white: var(--p-color-purple-900);
    --p-color-icon-on-brand-grey: var(--p-color-purple-900);

    --p-color-icon-on-error: var(--p-color-red-200);
    --p-color-icon-on-info: var(--p-color-purple-100);
    --p-color-icon-on-warning: var(--p-color-yellow-100);
    --p-color-icon-on-success: var(--p-color-green-100);

    /* Button */

    --p-color-button-brand-fill: var(--p-color-purple-400);
    --p-color-button-brand-fill-white: var(--p-color-purple-400);
    --p-color-button-brand-fill-grey: var(--p-color-purple-400);

    --p-color-button-brand-fill-hover: var(--p-color-purple-300);
    --p-color-button-brand-fill-hover-white: var(--p-color-purple-300);
    --p-color-button-brand-fill-hover-grey: var(--p-color-purple-300);

    --p-color-button-brand-fill-pressed: var(--p-color-purple-200);
    --p-color-button-brand-fill-pressed-white: var(--p-color-purple-200);
    --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-200);

    --p-color-button-brand-fill-active: var(--p-color-purple-200);
    --p-color-button-brand-fill-active-white: var(--p-color-purple-200);
    --p-color-button-brand-fill-active-grey: var(--p-color-purple-200);

    --p-color-button-action-fill: var(--p-color-purple-200);
    --p-color-button-action-fill-white: var(--p-color-purple-200);
    --p-color-button-action-fill-grey: var(--p-color-purple-200);

    --p-color-button-action-fill-hover: var(--p-color-purple-400);
    --p-color-button-action-fill-hover-white: var(--p-color-purple-400);
    --p-color-button-action-fill-hover-grey: var(--p-color-purple-400);

    --p-color-button-action-fill-pressed: var(--p-color-purple-300);
    --p-color-button-action-fill-pressed-white: var(--p-color-purple-300);
    --p-color-button-action-fill-pressed-grey: var(--p-color-purple-300);

    --p-color-button-action-fill-active: var(--p-color-purple-300);
    --p-color-button-action-fill-active-white: var(--p-color-purple-300);
    --p-color-button-action-fill-active-grey: var(--p-color-purple-300);

    --p-color-button-disabled: var(--p-color-grey-cold-500);
    --p-color-button-disabled-white: var(--p-color-grey-cold-500);
    --p-color-button-disabled-grey: var(--p-color-grey-cold-600);

    /* Graphics Illustration */

    --p-color-graphics-illustration-primary: var(--p-color-red-400);
    --p-color-graphics-illustration-primary-white: var(--p-color-red-400);
    --p-color-graphics-illustration-primary-grey: var(--p-color-red-400);

    --p-color-graphics-illustration-detail: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
    --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);

    --p-color-graphics-illustration-base: var(--p-color-purple-100);
    --p-color-graphics-illustration-base-white: var(--p-color-purple-100);
    --p-color-graphics-illustration-base-grey: var(--p-color-purple-100);

    --p-color-graphics-illustration-white: var(--p-color-grey-cold-1000);
    --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-1000);
    --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-1000);

    --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
    --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);

    --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200);
    --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200);
    --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200);

    /* Static Background & Static Foreground */

    --p-color-static-brand-foreground: var(--p-color-purple-400);
    --p-color-static-brand-foreground-white: var(--p-color-purple-400);
    --p-color-static-brand-foreground-grey: var(--p-color-purple-400);

    --p-color-static-brand-background: var(--p-color-purple-800);
    --p-color-static-brand-background-white: var(--p-color-purple-800);
    --p-color-static-brand-background-grey: var(--p-color-purple-800);

    --p-color-static-orange-foreground: var(--p-color-orange-400);
    --p-color-static-orange-foreground-white: var(--p-color-orange-400);
    --p-color-static-orange-foreground-grey: var(--p-color-orange-400);

    --p-color-static-orange-background: var(--p-color-orange-800);
    --p-color-static-orange-background-white: var(--p-color-orange-800);
    --p-color-static-orange-background-grey: var(--p-color-orange-700);

    --p-color-static-purple-foreground: var(--p-color-purple-400);
    --p-color-static-purple-foreground-white: var(--p-color-purple-400);
    --p-color-static-purple-foreground-grey: var(--p-color-purple-400);

    --p-color-static-purple-background: var(--p-color-purple-800);
    --p-color-static-purple-background-white: var(--p-color-purple-800);
    --p-color-static-purple-background-grey: var(--p-color-purple-700);

    --p-color-static-red-foreground: var(--p-color-red-400);
    --p-color-static-red-foreground-white: var(--p-color-red-400);
    --p-color-static-red-foreground-grey: var(--p-color-red-400);

    --p-color-static-red-background: var(--p-color-red-800);
    --p-color-static-red-background-white: var(--p-color-red-800);
    --p-color-static-red-background-grey: var(--p-color-red-800);

    --p-color-static-grey-foreground: var(--p-color-grey-cold-400);
    --p-color-static-grey-foreground-white: var(--p-color-grey-cold-400);
    --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-400);

    --p-color-static-grey-background: var(--p-color-grey-cold-800);
    --p-color-static-grey-background-white: var(--p-color-grey-cold-800);
    --p-color-static-grey-background-grey: var(--p-color-grey-cold-700);

    --p-color-static-risk-filled: var(--p-color-purple-400);
    --p-color-static-risk-filled-white: var(--p-color-purple-400);
    --p-color-static-risk-filled-grey: var(--p-color-purple-400);

    --p-color-static-risk-unfilled: var(--p-color-purple-600);
    --p-color-static-risk-unfilled-white: var(--p-color-purple-600);
    --p-color-static-risk-unfilled-grey: var(--p-color-purple-600);

    --p-color-static-sustainability-filled: var(--p-color-green-300);
    --p-color-static-sustainability-filled-white: var(--p-color-green-300);
    --p-color-static-sustainability-filled-grey: var(--p-color-green-300);

    --p-color-static-sustainability-unfilled: var(--p-color-grey-cold-800);
    --p-color-static-sustainability-unfilled-white: var(
      --p-color-grey-cold-800
    );
    --p-color-static-sustainability-unfilled-grey: var(--p-color-grey-cold-800);

    /* States */

    --p-color-states-focus: var(--p-color-focus-1);
    --p-color-states-focus-white: var(--p-color-focus-1);
    --p-color-states-focus-grey: var(--p-color-focus-1);

    --p-color-states-scrim: var(--p-color-scrim-1);
    --p-color-states-scrim-white: var(--p-color-scrim-1);
    --p-color-states-scrim-grey: var(--p-color-scrim-1);

    --p-color-states-toggle-off: var(--p-color-grey-cold-800);
    --p-color-states-toggle-off-white: var(--p-color-grey-cold-800);
    --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);

    --p-color-states-toggle-off-hover: var(--p-color-grey-cold-700);
    --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-700);
    --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-600);

    /* Surface */

    --p-color-surface-1: var(--p-color-grey-cold-900);
    --p-color-surface-1-white: var(--p-color-grey-cold-900);
    --p-color-surface-1-grey: var(--p-color-grey-cold-1000);

    --p-color-surface-2: var(--p-color-grey-cold-1000);
    --p-color-surface-2-white: var(--p-color-grey-cold-1000);
    --p-color-surface-2-grey: var(--p-color-grey-cold-900);

    --p-color-surface-1-hover: var(--p-color-grey-cold-800);
    --p-color-surface-1-hover-white: var(--p-color-grey-cold-800);
    --p-color-surface-1-hover-grey: var(--p-color-grey-cold-800);

    --p-color-surface-2-hover: var(--p-color-grey-cold-800);
    --p-color-surface-2-hover-white: var(--p-color-grey-cold-800);
    --p-color-surface-2-hover-grey: var(--p-color-grey-cold-800);

    --p-color-surface-inverse: var(--p-color-purple-100);
    --p-color-surface-inverse-white: var(--p-color-purple-100);
    --p-color-surface-inverse-grey: var(--p-color-purple-100);

    --p-color-surface-inverse-hover: var(--p-color-purple-200);
    --p-color-surface-inverse-hover-white: var(--p-color-purple-200);
    --p-color-surface-inverse-hover-grey: var(--p-color-purple-200);

    --p-color-surface-inverse-pressed: var(--p-color-purple-300);
    --p-color-surface-inverse-pressed-white: var(--p-color-purple-300);
    --p-color-surface-inverse-pressed-grey: var(--p-color-purple-300);

    --p-color-surface-selected: var(--p-color-purple-400);
    --p-color-surface-selected-white: var(--p-color-purple-400);
    --p-color-surface-selected-grey: var(--p-color-purple-400);

    --p-color-surface-selected-hover: var(--p-color-purple-300);
    --p-color-surface-selected-hover-white: var(--p-color-purple-300);
    --p-color-surface-selected-hover-grey: var(--p-color-purple-300);

    --p-color-surface-selected-pressed: var(--p-color-purple-200);
    --p-color-surface-selected-pressed-white: var(--p-color-purple-200);
    --p-color-surface-selected-pressed-grey: var(--p-color-purple-200);

    --p-color-surface-selected-active: var(--p-color-purple-200);
    --p-color-surface-selected-active-white: var(--p-color-purple-200);
    --p-color-surface-selected-active-grey: var(--p-color-purple-200);

    --p-color-surface-error: var(--p-color-red-800);
    --p-color-surface-error-white: var(--p-color-red-800);
    --p-color-surface-error-grey: var(--p-color-red-800);

    --p-color-surface-success: var(--p-color-green-800);
    --p-color-surface-success-white: var(--p-color-green-800);
    --p-color-surface-success-grey: var(--p-color-green-800);

    --p-color-surface-warning: var(--p-color-yellow-800);
    --p-color-surface-warning-white: var(--p-color-yellow-800);
    --p-color-surface-warning-grey: var(--p-color-yellow-800);

    --p-color-surface-info: var(--p-color-blue-pale-800);
    --p-color-surface-info-white: var(--p-color-blue-pale-800);
    --p-color-surface-info-grey: var(--p-color-blue-pale-800);

    --p-color-surface-neutral: var(--p-color-grey-cold-900);
    --p-color-surface-neutral-white: var(--p-color-grey-cold-1000);
    --p-color-surface-neutral-grey: var(--p-color-grey-cold-900);

    --p-color-surface-static: var(--p-color-grey-cold-1000);
    --p-color-surface-static-white: var(--p-color-grey-cold-1000);
    --p-color-surface-static-grey: var(--p-color-grey-cold-1000);

    /* Strokes */

    --p-color-stroke-strong: var(--p-color-purple-100);
    --p-color-stroke-strong-white: var(--p-color-purple-100);
    --p-color-stroke-strong-grey: var(--p-color-purple-100);

    --p-color-stroke-strong-hover: var(--p-color-purple-200);
    --p-color-stroke-strong-hover-white: var(--p-color-purple-200);
    --p-color-stroke-strong-hover-grey: var(--p-color-purple-200);

    --p-color-stroke-strong-pressed: var(--p-color-purple-300);
    --p-color-stroke-strong-pressed-white: var(--p-color-purple-300);
    --p-color-stroke-strong-pressed-grey: var(--p-color-purple-300);

    --p-color-stroke-0: var(--p-color-grey-cold-700);
    --p-color-stroke-0-white: var(--p-color-grey-cold-700);
    --p-color-stroke-0-grey: var(--p-color-grey-cold-600);

    --p-color-stroke-1: var(--p-color-grey-cold-600);
    --p-color-stroke-1-white: var(--p-color-grey-cold-600);
    --p-color-stroke-1-grey: var(--p-color-grey-cold-700);

    --p-color-stroke-2: var(--p-color-grey-cold-700);
    --p-color-stroke-2-white: var(--p-color-grey-cold-700);
    --p-color-stroke-2-grey: var(--p-color-grey-cold-600);

    --p-color-stroke-on-white: var(--p-color-grey-cold-700);
    --p-color-stroke-on-white-white: var(--p-color-grey-cold-700);
    --p-color-stroke-on-white-grey: var(--p-color-grey-cold-700);

    --p-color-stroke-subtle-0: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-700);

    --p-color-stroke-subtle-1: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-700);
    --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-800);

    --p-color-stroke-subtle-2: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-700);

    --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-800);
    --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-800);

    --p-color-stroke-on-color: var(--p-color-purple-900);
    --p-color-stroke-on-color-white: var(--p-color-purple-900);
    --p-color-stroke-on-color-grey: var(--p-color-purple-900);

    --p-color-stroke-interactive: var(--p-color-purple-400);
    --p-color-stroke-interactive-white: var(--p-color-purple-400);
    --p-color-stroke-interactive-grey: var(--p-color-purple-400);

    --p-color-stroke-interactive-hover: var(--p-color-purple-300);
    --p-color-stroke-interactive-hover-white: var(--p-color-purple-300);
    --p-color-stroke-interactive-hover-grey: var(--p-color-purple-300);

    --p-color-stroke-interactive-pressed: var(--p-color-purple-200);
    --p-color-stroke-interactive-pressed-white: var(--p-color-purple-200);
    --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-200);

    --p-color-stroke-selected: var(--p-color-purple-300);
    --p-color-stroke-selected-white: var(--p-color-purple-300);
    --p-color-stroke-selected-grey: var(--p-color-purple-300);

    --p-color-stroke-selected-hover: var(--p-color-purple-200);
    --p-color-stroke-selected-hover-white: var(--p-color-purple-200);
    --p-color-stroke-selected-hover-grey: var(--p-color-purple-200);

    --p-color-stroke-selected-pressed: var(--p-color-purple-100);
    --p-color-stroke-selected-pressed-white: var(--p-color-purple-100);
    --p-color-stroke-selected-pressed-grey: var(--p-color-purple-100);

    --p-color-stroke-disabled: var(--p-color-grey-cold-600);
    --p-color-stroke-disabled-white: var(--p-color-grey-cold-600);
    --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);

    --p-color-stroke-error: var(--p-color-red-400);
    --p-color-stroke-error-white: var(--p-color-red-400);
    --p-color-stroke-error-grey: var(--p-color-red-400);

    --p-color-stroke-success: var(--p-color-green-400);
    --p-color-stroke-success-white: var(--p-color-green-400);
    --p-color-stroke-success-grey: var(--p-color-green-400);

    --p-color-stroke-warning: var(--p-color-yellow-400);
    --p-color-stroke-warning-white: var(--p-color-yellow-400);
    --p-color-stroke-warning-grey: var(--p-color-yellow-400);

    /* Data Visualization */

    --p-color-monochromatic-red-1: var(--p-color-red-550);
    --p-color-monochromatic-red-1-white: var(--p-color-red-550);
    --p-color-monochromatic-red-1-grey: var(--p-color-red-550);

    --p-color-monochromatic-red-2: var(--p-color-red-400);
    --p-color-monochromatic-red-2-white: var(--p-color-red-400);
    --p-color-monochromatic-red-2-grey: var(--p-color-red-400);

    --p-color-monochromatic-red-3: var(--p-color-red-300);
    --p-color-monochromatic-red-3-white: var(--p-color-red-300);
    --p-color-monochromatic-red-3-grey: var(--p-color-red-300);

    --p-color-monochromatic-red-4: var(--p-color-red-200);
    --p-color-monochromatic-red-4-white: var(--p-color-red-200);
    --p-color-monochromatic-red-4-grey: var(--p-color-red-200);

    --p-color-monochromatic-purple-1: var(--p-color-purple-550);
    --p-color-monochromatic-purple-1-white: var(--p-color-purple-550);
    --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550);

    --p-color-monochromatic-purple-2: var(--p-color-purple-400);
    --p-color-monochromatic-purple-2-white: var(--p-color-purple-400);
    --p-color-monochromatic-purple-2-grey: var(--p-color-purple-400);

    --p-color-monochromatic-purple-3: var(--p-color-purple-300);
    --p-color-monochromatic-purple-3-white: var(--p-color-purple-300);
    --p-color-monochromatic-purple-3-grey: var(--p-color-purple-300);

    --p-color-monochromatic-purple-4: var(--p-color-purple-200);
    --p-color-monochromatic-purple-4-white: var(--p-color-purple-200);
    --p-color-monochromatic-purple-4-grey: var(--p-color-purple-200);

    --p-color-categorical-1: var(--p-color-purple-800);
    --p-color-categorical-1-white: var(--p-color-purple-800);
    --p-color-categorical-1-grey: var(--p-color-purple-800);

    --p-color-categorical-2: var(--p-color-purple-600);
    --p-color-categorical-2-white: var(--p-color-purple-600);
    --p-color-categorical-2-grey: var(--p-color-purple-600);

    --p-color-categorical-3: var(--p-color-red-600);
    --p-color-categorical-3-white: var(--p-color-red-600);
    --p-color-categorical-3-grey: var(--p-color-red-600);

    --p-color-categorical-4: var(--p-color-purple-550);
    --p-color-categorical-4-white: var(--p-color-purple-550);
    --p-color-categorical-4-grey: var(--p-color-purple-550);

    --p-color-categorical-5: var(--p-color-purple-400);
    --p-color-categorical-5-white: var(--p-color-purple-400);
    --p-color-categorical-5-grey: var(--p-color-purple-400);

    --p-color-categorical-6: var(--p-color-grey-cold-500);
    --p-color-categorical-6-white: var(--p-color-grey-cold-500);
    --p-color-categorical-6-grey: var(--p-color-grey-cold-500);

    --p-color-categorical-7: var(--p-color-blue-300);
    --p-color-categorical-7-white: var(--p-color-blue-300);
    --p-color-categorical-7-grey: var(--p-color-blue-300);

    --p-color-categorical-8: var(--p-color-green-550);
    --p-color-categorical-8-white: var(--p-color-green-550);
    --p-color-categorical-8-grey: var(--p-color-green-550);

    --p-color-categorical-9: var(--p-color-purple-600);
    --p-color-categorical-9-white: var(--p-color-purple-600);
    --p-color-categorical-9-grey: var(--p-color-purple-600);

    --p-color-categorical-10: var(--p-color-blue-500);
    --p-color-categorical-10-white: var(--p-color-blue-500);
    --p-color-categorical-10-grey: var(--p-color-blue-500);

    --p-color-categorical-11: var(--p-color-green-700);
    --p-color-categorical-11-white: var(--p-color-green-700);
    --p-color-categorical-11-grey: var(--p-color-green-700);

    --p-color-categorical-12: var(--p-color-grey-cold-700);
    --p-color-categorical-12-white: var(--p-color-grey-cold-700);
    --p-color-categorical-12-grey: var(--p-color-grey-cold-700);

    /* Outline */

    --p-outline: 2px solid var(--p-color-states-focus);
    --p-outline-offset: 2px;
  }
}
[data-theme='kron-light'] {
  /* Background */

  --p-color-background: var(--p-color-grey-cold-000);
  --p-color-background-white: var(--p-color-grey-cold-000);
  --p-color-background-grey: var(--p-color-grey-cold-100);

  --p-color-background-hover: var(--p-color-grey-cold-100);
  --p-color-background-hover-white: var(--p-color-grey-cold-100);
  --p-color-background-hover-grey: var(--p-color-grey-cold-200);

  --p-color-background-pressed: var(--p-color-grey-cold-200);
  --p-color-background-pressed-white: var(--p-color-grey-cold-200);
  --p-color-background-pressed-grey: var(--p-color-grey-cold-300);

  --p-color-background-active: var(--p-color-red-600);
  --p-color-background-active-white: var(--p-color-red-600);
  --p-color-background-active-grey: var(--p-color-red-600);

  --p-color-background-disabled: var(--p-color-grey-cold-200);
  --p-color-background-disabled-white: var(--p-color-grey-cold-200);
  --p-color-background-disabled-grey: var(--p-color-grey-cold-300);

  --p-color-background-selected: var(--p-color-purple-700);
  --p-color-background-selected-white: var(--p-color-purple-700);
  --p-color-background-selected-grey: var(--p-color-purple-700);

  --p-color-background-selected-hover: var(--p-color-purple-800);
  --p-color-background-selected-hover-white: var(--p-color-purple-800);
  --p-color-background-selected-hover-grey: var(--p-color-purple-800);

  --p-color-background-selected-pressed: var(--p-color-purple-900);
  --p-color-background-selected-pressed-white: var(--p-color-purple-900);
  --p-color-background-selected-pressed-grey: var(--p-color-purple-900);

  /* Text */

  --p-color-text-primary: var(--p-color-purple-900);
  --p-color-text-primary-white: var(--p-color-purple-900);
  --p-color-text-primary-grey: var(--p-color-purple-900);

  --p-color-text-primary-hover: var(--p-color-purple-800);
  --p-color-text-primary-hover-white: var(--p-color-purple-800);
  --p-color-text-primary-hover-grey: var(--p-color-purple-800);

  --p-color-text-primary-pressed: var(--p-color-purple-700);
  --p-color-text-primary-pressed-white: var(--p-color-purple-700);
  --p-color-text-primary-pressed-grey: var(--p-color-purple-700);

  --p-color-text-primary-active: var(--p-color-purple-700);
  --p-color-text-primary-active-white: var(--p-color-purple-700);
  --p-color-text-primary-active-grey: var(--p-color-purple-700);

  --p-color-text-interactive: var(--p-color-purple-800);
  --p-color-text-interactive-white: var(--p-color-purple-800);
  --p-color-text-interactive-grey: var(--p-color-purple-800);

  --p-color-text-interactive-hover: var(--p-color-purple-600);
  --p-color-text-interactive-hover-white: var(--p-color-purple-600);
  --p-color-text-interactive-hover-grey: var(--p-color-purple-600);

  --p-color-text-interactive-pressed: var(--p-color-purple-700);
  --p-color-text-interactive-pressed-white: var(--p-color-purple-700);
  --p-color-text-interactive-pressed-grey: var(--p-color-purple-700);

  --p-color-text-interactive-active: var(--p-color-purple-700);
  --p-color-text-interactive-active-white: var(--p-color-purple-700);
  --p-color-text-interactive-active-grey: var(--p-color-purple-700);

  --p-color-text-selected: var(--p-color-purple-700);
  --p-color-text-selected-white: var(--p-color-purple-700);
  --p-color-text-selected-grey: var(--p-color-purple-700);

  --p-color-text-selected-hover: var(--p-color-purple-800);
  --p-color-text-selected-hover-white: var(--p-color-purple-800);
  --p-color-text-selected-hover-grey: var(--p-color-purple-800);

  --p-color-text-selected-pressed: var(--p-color-purple-900);
  --p-color-text-selected-pressed-white: var(--p-color-purple-900);
  --p-color-text-selected-pressed-grey: var(--p-color-purple-900);

  --p-color-text-secondary: var(--p-color-grey-cold-700);
  --p-color-text-secondary-white: var(--p-color-grey-cold-700);
  --p-color-text-secondary-grey: var(--p-color-grey-cold-700);

  --p-color-text-placeholder: var(--p-color-grey-cold-600);
  --p-color-text-placeholder-white: var(--p-color-grey-cold-600);
  --p-color-text-placeholder-grey: var(--p-color-grey-cold-600);

  --p-color-text-on-color: var(--p-color-purple-100);
  --p-color-text-on-color-white: var(--p-color-purple-100);
  --p-color-text-on-color-grey: var(--p-color-purple-100);

  --p-color-text-disabled: var(--p-color-grey-cold-500);
  --p-color-text-disabled-white: var(--p-color-grey-cold-500);
  --p-color-text-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-text-info: var(--p-color-blue-600);
  --p-color-text-info-white: var(--p-color-blue-600);
  --p-color-text-info-grey: var(--p-color-blue-600);

  --p-color-text-success: var(--p-color-green-600);
  --p-color-text-success-white: var(--p-color-green-600);
  --p-color-text-success-grey: var(--p-color-green-600);

  --p-color-text-warning: var(--p-color-yellow-600);
  --p-color-text-warning-white: var(--p-color-yellow-600);
  --p-color-text-warning-grey: var(--p-color-yellow-600);

  --p-color-text-error: var(--p-color-red-600);
  --p-color-text-error-white: var(--p-color-red-600);
  --p-color-text-error-grey: var(--p-color-red-600);

  --p-color-text-alert: var(--p-color-grey-cold-900);
  --p-color-text-alert-white: var(--p-color-grey-cold-900);
  --p-color-text-alert-grey: var(--p-color-grey-cold-900);

  --p-color-text-on-brand: var(--p-color-purple-100);
  --p-color-text-on-brand-white: var(--p-color-purple-100);
  --p-color-text-on-brand-grey: var(--p-color-purple-100);

  --p-color-text-on-error: var(--p-color-red-800);
  --p-color-text-on-info: var(--p-color-purple-900);
  --p-color-text-on-warning: var(--p-color-yellow-900);
  --p-color-text-on-success: var(--p-color-green-900);

  /* Icon */

  --p-color-icon-primary: var(--p-color-purple-900);
  --p-color-icon-primary-white: var(--p-color-purple-900);
  --p-color-icon-primary-grey: var(--p-color-purple-900);

  --p-color-icon-primary-hover: var(--p-color-purple-800);
  --p-color-icon-primary-hover-white: var(--p-color-purple-800);
  --p-color-icon-primary-hover-grey: var(--p-color-purple-800);

  --p-color-icon-primary-active: var(--p-color-purple-700);
  --p-color-icon-primary-active-white: var(--p-color-purple-700);
  --p-color-icon-primary-active-grey: var(--p-color-purple-700);

  --p-color-icon-primary-pressed: var(--p-color-purple-700);
  --p-color-icon-primary-pressed-white: var(--p-color-purple-700);
  --p-color-icon-primary-pressed-grey: var(--p-color-purple-700);

  --p-color-icon-interactive: var(--p-color-purple-800);
  --p-color-icon-interactive-white: var(--p-color-purple-800);
  --p-color-icon-interactive-grey: var(--p-color-purple-800);

  --p-color-icon-interactive-hover: var(--p-color-purple-600);
  --p-color-icon-interactive-hover-white: var(--p-color-purple-600);
  --p-color-icon-interactive-hover-grey: var(--p-color-purple-600);

  --p-color-icon-interactive-pressed: var(--p-color-purple-700);
  --p-color-icon-interactive-pressed-white: var(--p-color-purple-700);
  --p-color-icon-interactive-pressed-grey: var(--p-color-purple-700);

  --p-color-icon-interactive-active: var(--p-color-purple-700);
  --p-color-icon-interactive-active-white: var(--p-color-purple-700);
  --p-color-icon-interactive-active-grey: var(--p-color-purple-700);

  --p-color-icon-on-color: var(--p-color-purple-100);
  --p-color-icon-on-color-white: var(--p-color-purple-100);
  --p-color-icon-on-color-grey: var(--p-color-purple-100);

  --p-color-icon-disabled: var(--p-color-grey-cold-500);
  --p-color-icon-disabled-white: var(--p-color-grey-cold-500);
  --p-color-icon-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-icon-error: var(--p-color-red-600);
  --p-color-icon-error-white: var(--p-color-red-600);
  --p-color-icon-error-grey: var(--p-color-red-600);

  --p-color-icon-success: var(--p-color-green-600);
  --p-color-icon-success-white: var(--p-color-green-600);
  --p-color-icon-success-grey: var(--p-color-green-600);

  --p-color-icon-warning: var(--p-color-yellow-600);
  --p-color-icon-warning-white: var(--p-color-yellow-600);
  --p-color-icon-warning-grey: var(--p-color-yellow-600);

  --p-color-icon-info: var(--p-color-purple-600);
  --p-color-icon-info-white: var(--p-color-purple-600);
  --p-color-icon-info-grey: var(--p-color-purple-600);

  --p-color-icon-neutral: var(--p-color-grey-cold-900);
  --p-color-icon-neutral-white: var(--p-color-grey-cold-900);
  --p-color-icon-neutral-grey: var(--p-color-grey-cold-900);

  --p-color-icon-on-brand: var(--p-color-purple-100);
  --p-color-icon-on-brand-white: var(--p-color-purple-100);
  --p-color-icon-on-brand-grey: var(--p-color-purple-100);

  --p-color-icon-on-error: var(--p-color-red-800);
  --p-color-icon-on-info: var(--p-color-purple-900);
  --p-color-icon-on-warning: var(--p-color-yellow-900);
  --p-color-icon-on-success: var(--p-color-green-900);

  /* Button */

  --p-color-button-brand-fill: var(--p-color-purple-900);
  --p-color-button-brand-fill-white: var(--p-color-purple-900);
  --p-color-button-brand-fill-grey: var(--p-color-purple-900);

  --p-color-button-brand-fill-hover: var(--p-color-purple-800);
  --p-color-button-brand-fill-hover-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-hover-grey: var(--p-color-purple-800);

  --p-color-button-brand-fill-pressed: var(--p-color-purple-800);
  --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800);

  --p-color-button-brand-fill-active: var(--p-color-purple-800);
  --p-color-button-brand-fill-active-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-active-grey: var(--p-color-purple-800);

  --p-color-button-action-fill: var(--p-color-purple-800);
  --p-color-button-action-fill-white: var(--p-color-purple-800);
  --p-color-button-action-fill-grey: var(--p-color-purple-800);

  --p-color-button-action-fill-hover: var(--p-color-purple-600);
  --p-color-button-action-fill-hover-white: var(--p-color-purple-600);
  --p-color-button-action-fill-hover-grey: var(--p-color-purple-600);

  --p-color-button-action-fill-pressed: var(--p-color-purple-700);
  --p-color-button-action-fill-pressed-white: var(--p-color-purple-700);
  --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700);

  --p-color-button-action-fill-active: var(--p-color-purple-700);
  --p-color-button-action-fill-active-white: var(--p-color-purple-700);
  --p-color-button-action-fill-active-grey: var(--p-color-purple-700);

  --p-color-button-disabled: var(--p-color-grey-cold-200);
  --p-color-button-disabled-white: var(--p-color-grey-cold-200);
  --p-color-button-disabled-grey: var(--p-color-grey-cold-300);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(--p-color-red-600);
  --p-color-graphics-illustration-primary-white: var(--p-color-red-600);
  --p-color-graphics-illustration-primary-grey: var(--p-color-red-600);

  --p-color-graphics-illustration-detail: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-illustration-base: var(--p-color-purple-900);
  --p-color-graphics-illustration-base-white: var(--p-color-purple-900);
  --p-color-graphics-illustration-base-grey: var(--p-color-purple-900);

  --p-color-graphics-illustration-white: var(--p-color-grey-cold-000);
  --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-000);
  --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-000);

  --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-storebrand-icon-outline: var(--p-color-red-800);
  --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-800);
  --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-800);

  /* Static Background & Static Foreground */

  --p-color-static-brand-foreground: var(--p-color-purple-600);
  --p-color-static-brand-foreground-white: var(--p-color-purple-600);
  --p-color-static-brand-foreground-grey: var(--p-color-purple-600);

  --p-color-static-brand-background: var(--p-color-purple-200);
  --p-color-static-brand-background-white: var(--p-color-purple-200);
  --p-color-static-brand-background-grey: var(--p-color-purple-200);

  --p-color-static-orange-foreground: var(--p-color-orange-600);
  --p-color-static-orange-foreground-white: var(--p-color-orange-600);
  --p-color-static-orange-foreground-grey: var(--p-color-orange-600);

  --p-color-static-orange-background: var(--p-color-orange-200);
  --p-color-static-orange-background-white: var(--p-color-orange-200);
  --p-color-static-orange-background-grey: var(--p-color-orange-300);

  --p-color-static-purple-foreground: var(--p-color-purple-600);
  --p-color-static-purple-foreground-white: var(--p-color-purple-600);
  --p-color-static-purple-foreground-grey: var(--p-color-purple-600);

  --p-color-static-purple-background: var(--p-color-purple-200);
  --p-color-static-purple-background-white: var(--p-color-purple-200);
  --p-color-static-purple-background-grey: var(--p-color-purple-300);

  --p-color-static-red-foreground: var(--p-color-red-600);
  --p-color-static-red-foreground-white: var(--p-color-red-600);
  --p-color-static-red-foreground-grey: var(--p-color-red-600);

  --p-color-static-red-background: var(--p-color-red-200);
  --p-color-static-red-background-white: var(--p-color-red-200);
  --p-color-static-red-background-grey: var(--p-color-red-200);

  --p-color-static-grey-foreground: var(--p-color-grey-cold-600);
  --p-color-static-grey-foreground-white: var(--p-color-grey-cold-600);
  --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-600);

  --p-color-static-grey-background: var(--p-color-grey-cold-200);
  --p-color-static-grey-background-white: var(--p-color-grey-cold-200);
  --p-color-static-grey-background-grey: var(--p-color-grey-cold-300);

  --p-color-static-risk-filled: var(--p-color-purple-800);
  --p-color-static-risk-filled-white: var(--p-color-purple-800);
  --p-color-static-risk-filled-grey: var(--p-color-purple-800);

  --p-color-static-risk-unfilled: var(--p-color-purple-200);
  --p-color-static-risk-unfilled-white: var(--p-color-purple-200);
  --p-color-static-risk-unfilled-grey: var(--p-color-purple-200);

  --p-color-static-sustainability-filled: var(--p-color-green-700);
  --p-color-static-sustainability-filled-white: var(--p-color-green-700);
  --p-color-static-sustainability-filled-grey: var(--p-color-green-700);

  --p-color-static-sustainability-unfilled: var(--p-color-grey-cold-200);
  --p-color-static-sustainability-unfilled-white: var(--p-color-grey-cold-200);
  --p-color-static-sustainability-unfilled-grey: var(--p-color-grey-cold-200);

  /* States */

  --p-color-states-focus: var(--p-color-focus-1);
  --p-color-states-focus-white: var(--p-color-focus-1);
  --p-color-states-focus-grey: var(--p-color-focus-1);

  --p-color-states-scrim: var(--p-color-scrim-1);
  --p-color-states-scrim-white: var(--p-color-scrim-1);
  --p-color-states-scrim-grey: var(--p-color-scrim-1);

  --p-color-states-toggle-off: var(--p-color-grey-cold-400);
  --p-color-states-toggle-off-white: var(--p-color-grey-cold-400);
  --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);

  --p-color-states-toggle-off-hover: var(--p-color-grey-cold-300);
  --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-300);
  --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-400);

  /* Surface */

  --p-color-surface-1: var(--p-color-grey-cold-100);
  --p-color-surface-1-white: var(--p-color-grey-cold-100);
  --p-color-surface-1-grey: var(--p-color-grey-cold-000);

  --p-color-surface-2: var(--p-color-grey-cold-000);
  --p-color-surface-2-white: var(--p-color-grey-cold-000);
  --p-color-surface-2-grey: var(--p-color-grey-cold-100);

  --p-color-surface-1-hover: var(--p-color-grey-cold-200);
  --p-color-surface-1-hover-white: var(--p-color-grey-cold-200);
  --p-color-surface-1-hover-grey: var(--p-color-grey-cold-200);

  --p-color-surface-2-hover: var(--p-color-grey-cold-200);
  --p-color-surface-2-hover-white: var(--p-color-grey-cold-200);
  --p-color-surface-2-hover-grey: var(--p-color-grey-cold-200);

  --p-color-surface-inverse: var(--p-color-purple-900);
  --p-color-surface-inverse-white: var(--p-color-purple-900);
  --p-color-surface-inverse-grey: var(--p-color-purple-900);

  --p-color-surface-inverse-hover: var(--p-color-purple-800);
  --p-color-surface-inverse-hover-white: var(--p-color-purple-800);
  --p-color-surface-inverse-hover-grey: var(--p-color-purple-800);

  --p-color-surface-inverse-pressed: var(--p-color-purple-700);
  --p-color-surface-inverse-pressed-white: var(--p-color-purple-700);
  --p-color-surface-inverse-pressed-grey: var(--p-color-purple-700);

  --p-color-surface-selected: var(--p-color-purple-600);
  --p-color-surface-selected-white: var(--p-color-purple-600);
  --p-color-surface-selected-grey: var(--p-color-purple-600);

  --p-color-surface-selected-hover: var(--p-color-purple-700);
  --p-color-surface-selected-hover-white: var(--p-color-purple-700);
  --p-color-surface-selected-hover-grey: var(--p-color-purple-700);

  --p-color-surface-selected-pressed: var(--p-color-purple-800);
  --p-color-surface-selected-pressed-white: var(--p-color-purple-800);
  --p-color-surface-selected-pressed-grey: var(--p-color-purple-800);

  --p-color-surface-selected-active: var(--p-color-purple-800);
  --p-color-surface-selected-active-white: var(--p-color-purple-800);
  --p-color-surface-selected-active-grey: var(--p-color-purple-800);

  --p-color-surface-error: var(--p-color-red-200);
  --p-color-surface-error-white: var(--p-color-red-200);
  --p-color-surface-error-grey: var(--p-color-red-200);

  --p-color-surface-success: var(--p-color-green-200);
  --p-color-surface-success-white: var(--p-color-green-200);
  --p-color-surface-success-grey: var(--p-color-green-200);

  --p-color-surface-warning: var(--p-color-yellow-200);
  --p-color-surface-warning-white: var(--p-color-yellow-200);
  --p-color-surface-warning-grey: var(--p-color-yellow-200);

  --p-color-surface-info: var(--p-color-purple-200);
  --p-color-surface-info-white: var(--p-color-purple-200);
  --p-color-surface-info-grey: var(--p-color-purple-200);

  --p-color-surface-neutral: var(--p-color-grey-cold-100);
  --p-color-surface-neutral-white: var(--p-color-grey-cold-000);
  --p-color-surface-neutral-grey: var(--p-color-grey-cold-100);

  --p-color-surface-static: var(--p-color-grey-cold-000);
  --p-color-surface-static-white: var(--p-color-grey-cold-000);
  --p-color-surface-static-grey: var(--p-color-grey-cold-000);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-purple-900);
  --p-color-stroke-strong-white: var(--p-color-purple-900);
  --p-color-stroke-strong-grey: var(--p-color-purple-900);

  --p-color-stroke-strong-hover: var(--p-color-purple-800);
  --p-color-stroke-strong-hover-white: var(--p-color-purple-800);
  --p-color-stroke-strong-hover-grey: var(--p-color-purple-800);

  --p-color-stroke-strong-pressed: var(--p-color-purple-700);
  --p-color-stroke-strong-pressed-white: var(--p-color-purple-700);
  --p-color-stroke-strong-pressed-grey: var(--p-color-purple-700);

  --p-color-stroke-0: var(--p-color-grey-cold-300);
  --p-color-stroke-0-white: var(--p-color-grey-cold-300);
  --p-color-stroke-0-grey: var(--p-color-grey-cold-400);

  --p-color-stroke-1: var(--p-color-grey-cold-400);
  --p-color-stroke-1-white: var(--p-color-grey-cold-400);
  --p-color-stroke-1-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-2: var(--p-color-grey-cold-300);
  --p-color-stroke-2-white: var(--p-color-grey-cold-300);
  --p-color-stroke-2-grey: var(--p-color-grey-cold-400);

  --p-color-stroke-on-white: var(--p-color-grey-cold-300);
  --p-color-stroke-on-white-white: var(--p-color-grey-cold-300);
  --p-color-stroke-on-white-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-subtle-0: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-subtle-1: var(--p-color-grey-cold-300);
  --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-300);
  --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-200);

  --p-color-stroke-subtle-2: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-300);

  --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-200);
  --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-200);

  --p-color-stroke-on-color: var(--p-color-purple-100);
  --p-color-stroke-on-color-white: var(--p-color-purple-100);
  --p-color-stroke-on-color-grey: var(--p-color-purple-100);

  --p-color-stroke-interactive: var(--p-color-purple-600);
  --p-color-stroke-interactive-white: var(--p-color-purple-600);
  --p-color-stroke-interactive-grey: var(--p-color-purple-600);

  --p-color-stroke-interactive-hover: var(--p-color-purple-700);
  --p-color-stroke-interactive-hover-white: var(--p-color-purple-700);
  --p-color-stroke-interactive-hover-grey: var(--p-color-purple-700);

  --p-color-stroke-interactive-pressed: var(--p-color-purple-800);
  --p-color-stroke-interactive-pressed-white: var(--p-color-purple-800);
  --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-800);

  --p-color-stroke-selected: var(--p-color-purple-700);
  --p-color-stroke-selected-white: var(--p-color-purple-700);
  --p-color-stroke-selected-grey: var(--p-color-purple-700);

  --p-color-stroke-selected-hover: var(--p-color-purple-800);
  --p-color-stroke-selected-hover-white: var(--p-color-purple-800);
  --p-color-stroke-selected-hover-grey: var(--p-color-purple-800);

  --p-color-stroke-selected-pressed: var(--p-color-purple-900);
  --p-color-stroke-selected-pressed-white: var(--p-color-purple-900);
  --p-color-stroke-selected-pressed-grey: var(--p-color-purple-900);

  --p-color-stroke-disabled: var(--p-color-grey-cold-400);
  --p-color-stroke-disabled-white: var(--p-color-grey-cold-400);
  --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-stroke-error: var(--p-color-red-600);
  --p-color-stroke-error-white: var(--p-color-red-600);
  --p-color-stroke-error-grey: var(--p-color-red-600);

  --p-color-stroke-success: var(--p-color-green-600);
  --p-color-stroke-success-white: var(--p-color-green-600);
  --p-color-stroke-success-grey: var(--p-color-green-600);

  --p-color-stroke-warning: var(--p-color-yellow-600);
  --p-color-stroke-warning-white: var(--p-color-yellow-600);
  --p-color-stroke-warning-grey: var(--p-color-yellow-600);

  /* Data Visualization */

  --p-color-monochromatic-red-1: var(--p-color-red-550);
  --p-color-monochromatic-red-1-white: var(--p-color-red-550);
  --p-color-monochromatic-red-1-grey: var(--p-color-red-550);

  --p-color-monochromatic-red-2: var(--p-color-red-600);
  --p-color-monochromatic-red-2-white: var(--p-color-red-600);
  --p-color-monochromatic-red-2-grey: var(--p-color-red-600);

  --p-color-monochromatic-red-3: var(--p-color-red-800);
  --p-color-monochromatic-red-3-white: var(--p-color-red-800);
  --p-color-monochromatic-red-3-grey: var(--p-color-red-800);

  --p-color-monochromatic-red-4: var(--p-color-red-900);
  --p-color-monochromatic-red-4-white: var(--p-color-red-900);
  --p-color-monochromatic-red-4-grey: var(--p-color-red-900);

  --p-color-monochromatic-purple-1: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-white: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550);

  --p-color-monochromatic-purple-2: var(--p-color-purple-600);
  --p-color-monochromatic-purple-2-white: var(--p-color-purple-600);
  --p-color-monochromatic-purple-2-grey: var(--p-color-purple-600);

  --p-color-monochromatic-purple-3: var(--p-color-purple-800);
  --p-color-monochromatic-purple-3-white: var(--p-color-purple-800);
  --p-color-monochromatic-purple-3-grey: var(--p-color-purple-800);

  --p-color-monochromatic-purple-4: var(--p-color-purple-900);
  --p-color-monochromatic-purple-4-white: var(--p-color-purple-900);
  --p-color-monochromatic-purple-4-grey: var(--p-color-purple-900);

  --p-color-categorical-1: var(--p-color-purple-800);
  --p-color-categorical-1-white: var(--p-color-purple-800);
  --p-color-categorical-1-grey: var(--p-color-purple-800);

  --p-color-categorical-2: var(--p-color-purple-550);
  --p-color-categorical-2-white: var(--p-color-purple-550);
  --p-color-categorical-2-grey: var(--p-color-purple-550);

  --p-color-categorical-3: var(--p-color-red-600);
  --p-color-categorical-3-white: var(--p-color-red-600);
  --p-color-categorical-3-grey: var(--p-color-red-600);

  --p-color-categorical-4: var(--p-color-purple-550);
  --p-color-categorical-4-white: var(--p-color-purple-550);
  --p-color-categorical-4-grey: var(--p-color-purple-550);

  --p-color-categorical-5: var(--p-color-purple-800);
  --p-color-categorical-5-white: var(--p-color-purple-800);
  --p-color-categorical-5-grey: var(--p-color-purple-800);

  --p-color-categorical-6: var(--p-color-grey-cold-500);
  --p-color-categorical-6-white: var(--p-color-grey-cold-500);
  --p-color-categorical-6-grey: var(--p-color-grey-cold-500);

  --p-color-categorical-7: var(--p-color-blue-700);
  --p-color-categorical-7-white: var(--p-color-blue-700);
  --p-color-categorical-7-grey: var(--p-color-blue-700);

  --p-color-categorical-8: var(--p-color-green-550);
  --p-color-categorical-8-white: var(--p-color-green-550);
  --p-color-categorical-8-grey: var(--p-color-green-550);

  --p-color-categorical-9: var(--p-color-purple-600);
  --p-color-categorical-9-white: var(--p-color-purple-600);
  --p-color-categorical-9-grey: var(--p-color-purple-600);

  --p-color-categorical-10: var(--p-color-blue-500);
  --p-color-categorical-10-white: var(--p-color-blue-500);
  --p-color-categorical-10-grey: var(--p-color-blue-500);

  --p-color-categorical-11: var(--p-color-green-700);
  --p-color-categorical-11-white: var(--p-color-green-700);
  --p-color-categorical-11-grey: var(--p-color-green-700);

  --p-color-categorical-12: var(--p-color-grey-cold-700);
  --p-color-categorical-12-white: var(--p-color-grey-cold-700);
  --p-color-categorical-12-grey: var(--p-color-grey-cold-700);

  /* Outline */

  --p-outline: 2px solid var(--p-color-states-focus);
  --p-outline-offset: 2px;
}
[data-theme='kron-dark'] {
  /* Background */

  --p-color-background: var(--p-color-grey-cold-1000);
  --p-color-background-white: var(--p-color-grey-cold-1000);
  --p-color-background-grey: var(--p-color-grey-cold-1000);

  --p-color-background-hover: var(--p-color-grey-cold-900);
  --p-color-background-hover-white: var(--p-color-grey-cold-900);
  --p-color-background-hover-grey: var(--p-color-grey-cold-800);

  --p-color-background-pressed: var(--p-color-grey-cold-800);
  --p-color-background-pressed-white: var(--p-color-grey-cold-800);
  --p-color-background-pressed-grey: var(--p-color-grey-cold-700);

  --p-color-background-active: var(--p-color-red-400);
  --p-color-background-active-white: var(--p-color-red-400);
  --p-color-background-active-grey: var(--p-color-red-400);

  --p-color-background-disabled: var(--p-color-grey-cold-800);
  --p-color-background-disabled-white: var(--p-color-grey-cold-800);
  --p-color-background-disabled-grey: var(--p-color-grey-cold-700);

  --p-color-background-selected: var(--p-color-purple-300);
  --p-color-background-selected-white: var(--p-color-purple-300);
  --p-color-background-selected-grey: var(--p-color-purple-300);

  --p-color-background-selected-hover: var(--p-color-purple-200);
  --p-color-background-selected-hover-white: var(--p-color-purple-200);
  --p-color-background-selected-hover-grey: var(--p-color-purple-200);

  --p-color-background-selected-pressed: var(--p-color-purple-100);
  --p-color-background-selected-pressed-white: var(--p-color-purple-100);
  --p-color-background-selected-pressed-grey: var(--p-color-purple-100);

  /* Text */

  --p-color-text-primary: var(--p-color-purple-100);
  --p-color-text-primary-white: var(--p-color-purple-100);
  --p-color-text-primary-grey: var(--p-color-purple-100);

  --p-color-text-primary-hover: var(--p-color-purple-200);
  --p-color-text-primary-hover-white: var(--p-color-purple-200);
  --p-color-text-primary-hover-grey: var(--p-color-purple-200);

  --p-color-text-primary-pressed: var(--p-color-purple-300);
  --p-color-text-primary-pressed-white: var(--p-color-purple-300);
  --p-color-text-primary-pressed-grey: var(--p-color-purple-300);

  --p-color-text-primary-active: var(--p-color-purple-300);
  --p-color-text-primary-active-white: var(--p-color-purple-300);
  --p-color-text-primary-active-grey: var(--p-color-purple-300);

  --p-color-text-interactive: var(--p-color-purple-200);
  --p-color-text-interactive-white: var(--p-color-purple-200);
  --p-color-text-interactive-grey: var(--p-color-purple-200);

  --p-color-text-interactive-hover: var(--p-color-purple-400);
  --p-color-text-interactive-hover-white: var(--p-color-purple-400);
  --p-color-text-interactive-hover-grey: var(--p-color-purple-400);

  --p-color-text-interactive-pressed: var(--p-color-purple-300);
  --p-color-text-interactive-pressed-white: var(--p-color-purple-300);
  --p-color-text-interactive-pressed-grey: var(--p-color-purple-300);

  --p-color-text-interactive-active: var(--p-color-purple-300);
  --p-color-text-interactive-active-white: var(--p-color-purple-300);
  --p-color-text-interactive-active-grey: var(--p-color-purple-300);

  --p-color-text-selected: var(--p-color-purple-300);
  --p-color-text-selected-white: var(--p-color-purple-300);
  --p-color-text-selected-grey: var(--p-color-purple-300);

  --p-color-text-selected-hover: var(--p-color-purple-200);
  --p-color-text-selected-hover-white: var(--p-color-purple-200);
  --p-color-text-selected-hover-grey: var(--p-color-purple-200);

  --p-color-text-selected-pressed: var(--p-color-purple-100);
  --p-color-text-selected-pressed-white: var(--p-color-purple-100);
  --p-color-text-selected-pressed-grey: var(--p-color-purple-100);

  --p-color-text-secondary: var(--p-color-grey-cold-300);
  --p-color-text-secondary-white: var(--p-color-grey-cold-300);
  --p-color-text-secondary-grey: var(--p-color-grey-cold-300);

  --p-color-text-placeholder: var(--p-color-grey-cold-400);
  --p-color-text-placeholder-white: var(--p-color-grey-cold-400);
  --p-color-text-placeholder-grey: var(--p-color-grey-cold-400);

  --p-color-text-on-color: var(--p-color-purple-900);
  --p-color-text-on-color-white: var(--p-color-purple-900);
  --p-color-text-on-color-grey: var(--p-color-purple-900);

  --p-color-text-disabled: var(--p-color-grey-cold-700);
  --p-color-text-disabled-white: var(--p-color-grey-cold-700);
  --p-color-text-disabled-grey: var(--p-color-grey-cold-700);

  --p-color-text-info: var(--p-color-blue-400);
  --p-color-text-info-white: var(--p-color-blue-400);
  --p-color-text-info-grey: var(--p-color-blue-400);

  --p-color-text-success: var(--p-color-green-400);
  --p-color-text-success-white: var(--p-color-green-400);
  --p-color-text-success-grey: var(--p-color-green-400);

  --p-color-text-warning: var(--p-color-yellow-400);
  --p-color-text-warning-white: var(--p-color-yellow-400);
  --p-color-text-warning-grey: var(--p-color-yellow-400);

  --p-color-text-error: var(--p-color-red-400);
  --p-color-text-error-white: var(--p-color-red-400);
  --p-color-text-error-grey: var(--p-color-red-400);

  --p-color-text-alert: var(--p-color-grey-cold-100);
  --p-color-text-alert-white: var(--p-color-grey-cold-100);
  --p-color-text-alert-grey: var(--p-color-grey-cold-100);

  --p-color-text-on-brand: var(--p-color-purple-900);
  --p-color-text-on-brand-white: var(--p-color-purple-900);
  --p-color-text-on-brand-grey: var(--p-color-purple-900);

  --p-color-text-on-error: var(--p-color-red-200);
  --p-color-text-on-info: var(--p-color-blue-200);
  --p-color-text-on-warning: var(--p-color-yellow-100);
  --p-color-text-on-success: var(--p-color-green-100);

  /* Icon */

  --p-color-icon-primary: var(--p-color-purple-100);
  --p-color-icon-primary-white: var(--p-color-purple-100);
  --p-color-icon-primary-grey: var(--p-color-purple-100);

  --p-color-icon-primary-hover: var(--p-color-purple-200);
  --p-color-icon-primary-hover-white: var(--p-color-purple-200);
  --p-color-icon-primary-hover-grey: var(--p-color-purple-200);

  --p-color-icon-primary-active: var(--p-color-purple-300);
  --p-color-icon-primary-active-white: var(--p-color-purple-300);
  --p-color-icon-primary-active-grey: var(--p-color-purple-300);

  --p-color-icon-primary-pressed: var(--p-color-purple-300);
  --p-color-icon-primary-pressed-white: var(--p-color-purple-300);
  --p-color-icon-primary-pressed-grey: var(--p-color-purple-300);

  --p-color-icon-interactive: var(--p-color-purple-200);
  --p-color-icon-interactive-white: var(--p-color-purple-200);
  --p-color-icon-interactive-grey: var(--p-color-purple-200);

  --p-color-icon-interactive-hover: var(--p-color-purple-400);
  --p-color-icon-interactive-hover-white: var(--p-color-purple-400);
  --p-color-icon-interactive-hover-grey: var(--p-color-purple-400);

  --p-color-icon-interactive-pressed: var(--p-color-purple-300);
  --p-color-icon-interactive-pressed-white: var(--p-color-purple-300);
  --p-color-icon-interactive-pressed-grey: var(--p-color-purple-300);

  --p-color-icon-interactive-active: var(--p-color-purple-300);
  --p-color-icon-interactive-active-white: var(--p-color-purple-300);
  --p-color-icon-interactive-active-grey: var(--p-color-purple-300);

  --p-color-icon-on-color: var(--p-color-purple-900);
  --p-color-icon-on-color-white: var(--p-color-purple-900);
  --p-color-icon-on-color-grey: var(--p-color-purple-900);

  --p-color-icon-disabled: var(--p-color-grey-cold-700);
  --p-color-icon-disabled-white: var(--p-color-grey-cold-700);
  --p-color-icon-disabled-grey: var(--p-color-grey-cold-700);

  --p-color-icon-error: var(--p-color-red-400);
  --p-color-icon-error-white: var(--p-color-red-400);
  --p-color-icon-error-grey: var(--p-color-red-400);

  --p-color-icon-success: var(--p-color-green-400);
  --p-color-icon-success-white: var(--p-color-green-400);
  --p-color-icon-success-grey: var(--p-color-green-400);

  --p-color-icon-warning: var(--p-color-yellow-400);
  --p-color-icon-warning-white: var(--p-color-yellow-400);
  --p-color-icon-warning-grey: var(--p-color-yellow-400);

  --p-color-icon-info: var(--p-color-purple-400);
  --p-color-icon-info-white: var(--p-color-purple-400);
  --p-color-icon-info-grey: var(--p-color-purple-400);

  --p-color-icon-neutral: var(--p-color-grey-cold-100);
  --p-color-icon-neutral-white: var(--p-color-grey-cold-100);
  --p-color-icon-neutral-grey: var(--p-color-grey-cold-100);

  --p-color-icon-on-brand: var(--p-color-purple-900);
  --p-color-icon-on-brand-white: var(--p-color-purple-900);
  --p-color-icon-on-brand-grey: var(--p-color-purple-900);

  --p-color-icon-on-error: var(--p-color-red-200);
  --p-color-icon-on-info: var(--p-color-purple-100);
  --p-color-icon-on-warning: var(--p-color-yellow-100);
  --p-color-icon-on-success: var(--p-color-green-100);

  /* Button */

  --p-color-button-brand-fill: var(--p-color-purple-500);
  --p-color-button-brand-fill-white: var(--p-color-purple-600);
  --p-color-button-brand-fill-grey: var(--p-color-purple-600);

  --p-color-button-brand-fill-hover: var(--p-color-purple-400);
  --p-color-button-brand-fill-hover-white: var(--p-color-purple-700);
  --p-color-button-brand-fill-hover-grey: var(--p-color-purple-700);

  --p-color-button-brand-fill-pressed: var(--p-color-purple-300);
  --p-color-button-brand-fill-pressed-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-pressed-grey: var(--p-color-purple-800);

  --p-color-button-brand-fill-active: var(--p-color-purple-300);
  --p-color-button-brand-fill-active-white: var(--p-color-purple-800);
  --p-color-button-brand-fill-active-grey: var(--p-color-purple-800);

  --p-color-button-action-fill: var(--p-color-purple-400);
  --p-color-button-action-fill-white: var(--p-color-purple-900);
  --p-color-button-action-fill-grey: var(--p-color-purple-900);

  --p-color-button-action-fill-hover: var(--p-color-purple-300);
  --p-color-button-action-fill-hover-white: var(--p-color-purple-800);
  --p-color-button-action-fill-hover-grey: var(--p-color-purple-800);

  --p-color-button-action-fill-pressed: var(--p-color-purple-200);
  --p-color-button-action-fill-pressed-white: var(--p-color-purple-700);
  --p-color-button-action-fill-pressed-grey: var(--p-color-purple-700);

  --p-color-button-action-fill-active: var(--p-color-purple-200);
  --p-color-button-action-fill-active-white: var(--p-color-purple-700);
  --p-color-button-action-fill-active-grey: var(--p-color-purple-700);

  --p-color-button-disabled: var(--p-color-grey-cold-800);
  --p-color-button-disabled-white: var(--p-color-grey-cold-200);
  --p-color-button-disabled-grey: var(--p-color-grey-cold-300);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(--p-color-red-400);
  --p-color-graphics-illustration-primary-white: var(--p-color-red-400);
  --p-color-graphics-illustration-primary-grey: var(--p-color-red-400);

  --p-color-graphics-illustration-detail: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-white: var(--p-color-logo-red);
  --p-color-graphics-illustration-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-illustration-base: var(--p-color-purple-100);
  --p-color-graphics-illustration-base-white: var(--p-color-purple-100);
  --p-color-graphics-illustration-base-grey: var(--p-color-purple-100);

  --p-color-graphics-illustration-white: var(--p-color-grey-cold-1000);
  --p-color-graphics-illustration-white-white: var(--p-color-grey-cold-1000);
  --p-color-graphics-illustration-white-grey: var(--p-color-grey-cold-1000);

  --p-color-graphics-storebrand-icon-detail: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-white: var(--p-color-logo-red);
  --p-color-graphics-storebrand-icon-detail-grey: var(--p-color-logo-red);

  --p-color-graphics-storebrand-icon-outline: var(--p-color-red-200);
  --p-color-graphics-storebrand-icon-outline-white: var(--p-color-red-200);
  --p-color-graphics-storebrand-icon-outline-grey: var(--p-color-red-200);

  /* Static Background & Static Foreground */

  --p-color-static-brand-foreground: var(--p-color-purple-400);
  --p-color-static-brand-foreground-white: var(--p-color-purple-400);
  --p-color-static-brand-foreground-grey: var(--p-color-purple-400);

  --p-color-static-brand-background: var(--p-color-purple-800);
  --p-color-static-brand-background-white: var(--p-color-purple-800);
  --p-color-static-brand-background-grey: var(--p-color-purple-800);

  --p-color-static-orange-foreground: var(--p-color-orange-400);
  --p-color-static-orange-foreground-white: var(--p-color-orange-400);
  --p-color-static-orange-foreground-grey: var(--p-color-orange-400);

  --p-color-static-orange-background: var(--p-color-orange-800);
  --p-color-static-orange-background-white: var(--p-color-orange-800);
  --p-color-static-orange-background-grey: var(--p-color-orange-700);

  --p-color-static-purple-foreground: var(--p-color-purple-400);
  --p-color-static-purple-foreground-white: var(--p-color-purple-400);
  --p-color-static-purple-foreground-grey: var(--p-color-purple-400);

  --p-color-static-purple-background: var(--p-color-purple-800);
  --p-color-static-purple-background-white: var(--p-color-purple-800);
  --p-color-static-purple-background-grey: var(--p-color-purple-700);

  --p-color-static-red-foreground: var(--p-color-red-400);
  --p-color-static-red-foreground-white: var(--p-color-red-400);
  --p-color-static-red-foreground-grey: var(--p-color-red-400);

  --p-color-static-red-background: var(--p-color-red-800);
  --p-color-static-red-background-white: var(--p-color-red-800);
  --p-color-static-red-background-grey: var(--p-color-red-800);

  --p-color-static-grey-foreground: var(--p-color-grey-cold-400);
  --p-color-static-grey-foreground-white: var(--p-color-grey-cold-400);
  --p-color-static-grey-foreground-grey: var(--p-color-grey-cold-400);

  --p-color-static-grey-background: var(--p-color-grey-cold-800);
  --p-color-static-grey-background-white: var(--p-color-grey-cold-800);
  --p-color-static-grey-background-grey: var(--p-color-grey-cold-700);

  --p-color-static-risk-filled: var(--p-color-purple-400);
  --p-color-static-risk-filled-white: var(--p-color-purple-400);
  --p-color-static-risk-filled-grey: var(--p-color-purple-400);

  --p-color-static-risk-unfilled: var(--p-color-purple-600);
  --p-color-static-risk-unfilled-white: var(--p-color-purple-600);
  --p-color-static-risk-unfilled-grey: var(--p-color-purple-600);

  --p-color-static-sustainability-filled: var(--p-color-green-300);
  --p-color-static-sustainability-filled-white: var(--p-color-green-300);
  --p-color-static-sustainability-filled-grey: var(--p-color-green-300);

  --p-color-static-sustainability-unfilled: var(--p-color-grey-cold-800);
  --p-color-static-sustainability-unfilled-white: var(--p-color-grey-cold-800);
  --p-color-static-sustainability-unfilled-grey: var(--p-color-grey-cold-800);

  /* States */

  --p-color-states-focus: var(--p-color-focus-1);
  --p-color-states-focus-white: var(--p-color-focus-1);
  --p-color-states-focus-grey: var(--p-color-focus-1);

  --p-color-states-scrim: var(--p-color-scrim-1);
  --p-color-states-scrim-white: var(--p-color-scrim-1);
  --p-color-states-scrim-grey: var(--p-color-scrim-1);

  --p-color-states-toggle-off: var(--p-color-grey-cold-500);
  --p-color-states-toggle-off-white: var(--p-color-grey-cold-500);
  --p-color-states-toggle-off-grey: var(--p-color-grey-cold-500);

  --p-color-states-toggle-off-hover: var(--p-color-grey-cold-700);
  --p-color-states-toggle-off-hover-white: var(--p-color-grey-cold-700);
  --p-color-states-toggle-off-hover-grey: var(--p-color-grey-cold-600);

  /* Surface */

  --p-color-surface-1: var(--p-color-grey-cold-900);
  --p-color-surface-1-white: var(--p-color-grey-cold-900);
  --p-color-surface-1-grey: var(--p-color-grey-cold-900);

  --p-color-surface-2: var(--p-color-grey-cold-800);
  --p-color-surface-2-white: var(--p-color-grey-cold-800);
  --p-color-surface-2-grey: var(--p-color-grey-cold-800);

  --p-color-surface-1-hover: var(--p-color-grey-cold-800);
  --p-color-surface-1-hover-white: var(--p-color-grey-cold-800);
  --p-color-surface-1-hover-grey: var(--p-color-grey-cold-800);

  --p-color-surface-2-hover: var(--p-color-grey-cold-800);
  --p-color-surface-2-hover-white: var(--p-color-grey-cold-800);
  --p-color-surface-2-hover-grey: var(--p-color-grey-cold-800);

  --p-color-surface-inverse: var(--p-color-purple-100);
  --p-color-surface-inverse-white: var(--p-color-purple-100);
  --p-color-surface-inverse-grey: var(--p-color-purple-100);

  --p-color-surface-inverse-hover: var(--p-color-purple-200);
  --p-color-surface-inverse-hover-white: var(--p-color-purple-200);
  --p-color-surface-inverse-hover-grey: var(--p-color-purple-200);

  --p-color-surface-inverse-pressed: var(--p-color-purple-300);
  --p-color-surface-inverse-pressed-white: var(--p-color-purple-300);
  --p-color-surface-inverse-pressed-grey: var(--p-color-purple-300);

  --p-color-surface-selected: var(--p-color-purple-400);
  --p-color-surface-selected-white: var(--p-color-purple-400);
  --p-color-surface-selected-grey: var(--p-color-purple-400);

  --p-color-surface-selected-hover: var(--p-color-purple-300);
  --p-color-surface-selected-hover-white: var(--p-color-purple-300);
  --p-color-surface-selected-hover-grey: var(--p-color-purple-300);

  --p-color-surface-selected-pressed: var(--p-color-purple-200);
  --p-color-surface-selected-pressed-white: var(--p-color-purple-200);
  --p-color-surface-selected-pressed-grey: var(--p-color-purple-200);

  --p-color-surface-selected-active: var(--p-color-purple-200);
  --p-color-surface-selected-active-white: var(--p-color-purple-200);
  --p-color-surface-selected-active-grey: var(--p-color-purple-200);

  --p-color-surface-error: var(--p-color-red-800);
  --p-color-surface-error-white: var(--p-color-red-800);
  --p-color-surface-error-grey: var(--p-color-red-800);

  --p-color-surface-success: var(--p-color-green-800);
  --p-color-surface-success-white: var(--p-color-green-800);
  --p-color-surface-success-grey: var(--p-color-green-800);

  --p-color-surface-warning: var(--p-color-yellow-800);
  --p-color-surface-warning-white: var(--p-color-yellow-800);
  --p-color-surface-warning-grey: var(--p-color-yellow-800);

  --p-color-surface-info: var(--p-color-blue-pale-800);
  --p-color-surface-info-white: var(--p-color-blue-pale-800);
  --p-color-surface-info-grey: var(--p-color-blue-pale-800);

  --p-color-surface-neutral: var(--p-color-grey-cold-900);
  --p-color-surface-neutral-white: var(--p-color-grey-cold-1000);
  --p-color-surface-neutral-grey: var(--p-color-grey-cold-900);

  --p-color-surface-static: var(--p-color-grey-cold-1000);
  --p-color-surface-static-white: var(--p-color-grey-cold-1000);
  --p-color-surface-static-grey: var(--p-color-grey-cold-1000);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-purple-100);
  --p-color-stroke-strong-white: var(--p-color-purple-100);
  --p-color-stroke-strong-grey: var(--p-color-purple-100);

  --p-color-stroke-strong-hover: var(--p-color-purple-200);
  --p-color-stroke-strong-hover-white: var(--p-color-purple-200);
  --p-color-stroke-strong-hover-grey: var(--p-color-purple-200);

  --p-color-stroke-strong-pressed: var(--p-color-purple-300);
  --p-color-stroke-strong-pressed-white: var(--p-color-purple-300);
  --p-color-stroke-strong-pressed-grey: var(--p-color-purple-300);

  --p-color-stroke-0: var(--p-color-grey-cold-700);
  --p-color-stroke-0-white: var(--p-color-grey-cold-700);
  --p-color-stroke-0-grey: var(--p-color-grey-cold-600);

  --p-color-stroke-1: var(--p-color-grey-cold-600);
  --p-color-stroke-1-white: var(--p-color-grey-cold-600);
  --p-color-stroke-1-grey: var(--p-color-grey-cold-700);

  --p-color-stroke-2: var(--p-color-grey-cold-700);
  --p-color-stroke-2-white: var(--p-color-grey-cold-700);
  --p-color-stroke-2-grey: var(--p-color-grey-cold-600);

  --p-color-stroke-on-white: var(--p-color-grey-cold-700);
  --p-color-stroke-on-white-white: var(--p-color-grey-cold-700);
  --p-color-stroke-on-white-grey: var(--p-color-grey-cold-700);

  --p-color-stroke-subtle-0: var(--p-color-grey-cold-800);
  --p-color-stroke-subtle-0-white: var(--p-color-grey-cold-800);
  --p-color-stroke-subtle-0-grey: var(--p-color-grey-cold-700);

  --p-color-stroke-subtle-1: var(--p-color-grey-cold-700);
  --p-color-stroke-subtle-1-white: var(--p-color-grey-cold-700);
  --p-color-stroke-subtle-1-grey: var(--p-color-grey-cold-800);

  --p-color-stroke-subtle-2: var(--p-color-grey-cold-800);
  --p-color-stroke-subtle-2-white: var(--p-color-grey-cold-800);
  --p-color-stroke-subtle-2-grey: var(--p-color-grey-cold-700);

  --p-color-stroke-subtle-on-white: var(--p-color-grey-cold-800);
  --p-color-stroke-subtle-on-white-white: var(--p-color-grey-cold-800);
  --p-color-stroke-subtle-on-white-grey: var(--p-color-grey-cold-800);

  --p-color-stroke-on-color: var(--p-color-purple-900);
  --p-color-stroke-on-color-white: var(--p-color-purple-900);
  --p-color-stroke-on-color-grey: var(--p-color-purple-900);

  --p-color-stroke-interactive: var(--p-color-purple-400);
  --p-color-stroke-interactive-white: var(--p-color-purple-400);
  --p-color-stroke-interactive-grey: var(--p-color-purple-400);

  --p-color-stroke-interactive-hover: var(--p-color-purple-300);
  --p-color-stroke-interactive-hover-white: var(--p-color-purple-300);
  --p-color-stroke-interactive-hover-grey: var(--p-color-purple-300);

  --p-color-stroke-interactive-pressed: var(--p-color-purple-200);
  --p-color-stroke-interactive-pressed-white: var(--p-color-purple-200);
  --p-color-stroke-interactive-pressed-grey: var(--p-color-purple-200);

  --p-color-stroke-selected: var(--p-color-purple-300);
  --p-color-stroke-selected-white: var(--p-color-purple-300);
  --p-color-stroke-selected-grey: var(--p-color-purple-300);

  --p-color-stroke-selected-hover: var(--p-color-purple-200);
  --p-color-stroke-selected-hover-white: var(--p-color-purple-200);
  --p-color-stroke-selected-hover-grey: var(--p-color-purple-200);

  --p-color-stroke-selected-pressed: var(--p-color-purple-100);
  --p-color-stroke-selected-pressed-white: var(--p-color-purple-100);
  --p-color-stroke-selected-pressed-grey: var(--p-color-purple-100);

  --p-color-stroke-disabled: var(--p-color-grey-cold-600);
  --p-color-stroke-disabled-white: var(--p-color-grey-cold-600);
  --p-color-stroke-disabled-grey: var(--p-color-grey-cold-500);

  --p-color-stroke-error: var(--p-color-red-400);
  --p-color-stroke-error-white: var(--p-color-red-400);
  --p-color-stroke-error-grey: var(--p-color-red-400);

  --p-color-stroke-success: var(--p-color-green-400);
  --p-color-stroke-success-white: var(--p-color-green-400);
  --p-color-stroke-success-grey: var(--p-color-green-400);

  --p-color-stroke-warning: var(--p-color-yellow-400);
  --p-color-stroke-warning-white: var(--p-color-yellow-400);
  --p-color-stroke-warning-grey: var(--p-color-yellow-400);

  /* Data Visualization */

  --p-color-monochromatic-red-1: var(--p-color-red-550);
  --p-color-monochromatic-red-1-white: var(--p-color-red-550);
  --p-color-monochromatic-red-1-grey: var(--p-color-red-550);

  --p-color-monochromatic-red-2: var(--p-color-red-400);
  --p-color-monochromatic-red-2-white: var(--p-color-red-400);
  --p-color-monochromatic-red-2-grey: var(--p-color-red-400);

  --p-color-monochromatic-red-3: var(--p-color-red-300);
  --p-color-monochromatic-red-3-white: var(--p-color-red-300);
  --p-color-monochromatic-red-3-grey: var(--p-color-red-300);

  --p-color-monochromatic-red-4: var(--p-color-red-200);
  --p-color-monochromatic-red-4-white: var(--p-color-red-200);
  --p-color-monochromatic-red-4-grey: var(--p-color-red-200);

  --p-color-monochromatic-purple-1: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-white: var(--p-color-purple-550);
  --p-color-monochromatic-purple-1-grey: var(--p-color-purple-550);

  --p-color-monochromatic-purple-2: var(--p-color-purple-400);
  --p-color-monochromatic-purple-2-white: var(--p-color-purple-400);
  --p-color-monochromatic-purple-2-grey: var(--p-color-purple-400);

  --p-color-monochromatic-purple-3: var(--p-color-purple-300);
  --p-color-monochromatic-purple-3-white: var(--p-color-purple-300);
  --p-color-monochromatic-purple-3-grey: var(--p-color-purple-300);

  --p-color-monochromatic-purple-4: var(--p-color-purple-200);
  --p-color-monochromatic-purple-4-white: var(--p-color-purple-200);
  --p-color-monochromatic-purple-4-grey: var(--p-color-purple-200);

  --p-color-categorical-1: var(--p-color-purple-800);
  --p-color-categorical-1-white: var(--p-color-purple-800);
  --p-color-categorical-1-grey: var(--p-color-purple-800);

  --p-color-categorical-2: var(--p-color-purple-600);
  --p-color-categorical-2-white: var(--p-color-purple-600);
  --p-color-categorical-2-grey: var(--p-color-purple-600);

  --p-color-categorical-3: var(--p-color-red-600);
  --p-color-categorical-3-white: var(--p-color-red-600);
  --p-color-categorical-3-grey: var(--p-color-red-600);

  --p-color-categorical-4: var(--p-color-purple-550);
  --p-color-categorical-4-white: var(--p-color-purple-550);
  --p-color-categorical-4-grey: var(--p-color-purple-550);

  --p-color-categorical-5: var(--p-color-purple-400);
  --p-color-categorical-5-white: var(--p-color-purple-400);
  --p-color-categorical-5-grey: var(--p-color-purple-400);

  --p-color-categorical-6: var(--p-color-grey-cold-500);
  --p-color-categorical-6-white: var(--p-color-grey-cold-500);
  --p-color-categorical-6-grey: var(--p-color-grey-cold-500);

  --p-color-categorical-7: var(--p-color-blue-300);
  --p-color-categorical-7-white: var(--p-color-blue-300);
  --p-color-categorical-7-grey: var(--p-color-blue-300);

  --p-color-categorical-8: var(--p-color-green-550);
  --p-color-categorical-8-white: var(--p-color-green-550);
  --p-color-categorical-8-grey: var(--p-color-green-550);

  --p-color-categorical-9: var(--p-color-purple-600);
  --p-color-categorical-9-white: var(--p-color-purple-600);
  --p-color-categorical-9-grey: var(--p-color-purple-600);

  --p-color-categorical-10: var(--p-color-blue-500);
  --p-color-categorical-10-white: var(--p-color-blue-500);
  --p-color-categorical-10-grey: var(--p-color-blue-500);

  --p-color-categorical-11: var(--p-color-green-700);
  --p-color-categorical-11-white: var(--p-color-green-700);
  --p-color-categorical-11-grey: var(--p-color-green-700);

  --p-color-categorical-12: var(--p-color-grey-cold-700);
  --p-color-categorical-12-white: var(--p-color-grey-cold-700);
  --p-color-categorical-12-grey: var(--p-color-grey-cold-700);

  /* Outline */

  --p-outline: 2px solid var(--p-color-states-focus);
  --p-outline-offset: 2px;
}
a {
  color: var(--p-color-text-interactive);
  text-decoration: underline;
  text-underline-offset: 2px;

  &:hover {
    color: var(--p-color-text-interactive-hover);
  }

  &:focus-visible {
    outline: var(--p-outline);
  }
}
:is(.p, .font-paragraph, .font-body) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;

  @media (min-width: 600px) {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}
:is(.display, .font-display, p.font-display) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 122%;

  @media (min-width: 600px) {
    font-size: 4rem;
    line-height: 113%;
  }
}
:is(.font-large-demibold, .font-body-large-demibold, .font-body-lg-demibold) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 144%;

  @media (min-width: 600px) {
    font-size: 1.25rem;
    line-height: 140%;
  }
}
:is(.font-large, .font-body-large, .font-body-lg) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 144%;

  @media (min-width: 600px) {
    font-size: 1.25rem;
    line-height: 140%;
  }
}
:is(.font-alert-title, .font-body-demibold) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 150%;

  @media (min-width: 600px) {
    font-size: 1.125rem;
  }
}
:is(.font-body-italic) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 150%;

  @media (min-width: 600px) {
    font-size: 1.125rem;
  }
}
:is(
  .font-small,
  .font-body-small,
  .font-body-sm,
  .font-small-link,
  .font-body-small-link,
  .font-body-sm-link
) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;

  @media (min-width: 600px) {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}
:is(.font-small-demibold, .font-sm-demibold, .font-body-small-demibold) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;

  @media (min-width: 600px) {
    font-size: 1rem;
    line-height: 1.375rem;
  }
}
:is(.button, .font-button, .font-button-large, .font-button-lg) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1rem;
  font-weight: 500;

  @media (min-width: 600px) {
    font-size: 1.125rem;
  }
}
:is(.font-button-medium, .font-button-md) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;

  @media (min-width: 600px) {
    font-size: 1rem;
  }
}
:is(.font-button-small, .font-button-sm) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;

  @media (min-width: 600px) {
    font-size: 0.875rem;
  }
}
/* Deprecated */
:is(.font-button-mobile) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 1rem;
  font-weight: 500;
}
/* Deprecated */
:is(.font-button-small) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
}
:is(.hint, .font-hint, .font-caption, .font-details) {
  color: var(--p-color-text-secondary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;

  @media (min-width: 600px) {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}
:is(.font-caption-demibold, .font-details-demibold) {
  color: var(--p-color-text-secondary);
  font-family: 'Storebrand Text', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;

  @media (min-width: 600px) {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}
:is(.key-statistic-1, .font-key-statistic-1) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;

  @media (min-width: 600px) {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
:is(.key-statistic-2, .font-key-statistic-2) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;

  @media (min-width: 600px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
:is(.key-statistic-3, .font-key-statistic-3) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;

  @media (min-width: 600px) {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-700 {
  font-weight: 700;
}
.font-style-italic {
  font-style: italic;
}
.text-underline {
  text-decoration: underline;
}
:is(h1) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.25rem;

  @media (min-width: 600px) {
    font-size: 2.5rem;
    line-height: 3.25rem;
  }
}
:is(h2) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;

  @media (min-width: 600px) {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
:is(h3) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;

  @media (min-width: 600px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
:is(h4) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;

  @media (min-width: 600px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
:is(h5) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;

  @media (min-width: 600px) {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
:is(.h1, .font-heading-1, p.font-heading-1) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.25rem;

  @media (min-width: 600px) {
    font-size: 2.5rem;
    line-height: 3.25rem;
  }
}
:is(.h2, .font-heading-2, p.font-heading-2) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;

  @media (min-width: 600px) {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
:is(.h3, .font-heading-3, p.font-heading-3) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;

  @media (min-width: 600px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
:is(.h4, .font-heading-4, p.font-heading-4) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;

  @media (min-width: 600px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
:is(.h5, .font-heading-5, p.font-heading-5) {
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Display', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;

  @media (min-width: 600px) {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
/**
 * A set of variables that define the z-index hierarchy of components.
 * This is used to ensure that components are layered correctly.
 */
:root,
:host {
  --p-z-index-base: 0;
  --p-z-index-above: 1;
  --p-z-index-below: -1;

  --p-z-index-input: calc(var(--p-z-index-base) + var(--p-z-index-above));
  --p-z-index-tooltip: calc(var(--p-z-index-input) + var(--p-z-index-above));
  --p-z-index-popover: calc(var(--p-z-index-tooltip) + var(--p-z-index-above));
  --p-z-index-dropdown: calc(var(--p-z-index-popover) + var(--p-z-index-above));
  --p-z-index-navbar-menu: calc(
    var(--p-z-index-dropdown) + var(--p-z-index-above)
  );
  --p-z-index-toast: calc(
    var(--p-z-index-navbar-menu) + var(--p-z-index-above)
  );
  --p-z-index-dialog: calc(var(--p-z-index-toast) + var(--p-z-index-above));
  --p-z-index-modal: calc(var(--p-z-index-dialog) + var(--p-z-index-above));
}
.grid-container {
  --grid-columns: 12;
  --grid-gap: 2rem;
  --grid-max-width: 1128px;
  --grid-span: 12;
  --grid-start: auto;

  column-gap: var(--grid-gap);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  margin: 0 auto;
  max-width: var(--grid-max-width);
  width: 100%;

  & .grid-item {
    grid-column: var(--grid-start) / span var(--grid-span);
  }

  @media screen and (min-width: 992px) {
    & .grid-item {
      &.lg_cols-1 {
        --grid-span: 1;
      }

      &.lg_cols-2 {
        --grid-span: 2;
      }

      &.lg_cols-3 {
        --grid-span: 3;
      }

      &.lg_cols-4 {
        --grid-span: 4;
      }

      &.lg_cols-5 {
        --grid-span: 5;
      }

      &.lg_cols-6 {
        --grid-span: 6;
      }

      &.lg_cols-7 {
        --grid-span: 7;
      }

      &.lg_cols-8 {
        --grid-span: 8;
      }

      &.lg_cols-9 {
        --grid-span: 9;
      }

      &.lg_cols-10 {
        --grid-span: 10;
      }

      &.lg_cols-11 {
        --grid-span: 11;
      }

      &.lg_cols-12 {
        --grid-span: 12;
      }

      /* Offset */

      &.lg_off-1 {
        --grid-start: 1;
      }

      &.lg_off-2 {
        --grid-start: 2;
      }

      &.lg_off-3 {
        --grid-start: 3;
      }

      &.lg_off-4 {
        --grid-start: 4;
      }

      &.lg_off-5 {
        --grid-start: 5;
      }

      &.lg_off-6 {
        --grid-start: 6;
      }

      &.lg_off-7 {
        --grid-start: 7;
      }

      &.lg_off-8 {
        --grid-start: 8;
      }

      &.lg_off-9 {
        --grid-start: 9;
      }

      &.lg_off-10 {
        --grid-start: 10;
      }

      &.lg_off-11 {
        --grid-start: 11;
      }

      &.lg_off-12 {
        --grid-start: 12;
      }
    }
  }

  @media screen and (max-width: 991px) and (min-width: 768px) {
    --grid-columns: 8;
    --grid-span: 8;

    & .grid-item {
      &.md_cols-1 {
        --grid-span: 1;
      }

      &.md_cols-2 {
        --grid-span: 2;
      }

      &.md_cols-3 {
        --grid-span: 3;
      }

      &.md_cols-4 {
        --grid-span: 4;
      }

      &.md_cols-5 {
        --grid-span: 5;
      }

      &.md_cols-6 {
        --grid-span: 6;
      }

      &.md_cols-7 {
        --grid-span: 7;
      }

      &.md_cols-8 {
        --grid-span: 8;
      }

      /* Offset */

      &.md_off-1 {
        --grid-start: 1;
      }

      &.md_off-2 {
        --grid-start: 2;
      }

      &.md_off-3 {
        --grid-start: 3;
      }

      &.md_off-4 {
        --grid-start: 4;
      }

      &.md_off-5 {
        --grid-start: 5;
      }

      &.md_off-6 {
        --grid-start: 6;
      }

      &.md_off-7 {
        --grid-start: 7;
      }

      &.md_off-8 {
        --grid-start: 8;
      }
    }
  }

  @media screen and (max-width: 767px) {
    --grid-columns: 4;
    --grid-gap: 1rem;
    --grid-span: 4;

    & .grid-item {
      &.sm_cols-1 {
        --grid-span: 1;
      }

      &.sm_cols-2 {
        --grid-span: 2;
      }

      &.sm_cols-3 {
        --grid-span: 3;
      }

      &.sm_cols-4 {
        --grid-span: 4;
      }

      /* Offset */

      &.sm_off-1 {
        --grid-start: 1;
      }

      &.sm_off-2 {
        --grid-start: 2;
      }

      &.sm_off-3 {
        --grid-start: 3;
      }

      &.sm_off-4 {
        --grid-start: 4;
      }
    }
  }
}
* {
  /* disable faux bolding */
  font-synthesis: none;

  /* Remove all margins */
  margin: 0;
}
/**
  * Set the font size on the root element to 100%.
  * This makes it easier to calculate rem values.
  * We're always inheriting the user’s preferred font size,
  * the one they choose in their browser or on their system.
  */
html {
  font-size: 100%;
}
body {
  background: var(--p-color-background);
  color: var(--p-color-text-primary);
  font-family: 'Storebrand Text', sans-serif;

  /* disable subpixel antialiasing on Mac OS */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
@font-face {
  font-family: 'Storebrand Symbols';
  src:
    url('/meld-skade/assets/StorebrandSymbols-5d9d63d8.eot') format('eot'),
    url('/meld-skade/assets/StorebrandSymbols-4ae5b635.woff') format('woff'),
    url('/meld-skade/assets/StorebrandSymbols-a50e4658.woff2') format('woff2'),
    url('/meld-skade/assets/StorebrandSymbols-57367bfe.ttf') format('truetype');
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  text-rendering: optimizelegibility;
}
/*
  Taking control of the <i> tag
  for icon purposes, and removing
  the natural italic behavior.

  Keeping regular behavior for
  <i> tags with classes, because of
  collisions with storebrand icons
*/
i {
  font-family: 'Storebrand Symbols' !important;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1rem;
}
/*
  Show a red box, if developers
  forget to add specify icon name as child.
*/
i:empty:not([class*='system-icon']) {
  background: var(--p-color-icon-error);
  display: inline-flex;
  height: 1.5em;
  width: 1.5em;
}
/*
  Old system-icon font for <i class="legacy"> and <body data-legacy-icons="true"> <i>,
  Note: will not load any font-files until actually used in markup
*/
@font-face {
  font-family: 'System-Icons';
  src:
    url('/meld-skade/assets/System-Icons-ea38ef7c.eot') format('eot'),
    url('/meld-skade/assets/System-Icons-a229bc30.woff') format('woff'),
    url('/meld-skade/assets/System-Icons-5aadb8bf.woff2') format('woff2'),
    url('/meld-skade/assets/System-Icons-a6348841.ttf') format('truetype');
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  text-rendering: optimizelegibility;
}
i.legacy,
body[data-legacy-icons='true'] i {
  font-family: 'System-Icons' !important;
}
@font-face {
  font-family: 'Phosphor';
  src:
    url('/meld-skade/assets/Phosphor-e07088bb.eot') format('eot'),
    url('/meld-skade/assets/Phosphor-6cb6ee22.woff') format('woff'),
    url('/meld-skade/assets/Phosphor-dbfc6382.woff2') format('woff2'),
    url('/meld-skade/assets/Phosphor-5c43df6a.ttf') format('truetype');
  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
  text-rendering: optimizelegibility;
}
/*
  Taking control of the <i> tag
  for icon purposes, and removing
  the natural italic behavior.
*/
body[data-phosphor-icons='true'] i,
body *[data-phosphor-icons='true'] i,
body i[data-phosphor-icons='true'] {
  font-family: 'Phosphor' !important;
  font-size: 1rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1rem;
}
/*
  Phosphor systemicon sizes from Figma tokens:
  https://www.figma.com/design/OjDpOShyRGZXpM1Eu1lA3Z/Pretzel-Tokens?m=auto&node-id=25029-20964&vars=1
*/
body {
  --p-system-icon-body-lg: 1.625rem;
  --p-system-icon-body: 1.375rem;
  --p-system-icon-body-sm: 1.25rem;
  --p-system-icon-body-details: 1rem;

  @media (min-width: 600px) {
    --p-system-icon-body-lg: 1.75rem;
    --p-system-icon-body: 1.625rem;
    --p-system-icon-body-sm: 1.375rem;
    --p-system-icon-body-details: 1.125rem;
  }
}
/* Import Storebrand Fonts (Display and Text) */
@font-face {
  font-display: swap;
  font-family: 'Storebrand Display';
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400 700;
  src: url('/meld-skade/assets/StorebrandDisplay-9d613674.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Storebrand Display';
  font-stretch: 100%;
  font-style: italic;
  font-weight: 400 700;
  src: url('/meld-skade/assets/StorebrandDisplay-Italic-54c6094f.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Storebrand Text';
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400 700;
  src: url('/meld-skade/assets/StorebrandText-eb5dfc7f.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Storebrand Text';
  font-stretch: 100%;
  font-style: italic;
  font-weight: 400 700;
  src: url('/meld-skade/assets/StorebrandText-Italic-bb001105.woff2') format('woff2');
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.alertBase[data-stb-alert='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);
  --color-bg: var(--p-color-surface-1);
  --alert-min-width: 18rem;

  align-items: center;
  background: var(--color-bg);
  border: none;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  max-width: 35rem;
  min-width: var(--alert-min-width);
  padding: var(--p-spacing-rem-24);
  position: relative;

  & p,
  .alertTitle,
  .alertContainer,
  .font-body {
    color: var(--color-text);
  }

  & .icon {
    align-self: flex-start;
    color: var(--color-icon);
    margin-right: var(--p-spacing-rem-16);
  }

  &:has(.alertTitle) {
    & .icon {
      margin-top: 0.28rem;
    }
  }

  & .alertDescription {
    text-wrap: pretty;
  }

  & .alertContainer {
    align-self: flex-start;
    display: grid;
    gap: var(--p-spacing-rem-04);
    max-width: 100%;
  }

  @media (max-width: 600px) {
    max-width: 33.9375rem;
    min-width: min(85%, var(--alert-min-width));
    padding: var(--p-spacing-rem-20);

    & .icon {
      margin-right: var(--p-spacing-rem-12);
      margin-top: 0.19rem;
    }
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-bg: var(--p-color-surface-error);
    --color-text: var(--p-color-text-on-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-bg: var(--p-color-surface-warning);
    --color-text: var(--p-color-text-on-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-bg: var(--p-color-surface-success);
    --color-text: var(--p-color-text-on-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-text-on-info);
    --color-bg: var(--p-color-surface-info);
    --color-text: var(--p-color-text-on-info);
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.inputFieldContainer[data-stb-input-field='current'] {
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  max-width: 18rem;
  width: 100%;

  &[data-size='large'] {
    max-width: 33rem;
  }

  &[data-size='fluid'] {
    max-width: 100%;
    width: 100%;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    --alert-line-height: 1.25rem;

    color: var(--color-text);
    line-height: var(--alert-line-height);

    @media (min-width: 600px) {
      --alert-line-height: 1.375rem;
    }
  }

  & .alertIconWrapper {
    display: flex;
    text-align: center;
  }

  & .alertIcon {
    --alert-icon-size: 1.25rem;

    color: var(--color-icon);
    font-size: var(--alert-icon-size);
    height: var(--alert-icon-size);
    line-height: var(--alert-icon-size);
    width: var(--alert-icon-size);

    @media (min-width: 600px) {
      --alert-icon-size: 1.375rem;
    }
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.inputContainer[data-stb-input-atom='current'] {
  --text-color: var(--p-color-text-primary);
  --background-color: var(--p-color-surface-static);
  --border-color: var(--p-color-stroke-0);
  --suffix-color: var(--p-color-text-secondary);
  --icon-color: var(--p-color-text-primary);
  --input-max-height: 3rem;

  --border-normal: var(--p-border-rem-xsmall);
  --border-fat: 0.0938rem;
  --border-thickness: var(--border-normal);

  align-items: center;
  align-self: flex-start;
  background-color: var(--background-color);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  color: var(--text-color);
  cursor: text;
  display: flex;
  display: inline-flex;
  max-height: var(--input-max-height);
  max-width: 18rem;
  min-height: var(--input-max-height);
  outline: var(--input-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  width: 100%;

  &.textarea {
    height: auto;
    max-height: 100%;
  }

  & .inputElement {
    background-color: var(--background-color);
    border: none;
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    color: var(--text-color);
    height: 100%;
    outline: none;
    padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);
    width: 100%;

    &::placeholder {
      color: var(--p-color-text-placeholder);
      font-family: 'Storebrand Text', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.375rem;

      @media (min-width: 600px) {
        font-size: 1.125rem;
        line-height: 1.625rem;
      }
    }

    &.textarea {
      height: auto;
      padding: var(--p-spacing-rem-08);
      resize: none;
    }

    /* Hide arrows on input type number start.
     * Chrome, Safari */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    /* Firefox */
    &[type='number'] {
      -moz-appearance: textfield; /* Firefox */
    }
  }

  & .inputAdditions {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    padding-right: var(--p-spacing-rem-12);
    z-index: var(--p-z-index-input);
  }

  & .iconButton {
    color: var(--icon-color);
    display: flex;

    i {
      font-size: 1.5rem;
    }
  }

  & .icon {
    color: var(--icon-color);
    display: flex;

    i {
      font-size: 1.5rem;
    }

    @media (max-width: 600px) {
      padding-right: 0.125rem;
    }
  }

  & .inputSuffix {
    color: var(--suffix-color);
  }

  &[data-size='large'] {
    max-width: 33rem;
  }

  &[data-size='fluid'] {
    max-width: 100%;
    width: 100%;

    & > select {
      width: 100%;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --border-color: var(--p-color-stroke-0);
      --background-color: var(--p-color-background-hover);
    }
  }

  &:active,
  &:focus-within {
    --border-color: var(--p-color-stroke-strong);
    --background-color: var(--p-color-background);
    --border-thickness: var(--border-fat);

    outline: none;
  }

  &:focus-visible {
    --input-outline: var(--p-outline);
    --border-color: var(--p-color-stroke-0);
  }

  &[data-message-type='success'] {
    --border-color: var(--p-color-stroke-success);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-success);
  }

  &[data-message-type='warning'] {
    --border-color: var(--p-color-stroke-warning);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-warning);
  }

  &[data-message-type='error'] {
    --border-color: var(--p-color-stroke-error);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-error);
  }

  &[data-read-only='true'] {
    --border-color: var(--p-color-stroke-0);
    --background-color: var(--p-color-surface-neutral);
  }

  &[aria-disabled='true'] {
    --background-color: var(--p-color-background-disabled);
    --border-color: var(--p-color-stroke-disabled);
    --suffix-color: var(--p-color-text-disabled);
    --text-color: var(--p-color-text-disabled);
    --icon-color: var(--p-color-text-disabled);

    &:active {
      --border-color: var(--p-color-stroke-disabled);
    }

    cursor: default;

    & .inputElement {
      pointer-events: none;
    }

    & .inputAdditions .inputSuffix {
      pointer-events: none;
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.loadingIndicatorContainer[data-stb-loading-indicator-linear='current'] {
  --rainbow-color: linear-gradient(
    80deg,
    rgb(255 0 0 / 100%) 0%,
    rgb(255 154 0 / 100%) 12.5%,
    rgb(208 222 33 / 100%) 25%,
    rgb(79 220 74 / 100%) 37.5%,
    rgb(63 218 216 / 100%) 50%,
    rgb(47 201 226 / 100%) 62.5%,
    rgb(28 127 238 / 100%) 75%,
    rgb(95 21 242 / 100%) 87.5%,
    rgb(186 12 248 / 100%) 100%
  );
  --indicator-max-width: 35.4375rem;
  --indicator-height: 0.1875rem;
  --indicator-border-radius: 0.25rem;
  --indicator-foreground-color: var(--p-color-static-red-foreground);
  --indicator-background-color: var(--p-color-static-grey-background);

  max-width: var(--indicator-max-width);
  min-width: 18rem;

  & .indicatorBase {
    background-color: var(--indicator-background-color);
    margin: var(--p-spacing-rem-08) 0;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  & .indicatorTrack {
    border-radius: var(--indicator-border-radius);
    height: var(--indicator-height);
  }

  & .materialBar {
    animation: loading-indicator-linear-increase 2s infinite;
    transition: none;
    width: 0;
  }

  & .progressBar {
    background: var(--indicator-foreground-color);
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    &.rainbow {
      background: var(--rainbow-color);
    }
  }

  & .materialBarDecrease {
    animation: loading-indicator-linear-decrease 2s 0.5s infinite;
  }

  & .loadingText {
    text-align: center;
  }

  @media (min-width: 600px) {
    --indicator-max-width: 67.5rem;
    --indicator-height: 0.375rem;
  }

  @media (max-width: 600px) {
    min-width: fit-content;
  }
}

@keyframes loading-indicator-linear-increase {
  from {
    left: -5%;
    width: 5%;
  }

  to {
    left: 130%;
    width: 100%;
  }
}

@keyframes loading-indicator-linear-decrease {
  from {
    left: -80%;
    width: 80%;
  }

  to {
    left: 110%;
    width: 10%;
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.modalFloatingOverlay[data-stb-modal='current'] {
  background: rgb(0 0 0 / 25%);
  display: grid;
  place-items: center;
  z-index: var(--p-z-index-modal);

  @media (prefers-reduced-motion) {
    animation: none !important;
    transition: none !important;
  }

  &.withBorder {
    --modal-border-color: #19191929;
    --modal-border: 1px solid var(--modal-border-color);

    & .modalHeadingWrapper {
      border-bottom: var(--modal-border);
    }

    & .modalFooter {
      border-top: var(--modal-border);
    }

    & .modalContentWrapper {
      margin: var(--p-spacing-rem-24) 0;
      margin-left: var(--content-offset);
    }
  }

  &.bottomSheet {
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
  }
}

.modalBase[data-stb-modal-base='current'] {
  /*
    we use content-offset to make sure focus-outlines do not get clipped:
    we move the content children 6px right, then account for the shift with decreased padding-left on parent
  */
  --content-offset: 6px;

  background: var(--p-color-background);
  border-radius: var(--p-corner-radius-rem-medium);
  box-shadow: 0 0 0.9375rem 0 rgb(0 0 0 / 25%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 5rem);
  max-width: 42rem;
  padding: var(--p-spacing-rem-32);
  padding-left: calc(var(--p-spacing-rem-32) - var(--content-offset));
  width: 100%;
  z-index: var(--p-z-index-modal);

  &.bottomSheet {
    border-radius: var(--p-corner-radius-rem-medium)
      var(--p-corner-radius-rem-medium) 0 0;
    bottom: 0;
    left: 0;
    max-height: 97vh;
    max-width: 100%;
    position: fixed;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  & > div {
    margin-left: var(--content-offset);
  }

  /* make sure select has room for focus-outline on the right */
  & .selectBase.select {
    max-width: calc(100% - var(--content-offset));
  }

  @media only screen and (max-width: 672px) {
    max-height: calc(100vh - 2rem);
    padding: var(--p-spacing-rem-24);
    padding-left: calc(var(--p-spacing-rem-24) - var(--content-offset));
  }

  & .modalContentWrapper {
    box-sizing: border-box;
    overflow: auto;
    position: relative;

    &.usingKeyboard {
      &:focus {
        outline: var(--p-outline);
      }
    }

    & .modalScrollShadow {
      box-shadow: 0 0 0.3125rem 0.0625rem rgb(0 0 0 / 40%);
      display: flex;
      height: auto;
      justify-content: center;
      position: sticky;
      top: 0;
      width: 100%;
      z-index: var(--p-z-index-modal);

      &::before,
      &::after {
        background-color: transparent;
        content: '';
        height: 0.125rem;
        position: absolute;
        top: -0.125rem;
      }

      &::before {
        box-shadow: 0 -0.5rem 0.9375rem rgb(0 0 0 / 70%);
        width: 60%;
      }

      &::after {
        box-shadow: 0 -2.1875rem 2.1875rem 1.25rem rgb(0 0 0 / 70%);
        width: 30%;
      }

      &.bottom {
        bottom: -1.7rem;
        top: unset;

        &::before,
        &::after {
          bottom: 0;
        }

        &::before {
          box-shadow: 0 0.5rem 0.9375rem rgb(0 0 0 / 70%);
        }

        &::after {
          box-shadow: 0 2.1875rem 2.1875rem 1.25rem rgb(0 0 0 / 70%);
        }
      }
    }
  }

  & .modalHeadingWrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--p-spacing-rem-24);

    & > h1 {
      flex: 1;
    }
  }

  & .modalFooter:not(:empty) {
    padding-top: var(--p-spacing-rem-24);
  }
}
._paper_rptud_1 {
  overflow: visible;
  background: white;
  box-shadow: none;
}

._withShadow_rptud_7 {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12),
    0 1px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 8px;
}

._withBackground_rptud_13 {
  background: #fdf4e6;
  padding: 24px;
}

._dense_rptud_18 {
  padding: 0;
}

@media (max-width: 768px) {
  ._withBackground_rptud_13 {
    padding: 16px;
  }

  ._dense_rptud_18 {
    padding: 0;
  }
}
._bubbleTop_16sn7_1 {
  display: flex;
  align-items: flex-end;
  padding: 0 16px;
}

._container_16sn7_7 {
  display: flex;
  align-items: flex-end;
}

._avatar_16sn7_12 {
  background: url('../assets/avatar.svg') no-repeat;
  background-size: cover;
}

._spikeContainer_16sn7_17 {
  position: relative;
  display: flex;
}

._spike_16sn7_17 {
  align-self: flex-end;
  transform: scaleX(-1);
}

._spikeShadowOverlapper_16sn7_27 {
  position: absolute;
  background: white;
  content: '';
}

@media (max-width: 360px) {
  ._container_16sn7_7 {
    margin-left: -60px;
    flex-direction: row-reverse;
  }

  ._spike_16sn7_17 {
    transform: scaleX(1);
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
._legend_48rue_1 {
  font-size: initial;
  margin: 0;
  width: auto;
}

._label_48rue_7 {
  margin: 0;
}

._errorText_48rue_11 {
  color: #bb1b18;
  font-family: inherit;
}

._textErrorMessage_48rue_16 {
  margin: 0;
  line-height: inherit;
}
._root_s2voa_1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

._value_s2voa_8 {
  width: 36px;
  margin: 0 4px;
  text-align: center;
  border: 0;
  height: 28px;
}

._value_s2voa_8:focus {
  box-shadow: 0 0 4px 2px #fdf4e6;
}

._value_s2voa_8::-webkit-outer-spin-button,
._value_s2voa_8::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

._hidden_s2voa_26 {
  opacity: 0;
}

._hiddenText_s2voa_30 {
  color: transparent;
}

._numberInput_s2voa_34 {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
._root_1tc2p_1 {
  margin-bottom: 8px;
  width: 100%;
}

._input_1tc2p_6 {
  display: block;
  outline: none;
  border: 1px solid #191919;
  border-radius: 2px;
  padding: 10px;
  background: #fff;
  resize: vertical;
  width: 100%;
  line-height: 1;
}

._input_1tc2p_6:focus,
._input_1tc2p_6._error_1tc2p_19:focus {
  border: 2px solid #5b462b;
  margin-top: -1px;
}

._input_1tc2p_6._error_1tc2p_19 {
  border: 3px solid #e36a31;
  margin-top: -2px;
}

._input_1tc2p_6:disabled {
  background: #ffffff;
  color: #757575;
  cursor: not-allowed;
  border-color: #757575;
}

._input_1tc2p_6::placeholder {
  color: #777 !important;
}

._input_1tc2p_6::-ms-clear {
  display: none;
}

._inputContainer_1tc2p_44 {
  width: 100%;
  display: inline-block;
  margin-top: 8px;
  position: relative;
  padding-right: 36px;
}

._inputContainer_1tc2p_44._small_1tc2p_52 {
  /* 202 + 36 */
  max-width: 238px;
}

._inputContainer_1tc2p_44._medium_1tc2p_57 {
  /* 288 + 36 */
  max-width: 324px;
}

._inputContainer_1tc2p_44._large_1tc2p_62 {
  /* 404 + 36 */
  max-width: 440px;
}

._inputContainer_1tc2p_44._date_1tc2p_67 {
  /* 168 + 36 */
  max-width: 204px;
}

._inputContainer_1tc2p_44._fluid_1tc2p_72 {
  display: block;
  width: 100%;
}

._label_1tc2p_77 {
  font-weight: 600;
  margin-bottom: 0;
}

._hint_1tc2p_82 {
  margin: 8px 0;
  font-size: 14px;
  color: #444;
}

._errorMessage_1tc2p_88 {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  margin-top: 16px;
  color: #191919;
}

._icon_1tc2p_97 {
  padding: 12px 20px 12px 12px;
}

._sign_1tc2p_101 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 48px;
  color: #444;
}

._inputContainer_1tc2p_44._hasMultiline_1tc2p_109 {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
  /* 404 + 36 */
  max-width: 440px;
}
._inputContainer_1tc2p_44._hasMultiline_1tc2p_109::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) ' ';

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
._inputContainer_1tc2p_44._hasMultiline_1tc2p_109 > textarea {
  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
._inputContainer_1tc2p_44._hasMultiline_1tc2p_109 > textarea,
._inputContainer_1tc2p_44._hasMultiline_1tc2p_109::after {
  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}
.selectBase[data-stb-select='current'] {
  --select-max-width: 33rem;
  --select-min-width: 10rem;
  --select-container-width: 100%;
  --select-background-color: var(--p-color-surface-static);
  --select-border-color: var(--p-color-stroke-0);
  --select-color: var(--p-color-text-primary);
  --select-height: 2.5rem;
  --select-outline: none;
  --select-icon-size: 1rem;
  --select-border-thickness: var(--p-border-rem-xsmall);

  &[data-fluid='true'] {
    --select-max-width: 37.5rem;
  }

  align-items: flex-start;
  background-color: transparent;
  display: inline-flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  isolation: isolate;
  max-width: var(--select-max-width);
  min-width: var(--select-min-width);
  position: relative;
  width: 100%;

  &[aria-disabled='true'] {
    --select-background-color: var(--p-color-background-disabled);
    --select-border-color: var(--p-color-stroke-disabled);
    --select-color: var(--p-color-text-disabled);
  }

  & .selectContainer {
    background-color: var(--select-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
    height: var(--select-height);
    justify-content: space-between;
    max-width: var(--select-max-width);
    position: relative;
    width: var(--select-container-width);

    & .iconWrapper {
      color: var(--select-color);
      font-size: var(--select-icon-size);
      height: var(--select-icon-size);
      line-height: var(--select-icon-size);
      position: absolute;
      right: var(--p-spacing-rem-12);
      top: var(--p-spacing-rem-12);
      width: var(--select-icon-size);
      z-index: var(--p-z-index-input);
    }
  }

  & .nativeSelect {
    appearance: none;
    background-color: transparent;
    border: var(--select-border-thickness) solid var(--select-border-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    color: var(--select-color);
    height: 100%;
    margin: 0;
    max-width: var(--select-max-width);
    outline: var(--select-outline);
    outline-offset: var(--p-outline-offset);
    overflow: hidden;
    padding-left: var(--p-spacing-rem-12);
    padding-right: var(--p-spacing-rem-40);
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: var(--p-z-index-dropdown);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        cursor: pointer;
      }
    }

    &:disabled {
      pointer-events: none;
    }

    &:active {
      --select-border-color: var(--p-color-stroke-strong);
    }

    &.noKeyboard {
      &:focus {
        --select-border-color: var(--p-color-stroke-strong);
      }
    }

    &.usingKeyboard {
      &:focus {
        --select-outline: var(--p-outline);
      }
    }

    &.error {
      --select-border-color: var(--p-color-stroke-error);
    }

    &.warning {
      --select-border-color: var(--p-color-stroke-warning);
    }

    &:has(option[class='placeholderOption']:checked) {
      color: var(--p-color-text-placeholder);
    }
  }

  & .nativeOption {
    background-color: var(--p-color-surface-static);
  }

  @keyframes select-shimmer {
    0% {
      background-position: -100vw 0;
    }

    100% {
      background-position: 100vw 0;
    }
  }

  /* stylelint-disable-next-line storeblocks/no-color-primitive */
  & .selectContainerSkeleton {
    animation: select-shimmer 10s infinite linear;
    background: linear-gradient(
      0.25turn,
      var(--p-color-grey-200),
      var(--p-color-red-300),
      var(--p-color-grey-200)
    );
    border: none;
    border-radius: var(--p-corner-radius-rem-small);
  }

  @media (min-width: 600px) {
    --select-height: 3rem;
    --select-icon-size: 1.25rem;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    --alert-line-height: 1.25rem;

    color: var(--color-text);
    line-height: var(--alert-line-height);

    @media (min-width: 600px) {
      --alert-line-height: 1.375rem;
    }
  }

  & .alertIconWrapper {
    display: flex;
    text-align: center;
  }

  & .alertIcon {
    --alert-icon-size: 1.25rem;

    color: var(--color-icon);
    font-size: var(--alert-icon-size);
    height: var(--alert-icon-size);
    line-height: var(--alert-icon-size);
    width: var(--alert-icon-size);

    @media (min-width: 600px) {
      --alert-icon-size: 1.375rem;
    }
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.calendarBase[data-stb-calendar='current'] {
  background: var(--p-color-background);
  border: none;
  border-radius: var(--p-corner-radius-rem-medium);
  box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0 0 0 / 20%);
  box-sizing: border-box;
  max-width: 22rem;
  padding: var(--p-spacing-rem-12);
  width: 100%;
  z-index: var(--p-z-index-dropdown);

  & .calendarHeader {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;

    & .calendarHeaderSelection {
      align-items: center;
      display: flex;
      height: 3rem;
      justify-content: space-between;
    }

    & .calendarHeaderButtons {
      align-items: center;
      display: flex;
      gap: var(--p-spacing-rem-08);
      height: 3rem;
      justify-content: space-between;
    }

    & .selectContainer {
      align-items: center;
      border: none;
      border-radius: var(--p-corner-radius-rem-medium);
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      height: 3rem;
      justify-content: center;
      position: relative;

      & .calendarSelect {
        appearance: none;
        background: transparent;
        border: none;
        cursor: pointer;
        height: 3rem;
        outline: none;
        padding: var(--p-spacing-rem-08) var(--p-spacing-rem-48)
          var(--p-spacing-rem-08) var(--p-spacing-rem-16);
        text-transform: capitalize;
      }

      & .calendarOption {
        background: var(--p-color-background);
        margin: 0;
        padding: 0;
        text-transform: capitalize;
      }

      & .calendarSelectIcon {
        pointer-events: none;
        position: absolute;
        right: var(--p-spacing-rem-16);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background: var(--p-color-background-hover);
        }
      }

      &:active {
        background: var(--p-color-background-pressed);
      }
    }

    & .month {
      text-transform: capitalize;
    }
  }

  & .calendarGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    margin-bottom: var(--p-spacing-rem-08);

    &[data-view='day'] {
      grid-template-columns: repeat(7, minmax(32px, 1fr));
      grid-template-rows: repeat(5, 1fr);
    }

    & .weekday {
      align-items: center;
      display: flex;
      justify-content: center;
      text-transform: capitalize;
    }
  }

  /* stylelint-disable-next-line storeblocks/no-color-primitive */
  & [data-stb-day-button='current'] {
    --day-button-background: transparent;
    --day-button-color: var(--p-color-text-primary);
    --day-button-outline: none;
    --day-button-size: 2.75rem;
    --day-div-background: transparent;
    --day-div-border-radius: none;
    /* stylelint-disable-next-line storeblocks/no-color-primitive */
    --today-marker-background: var(--p-color-red-600);

    align-items: center;
    background: var(--day-div-background);
    border: none;
    border-radius: var(--day-div-border-radius);
    display: flex;
    flex-direction: column;
    height: var(--day-button-size);
    justify-content: center;

    & > button {
      align-items: center;
      background-color: var(--day-button-background);
      border: none;
      border-radius: var(--p-corner-radius-rem-extreme);
      box-sizing: border-box;
      color: var(--day-button-color);
      cursor: pointer;
      display: inline-flex;
      height: var(--day-button-size);
      justify-content: center;
      outline: var(--day-button-outline);
      outline-offset: var(--p-outline-offset);
      position: relative;
      text-decoration: none;
      transition-duration: var(--p-transition-duration);
      transition-property: border, background-color, color;
      white-space: nowrap;
      width: 100%;

      &:focus-visible {
        --day-button-outline: var(--p-outline);
      }

      &:disabled {
        --day-button-color: var(--p-color-text-disabled);

        font-weight: 400;
        pointer-events: none;
      }
    }

    & .todayMarker {
      background: var(--today-marker-background);
      border: none;
      border-radius: 0.1875rem;
      bottom: 0.5rem;
      height: 0.1875rem;
      margin: -0.1875rem 0 0;
      position: relative;
      width: 1.25rem;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --day-button-background: var(--p-color-background-hover);
      }
    }

    &:active {
      --day-button-background: var(--p-color-background-pressed);
    }

    /* stylelint-disable-next-line storeblocks/no-color-primitive */
    &[data-selected='true'] {
      --day-button-background: var(--p-color-surface-selected);
      --day-button-color: var(--p-color-text-on-color);
      /* stylelint-disable-next-line storeblocks/no-color-primitive */
      --today-marker-background: var(--p-color-red-300);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          --day-button-background: var(--p-color-surface-selected-hover);
          --day-button-color: var(--p-color-text-on-color);
        }
      }

      &:active {
        --day-button-background: var(--p-color-surface-selected-pressed);
        --day-button-color: var(--p-color-text-on-color);
      }
    }

    &[data-in-range='true'] {
      --day-div-background: var(--p-color-background-pressed);
    }
  }

  & .calendarFooterBase {
    background: var(--p-color-background);
    border-top: var(--p-border-rem-xsmall) solid var(--p-color-stroke-subtle-0);
    display: flex;
    justify-content: center;
    padding-top: var(--p-spacing-rem-08);

    & > button {
      flex-direction: row;
      line-height: 1rem;

      > span::first-letter {
        text-transform: capitalize;
      }

      > i {
        margin: 0;
      }
    }
  }
}

div[data-stb-day-button='current'][data-in-range='true'][data-range='start'] {
  border-radius: var(--p-corner-radius-rem-extreme) 0 0
    var(--p-corner-radius-rem-extreme);
}

div[data-stb-day-button='current'][data-in-range='true'][data-range='end'] {
  border-radius: 0 var(--p-corner-radius-rem-extreme)
    var(--p-corner-radius-rem-extreme) 0;
}
.inputFieldContainer[data-stb-input-field='current'] {
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);
  max-width: 18rem;
  width: 100%;

  &[data-size='large'] {
    max-width: 33rem;
  }

  &[data-size='fluid'] {
    max-width: 100%;
    width: 100%;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    --alert-line-height: 1.25rem;

    color: var(--color-text);
    line-height: var(--alert-line-height);

    @media (min-width: 600px) {
      --alert-line-height: 1.375rem;
    }
  }

  & .alertIconWrapper {
    display: flex;
    text-align: center;
  }

  & .alertIcon {
    --alert-icon-size: 1.25rem;

    color: var(--color-icon);
    font-size: var(--alert-icon-size);
    height: var(--alert-icon-size);
    line-height: var(--alert-icon-size);
    width: var(--alert-icon-size);

    @media (min-width: 600px) {
      --alert-icon-size: 1.375rem;
    }
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.inputContainer[data-stb-input-atom='current'] {
  --text-color: var(--p-color-text-primary);
  --background-color: var(--p-color-surface-static);
  --border-color: var(--p-color-stroke-0);
  --suffix-color: var(--p-color-text-secondary);
  --icon-color: var(--p-color-text-primary);
  --input-max-height: 3rem;

  --border-normal: var(--p-border-rem-xsmall);
  --border-fat: 0.0938rem;
  --border-thickness: var(--border-normal);

  align-items: center;
  align-self: flex-start;
  background-color: var(--background-color);
  border: var(--border-thickness) solid var(--border-color);
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  color: var(--text-color);
  cursor: text;
  display: flex;
  display: inline-flex;
  max-height: var(--input-max-height);
  max-width: 18rem;
  min-height: var(--input-max-height);
  outline: var(--input-outline);
  outline-offset: var(--p-outline-offset);
  position: relative;
  width: 100%;

  &.textarea {
    height: auto;
    max-height: 100%;
  }

  & .inputElement {
    background-color: var(--background-color);
    border: none;
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    color: var(--text-color);
    height: 100%;
    outline: none;
    padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);
    width: 100%;

    &::placeholder {
      color: var(--p-color-text-placeholder);
      font-family: 'Storebrand Text', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.375rem;

      @media (min-width: 600px) {
        font-size: 1.125rem;
        line-height: 1.625rem;
      }
    }

    &.textarea {
      height: auto;
      padding: var(--p-spacing-rem-08);
      resize: none;
    }

    /* Hide arrows on input type number start.
     * Chrome, Safari */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    /* Firefox */
    &[type='number'] {
      -moz-appearance: textfield; /* Firefox */
    }
  }

  & .inputAdditions {
    align-items: center;
    display: flex;
    gap: 1.25rem;
    padding-right: var(--p-spacing-rem-12);
    z-index: var(--p-z-index-input);
  }

  & .iconButton {
    color: var(--icon-color);
    display: flex;

    i {
      font-size: 1.5rem;
    }
  }

  & .icon {
    color: var(--icon-color);
    display: flex;

    i {
      font-size: 1.5rem;
    }

    @media (max-width: 600px) {
      padding-right: 0.125rem;
    }
  }

  & .inputSuffix {
    color: var(--suffix-color);
  }

  &[data-size='large'] {
    max-width: 33rem;
  }

  &[data-size='fluid'] {
    max-width: 100%;
    width: 100%;

    & > select {
      width: 100%;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --border-color: var(--p-color-stroke-0);
      --background-color: var(--p-color-background-hover);
    }
  }

  &:active,
  &:focus-within {
    --border-color: var(--p-color-stroke-strong);
    --background-color: var(--p-color-background);
    --border-thickness: var(--border-fat);

    outline: none;
  }

  &:focus-visible {
    --input-outline: var(--p-outline);
    --border-color: var(--p-color-stroke-0);
  }

  &[data-message-type='success'] {
    --border-color: var(--p-color-stroke-success);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-success);
  }

  &[data-message-type='warning'] {
    --border-color: var(--p-color-stroke-warning);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-warning);
  }

  &[data-message-type='error'] {
    --border-color: var(--p-color-stroke-error);
    --border-thickness: var(--border-fat);
    --background-color: var(--p-color-surface-error);
  }

  &[data-read-only='true'] {
    --border-color: var(--p-color-stroke-0);
    --background-color: var(--p-color-surface-neutral);
  }

  &[aria-disabled='true'] {
    --background-color: var(--p-color-background-disabled);
    --border-color: var(--p-color-stroke-disabled);
    --suffix-color: var(--p-color-text-disabled);
    --text-color: var(--p-color-text-disabled);
    --icon-color: var(--p-color-text-disabled);

    &:active {
      --border-color: var(--p-color-stroke-disabled);
    }

    cursor: default;

    & .inputElement {
      pointer-events: none;
    }

    & .inputAdditions .inputSuffix {
      pointer-events: none;
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.datepickerBase[data-stb-datepicker='current'] {
  margin: 0;
}
.rangeDatepickerBase[data-stb-datepicker-range='current'] {
  margin: 0;
}
._container_162al_1 {
  display: flex;
  flex-direction: column;
  gap: var(--p-subsection-away);
}
.autosuggestBase[data-stb-autosuggest='current'] {
  --autosuggest-border-color: var(--p-color-stroke-0);
  --autosuggest-text-color: var(--p-color-text-primary);
  --autosuggest-label-color: var(--autosuggest-text-color);
  --autosuggest-hint-color: var(--autosuggest-text-color);
  --autosuggest-selected-outline: var(--p-color-stroke-strong);
  --autosuggest-caret: var(--p-color-text-interactive);
  --autosuggest-hover-background-color: var(--p-color-background-hover-white);
  --autosuggest-input-background-color: var(--p-color-background-white);

  color: var(--autosuggest-text-color);
  display: inline-flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-08);

  & .autosuggestSuffix {
    margin-right: 0.5rem;
    pointer-events: none;
    white-space: nowrap;
  }

  & .autosuggestAdditions {
    align-items: center;
    display: flex;
    z-index: var(--p-z-index-input);

    & .iconButton {
      margin: 0 1em 0 0.5em;
    }
  }

  & .autosuggestIcon {
    margin: 0.25em 1em 0 0.5em;

    & i {
      color: var(--autosuggest-text-color);
    }
  }

  & .autosuggestContainer {
    align-items: center;
    align-self: flex-start;
    background-color: var(--autosuggest-input-background-color);
    border: var(--p-border-rem-small) solid var(--autosuggest-border-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    cursor: text;
    display: flex;
    height: var(--p-spacing-rem-48);
    margin-top: var(--p-spacing-rem-04);
    position: relative;
    width: 9.25rem;

    &[data-disabled='true'] {
      pointer-events: none;
    }

    &[data-size='small'] {
      width: 6rem;
    }

    &[data-size='large'] {
      width: 18rem;
    }

    &[data-size='fluid'] {
      width: 100%;
    }

    &[data-read-only='true'] {
      &:focus-within {
        outline: none;
      }
    }

    &:focus-within {
      --autosuggest-border-color: var(--p-color-stroke-strong);
    }
  }

  & .autosuggestInput {
    background-color: var(--autosuggest-input-background-color);
    border: none;
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    caret-color: var(--autosuggest-caret);
    color: var(--autosuggest-text-color);
    height: 100%;
    outline: none;
    padding: var(--p-spacing-rem-08) var(--p-spacing-rem-08)
      var(--p-spacing-rem-08) var(--p-spacing-rem-12);
    width: 100%;

    /* clears the 'X' from Chrome */
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }

    /* hide arrows on input type number start
    Chrome, Safari */
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    /* Firefox */
    &[type='number'] {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    &:disabled {
      pointer-events: none;
    }
  }

  & .autosuggestDropdown {
    --max-height: 24.625rem;

    background-color: var(--autosuggest-input-background-color);
    border: none;
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0 0 0 / 20%);
    box-sizing: border-box;
    color: var(--autosuggest-text-color);
    height: auto;
    left: -0.125rem;
    margin-top: var(--p-spacing-rem-08);
    max-height: var(--max-height);
    overflow-y: auto;
    position: absolute;
    top: 3.1rem;
    width: calc(100% + 0.25rem);
    z-index: var(--p-z-index-dropdown);

    &.loading {
      height: 13rem;
    }
  }

  /**
    * Inner scroll div styling, to make sure that scroll bar does not
    * overlap with round corners of outer div.
    */
  & .autosuggestDropdownScroll {
    border: 0 solid transparent;
    border-radius: var(--p-corner-radius-rem-small);
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden;
    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
    overflow-y: auto;
    position: relative;
    scroll-behavior: auto;
    width: 100%;

    & .autosuggestListItem {
      &:not(:last-child) {
        border-bottom: 1px solid var(--p-color-stroke-0);
      }

      cursor: pointer;
      display: block;
    }

    &.loading {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: var(--p-spacing-rem-08);
      padding-top: var(--p-spacing-rem-64);
    }

    & .autosuggestListItemInner {
      border: none;
      border-radius: var(--p-corner-radius-rem-small);
      box-sizing: border-box;
      margin: var(--p-spacing-rem-04);
      outline: none;
      padding: var(--p-spacing-rem-08);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--autosuggest-hover-background-color);
        }
      }

      & .font-weight-400 {
        font-size: 1rem;
      }
    }

    & .autosuggestListItem[aria-selected='true'] > .autosuggestListItemInner {
      outline: var(--p-outline);
      outline-offset: -0.0625rem;
    }

    & .autosuggestListItemInner[data-pressed='true'] {
      background: var(--p-color-background-pressed-grey);
    }

    & .autosuggestButtonContainer {
      border-top: var(--p-border-rem-xsmall) solid var(--p-color-stroke-0);
      display: flex;
      justify-content: center;
      padding: var(--p-spacing-08) 0;
    }
  }

  &[aria-disabled='true'] {
    --autosuggest-text-color: var(--p-color-text-disabled);
    --autosuggest-hint-color: var(--p-color-text-disabled);
    --autosuggest-input-background-color: var(--p-color-background-disabled);
    --autosuggest-border-color: var(--p-color-stroke-disabled);
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;

    & .autosuggestContainer {
      width: 100%;

      & > select {
        width: 100%;
      }
    }
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    --alert-line-height: 1.25rem;

    color: var(--color-text);
    line-height: var(--alert-line-height);

    @media (min-width: 600px) {
      --alert-line-height: 1.375rem;
    }
  }

  & .alertIconWrapper {
    display: flex;
    text-align: center;
  }

  & .alertIcon {
    --alert-icon-size: 1.25rem;

    color: var(--color-icon);
    font-size: var(--alert-icon-size);
    height: var(--alert-icon-size);
    line-height: var(--alert-icon-size);
    width: var(--alert-icon-size);

    @media (min-width: 600px) {
      --alert-icon-size: 1.375rem;
    }
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
._inputContainer_hqa83_1 {
  display: flex;
  background-position: 100% 60%; /* Hack to vertically align the error icon to the inputs */
  width: 360px;
}

._inputContainer_hqa83_1 label {
  margin-bottom: 4px;
}

._integerContainer_hqa83_11 {
  width: 180px; /* Chosen to fit 15 digits plus thousand separators */
}

._integerContainer_hqa83_11 div:has(input) {
  width: 180px;
}

._decimalContainer_hqa83_19 {
  width: 50px; /* Chosen to fit 2 digits plus cursor */
  transform: translateX(-1px);
}

._decimalContainer_hqa83_19 input {
  border-radius: 0px 2px 2px 0px;
}

._integerContainer_hqa83_11 input {
  border-radius: 2px 0px 0px 2px;
}

._decimalContainer_hqa83_19 div {
  max-width: 44px;
}

._inputContainer_hqa83_1 > div:focus-within {
  z-index: 2;
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.checkboxAtom[data-stb-checkbox-atom='current'] {
  --checkbox-border-color: var(--p-color-stroke-strong);
  --checkbox-border-color-checked: var(--p-color-surface-selected);
  --checkbox-background: var(--p-color-surface-static);
  --checkbox-background-checked: var(--p-color-surface-selected);
  --checkbox-icon-color: var(--p-color-surface-static);
  --checkbox-hint-color: var(--p-color-text-secondary);

  --checkbox-border-radius: 0.25rem;

  /* Provide a fallback until people update to assets => 7.16.3 */
  --checkbox-input-size: var(--p-system-icon-body, 1.375rem);

  @media (min-width: 600px) {
    --checkbox-input-size: var(--p-system-icon-body, 1.625rem);
  }

  --outline: transparent;

  --border-color: var(--p-color-stroke-subtle-0);
  --border-color-checked: var(--p-color-stroke-selected);

  --border-radius: 0.75rem;
  --border-thickness: 0.0625rem;

  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: var(--p-spacing-rem-08) var(--p-spacing-rem-12);
  grid-template-columns: auto 1fr;
  outline: none;
  width: fit-content;

  &:focus-visible {
    --outline: var(--p-outline);
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;
  }

  &[data-border='true'] {
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    outline: var(--outline);
    outline-offset: var(--p-outline-offset);
    padding: var(--p-spacing-rem-24) var(--p-spacing-rem-20);

    & .checkboxLabel::before {
      outline: none;
    }
  }

  /* Screen reader only */
  .checkboxInput {
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  & .checkboxLabel {
    column-gap: inherit;
    cursor: pointer;
    display: grid;
    font-weight: 400;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    grid-template-columns: subgrid;
  }

  & .checkboxLabel::after,
  .checkboxLabel::before {
    aspect-ratio: 1;
    border-radius: var(--checkbox-border-radius);
    box-sizing: border-box;
    content: '';
    display: inline-block; /* height has no effect unless block-variant used */
    grid-area: 1 / 1 / span 1 / span 1;
    height: var(--checkbox-input-size);
    place-self: start center;
  }

  & .checkboxLabel::before {
    background: var(--checkbox-background);
    border: var(--p-border-rem-small) solid var(--checkbox-border-color);
    outline: var(--outline);
    outline-offset: var(--p-outline-offset);
  }

  & .checkboxLabel::after {
    background: var(--checkbox-icon-color);
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 13 11" xmlns="http://www.w3.org/2000/svg"><path d="M12.2311 1.29248C12.6079 1.72314 12.5861 2.39812 12.1823 2.80007L4.68232 10.2667C4.28837 10.6589 3.67393 10.6476 3.29289 10.2412L0.792893 7.57452C0.402369 7.15797 0.402369 6.48259 0.792893 6.06603C1.18342 5.64947 1.81658 5.64947 2.20711 6.06603L4.02396 8.00401L10.8177 1.24049C11.2214 0.838536 11.8542 0.86181 12.2311 1.29248Z" fill="black"/></svg>')
      center/contain no-repeat;
    opacity: 0;
    width: 0.8125rem;
  }

  & .checkboxInput:checked + .checkboxLabel {
    &::before {
      background: var(--checkbox-background-checked);
      border-color: var(--checkbox-border-color-checked);
    }

    &::after {
      opacity: 1;
    }
  }

  & .checkboxInput:not(:checked) + .checkboxLabel[data-checked='mixed'] {
    &::before {
      background-color: var(--checkbox-background-checked);
      border-color: var(--checkbox-border-color-checked);
    }

    &::after {
      border-radius: 0.125rem;
      height: 0.125rem;
      mask: unset;
      opacity: 1;
      place-self: center center; /* dash (-) icon needs centering in both axes */
      width: 0.75rem;
    }
  }

  &:has(.checkboxInput:focus-visible) {
    --outline: var(--p-outline);
  }

  &:has(.checkboxInput:checked) {
    border-color: var(--border-color-checked);
  }

  .checkboxHint {
    color: var(--checkbox-hint-color);
    grid-column: 2 / -1;
    grid-row: 2 / 3;
  }

  &:has(.checkboxHint:not(:empty)) .checkboxLabel {
    font-weight: 600;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --checkbox-border-color: var(--p-color-stroke-selected-hover);
      --checkbox-border-color-checked: var(--p-color-stroke-selected-hover);
      --checkbox-background: var(--p-color-background-hover);
      --checkbox-background-checked: var(--p-color-surface-selected-hover);
      --checkbox-icon-color: var(--p-color-surface-static);

      --border-color: var(--p-color-stroke-strong-hover);
      --border-color-checked: var(--p-color-stroke-selected-hover);
    }
  }

  &:has(.checkboxInput:active) {
    --checkbox-border-color: var(--p-color-stroke-selected-pressed);
    --checkbox-border-color-checked: var(--p-color-stroke-selected-pressed);
    --checkbox-background: var(--p-color-background-pressed);
    --checkbox-background-checked: var(--p-color-background-selected-pressed);
    --checkbox-icon-color: var(--p-color-icon-on-color);

    --border-color: var(--p-color-stroke-selected);
    --border-color-checked: var(--p-color-stroke-selected-pressed);
  }

  &[data-message-type='warning'] {
    --checkbox-border-color: var(--p-color-stroke-warning);
    --checkbox-border-color-checked: var(--p-color-stroke-warning);
    --checkbox-background: var(--p-color-surface-warning);
    --checkbox-background-checked: var(--p-color-stroke-warning);
    --checkbox-icon-color: var(--p-color-surface-warning);

    --border-color: var(--p-color-stroke-warning);
    --border-color-checked: var(--p-color-stroke-warning);
  }

  &[data-message-type='error'] {
    --checkbox-border-color: var(--p-color-stroke-error);
    --checkbox-border-color-checked: var(--p-color-stroke-error);
    --checkbox-background: var(--p-color-surface-error);
    --checkbox-background-checked: var(--p-color-stroke-error);
    --checkbox-icon-color: var(--p-color-surface-error);

    --border-color: var(--p-color-stroke-error);
    --border-color-checked: var(--p-color-stroke-error);
  }

  &:has(.checkboxInput[aria-disabled='true']) {
    --checkbox-border-color: var(--p-color-stroke-disabled);
    --checkbox-border-color-checked: var(--p-color-background-disabled);
    --checkbox-background: var(--p-color-surface-static);
    --checkbox-background-checked: var(--p-color-background-disabled);
    --checkbox-icon-color: var(--p-color-stroke-disabled);

    --border-color: var(--p-color-stroke-disabled);
    --border-color-checked: var(--p-color-stroke-disabled);
    --checkbox-hint-color: var(--p-color-stroke-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    --alert-line-height: 1.25rem;

    color: var(--color-text);
    line-height: var(--alert-line-height);

    @media (min-width: 600px) {
      --alert-line-height: 1.375rem;
    }
  }

  & .alertIconWrapper {
    display: flex;
    text-align: center;
  }

  & .alertIcon {
    --alert-icon-size: 1.25rem;

    color: var(--color-icon);
    font-size: var(--alert-icon-size);
    height: var(--alert-icon-size);
    line-height: var(--alert-icon-size);
    width: var(--alert-icon-size);

    @media (min-width: 600px) {
      --alert-icon-size: 1.375rem;
    }
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.legend[data-stb-legend='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  margin-inline: 0;
  min-inline-size: none;
  padding-block: 0;
  padding-inline: 0;
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.checkboxesBase[data-stb-checkboxes='current'] {
  border: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  & .checkboxesItems {
    display: flex;
    flex-direction: column;
    gap: var(--p-subsection-near);
  }

  & .checkboxesLegend {
    margin-bottom: var(--p-spacing-rem-16);
  }

  & .checkboxesAlert {
    margin-top: var(--p-spacing-rem-16);
  }
}
._field_4z2pw_1 + ._field_4z2pw_1 {
  margin-top: 24px;
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.alertInlineBase[data-stb-alert-inline='current'] {
  --color-text: var(--p-color-text-primary);
  --color-icon: var(--p-color-icon-primary);

  align-self: start;
  border-radius: var(--p-corner-radius-rem-small);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  flex-shrink: 0;
  gap: var(--p-spacing-rem-08);

  & .alertTitle {
    color: var(--color-text);
    text-wrap: pretty;

    @media (max-width: 600px) {
      padding-top: 1px;
    }
  }

  & .alertIcon {
    color: var(--color-icon);
  }

  &[data-variant='error'] {
    --color-icon: var(--p-color-icon-error);
    --color-text: var(--p-color-text-error);
  }

  &[data-variant='warning'] {
    --color-icon: var(--p-color-icon-warning);
    --color-text: var(--p-color-text-warning);
  }

  &[data-variant='success'] {
    --color-icon: var(--p-color-icon-success);
    --color-text: var(--p-color-text-success);
  }

  &[data-variant='info'] {
    --color-icon: var(--p-color-icon-info);
    --color-text: var(--p-color-text-info);
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.legend[data-stb-legend='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  margin-inline: 0;
  min-inline-size: none;
  padding-block: 0;
  padding-inline: 0;
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.hintBase[data-stb-hint='current'] {
  color: --p-color-text-secondary;
  display: inline-block;

  & button.hintButton {
    background: transparent;
    border: none;
    border-radius: 3.2px;
    cursor: pointer;
    font-family: 'Storebrand Text', sans-serif;
    font-weight: 600;
    line-height: 150%;
    outline-offset: 2px;
    padding: 0;
    text-decoration: none;
    text-decoration: underline;
    white-space: nowrap;
  }

  & button {
    .system-icon.icon-left {
      margin-left: var(--p-spacing-16);
    }
  }

  & button.hintButton:focus {
    outline: var(--p-outline);
  }

  & button.hintButton:focus:not(:focus-visible) {
    outline: 0;
  }

  & button.hintButton:focus-visible {
    outline: var(--p-outline);
  }

  & p {
    margin: 0;

    & > a {
      font-size: inherit;
    }
  }

  & .hintText {
    color: var(--p-color-text-secondary);
    text-wrap: pretty;
  }

  &[data-disabled-style='true'] {
    & span.hintText {
      color: var(--p-color-text-disabled);
    }
  }
}
.popoverBase[data-stb-popover='current'] {
  align-items: center;
  display: flex;
  justify-content: center;

  & .popoverPopoverElement {
    --popover-background-color: var(--p-color-surface-1);
    --popover-box-shadow:
      0 0.25rem 0.375rem 0 rgb(0 0 0 / 14%),
      0 0.375rem 0.5rem 0 rgb(0 0 0 / 12%);

    background: var(--popover-background-color);
    border-radius: var(--p-corner-radius-rem-small);
    box-shadow: var(--popover-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: var(--p-spacing-rem-16);
    justify-content: space-between;
    max-width: 35rem;
    min-width: 18rem;
    padding: var(--p-spacing-rem-16);
    width: 100%;
    z-index: var(--p-z-index-popover);

    @media (min-width: 600px) {
      padding: var(--p-spacing-rem-20);
    }

    &[data-show-on='hover'] {
      padding: var(--p-spacing-rem-24);
    }

    & .popoverContent {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: var(--p-spacing-rem-08);
      justify-content: center;
      width: calc(100% - var(--p-spacing-rem-40));

      & .popoverContentHeader,
      .popoverContentSection {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.labelAtom[data-stb-label='current'] {
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-rem-04);
  text-wrap: pretty;

  &[data-has-popover='true'] {
    flex-direction: row;
    gap: var(--p-spacing-rem-08);
  }

  &[data-disabled='true'] {
    color: var(--p-color-text-disabled);
    pointer-events: none;
  }
}
.radioButtonAtom[data-stb-radio-button-atom='current'] {
  --radio-size: 1.5rem;
  --radio-inner-size: 0.8rem;
  --outline: transparent;

  --border-color: var(--p-color-stroke-subtle-0);
  --border-color-checked: var(--p-color-stroke-selected);
  --border-radius: 0.75rem;
  --border-thickness: 0.0625rem;

  --radio-color: var(--p-color-stroke-strong);
  --radio-background: var(--p-color-surface-static);
  --radio-color-checked: var(--p-color-surface-selected);
  --radio-background-checked: var(--p-color-surface-static);
  --radio-hint-color: var(--p-color-text-secondary);

  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: var(--p-spacing-rem-08) var(--p-spacing-rem-12);
  grid-template-columns: auto 1fr;
  outline: none;
  width: fit-content;

  &:focus-visible {
    --outline: var(--p-outline);
  }

  &[data-fluid='true'] {
    max-width: 100%;
    width: 100%;
  }

  &[data-border='true'] {
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    outline: var(--outline);
    outline-offset: var(--p-outline-offset);
    padding: var(--p-spacing-rem-24) var(--p-spacing-rem-20);
  }

  /* Screen reader only */
  .radioInput {
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  & .radioButtonLabel {
    column-gap: inherit;
    cursor: pointer;
    display: grid;
    font-weight: 400;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    grid-template-columns: subgrid;
  }

  & .radioButtonLabel::before {
    --color: var(--radio-color);
    --outer-border-width: var(--p-border-rem-small);
    --height: calc(var(--radio-size) - (var(--outer-border-width) * 2));

    aspect-ratio: 1;

    /* The circle */
    background: var(--radio-background);

    /* Between border and circle */
    border: calc(
        (
            var(--radio-size) - var(--radio-inner-size) -
              var(--outer-border-width)
          ) /
          2
      )
      solid var(--radio-background);
    border-radius: 50%;

    /* Border */
    box-shadow: 0 0 0 var(--outer-border-width) var(--color);
    box-sizing: border-box;
    content: '';
    display: block;
    grid-area: 1 / 1 / span 1 / span 1;
    height: var(--height);
    margin: var(--outer-border-width);
    outline: var(--outline);
    outline-offset: calc(var(--p-outline-offset) + var(--outer-border-width));
    place-self: start;
  }

  & .radioInput:checked + .radioButtonLabel::before {
    --color: var(--radio-color-checked);

    background: var(--color);
  }

  &:has(.radioInput:focus-visible) {
    --outline: var(--p-outline);
  }

  &:has(.radioInput:checked) {
    border-color: var(--border-color-checked);
  }

  .radioHint {
    color: var(--radio-hint-color);
    grid-column: 2 / -1;
    grid-row: 2 / 3;
  }

  &:has(.radioHint:not(:empty)) .radioButtonLabel {
    font-weight: 600;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --radio-color: var(--p-color-surface-selected-hover);
      --radio-background: var(--p-color-background-hover);
      --radio-color-checked: var(--p-color-surface-selected-hover);
      --radio-background-checked: var(--p-color-background-hover);

      --border-color: var(--p-color-stroke-strong-hover);
      --border-color-checked: var(--p-color-stroke-selected-hover);
    }
  }

  &:has(.radioInput:active) {
    --radio-color: var(--p-color-stroke-selected-pressed);
    --radio-background: var(--p-color-background-pressed);
    --radio-color-checked: var(--p-color-surface-selected-pressed);
    --radio-background-checked: var(--p-color-background-pressed);

    --border-color: var(--p-color-stroke-selected);
    --border-color-checked: var(--p-color-stroke-selected-pressed);
  }

  &[data-message-type='warning'] {
    --radio-color: var(--p-color-stroke-warning);
    --radio-background: var(--p-color-surface-warning);
    --radio-color-checked: var(--p-color-stroke-warning);
    --radio-background-checked: var(--p-color-surface-warning);

    --border-color: var(--p-color-stroke-warning);
    --border-color-checked: var(--p-color-stroke-warning);
  }

  &[data-message-type='error'] {
    --radio-color: var(--p-color-stroke-error);
    --radio-background: var(--p-color-surface-error);
    --radio-color-checked: var(--p-color-stroke-error);
    --radio-background-checked: var(--p-color-surface-error);

    --border-color: var(--p-color-stroke-error);
    --border-color-checked: var(--p-color-stroke-error);
  }

  &:has(.radioInput[aria-disabled='true']) {
    --radio-color: var(--p-color-stroke-disabled);
    --radio-background: var(--p-color-surface-static);
    --radio-color-checked: var(--p-color-stroke-disabled);
    --radio-background-checked: var(--p-color-surface-static);

    --border-color: var(--p-color-stroke-disabled);
    --border-color-checked: var(--p-color-stroke-disabled);
    --radio-hint-color: var(--p-color-stroke-disabled);

    pointer-events: none;
  }
}
.radioButtonsBase[data-stb-radio-buttons='current'] {
  border: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  & .radioButtonsItems {
    display: flex;
    flex-direction: column;
    gap: var(--p-subsection-near);

    &.row {
      flex-direction: row;
    }
  }

  & .radioButtonsLegend {
    margin-bottom: var(--p-spacing-rem-16);
  }

  & .radioButtonsAlert {
    margin-top: var(--p-spacing-rem-16);
  }
}
.surfaceComponent {
  &[data-stb-background='current'] {
    background-color: var(--p-color-background);
  }

  &[data-stb-surface1='current'] {
    background-color: var(--p-color-surface-1);
  }

  &[data-stb-surface2='current'] {
    background-color: var(--p-color-surface-2);
  }
}
[data-surface-background-theme='white'] {
  /* Background */

  --p-color-background: var(--p-color-background-white);
  --p-color-background-hover: var(--p-color-background-hover-white);
  --p-color-background-pressed: var(--p-color-background-pressed-white);
  --p-color-background-active: var(--p-color-background-active-white);
  --p-color-background-disabled: var(--p-color-background-disabled-white);

  /* Text */

  --p-color-text-primary: var(--p-color-text-primary-white);
  --p-color-text-primary-hover: var(--p-color-text-primary-hover-white);
  --p-color-text-primary-active: var(--p-color-text-primary-active-white);
  --p-color-text-interactive: var(--p-color-text-interactive-white);
  --p-color-text-interactive-hover: var(--p-color-text-interactive-hover-white);
  --p-color-text-interactive-pressed: var(
    --p-color-text-interactive-pressed-white
  );
  --p-color-text-interactive-active: var(
    --p-color-text-interactive-active-white
  );
  --p-color-text-secondary: var(--p-color-text-secondary-white);
  --p-color-text-placeholder: var(--p-color-text-placeholder-white);
  --p-color-text-on-color: var(--p-color-text-on-color-white);
  --p-color-text-disabled: var(--p-color-text-disabled-white);
  --p-color-text-info: var(--p-color-text-info-white);
  --p-color-text-success: var(--p-color-text-success-white);
  --p-color-text-warning: var(--p-color-text-warning-white);
  --p-color-text-error: var(--p-color-text-error-white);
  --p-color-text-alert: var(--p-color-text-alert-white);
  --p-color-text-on-brand: var(--p-color-text-on-brand-white);

  /* Icon */

  --p-color-icon-primary: var(--p-color-icon-primary-white);
  --p-color-icon-primary-hover: var(--p-color-icon-primary-hover-white);
  --p-color-icon-primary-active: var(--p-color-icon-primary-active-white);
  --p-color-icon-interactive: var(--p-color-icon-interactive-white);
  --p-color-icon-interactive-hover: var(--p-color-icon-interactive-hover-white);
  --p-color-icon-interactive-pressed: var(
    --p-color-icon-interactive-pressed-white
  );
  --p-color-icon-interactive-active: var(
    --p-color-icon-interactive-active-white
  );
  --p-color-icon-on-color: var(--p-color-icon-on-color-white);
  --p-color-icon-disabled: var(--p-color-icon-disabled-white);
  --p-color-icon-error: var(--p-color-icon-error-white);
  --p-color-icon-success: var(--p-color-icon-success-white);
  --p-color-icon-warning: var(--p-color-icon-warning-white);
  --p-color-icon-info: var(--p-color-icon-info-white);
  --p-color-icon-neutral: var(--p-color-icon-neutral-white);
  --p-color-icon-on-brand: var(--p-color-icon-on-brand-white);

  /* Button */

  --p-color-button-primary: var(--p-color-button-primary-white);
  --p-color-button-primary-hover: var(--p-color-button-primary-hover-white);
  --p-color-button-primary-pressed: var(--p-color-button-primary-pressed-white);
  --p-color-button-brand: var(--p-color-button-brand-white);
  --p-color-button-brand-hover: var(--p-color-button-brand-hover-white);
  --p-color-button-brand-pressed: var(--p-color-button-brand-pressed-white);
  --p-color-button-fill: var(--p-color-button-fill-white);
  --p-color-button-fill-hover: var(--p-color-button-fill-hover-white);
  --p-color-button-fill-pressed: var(--p-color-button-fill-pressed-white);
  --p-color-button-disabled: var(--p-color-button-disabled-white);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(
    --p-color-graphics-illustration-primary-white
  );
  --p-color-graphics-illustration-detail: var(
    --p-color-graphics-illustration-detail-white
  );
  --p-color-graphics-illustration-base: var(
    --p-color-graphics-illustration-base-white
  );
  --p-color-graphics-storebrand-icon-detail: var(
    --p-color-graphics-storebrand-icon-detail-white
  );
  --p-color-graphics-storebrand-icon-outline: var(
    --p-color-graphics-storebrand-icon-outline-white
  );

  /* Static Background & Static Foreground */

  --p-color-static-orange-foreground: var(
    --p-color-static-orange-foreground-white
  );
  --p-color-static-orange-background: var(
    --p-color-static-orange-background-white
  );
  --p-color-static-purple-foreground: var(
    --p-color-static-purple-foreground-white
  );
  --p-color-static-purple-background: var(
    --p-color-static-purple-background-white
  );
  --p-color-static-red-foreground: var(--p-color-static-red-foreground-white);
  --p-color-static-red-background: var(--p-color-static-red-background-white);
  --p-color-static-grey-foreground: var(--p-color-static-grey-foreground-white);
  --p-color-static-grey-background: var(--p-color-static-grey-background-white);
  --p-color-static-risk-filled: var(--p-color-static-risk-filled-white);
  --p-color-static-risk-unfilled: var(--p-color-static-risk-unfilled-white);
  --p-color-static-sustainability-filled: var(
    --p-color-static-sustainability-filled-white
  );
  --p-color-static-sustainability-unfilled: var(
    --p-color-static-sustainability-unfilled-white
  );

  /* States */

  --p-color-states-focus: var(--p-color-states-focus-white);
  --p-color-states-scrim: var(--p-color-states-scrim-white);
  --p-color-states-toggle-off: var(--p-color-states-toggle-off-white);
  --p-color-states-toggle-off-hover: var(
    --p-color-states-toggle-off-hover-white
  );

  /* Surface */

  --p-color-surface-1: var(--p-color-surface-1-white);
  --p-color-surface-2: var(--p-color-surface-2-white);
  --p-color-surface-1-hover: var(--p-color-surface-1-hover-white);
  --p-color-surface-2-hover: var(--p-color-surface-2-hover-white);
  --p-color-surface-inverse: var(--p-color-surface-inverse-white);
  --p-color-surface-inverse-hover: var(--p-color-surface-inverse-hover-white);
  --p-color-surface-inverse-pressed: var(
    --p-color-surface-inverse-pressed-white
  );
  --p-color-surface-selected: var(--p-color-surface-selected-white);
  --p-color-surface-selected-hover: var(--p-color-surface-selected-hover-white);
  --p-color-surface-selected-pressed: var(
    --p-color-surface-selected-pressed-white
  );
  --p-color-surface-selected-active: var(
    --p-color-surface-selected-active-white
  );
  --p-color-surface-error: var(--p-color-surface-error-white);
  --p-color-surface-success: var(--p-color-surface-success-white);
  --p-color-surface-warning: var(--p-color-surface-warning-white);
  --p-color-surface-info: var(--p-color-surface-info-white);
  --p-color-surface-neutral: var(--p-color-surface-neutral-white);
  --p-color-surface-static: var(--p-color-surface-static-white);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-stroke-strong-white);
  --p-color-stroke-strong-hover: var(--p-color-stroke-strong-hover-white);
  --p-color-stroke-strong-pressed: var(--p-color-stroke-strong-pressed-white);
  --p-color-stroke-0: var(--p-color-stroke-0-white);
  --p-color-stroke-1: var(--p-color-stroke-1-white);
  --p-color-stroke-2: var(--p-color-stroke-2-white);
  --p-color-stroke-on-white: var(--p-color-stroke-on-white-white);
  --p-color-stroke-subtle-1: var(--p-color-stroke-subtle-1-white);
  --p-color-stroke-subtle-2: var(--p-color-stroke-subtle-2-white);
  --p-color-stroke-selected: var(--p-color-stroke-selected-white);
  --p-color-stroke-selected-hover: var(--p-color-stroke-selected-hover-white);
  --p-color-stroke-selected-pressed: var(
    --p-color-stroke-selected-pressed-white
  );

  --p-color-stroke-disabled: var(--p-color-stroke-disabled-white);
  --p-color-stroke-error: var(--p-color-stroke-error-white);
  --p-color-stroke-success: var(--p-color-stroke-success-white);
  --p-color-stroke-warning: var(--p-color-stroke-warning-white);

  /* Special inversions */

  --card-background: var(--p-color-surface-1-grey);
}
[data-surface-background-theme='grey'] {
  /* Background */

  --p-color-background: var(--p-color-background-grey);
  --p-color-background-hover: var(--p-color-background-hover-grey);
  --p-color-background-pressed: var(--p-color-background-pressed-grey);
  --p-color-background-active: var(--p-color-background-active-grey);
  --p-color-background-disabled: var(--p-color-background-disabled-grey);

  /* Text */

  --p-color-text-primary: var(--p-color-text-primary-grey);
  --p-color-text-primary-hover: var(--p-color-text-primary-hover-grey);
  --p-color-text-primary-active: var(--p-color-text-primary-active-grey);
  --p-color-text-interactive: var(--p-color-text-interactive-grey);
  --p-color-text-interactive-hover: var(--p-color-text-interactive-hover-grey);
  --p-color-text-interactive-pressed: var(
    --p-color-text-interactive-pressed-grey
  );
  --p-color-text-interactive-active: var(
    --p-color-text-interactive-active-grey
  );
  --p-color-text-secondary: var(--p-color-text-secondary-grey);
  --p-color-text-placeholder: var(--p-color-text-placeholder-grey);
  --p-color-text-on-color: var(--p-color-text-on-color-grey);
  --p-color-text-disabled: var(--p-color-text-disabled-grey);
  --p-color-text-info: var(--p-color-text-info-grey);
  --p-color-text-success: var(--p-color-text-success-grey);
  --p-color-text-warning: var(--p-color-text-warning-grey);
  --p-color-text-error: var(--p-color-text-error-grey);
  --p-color-text-alert: var(--p-color-text-alert-grey);
  --p-color-text-on-brand: var(--p-color-text-on-brand-grey);

  /* Icon */

  --p-color-icon-primary: var(--p-color-icon-primary-grey);
  --p-color-icon-primary-hover: var(--p-color-icon-primary-hover-grey);
  --p-color-icon-primary-active: var(--p-color-icon-primary-active-grey);
  --p-color-icon-interactive: var(--p-color-icon-interactive-grey);
  --p-color-icon-interactive-hover: var(--p-color-icon-interactive-hover-grey);
  --p-color-icon-interactive-pressed: var(
    --p-color-icon-interactive-pressed-grey
  );
  --p-color-icon-interactive-active: var(
    --p-color-icon-interactive-active-grey
  );
  --p-color-icon-on-color: var(--p-color-icon-on-color-grey);
  --p-color-icon-disabled: var(--p-color-icon-disabled-grey);
  --p-color-icon-error: var(--p-color-icon-error-grey);
  --p-color-icon-success: var(--p-color-icon-success-grey);
  --p-color-icon-warning: var(--p-color-icon-warning-grey);
  --p-color-icon-info: var(--p-color-icon-info-grey);
  --p-color-icon-neutral: var(--p-color-icon-neutral-grey);
  --p-color-icon-on-brand: var(--p-color-icon-on-brand-grey);

  /* Button */

  --p-color-button-primary: var(--p-color-button-primary-grey);
  --p-color-button-primary-hover: var(--p-color-button-primary-hover-grey);
  --p-color-button-primary-pressed: var(--p-color-button-primary-pressed-grey);
  --p-color-button-brand: var(--p-color-button-brand-grey);
  --p-color-button-brand-hover: var(--p-color-button-brand-hover-grey);
  --p-color-button-brand-pressed: var(--p-color-button-brand-pressed-grey);
  --p-color-button-fill: var(--p-color-button-fill-grey);
  --p-color-button-fill-hover: var(--p-color-button-fill-hover-grey);
  --p-color-button-fill-pressed: var(--p-color-button-fill-pressed-grey);
  --p-color-button-disabled: var(--p-color-button-disabled-grey);

  /* Graphics Illustration */

  --p-color-graphics-illustration-primary: var(
    --p-color-graphics-illustration-primary-grey
  );
  --p-color-graphics-illustration-detail: var(
    --p-color-graphics-illustration-detail-grey
  );
  --p-color-graphics-illustration-base: var(
    --p-color-graphics-illustration-base-grey
  );
  --p-color-graphics-storebrand-icon-detail: var(
    --p-color-graphics-storebrand-icon-detail-grey
  );
  --p-color-graphics-storebrand-icon-outline: var(
    --p-color-graphics-storebrand-icon-outline-grey
  );

  /* Static Background & Static Foreground */

  --p-color-static-orange-foreground: var(
    --p-color-static-orange-foreground-grey
  );
  --p-color-static-orange-background: var(
    --p-color-static-orange-background-grey
  );
  --p-color-static-purple-foreground: var(
    --p-color-static-purple-foreground-grey
  );
  --p-color-static-purple-background: var(
    --p-color-static-purple-background-grey
  );
  --p-color-static-red-foreground: var(--p-color-static-red-foreground-grey);
  --p-color-static-red-background: var(--p-color-static-red-background-grey);
  --p-color-static-grey-foreground: var(--p-color-static-grey-foreground-grey);
  --p-color-static-grey-background: var(--p-color-static-grey-background-grey);
  --p-color-static-risk-filled: var(--p-color-static-risk-filled-grey);
  --p-color-static-risk-unfilled: var(--p-color-static-risk-unfilled-grey);
  --p-color-static-sustainability-filled: var(
    --p-color-static-sustainability-filled-grey
  );
  --p-color-static-sustainability-unfilled: var(
    --p-color-static-sustainability-unfilled-grey
  );

  /* States */

  --p-color-states-focus: var(--p-color-states-focus-grey);
  --p-color-states-scrim: var(--p-color-states-scrim-grey);
  --p-color-states-toggle-off: var(--p-color-states-toggle-off-grey);
  --p-color-states-toggle-off-hover: var(
    --p-color-states-toggle-off-hover-grey
  );

  /* Surface */

  --p-color-surface-1: var(--p-color-surface-1-grey);
  --p-color-surface-2: var(--p-color-surface-2-grey);
  --p-color-surface-1-hover: var(--p-color-surface-1-hover-grey);
  --p-color-surface-2-hover: var(--p-color-surface-2-hover-grey);
  --p-color-surface-inverse: var(--p-color-surface-inverse-grey);
  --p-color-surface-inverse-hover: var(--p-color-surface-inverse-hover-grey);
  --p-color-surface-inverse-pressed: var(
    --p-color-surface-inverse-pressed-grey
  );
  --p-color-surface-selected: var(--p-color-surface-selected-grey);
  --p-color-surface-selected-hover: var(--p-color-surface-selected-hover-grey);
  --p-color-surface-selected-pressed: var(
    --p-color-surface-selected-pressed-grey
  );
  --p-color-surface-selected-active: var(
    --p-color-surface-selected-active-grey
  );
  --p-color-surface-error: var(--p-color-surface-error-grey);
  --p-color-surface-success: var(--p-color-surface-success-grey);
  --p-color-surface-warning: var(--p-color-surface-warning-grey);
  --p-color-surface-info: var(--p-color-surface-info-grey);
  --p-color-surface-neutral: var(--p-color-surface-neutral-grey);
  --p-color-surface-static: var(--p-color-surface-static-grey);

  /* Strokes */

  --p-color-stroke-strong: var(--p-color-stroke-strong-grey);
  --p-color-stroke-strong-hover: var(--p-color-stroke-strong-hover-grey);
  --p-color-stroke-strong-pressed: var(--p-color-stroke-strong-pressed-grey);
  --p-color-stroke-0: var(--p-color-stroke-0-grey);
  --p-color-stroke-1: var(--p-color-stroke-1-grey);
  --p-color-stroke-2: var(--p-color-stroke-2-grey);
  --p-color-stroke-on-white: var(--p-color-stroke-on-white-grey);
  --p-color-stroke-subtle-1: var(--p-color-stroke-subtle-1-grey);
  --p-color-stroke-subtle-2: var(--p-color-stroke-subtle-2-grey);
  --p-color-stroke-selected: var(--p-color-stroke-selected-grey);
  --p-color-stroke-selected-hover: var(--p-color-stroke-selected-hover-grey);
  --p-color-stroke-selected-pressed: var(
    --p-color-stroke-selected-pressed-grey
  );
  --p-color-stroke-disabled: var(--p-color-stroke-disabled-grey);
  --p-color-stroke-error: var(--p-color-stroke-error-grey);
  --p-color-stroke-success: var(--p-color-stroke-success-grey);
  --p-color-stroke-warning: var(--p-color-stroke-warning-grey);

  /* Special inversions */

  --card-background: var(--p-color-surface-1-white);
}
._rounded_1q2mk_1 {
  border-radius: var(--p-corner-radius-rem-small);
  padding: var(--p-spacing-rem-20);
}

@media (min-width: 600px) {
  ._rounded_1q2mk_1 {
    border-radius: var(--p-corner-radius-rem-small);
    padding: var(--p-spacing-rem-24);
  }
}
.tabBarBase[data-stb-tabs='current'] {
  & .tabs {
    --tab-size: 2.75rem;
    --text-color: var(--p-color-text-primary);
    --font-weight: 400;
    --background-color: none;
    --stroke-color: var(--p-color-stroke-0);
    --stroke-selected-color: var(--p-color-stroke-selected);
    --outline: none;

    border-bottom: var(--p-border-rem-small) solid var(--stroke-color);
    display: inline-block;
    height: var(--tab-size);
    line-height: var(--tab-size);
    outline: var(--outline);
    overflow: auto;
    overflow-y: hidden;
    position: relative;
    scrollbar-width: none;

    &:focus {
      --outline: var(--p-outline);
    }

    & .tabButtons {
      display: flex;
      flex-wrap: nowrap;

      & button {
        background-color: var(--background-color);
        border: none;
        border-radius: var(--p-corner-radius-rem-small)
          var(--p-corner-radius-rem-small) 0 0;
        color: var(--text-color);
        cursor: pointer;
        font-weight: var(--font-weight);
        height: var(--tab-size);
        max-height: var(--tab-size);
        outline: none;
        outline-offset: -0.1875rem;
        padding: 0;

        & .tabButtonText {
          align-items: center;
          box-sizing: border-box;
          display: inline-flex;
          max-height: var(--tab-size);
          padding: 0 var(--p-spacing-rem-16);
          white-space: nowrap;
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            --background-color: var(--p-color-background-hover);
          }
        }

        &:active {
          --background-color: var(--p-color-background-pressed);
        }

        &[aria-selected='true'] {
          --text-color: var(--p-color-text-interactive);
          --font-weight: 600;
        }

        &[aria-disabled='true'] {
          --text-color: var(--p-color-text-disabled);

          pointer-events: none;
        }
      }
    }

    /**
      * Beware: Inline styling is also set based on the animation target.
      */
    & .underlineForTabButton {
      background-color: var(--stroke-selected-color);
      border: none;
      border-radius: var(--p-corner-radius-rem-extreme)
        var(--p-corner-radius-rem-extreme) 0 0;
      bottom: 0;
      height: 0.25rem;
      margin: 0 var(--p-spacing-rem-16);
      position: absolute;
      transform-origin: left center 0;
      transition:
        transform 200ms ease-in-out,
        width 200ms ease-in-out;
    }

    &[data-using-keyboard='true'] {
      --outline: none;

      & button[data-keyboard-focus='true'] {
        outline: var(--p-outline);
      }
    }
  }
}
.breadcrumbs[data-stb-breadcrumbs='current'] {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;

  & > button {
    cursor: pointer;
  }

  /* bold + equal padding for last item */
  & .breadcrumb:last-child {
    pointer-events: none;

    > span {
      text-decoration: none;
    }

    /* hide icon in last item */
    & i {
      display: none;
    }
  }

  & .breadcrumb {
    align-items: center;
    background: transparent;
    border: none;
    box-sizing: border-box;
    color: var(--p-color-text-primary);
    display: flex;
    height: 3rem;
    margin-right: var(--p-spacing-rem-12);
    padding: var(--p-spacing-rem-08) 0;
    position: relative;
    text-decoration: none;
    transition: background-color 0.1s ease;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--p-color-text-primary-hover);
      }
    }

    &:active {
      > span {
        color: var(--p-color-text-interactive);
        text-decoration: none;
      }
    }

    &:focus-visible {
      outline: var(--p-outline);
    }

    > span {
      text-decoration: underline;
      text-decoration-thickness: 0.0625rem;
      text-underline-offset: var(--p-spacing-rem-04);
    }
  }

  .breadcrumb i {
    margin-left: var(--p-spacing-rem-08);
  }

  /* Hide all links and display only the back NavLink on small screens */
  &:has([data-stb-navlink]) {
    .breadcrumb {
      display: none;
    }

    & [data-stb-navlink] {
      display: flex;
      outline-offset: var(--p-outline-offset);
      pointer-events: auto;

      i.navlinkIcon {
        display: inline;
      }
    }

    @media (min-width: 600px) {
      .breadcrumb {
        display: flex;
      }

      & [data-stb-navlink] {
        display: none;
      }
    }
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
._navigationButtons_1ffm0_1 {
  display: inline-flex;
  flex-direction: row;
  margin-top: 32px;
}

._wizardProgress_1ffm0_7 {
  margin-left: 12px;
}

._wizardHeading_1ffm0_11 {
  padding: 16px 0px;
  line-height: 48px;
}

._wizardIngress_1ffm0_16 {
  line-height: 24px;
  font-size: 18px;
  padding-bottom: 24px;
  width: 552px;
}

._line_1ffm0_23 {
  margin-bottom: 48px;
  border: 1px solid #e6e6e6;
  background-color: #e6e6e6;
}

._icon_1ffm0_29 {
  padding-left: 8.5px;
}

@media (max-width: 550px) {
  ._wizardProgress_1ffm0_7 {
    position: absolute;
    top: -32px;
    right: 0;
  }

  ._navigationButtons_1ffm0_1 {
    margin-top: 24px;
    margin-bottom: 16px;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.button[data-stb-button='current'],
.button[data-stb-button-circle='current'] {
  --button-background-color: var(--p-color-button-action-fill);
  --button-color: var(--p-color-text-on-color);
  --button-color-active: var(--p-color-text-on-color);
  --button-border-color: var(--p-color-button-action-fill);
  --button-outline: none;
  --button-height: var(--p-spacing-rem-40);
  --button-font-size: 1rem;
  --button-line-height: 1.375rem; /* 22px */
  --button-icon-size: var(--button-line-height);
  --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-20);

  align-items: center;
  background-color: var(--button-background-color);
  border: var(--p-border-rem-xsmall) solid var(--button-border-color);
  border-radius: var(--p-corner-radius-rem-extreme);
  box-sizing: border-box;
  color: var(--button-color);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--button-font-size);
  height: var(--button-height);
  justify-content: center;
  line-height: var(--line-height);
  outline: var(--button-outline);
  outline-offset: var(--p-outline-offset);
  padding: var(--button-padding);
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;

  .buttonContentContainer {
    align-items: center;
    display: flex;
    gap: var(--p-spacing-rem-04);
    justify-content: center;
    white-space: nowrap;

    .buttonContent {
      padding: 0 var(--p-spacing-rem-04);
    }
  }

  & i {
    font-size: calc(var(--button-icon-size) - 2px);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    text-align: center;
    width: var(--button-icon-size);
  }

  .buttonSpinner {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &:focus-visible {
    --button-outline: var(--p-outline);
  }

  &[data-loading='true'] {
    .buttonContentContainer {
      visibility: hidden;
    }
  }

  &[data-size='large'] {
    --button-height: var(--p-spacing-rem-48);

    @media (min-width: 600px) {
      --button-font-size: 1.125rem; /* 18px */
      --button-line-height: 1.625rem; /* 26px */
    }
  }

  &[data-size='medium'] {
    --button-height: var(--p-spacing-rem-40);
    --button-font-size: 0.875rem; /* 14px */
    --button-line-height: 1.25rem; /* 20px */
    --button-padding: 0.625rem /* 10px */ var(--p-spacing-rem-16);

    @media (min-width: 600px) {
      --button-font-size: 1rem;
      --button-line-height: 1.375rem; /* 22px */
    }
  }

  &[data-size='small'] {
    --button-height: var(--p-spacing-rem-32);
    --button-font-size: 0.75rem; /* 12px */
    --button-line-height: 1rem;
    --button-padding: var(--p-spacing-rem-08) var(--p-spacing-rem-12);

    @media (min-width: 600px) {
      --button-font-size: 0.875rem; /* 14px */
      --button-line-height: 1.125rem; /* 18px */
    }
  }

  &[data-variant='primary'] {
    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-action-fill-hover);
        --button-border-color: var(--p-color-button-action-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-action-fill-active);
      --button-border-color: var(--p-color-button-action-fill-active);
    }
  }

  &[data-variant='secondary'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-strong);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='subtle'] {
    --button-color: var(--p-color-text-primary);
    --button-background-color: transparent;
    --button-border-color: var(--p-color-stroke-subtle-0);

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-border-color: var(--p-color-stroke-disabled);
    }

    &[data-loading='true'] {
      --button-background-color: transparent;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-primary-hover);
        --button-border-color: var(--p-color-stroke-strong-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-primary-active);
      --button-border-color: var(--p-color-stroke-strong-pressed);
    }
  }

  &[data-variant='tertiary'] {
    --button-color: var(--p-color-text-interactive);
    --button-background-color: transparent;
    --button-border-color: transparent;

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-background-hover);
        --button-color: var(--p-color-text-interactive-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-background-pressed);
      --button-color: var(--p-color-text-interactive-active);
    }

    &:focus-visible {
      --button-border-color: transparent;
    }
  }

  &[data-variant='brand'] {
    --button-background-color: var(--p-color-button-brand-fill);
    --button-color: var(--p-color-text-on-color);
    --button-border-color: var(--p-color-button-brand-fill);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --button-background-color: var(--p-color-button-brand-fill-hover);
        --button-border-color: var(--p-color-button-brand-fill-hover);
      }
    }

    &:active {
      --button-background-color: var(--p-color-button-brand-fill-active);
      --button-border-color: var(--p-color-button-brand-fill-active);
    }

    &[disabled] {
      --button-color: var(--p-color-text-disabled);
      --button-background-color: var(--p-color-button-disabled);
      --button-border-color: var(--p-color-button-disabled);
    }
  }

  &[disabled] {
    pointer-events: none;
  }
}
/* Main styling is inherited from button */
.buttonCircle[data-stb-button-circle='current'] {
  --button-size: var(--button-height);

  height: var(--button-size);
  padding: 0;
  width: var(--button-size);
}
.buttonIcon[data-stb-button-icon='current'] {
  --button-icon-background-color: transparent;
  --button-icon-color: var(--p-color-icon-primary);
  --button-icon-outline: none;
  --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

  align-items: center;
  background-color: var(--button-icon-background-color);
  border: none;
  border-radius: 0.125rem;
  box-sizing: border-box;
  color: var(--button-icon-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  max-height: var(--button-icon-size);
  max-width: var(--button-icon-size);
  min-height: var(--button-icon-size);
  min-width: var(--button-icon-size);
  outline: var(--button-icon-outline);
  outline-offset: var(--p-outline-offset);
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: var(--p-transition-duration);
  transition-property: border, background-color, color;
  white-space: nowrap;
  width: var(--button-icon-size);

  & > i {
    font-size: var(--button-icon-size);
    height: var(--button-icon-size);
    line-height: var(--button-icon-size);
    width: var(--button-icon-size);
  }

  &:focus-visible {
    --button-icon-outline: var(--p-outline);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --button-icon-color: var(--p-color-icon-primary-hover);
    }
  }

  &:active {
    --button-icon-color: var(--p-color-icon-primary-active);
  }

  &[data-size='xlarge'] {
    --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.75rem, 3vw, 1.75rem);
    }
  }

  &[data-size='large'] {
    --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.625rem, 3vw, 1.625rem);
    }
  }

  &[data-size='medium'] {
    --button-icon-size: clamp(1.25rem, 3vw, 1.25rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.375rem, 3vw, 1.375rem);
    }
  }

  &[data-size='small'] {
    --button-icon-size: clamp(1rem, 3vw, 1rem);

    @media (min-width: 600px) {
      --button-icon-size: clamp(1.125rem, 3vw, 1.125rem);
    }
  }

  &[disabled] {
    --button-icon-color: var(--p-color-icon-disabled);

    pointer-events: none;
  }
}
.systemIconBase[data-stb-system-icon='current'] {
  flex-shrink: 0;
  font-family: 'Storebrand Symbols';
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  white-space: nowrap;
  width: 1rem;

  /* An option to turn on the legacy System Icons, if necessary. */
  &[data-legacy='true'] {
    font-family: 'System-Icons' !important;
  }

  @media (min-width: 600px) {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
  }
}
.iconBase[data-stb-icon='current'] {
  display: inline-flex;

  & svg {
    height: 100%;
    width: 100%;
  }

  & img {
    height: 100%;
    width: 100%;
  }
}
.illustrationBase[data-stb-illustration='current'] {
  display: inline-flex;

  &.autoHeight {
    img {
      height: auto;
      width: auto;
    }
  }

  & img {
    max-width: 100%;
    vertical-align: middle;
  }
}
.spinnerContainer[data-stb-spinner='current'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --spinner-container-size: var(--p-spacing-rem-96);
  --spinner-radius: 44;
  --spinner-perimeter: calc(2 * pi * var(--spinner-radius));
  --spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);
  --spinner-perimeter-fraction: calc(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-foreground);
  --text-color: var(--p-color-text-primary);

  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--p-spacing-08);
  width: var(--spinner-container-size);

  & svg {
    height: 100%;
    width: 100%;
  }

  p {
    font-size: 1rem;
    white-space: nowrap;
  }

  &.xxsmall {
    --spinner-radius: 8;
    --spinner-container-size: var(--p-spacing-rem-16);
  }

  &.xsmall {
    --spinner-radius: 10;
    --spinner-container-size: 1.375rem;
  }

  &.small {
    --spinner-radius: 11;
    --spinner-container-size: var(--p-spacing-rem-24);
  }

  &.medium {
    --spinner-radius: 24;
    --spinner-container-size: var(--p-spacing-rem-48);

    p {
      font-size: 0.875rem;
    }
  }

  &.onRed {
    --spinner-track-color: var(--p-color-static-grey-background);
    --spinner-ticker-color: var(--p-color-static-grey-foreground);
    --text-color: var(--p-color-text-primary);
  }

  & .spinner {
    animation: loading-indicator-spinner-rotate 5s linear infinite;
  }

  & .spinnerTrack {
    stroke: var(--spinner-track-color);
  }

  & .spinnerInMotion {
    animation: loading-indicator-spinner-spin infinite 6s ease-in-out;
    stroke: var(--spinner-ticker-color);
    stroke-dasharray: var(--spinner-perimeter);
    transform-origin: var(--spinner-radius) var(--spinner-radius) 0;
  }
}

@keyframes loading-indicator-spinner-spin {
  0% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}
.dialogFloatingOverlay[data-stb-dialog='current'] {
  align-items: center;
  background-color: rgb(25 25 25 / 60%);
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: var(--p-z-index-dialog);

  @media (prefers-reduced-motion) {
    animation: none !important;
    transition: none !important;
  }
}

.dialogBase[data-stb-dialog-base='current'] {
  background: var(--p-color-background);
  border-radius: var(--p-corner-radius-rem-medium);
  /* stylelint-disable-next-line custom-property-pattern */
  box-shadow: var(--p-shadow-aboveScrim);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 5rem);
  max-width: 35rem;
  min-width: 18rem;
  opacity: 1;
  padding: var(--p-spacing-rem-32);
  width: 100%;
  z-index: var(--p-z-index-input);

  @media only screen and (max-width: 720px) {
    transform: none !important; /* !important is needed to overwrite framer-motion inline-style. */
  }

  & .dialog-title {
    margin-bottom: var(--p-spacing-rem-08);
  }

  & .dialogContent {
    margin-bottom: var(--p-spacing-rem-24);
    overflow: auto;
  }

  & .dialogFooter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p-spacing-rem-08);
  }
}