@charset "UTF-8";
/* Spacing */
:root,
.traton {
  /* Radius tokens */
  --radius-narrow: var(--unit-4);
  --radius-soft: var(--unit-8);
  --radius-rounded: var(--unit-32);
  --radius-circle: 500px;
  /* Radius for-surface tokens */
  --radius-surface-clickable: var(--radius-full);
  --radius-surface-field: var(--unit-2);
  /* Radius for-area tokens */
  --radius-area-large: var(--unit-8);
  --radius-area-small: var(--unit-4);
  /* Space tokens */
  --space-tiny: var(--unit-4);
  --space-small: var(--unit-16);
  --space-medium: var(--unit-24);
  --space-large: var(--unit-48);
  --space-huge: var(--unit-80);
}

/* Typography */
/* === TRATON Type Display === */
@font-face {
  font-family: "TRATON Type Display";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeDisplay-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Display";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeDisplay-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
}
/* === TRATON Type Text === */
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-MediumItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-SemiBold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
}
@font-face {
  font-family: "TRATON Type Text";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("./assets/fonts/traton/TratonTypeText-BoldItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
}
.traton {
  /* Font size tokens */
  --super-type-01-font-size: 216px;
  --super-type-02-font-size: 156px;
  --super-type-03-font-size: 112px;
  --expressive-headline-01-font-size: 80px;
  --expressive-headline-02-font-size: 56px;
  --headline-01-font-size: 40px;
  --headline-02-font-size: 32px;
  --headline-03-font-size: 24px;
  --headline-04-font-size: 20px;
  --headline-05-font-size: 16px;
  --headline-06-font-size: 14px;
  --headline-07-font-size: 14px;
  --paragraph-01-font-size: 24px;
  --paragraph-02-font-size: 20px;
  --body-01-font-size: 16px;
  --body-02-font-size: 14px;
  --body-link-01-font-size: 16px;
  --body-link-02-font-size: 14px;
  --detail-01-font-size: 16px;
  --detail-02-font-size: 14px;
  --detail-03-font-size: 14px;
  --detail-04-font-size: 12px;
  --detail-05-font-size: 12px;
  --detail-06-font-size: 10px;
  --detail-07-font-size: 10px;
  /* Typography Line Height Tokens */
  --super-type-01-line-height: 227px;
  --super-type-02-line-height: 164px;
  --super-type-03-line-height: 106px;
  --expressive-headline-01-line-height: 84px;
  --expressive-headline-02-line-height: 59px;
  --headline-01-line-height: 42px;
  --headline-02-line-height: 40px;
  --headline-03-line-height: 30px;
  --headline-04-line-height: 25px;
  --headline-05-line-height: 22px;
  --headline-06-line-height: 20px;
  --headline-07-line-height: 18px;
  --paragraph-01-line-height: 30px;
  --paragraph-02-line-height: 25px;
  --body-01-line-height: 22px;
  --body-02-line-height: 20px;
  --body-link-01-line-height: 22px;
  --body-link-02-line-height: 20px;
  --detail-01-line-height: 22px;
  --detail-02-line-height: 16px;
  --detail-03-line-height: 20px;
  --detail-04-line-height: 17px;
  --detail-05-line-height: 17px;
  --detail-06-line-height: 14px;
  --detail-07-line-height: 14px;
  /* Typography Font Family Tokens */
  --super-type-01-font-family: 'TRATON Type Display', verdana;
  --super-type-02-font-family: 'TRATON Type Display', verdana;
  --super-type-03-font-family: 'TRATON Type Display', verdana;
  --expressive-headline-01-font-family: 'TRATON Type Display', verdana;
  --expressive-headline-02-font-family: 'TRATON Type Display', verdana;
  --headline-01-font-family: 'TRATON Type Display', verdana;
  --headline-02-font-family: 'TRATON Type Display', verdana;
  --headline-03-font-family: 'TRATON Type Display', verdana;
  --headline-04-font-family: 'TRATON Type Display', verdana;
  --headline-05-font-family: 'TRATON Type Text', verdana;
  --headline-06-font-family: 'TRATON Type Text', verdana;
  --headline-07-font-family: 'TRATON Type Text', verdana;
  --paragraph-01-font-family: 'TRATON Type Display', verdana;
  --paragraph-02-font-family: 'TRATON Type Display', verdana;
  --body-01-font-family: 'TRATON Type Text', verdana;
  --body-02-font-family: 'TRATON Type Text', verdana;
  --body-link-01-font-family: 'TRATON Type Text', verdana;
  --body-link-02-font-family: 'TRATON Type Text', verdana;
  --detail-01-font-family: 'TRATON Type Text', verdana;
  --detail-02-font-family: 'TRATON Type Text', verdana;
  --detail-03-font-family: 'TRATON Type Text', verdana;
  --detail-04-font-family: 'TRATON Type Text', verdana;
  --detail-05-font-family: 'TRATON Type Text', verdana;
  --detail-06-font-family: 'TRATON Type Text', verdana;
  --detail-07-font-family: 'TRATON Type Text', verdana;
  /* Typography Font Weight Tokens */
  --super-type-01-font-weight: normal;
  --super-type-02-font-weight: normal;
  --super-type-03-font-weight: normal;
  --expressive-headline-01-font-weight: normal;
  --expressive-headline-02-font-weight: normal;
  --headline-01-font-weight: normal;
  --headline-02-font-weight: normal;
  --headline-03-font-weight: normal;
  --headline-04-font-weight: normal;
  --headline-05-font-weight: 600;
  --headline-06-font-weight: 600;
  --headline-07-font-weight: 600;
  --paragraph-01-font-weight: normal;
  --paragraph-02-font-weight: normal;
  --body-01-font-weight: normal;
  --body-02-font-weight: normal;
  --body-link-01-font-weight: normal;
  --body-link-02-font-weight: normal;
  --detail-01-font-weight: normal;
  --detail-02-font-weight: normal;
  --detail-03-font-weight: normal;
  --detail-04-font-weight: 600;
  --detail-05-font-weight: normal;
  --detail-06-font-weight: 600;
  --detail-07-font-weight: normal;
  /* Typography Letter-Spacing (Kerning) Tokens */
  --super-type-01-letter-spacing: 1.08px;
  --super-type-02-letter-spacing: 0.78px;
  --super-type-03-letter-spacing: 0.56px;
  --expressive-headline-01-letter-spacing: 0.4px;
  --expressive-headline-02-letter-spacing: 0.28px;
  --headline-01-letter-spacing: 0;
  --headline-02-letter-spacing: 0;
  --headline-03-letter-spacing: 0;
  --headline-04-letter-spacing: 0;
  --headline-05-letter-spacing: 0;
  --headline-06-letter-spacing: 0;
  --headline-07-letter-spacing: 0;
  --paragraph-01-letter-spacing: 0;
  --paragraph-02-letter-spacing: 0;
  --body-01-letter-spacing: 0;
  --body-02-letter-spacing: 0;
  --body-link-01-letter-spacing: 0;
  --body-link-02-letter-spacing: 0;
  --detail-01-letter-spacing: 0;
  --detail-02-letter-spacing: 0;
  --detail-03-letter-spacing: 0;
  --detail-04-letter-spacing: 0.48px;
  --detail-05-letter-spacing: 0;
  --detail-06-letter-spacing: 0.4px;
  --detail-07-letter-spacing: 0;
  /* Text transform tokens */
  --super-type-01-text-transform: uppercase;
  --super-type-02-text-transform: uppercase;
  --super-type-03-text-transform: uppercase;
  --expressive-headline-01-text-transform: uppercase;
  --expressive-headline-02-text-transform: uppercase;
  --headline-01-text-transform: none;
  --headline-02-text-transform: none;
  --headline-03-text-transform: none;
  --headline-04-text-transform: none;
  --headline-05-text-transform: none;
  --headline-06-text-transform: none;
  --headline-07-text-transform: none;
  --paragraph-01-text-transform: none;
  --paragraph-02-text-transform: none;
  --body-01-text-transform: none;
  --body-02-text-transform: none;
  --body-link-01-text-transform: none;
  --body-link-02-text-transform: none;
  --detail-01-text-transform: none;
  --detail-02-text-transform: none;
  --detail-03-text-transform: none;
  --detail-04-text-transform: uppercase;
  --detail-05-text-transform: none;
  --detail-06-text-transform: uppercase;
  --detail-07-text-transform: none;
}

/* Traton primitive tokens */
/**
 * Do not edit directly, this file was auto-generated.
 */
:root {
  --traton-color-base-black: #000;
  --traton-color-base-white: #fff;
  --traton-color-base-white-warm: #fcfbf7;
  --traton-color-transparent-200: #1a1a1926;
  --traton-color-transparent-400: #1a1a195c;
  --traton-color-transparent-500: #1a1a1980;
  --traton-color-transparent-600: #1a1a199e;
  --traton-color-transparent-700: #1a1a19c2;
  --traton-color-transparent-inverse-200: #d9edf054;
  --traton-color-transparent-inverse-400: #d9edf07d;
  --traton-color-transparent-inverse-500: #d9edf0a1;
  --traton-color-transparent-inverse-600: #d9edf0bf;
  --traton-color-transparent-inverse-700: #d9edf0de;
  --traton-color-transparent-invisible-light: #fff0;
  --traton-color-transparent-invisible-dark: #0000;
  --traton-color-transparent-scrim-light: #0006;
  --traton-color-transparent-scrim-dark: #0009;
  --traton-color-blue-50: #f8fcfc;
  --traton-color-blue-100: #e9f5f6;
  --traton-color-blue-150: #d9edf0;
  --traton-color-blue-200: #b3dce1;
  --traton-color-blue-300: #8ccad2;
  --traton-color-blue-400: #66b8c4;
  --traton-color-blue-500: #2d9ead;
  --traton-color-blue-600: #008294;
  --traton-color-blue-700: #006371;
  --traton-color-blue-800: #004852;
  --traton-color-blue-850: #003137;
  --traton-color-blue-900: #002429;
  --traton-color-blue-950: #001d21;
  --traton-color-blue-1000: #001214;
  --traton-color-green-50: #d1fad1;
  --traton-color-green-100: #adebb1;
  --traton-color-green-150: #81d585;
  --traton-color-green-200: #5abf5c;
  --traton-color-green-300: #3ba63f;
  --traton-color-green-400: #38943c;
  --traton-color-green-500: #318035;
  --traton-color-green-600: #2b6c2e;
  --traton-color-green-700: #235727;
  --traton-color-green-800: #1d441f;
  --traton-color-green-850: #153217;
  --traton-color-green-900: #102311;
  --traton-color-green-950: #0d1b0e;
  --traton-color-green-1000: #080c08;
  --traton-color-grey-50: #fcfbf7;
  --traton-color-grey-100: #f6f3e9;
  --traton-color-grey-150: #ebe7dd;
  --traton-color-grey-200: #d6d4c9;
  --traton-color-grey-300: #c2bfb6;
  --traton-color-grey-400: #a6a49c;
  --traton-color-grey-500: #8c8a84;
  --traton-color-grey-600: #73716c;
  --traton-color-grey-700: #595854;
  --traton-color-grey-800: #454441;
  --traton-color-grey-850: #333230;
  --traton-color-grey-900: #252423;
  --traton-color-grey-950: #1a1a19;
  --traton-color-grey-1000: #100f0f;
  --traton-color-red-50: #ffe0e0;
  --traton-color-red-100: #f7baba;
  --traton-color-red-150: #f28686;
  --traton-color-red-200: #ec5655;
  --traton-color-red-300: #d83b3a;
  --traton-color-red-400: #bc302f;
  --traton-color-red-500: #a02f2e;
  --traton-color-red-600: #852929;
  --traton-color-red-700: #6d2323;
  --traton-color-red-800: #551b1b;
  --traton-color-red-850: #411616;
  --traton-color-red-900: #311111;
  --traton-color-red-950: #240d0d;
  --traton-color-red-1000: #140808;
  --traton-color-yellow-50: #fff6db;
  --traton-color-yellow-100: #ffe9aa;
  --traton-color-yellow-150: #ffdc7a;
  --traton-color-yellow-200: #ffd04a;
  --traton-color-yellow-300: #ffc00d;
  --traton-color-yellow-400: #e5ad0c;
  --traton-color-yellow-500: #bf900a;
  --traton-color-yellow-600: #997308;
  --traton-color-yellow-700: #735606;
  --traton-color-yellow-800: #594305;
  --traton-color-yellow-850: #433204;
  --traton-color-yellow-900: #302403;
  --traton-color-yellow-950: #241b00;
  --traton-color-yellow-1000: #1a1300;
  --traton-font-family-default: traton type text;
  --traton-font-family-display: traton type display;
  --traton-font-weight-semi-bold: 600;
  --traton-font-weight-medium: 500;
  --traton-font-weight-regular: 400;
  --traton-opacity-0: 0;
  --traton-opacity-25: 25;
  --traton-opacity-50: 50;
  --traton-opacity-75: 75;
  --traton-opacity-100: 100;
  --traton-unit-0: 0;
  --traton-unit-1: 1;
  --traton-unit-2: 2;
  --traton-unit-4: 4;
  --traton-unit-8: 8;
  --traton-unit-12: 12;
  --traton-unit-16: 16;
  --traton-unit-20: 20;
  --traton-unit-24: 24;
  --traton-unit-32: 32;
  --traton-unit-40: 40;
  --traton-unit-48: 48;
  --traton-unit-56: 56;
  --traton-unit-64: 64;
  --traton-unit-80: 80;
  --traton-unit-96: 96;
  --traton-unit-120: 120;
  --traton-unit-9999: 9999;
  --traton-color-transparent-950: var(--traton-color-blue-950);
  --traton-color-transparent-inverse-950: var(--traton-color-base-white);
}

/* Traton color tokens */
/**
 * Do not edit directly, this file was auto-generated.
 */
.traton,
.traton .tds-mode-light,
.traton .tl-mode-light {
  --color-background-base: var(--traton-color-grey-50);
  --color-background-layer-01: var(--traton-color-grey-100);
  --color-background-layer-02: var(--traton-color-grey-50);
  --color-background-layer-03: var(--traton-color-grey-100);
  --color-background-overlay: var(--traton-color-transparent-scrim-light);
  --color-background-top: var(--traton-color-grey-50);
  --color-background-none: var(--traton-color-transparent-invisible-light);
  --color-background-inverse-base: var(--traton-color-grey-1000);
  --color-background-inverse-layer-01: var(--traton-color-grey-950);
  --color-background-inverse-layer-02: var(--traton-color-grey-900);
  --color-background-inverse-layer-03: var(--traton-color-grey-850);
  --color-background-inverse-overlay: var(--traton-color-transparent-scrim-light);
  --color-background-inverse-top: var(--traton-color-grey-900);
  --color-background-inverse-none: var(--traton-color-transparent-invisible-dark);
  --color-border-defined: var(--traton-color-transparent-700);
  --color-border-soft: var(--traton-color-transparent-600);
  --color-border-subtle: var(--traton-color-transparent-500);
  --color-border-disabled: var(--traton-color-transparent-400);
  --color-border-discrete: var(--traton-color-transparent-200);
  --color-border-none: var(--traton-color-transparent-invisible-light);
  --color-border-inverse-defined: var(--traton-color-transparent-inverse-700);
  --color-border-inverse-soft: var(--traton-color-transparent-inverse-600);
  --color-border-inverse-subtle: var(--traton-color-transparent-inverse-500);
  --color-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
  --color-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
  --color-border-inverse-none: var(--traton-color-transparent-invisible-dark);
  --color-icon-base: var(--traton-color-base-black);
  --color-icon-brand: var(--traton-color-blue-950);
  --color-icon-defined: var(--traton-color-transparent-700);
  --color-icon-soft: var(--traton-color-transparent-600);
  --color-icon-subtle: var(--traton-color-transparent-500);
  --color-icon-disabled: var(--traton-color-transparent-400);
  --color-icon-discrete: var(--traton-color-transparent-200);
  --color-icon-inverse-base: var(--traton-color-base-black);
  --color-icon-inverse-brand: var(--traton-color-blue-950);
  --color-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
  --color-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
  --color-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
  --color-icon-inverse-disabled: var(--traton-color-transparent-inverse-400);
  --color-icon-inverse-discrete: var(--traton-color-transparent-inverse-200);
  --color-system-info-strong: var(--traton-color-blue-800);
  --color-system-info-defined: var(--traton-color-blue-800);
  --color-system-info-default: var(--traton-color-blue-500);
  --color-system-info-subtle: var(--traton-color-blue-400);
  --color-system-info-discrete: var(--traton-color-blue-150);
  --color-system-success-strong: var(--traton-color-green-850);
  --color-system-success-defined: var(--traton-color-green-500);
  --color-system-success-default: var(--traton-color-green-300);
  --color-system-success-subtle: var(--traton-color-green-200);
  --color-system-success-discrete: var(--traton-color-green-50);
  --color-system-warning-strong: var(--traton-color-yellow-800);
  --color-system-warning-defined: var(--traton-color-yellow-600);
  --color-system-warning-default: var(--traton-color-yellow-300);
  --color-system-warning-subtle: var(--traton-color-yellow-200);
  --color-system-warning-discrete: var(--traton-color-yellow-100);
  --color-system-danger-strong: var(--traton-color-red-850);
  --color-system-danger-defined: var(--traton-color-red-500);
  --color-system-danger-default: var(--traton-color-red-300);
  --color-system-danger-subtle: var(--traton-color-red-200);
  --color-system-danger-discrete: var(--traton-color-red-50);
  --color-text-base: var(--traton-color-base-black);
  --color-text-brand: var(--traton-color-blue-950);
  --color-text-defined: var(--traton-color-transparent-700);
  --color-text-soft: var(--traton-color-transparent-600);
  --color-text-subtle: var(--traton-color-transparent-500);
  --color-text-disabled: var(--traton-color-transparent-400);
  --color-text-discrete: var(--traton-color-transparent-200);
  --color-text-inverse-brand: var(--traton-color-base-white);
  --color-text-inverse-defined: var(--traton-color-transparent-inverse-700);
  --color-text-inverse-soft: var(--traton-color-transparent-inverse-600);
  --color-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
  --color-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
  --color-text-inverse-discrete: var(--traton-color-transparent-inverse-200);
  --color-border-strong: var(--traton-color-transparent-950);
  --color-border-inverse-strong: var(--traton-color-transparent-inverse-950);
  --color-icon-strong: var(--traton-color-transparent-950);
  --color-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
  --color-text-strong: var(--traton-color-transparent-950);
  --color-text-inverse-base: var(--scania-color-base-white);
  --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.traton .tds-mode-dark,
.traton .tl-mode-dark {
  --color-background-base: var(--traton-color-blue-1000);
  --color-background-layer-01: var(--traton-color-blue-950);
  --color-background-layer-02: var(--traton-color-blue-900);
  --color-background-layer-03: var(--traton-color-blue-850);
  --color-background-overlay: var(--traton-color-transparent-scrim-dark);
  --color-background-top: var(--traton-color-blue-900);
  --color-background-none: var(--traton-color-transparent-invisible-dark);
  --color-background-inverse-base: var(--traton-color-blue-50);
  --color-background-inverse-layer-01: var(--traton-color-blue-100);
  --color-background-inverse-layer-02: var(--traton-color-blue-150);
  --color-background-inverse-layer-03: var(--traton-color-blue-200);
  --color-background-inverse-overlay: var(--traton-color-transparent-scrim-dark);
  --color-background-inverse-top: var(--traton-color-blue-50);
  --color-background-inverse-none: var(--traton-color-transparent-invisible-light);
  --color-border-defined: var(--traton-color-transparent-inverse-700);
  --color-border-soft: var(--traton-color-transparent-inverse-600);
  --color-border-subtle: var(--traton-color-transparent-inverse-500);
  --color-border-disabled: var(--traton-color-transparent-inverse-400);
  --color-border-discrete: var(--traton-color-transparent-inverse-200);
  --color-border-none: var(--traton-color-transparent-invisible-dark);
  --color-border-inverse-defined: var(--traton-color-transparent-700);
  --color-border-inverse-soft: var(--traton-color-transparent-600);
  --color-border-inverse-subtle: var(--traton-color-transparent-500);
  --color-border-inverse-disabled: var(--traton-color-transparent-400);
  --color-border-inverse-discrete: var(--traton-color-transparent-200);
  --color-border-inverse-none: var(--traton-color-transparent-invisible-light);
  --color-icon-base: var(--traton-color-base-white);
  --color-icon-brand: var(--traton-color-base-white);
  --color-icon-defined: var(--traton-color-transparent-inverse-700);
  --color-icon-soft: var(--traton-color-transparent-inverse-600);
  --color-icon-subtle: var(--traton-color-transparent-inverse-500);
  --color-icon-disabled: var(--traton-color-transparent-inverse-400);
  --color-icon-discrete: var(--traton-color-transparent-inverse-200);
  --color-icon-inverse-base: var(--traton-color-base-white);
  --color-icon-inverse-brand: var(--traton-color-base-white);
  --color-icon-inverse-defined: var(--traton-color-transparent-700);
  --color-icon-inverse-soft: var(--traton-color-transparent-600);
  --color-icon-inverse-subtle: var(--traton-color-transparent-500);
  --color-icon-inverse-disabled: var(--traton-color-transparent-400);
  --color-icon-inverse-discrete: var(--traton-color-transparent-200);
  --color-system-info-strong: var(--traton-color-blue-100);
  --color-system-info-defined: var(--traton-color-blue-200);
  --color-system-info-default: var(--traton-color-blue-500);
  --color-system-info-subtle: var(--traton-color-blue-600);
  --color-system-info-discrete: var(--traton-color-blue-850);
  --color-system-success-strong: var(--traton-color-green-50);
  --color-system-success-defined: var(--traton-color-green-200);
  --color-system-success-default: var(--traton-color-green-300);
  --color-system-success-subtle: var(--traton-color-green-400);
  --color-system-success-discrete: var(--traton-color-green-850);
  --color-system-warning-strong: var(--traton-color-yellow-100);
  --color-system-warning-defined: var(--traton-color-yellow-200);
  --color-system-warning-default: var(--traton-color-yellow-300);
  --color-system-warning-subtle: var(--traton-color-yellow-400);
  --color-system-warning-discrete: var(--traton-color-yellow-800);
  --color-system-danger-strong: var(--traton-color-red-50);
  --color-system-danger-defined: var(--traton-color-red-100);
  --color-system-danger-default: var(--traton-color-red-300);
  --color-system-danger-subtle: var(--traton-color-red-500);
  --color-system-danger-discrete: var(--traton-color-red-850);
  --color-text-base: var(--traton-color-base-white);
  --color-text-brand: var(--traton-color-base-white);
  --color-text-defined: var(--traton-color-transparent-inverse-700);
  --color-text-soft: var(--traton-color-transparent-inverse-600);
  --color-text-subtle: var(--traton-color-transparent-inverse-500);
  --color-text-disabled: var(--traton-color-transparent-inverse-400);
  --color-text-discrete: var(--traton-color-transparent-inverse-200);
  --color-text-inverse-base: var(--traton-color-base-black);
  --color-text-inverse-defined: var(--traton-color-transparent-700);
  --color-text-inverse-soft: var(--traton-color-transparent-600);
  --color-text-inverse-subtle: var(--traton-color-transparent-500);
  --color-text-inverse-disabled: var(--traton-color-transparent-400);
  --color-text-inverse-discrete: var(--traton-color-transparent-200);
  --color-border-strong: var(--traton-color-transparent-inverse-950);
  --color-border-inverse-strong: var(--traton-color-transparent-950);
  --color-icon-strong: var(--traton-color-transparent-inverse-950);
  --color-icon-inverse-strong: var(--traton-color-transparent-950);
  --color-text-strong: var(--traton-color-transparent-inverse-950);
  --color-text-inverse-brand: var(--traton-color-transparent-950);
  --color-text-inverse-strong: var(--traton-color-transparent-950);
}

/* Traton logotype tokens */
:root {
  --traton-logotype-white-png: url('https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-white.png');
  --traton-logotype-white-png-local: url('./assets/logos/traton/traton-logotype-white.png');
  --traton-logotype-white-svg: url('https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-white.svg');
  --traton-logotype-white-svg-local: url('./assets/logos/traton/traton-logotype-white.svg');
  --traton-logotype-black-png: url('https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-black.png');
  --traton-logotype-black-png-local: url('./assets/logos/traton/traton-logotype-black.png');
  --traton-logotype-black-svg: url('https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-black.svg');
  --traton-logotype-black-svg-local: url('./assets/logos/traton/traton-logotype-black.svg');
  --traton-logotype-blue-png: url('https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-blue.png');
  --traton-logotype-blue-png-local: url('./assets/logos/traton/traton-logotype-blue.png');
  --traton-logotype-blue-svg: url('https://cdn.digitaldesign.scania.com/logotype/multibrand/traton/traton-logotype-blue.svg');
  --traton-logotype-blue-svg-local: url('./assets/logos/traton/traton-logotype-blue.svg');
}

/* Traton dimension tokens */
/**
 * Do not edit directly, this file was auto-generated.
 */
.traton {
  --dimension-radius-focus-width: var(--traton-unit-4);
  --dimension-radius-narrow: var(--traton-unit-4);
  --dimension-radius-soft: var(--traton-unit-8);
  --dimension-radius-rounded: var(--traton-unit-32);
  --dimension-radius-circle: var(--traton-unit-9999);
  --dimension-radius-for-surface-clickable: var(--traton-unit-9999);
  --dimension-radius-for-surface-field: var(--traton-unit-2);
  --dimension-radius-for-surface-inverse: var(--traton-unit-2);
  --dimension-radius-for-area-large: var(--traton-unit-8);
  --dimension-radius-for-area-small: var(--traton-unit-4);
  --dimension-space-tiny: var(--traton-unit-4);
  --dimension-space-small: var(--traton-unit-16);
  --dimension-space-medium: var(--traton-unit-24);
  --dimension-space-large: var(--traton-unit-48);
  --dimension-space-huge: var(--traton-unit-80);
}

/* Traton typography tokens */
/**
 * Do not edit directly, this file was auto-generated.
 */
.traton {
  --type-display-01-font-size: 216;
  --type-display-01-line-height: 227;
  --type-display-01-letter-spacing: 1.08;
  --type-display-01-text-transform: uppercase;
  --type-display-02-font-size: 156;
  --type-display-02-line-height: 164;
  --type-display-02-letter-spacing: 0.78;
  --type-display-02-text-transform: uppercase;
  --type-display-03-font-size: 112;
  --type-display-03-line-height: 118;
  --type-display-03-letter-spacing: 0.56;
  --type-display-03-text-transform: uppercase;
  --type-display-04-font-size: 80;
  --type-display-04-line-height: 84;
  --type-display-04-letter-spacing: 0.4;
  --type-display-04-text-transform: uppercase;
  --type-display-05-font-size: 56;
  --type-display-05-line-height: 59;
  --type-display-05-letter-spacing: 0.28;
  --type-display-05-text-transform: uppercase;
  --type-headline-01-font-size: 40;
  --type-headline-01-line-height: 42;
  --type-headline-01-letter-spacing: 0;
  --type-headline-01-text-transform: none;
  --type-headline-02-font-size: 32;
  --type-headline-02-line-height: 40;
  --type-headline-02-letter-spacing: 0;
  --type-headline-02-text-transform: none;
  --type-headline-03-font-size: 24;
  --type-headline-03-line-height: 30;
  --type-headline-03-letter-spacing: 0;
  --type-headline-03-text-transform: none;
  --type-headline-04-font-size: 20;
  --type-headline-04-line-height: 25;
  --type-headline-04-letter-spacing: 0;
  --type-headline-04-text-transform: none;
  --type-headline-05-font-size: 16;
  --type-headline-05-line-height: 22;
  --type-headline-05-letter-spacing: 0;
  --type-headline-05-text-transform: none;
  --type-headline-06-font-size: 14;
  --type-headline-06-line-height: 20;
  --type-headline-06-letter-spacing: 0;
  --type-headline-06-text-transform: none;
  --type-paragraph-01-font-size: 24;
  --type-paragraph-01-line-height: 30;
  --type-paragraph-01-letter-spacing: 0;
  --type-paragraph-01-text-transform: none;
  --type-paragraph-02-font-size: 20;
  --type-paragraph-02-line-height: 25;
  --type-paragraph-02-letter-spacing: 0;
  --type-paragraph-02-text-transform: none;
  --type-body-01-font-size: 16;
  --type-body-01-line-height: 22;
  --type-body-01-letter-spacing: 0;
  --type-body-01-text-transform: none;
  --type-body-02-font-size: 14;
  --type-body-02-line-height: 20;
  --type-body-02-letter-spacing: 0;
  --type-body-02-text-transform: none;
  --type-system-title-01-font-size: 14;
  --type-system-title-01-line-height: 18;
  --type-system-title-01-letter-spacing: 0;
  --type-system-title-01-text-transform: none;
  --type-system-title-02-font-size: 10;
  --type-system-title-02-line-height: 14;
  --type-system-title-02-letter-spacing: 0.4;
  --type-system-title-02-text-transform: none;
  --type-system-label-01-font-size: 12;
  --type-system-label-01-line-height: 17;
  --type-system-label-01-letter-spacing: 0;
  --type-system-label-01-text-transform: none;
  --type-system-label-02-font-size: 10;
  --type-system-label-02-line-height: 14;
  --type-system-label-02-letter-spacing: 0;
  --type-system-label-02-text-transform: none;
  --type-system-body-01-font-size: 14;
  --type-system-body-01-line-height: 16;
  --type-system-body-01-letter-spacing: 0;
  --type-system-body-01-text-transform: none;
  --type-system-body-02-font-size: 14;
  --type-system-body-02-line-height: 20;
  --type-system-body-02-letter-spacing: 0;
  --type-system-body-02-text-transform: none;
  --type-display-01-font-family: var(--traton-font-family-display);
  --type-display-01-font-weight: var(--traton-font-weight-medium);
  --type-display-02-font-family: var(--traton-font-family-display);
  --type-display-02-font-weight: var(--traton-font-weight-medium);
  --type-display-03-font-family: var(--traton-font-family-display);
  --type-display-03-font-weight: var(--traton-font-weight-medium);
  --type-display-04-font-family: var(--traton-font-family-display);
  --type-display-04-font-weight: var(--traton-font-weight-medium);
  --type-display-05-font-family: var(--traton-font-family-display);
  --type-display-05-font-weight: var(--traton-font-weight-medium);
  --type-headline-01-font-family: var(--traton-font-family-display);
  --type-headline-01-font-weight: var(--traton-font-weight-medium);
  --type-headline-02-font-family: var(--traton-font-family-display);
  --type-headline-02-font-weight: var(--traton-font-weight-medium);
  --type-headline-03-font-family: var(--traton-font-family-display);
  --type-headline-03-font-weight: var(--traton-font-weight-medium);
  --type-headline-04-font-family: var(--traton-font-family-display);
  --type-headline-04-font-weight: var(--traton-font-weight-medium);
  --type-headline-05-font-family: var(--traton-font-family-default);
  --type-headline-05-font-weight: var(--traton-font-weight-semi-bold);
  --type-headline-06-font-family: var(--traton-font-family-default);
  --type-headline-06-font-weight: var(--traton-font-weight-semi-bold);
  --type-paragraph-01-font-family: var(--traton-font-family-display);
  --type-paragraph-01-font-weight: var(--traton-font-weight-medium);
  --type-paragraph-02-font-family: var(--traton-font-family-display);
  --type-paragraph-02-font-weight: var(--traton-font-weight-medium);
  --type-body-01-font-family: var(--traton-font-family-default);
  --type-body-01-font-weight: var(--traton-font-weight-regular);
  --type-body-02-font-family: var(--traton-font-family-default);
  --type-body-02-font-weight: var(--traton-font-weight-regular);
  --type-system-title-01-font-family: var(--traton-font-family-default);
  --type-system-title-01-font-weight: var(--traton-font-weight-semi-bold);
  --type-system-title-02-font-family: var(--traton-font-family-default);
  --type-system-title-02-font-weight: var(--traton-font-weight-semi-bold);
  --type-system-label-01-font-family: var(--traton-font-family-default);
  --type-system-label-01-font-weight: var(--traton-font-weight-medium);
  --type-system-label-02-font-family: var(--traton-font-family-default);
  --type-system-label-02-font-weight: var(--traton-font-weight-medium);
  --type-system-body-01-font-family: var(--traton-font-family-default);
  --type-system-body-01-font-weight: var(--traton-font-weight-regular);
  --type-system-body-02-font-family: var(--traton-font-family-default);
  --type-system-body-02-font-weight: var(--traton-font-weight-regular);
}

/* Spacing */
/* Typography */
/* Traton specific imports */
/* Traton primitive icon tokens */
/**
 * Do not edit directly, this file was auto-generated.
 */
:root {
  --traton-icon-arrow_diagonal-svg: url(./assets/icons/traton/arrow_diagonal.svg);
  --traton-icon-arrow_down-svg: url(./assets/icons/traton/arrow_down.svg);
  --traton-icon-arrow_left-svg: url(./assets/icons/traton/arrow_left.svg);
  --traton-icon-arrow_right-svg: url(./assets/icons/traton/arrow_right.svg);
  --traton-icon-arrow_up-svg: url(./assets/icons/traton/arrow_up.svg);
  --traton-icon-back-svg: url(./assets/icons/traton/back.svg);
  --traton-icon-bento-svg: url(./assets/icons/traton/bento.svg);
  --traton-icon-burger-svg: url(./assets/icons/traton/burger.svg);
  --traton-icon-calendar_inactive-svg: url(./assets/icons/traton/calendar_inactive.svg);
  --traton-icon-calendar-svg: url(./assets/icons/traton/calendar.svg);
  --traton-icon-card-svg: url(./assets/icons/traton/card.svg);
  --traton-icon-cart-svg: url(./assets/icons/traton/cart.svg);
  --traton-icon-chevron_down-svg: url(./assets/icons/traton/chevron_down.svg);
  --traton-icon-chevron_left-svg: url(./assets/icons/traton/chevron_left.svg);
  --traton-icon-chevron_right-svg: url(./assets/icons/traton/chevron_right.svg);
  --traton-icon-chevron_up-svg: url(./assets/icons/traton/chevron_up.svg);
  --traton-icon-clock_inactive-svg: url(./assets/icons/traton/clock_inactive.svg);
  --traton-icon-clock-svg: url(./assets/icons/traton/clock.svg);
  --traton-icon-contact_inactive-svg: url(./assets/icons/traton/contact_inactive.svg);
  --traton-icon-contact-svg: url(./assets/icons/traton/contact.svg);
  --traton-icon-copy-svg: url(./assets/icons/traton/copy.svg);
  --traton-icon-cross-svg: url(./assets/icons/traton/cross.svg);
  --traton-icon-document_check-svg: url(./assets/icons/traton/document_check.svg);
  --traton-icon-document_doc-svg: url(./assets/icons/traton/document_doc.svg);
  --traton-icon-document_eye-svg: url(./assets/icons/traton/document_eye.svg);
  --traton-icon-document_pdf-svg: url(./assets/icons/traton/document_pdf.svg);
  --traton-icon-document_tool-svg: url(./assets/icons/traton/document_tool.svg);
  --traton-icon-document_word-svg: url(./assets/icons/traton/document_word.svg);
  --traton-icon-document_wrong-svg: url(./assets/icons/traton/document_wrong.svg);
  --traton-icon-document_xls-svg: url(./assets/icons/traton/document_xls.svg);
  --traton-icon-document-svg: url(./assets/icons/traton/document.svg);
  --traton-icon-dollar-svg: url(./assets/icons/traton/dollar.svg);
  --traton-icon-doner-svg: url(./assets/icons/traton/doner.svg);
  --traton-icon-double_kebab-svg: url(./assets/icons/traton/double_kebab.svg);
  --traton-icon-download-svg: url(./assets/icons/traton/download.svg);
  --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
  --traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
  --traton-icon-email-svg: url(./assets/icons/traton/email.svg);
  --traton-icon-error-svg: url(./assets/icons/traton/error.svg);
  --traton-icon-export_inactive-svg: url(./assets/icons/traton/export_inactive.svg);
  --traton-icon-export-svg: url(./assets/icons/traton/export.svg);
  --traton-icon-eye_inactive-svg: url(./assets/icons/traton/eye_inactive.svg);
  --traton-icon-eye-svg: url(./assets/icons/traton/eye.svg);
  --traton-icon-face_dissatisfied-svg: url(./assets/icons/traton/face_dissatisfied.svg);
  --traton-icon-face_neutral-svg: url(./assets/icons/traton/face_neutral.svg);
  --traton-icon-face_satisfied-svg: url(./assets/icons/traton/face_satisfied.svg);
  --traton-icon-filters_inactive-svg: url(./assets/icons/traton/filters_inactive.svg);
  --traton-icon-filters-svg: url(./assets/icons/traton/filters.svg);
  --traton-icon-folder-svg: url(./assets/icons/traton/folder.svg);
  --traton-icon-fuel_gauge_inactive-svg: url(./assets/icons/traton/fuel_gauge_inactive.svg);
  --traton-icon-fuel_gauge-svg: url(./assets/icons/traton/fuel_gauge.svg);
  --traton-icon-global-svg: url(./assets/icons/traton/global.svg);
  --traton-icon-heart_inactive-svg: url(./assets/icons/traton/heart_inactive.svg);
  --traton-icon-heart-svg: url(./assets/icons/traton/heart.svg);
  --traton-icon-home_inactive-svg: url(./assets/icons/traton/home_inactive.svg);
  --traton-icon-home-svg: url(./assets/icons/traton/home.svg);
  --traton-icon-image_add-svg: url(./assets/icons/traton/image_add.svg);
  --traton-icon-image_inactive-svg: url(./assets/icons/traton/image_inactive.svg);
  --traton-icon-image_set-svg: url(./assets/icons/traton/image_set.svg);
  --traton-icon-image-svg: url(./assets/icons/traton/image.svg);
  --traton-icon-info-svg: url(./assets/icons/traton/info.svg);
  --traton-icon-kebab-svg: url(./assets/icons/traton/kebab.svg);
  --traton-icon-link_broken-svg: url(./assets/icons/traton/link_broken.svg);
  --traton-icon-link-svg: url(./assets/icons/traton/link.svg);
  --traton-icon-lock-svg: url(./assets/icons/traton/lock.svg);
  --traton-icon-meatballs-svg: url(./assets/icons/traton/meatballs.svg);
  --traton-icon-message_inactive-svg: url(./assets/icons/traton/message_inactive.svg);
  --traton-icon-message-svg: url(./assets/icons/traton/message.svg);
  --traton-icon-mileage_inactive-svg: url(./assets/icons/traton/mileage_inactive.svg);
  --traton-icon-mileage-svg: url(./assets/icons/traton/mileage.svg);
  --traton-icon-minus-svg: url(./assets/icons/traton/minus.svg);
  --traton-icon-notification_inactive-svg: url(./assets/icons/traton/notification_inactive.svg);
  --traton-icon-notification-svg: url(./assets/icons/traton/notification.svg);
  --traton-icon-phone_inactive-svg: url(./assets/icons/traton/phone_inactive.svg);
  --traton-icon-phone-svg: url(./assets/icons/traton/phone.svg);
  --traton-icon-pin_inactive-svg: url(./assets/icons/traton/pin_inactive.svg);
  --traton-icon-pin-svg: url(./assets/icons/traton/pin.svg);
  --traton-icon-placeholder-svg: url(./assets/icons/traton/placeholder.svg);
  --traton-icon-plus-svg: url(./assets/icons/traton/plus.svg);
  --traton-icon-print_inactive-svg: url(./assets/icons/traton/print_inactive.svg);
  --traton-icon-print-svg: url(./assets/icons/traton/print.svg);
  --traton-icon-profile_inactive-svg: url(./assets/icons/traton/profile_inactive.svg);
  --traton-icon-profile-svg: url(./assets/icons/traton/profile.svg);
  --traton-icon-proportions_inactive-svg: url(./assets/icons/traton/proportions_inactive.svg);
  --traton-icon-proportions-svg: url(./assets/icons/traton/proportions.svg);
  --traton-icon-redirect-svg: url(./assets/icons/traton/redirect.svg);
  --traton-icon-refresh-svg: url(./assets/icons/traton/refresh.svg);
  --traton-icon-report_inactive-svg: url(./assets/icons/traton/report_inactive.svg);
  --traton-icon-report-svg: url(./assets/icons/traton/report.svg);
  --traton-icon-save_inactive-svg: url(./assets/icons/traton/save_inactive.svg);
  --traton-icon-save-svg: url(./assets/icons/traton/save.svg);
  --traton-icon-search-svg: url(./assets/icons/traton/search.svg);
  --traton-icon-send_inactive-svg: url(./assets/icons/traton/send_inactive.svg);
  --traton-icon-send-svg: url(./assets/icons/traton/send.svg);
  --traton-icon-settings-svg: url(./assets/icons/traton/settings.svg);
  --traton-icon-share-svg: url(./assets/icons/traton/share.svg);
  --traton-icon-skip_backwards-svg: url(./assets/icons/traton/skip_backwards.svg);
  --traton-icon-skip_forward-svg: url(./assets/icons/traton/skip_forward.svg);
  --traton-icon-smartphone_inactive-svg: url(./assets/icons/traton/smartphone_inactive.svg);
  --traton-icon-smartphone-svg: url(./assets/icons/traton/smartphone.svg);
  --traton-icon-sorting-svg: url(./assets/icons/traton/sorting.svg);
  --traton-icon-speedometer_inactive-svg: url(./assets/icons/traton/speedometer_inactive.svg);
  --traton-icon-speedometer-svg: url(./assets/icons/traton/speedometer.svg);
  --traton-icon-star-svg: url(./assets/icons/traton/star.svg);
  --traton-icon-support-svg: url(./assets/icons/traton/support.svg);
  --traton-icon-tick-svg: url(./assets/icons/traton/tick.svg);
  --traton-icon-timer-svg: url(./assets/icons/traton/timer.svg);
  --traton-icon-tool_inactive-svg: url(./assets/icons/traton/tool_inactive.svg);
  --traton-icon-tool-svg: url(./assets/icons/traton/tool.svg);
  --traton-icon-trash_inactive-svg: url(./assets/icons/traton/trash_inactive.svg);
  --traton-icon-trash-svg: url(./assets/icons/traton/trash.svg);
  --traton-icon-truck-svg: url(./assets/icons/traton/truck.svg);
  --traton-icon-unlock-svg: url(./assets/icons/traton/unlock.svg);
  --traton-icon-upload-svg: url(./assets/icons/traton/upload.svg);
  --traton-icon-wallet-svg: url(./assets/icons/traton/wallet.svg);
  --traton-icon-warning-svg: url(./assets/icons/traton/warning.svg);
  --traton-icon-wifi_inactive-svg: url(./assets/icons/traton/wifi_inactive.svg);
  --traton-icon-wifi-svg: url(./assets/icons/traton/wifi.svg);
}

/* Traton icon tokens */
/**
 * Do not edit directly, this file was auto-generated.
 */
.traton {
  --icon-arrow_diagonal-svg: var(--traton-icon-arrow_diagonal-svg);
  --icon-arrow_down-svg: var(--traton-icon-arrow_down-svg);
  --icon-arrow_left-svg: var(--traton-icon-arrow_left-svg);
  --icon-arrow_right-svg: var(--traton-icon-arrow_right-svg);
  --icon-arrow_up-svg: var(--traton-icon-arrow_up-svg);
  --icon-back-svg: var(--traton-icon-back-svg);
  --icon-bento-svg: var(--traton-icon-bento-svg);
  --icon-burger-svg: var(--traton-icon-burger-svg);
  --icon-calendar_inactive-svg: var(--traton-icon-calendar_inactive-svg);
  --icon-calendar-svg: var(--traton-icon-calendar-svg);
  --icon-card-svg: var(--traton-icon-card-svg);
  --icon-cart-svg: var(--traton-icon-cart-svg);
  --icon-chevron_down-svg: var(--traton-icon-chevron_down-svg);
  --icon-chevron_left-svg: var(--traton-icon-chevron_left-svg);
  --icon-chevron_right-svg: var(--traton-icon-chevron_right-svg);
  --icon-chevron_up-svg: var(--traton-icon-chevron_up-svg);
  --icon-clock_inactive-svg: var(--traton-icon-clock_inactive-svg);
  --icon-clock-svg: var(--traton-icon-clock-svg);
  --icon-contact_inactive-svg: var(--traton-icon-contact_inactive-svg);
  --icon-contact-svg: var(--traton-icon-contact-svg);
  --icon-copy-svg: var(--traton-icon-copy-svg);
  --icon-cross-svg: var(--traton-icon-cross-svg);
  --icon-document_check-svg: var(--traton-icon-document_check-svg);
  --icon-document_doc-svg: var(--traton-icon-document_doc-svg);
  --icon-document_eye-svg: var(--traton-icon-document_eye-svg);
  --icon-document_pdf-svg: var(--traton-icon-document_pdf-svg);
  --icon-document_tool-svg: var(--traton-icon-document_tool-svg);
  --icon-document_word-svg: var(--traton-icon-document_word-svg);
  --icon-document_wrong-svg: var(--traton-icon-document_wrong-svg);
  --icon-document_xls-svg: var(--traton-icon-document_xls-svg);
  --icon-document-svg: var(--traton-icon-document-svg);
  --icon-dollar-svg: var(--traton-icon-dollar-svg);
  --icon-doner-svg: var(--traton-icon-doner-svg);
  --icon-double_kebab-svg: var(--traton-icon-double_kebab-svg);
  --icon-download-svg: var(--traton-icon-download-svg);
  --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
  --icon-edit-svg: var(--traton-icon-edit-svg);
  --icon-email-svg: var(--traton-icon-email-svg);
  --icon-error-svg: var(--traton-icon-error-svg);
  --icon-export_inactive-svg: var(--traton-icon-export_inactive-svg);
  --icon-export-svg: var(--traton-icon-export-svg);
  --icon-eye_inactive-svg: var(--traton-icon-eye_inactive-svg);
  --icon-eye-svg: var(--traton-icon-eye-svg);
  --icon-face_dissatisfied-svg: var(--traton-icon-face_dissatisfied-svg);
  --icon-face_neutral-svg: var(--traton-icon-face_neutral-svg);
  --icon-face_satisfied-svg: var(--traton-icon-face_satisfied-svg);
  --icon-filters_inactive-svg: var(--traton-icon-filters_inactive-svg);
  --icon-filters-svg: var(--traton-icon-filters-svg);
  --icon-folder-svg: var(--traton-icon-folder-svg);
  --icon-fuel_gauge_inactive-svg: var(--traton-icon-fuel_gauge_inactive-svg);
  --icon-fuel_gauge-svg: var(--traton-icon-fuel_gauge-svg);
  --icon-global-svg: var(--traton-icon-global-svg);
  --icon-heart_inactive-svg: var(--traton-icon-heart_inactive-svg);
  --icon-heart-svg: var(--traton-icon-heart-svg);
  --icon-home_inactive-svg: var(--traton-icon-home_inactive-svg);
  --icon-home-svg: var(--traton-icon-home-svg);
  --icon-image_add-svg: var(--traton-icon-image_add-svg);
  --icon-image_inactive-svg: var(--traton-icon-image_inactive-svg);
  --icon-image_set-svg: var(--traton-icon-image_set-svg);
  --icon-image-svg: var(--traton-icon-image-svg);
  --icon-info-svg: var(--traton-icon-info-svg);
  --icon-kebab-svg: var(--traton-icon-kebab-svg);
  --icon-link_broken-svg: var(--traton-icon-link_broken-svg);
  --icon-link-svg: var(--traton-icon-link-svg);
  --icon-lock-svg: var(--traton-icon-lock-svg);
  --icon-meatballs-svg: var(--traton-icon-meatballs-svg);
  --icon-message_inactive-svg: var(--traton-icon-message_inactive-svg);
  --icon-message-svg: var(--traton-icon-message-svg);
  --icon-mileage_inactive-svg: var(--traton-icon-mileage_inactive-svg);
  --icon-mileage-svg: var(--traton-icon-mileage-svg);
  --icon-minus-svg: var(--traton-icon-minus-svg);
  --icon-notification_inactive-svg: var(--traton-icon-notification_inactive-svg);
  --icon-notification-svg: var(--traton-icon-notification-svg);
  --icon-phone_inactive-svg: var(--traton-icon-phone_inactive-svg);
  --icon-phone-svg: var(--traton-icon-phone-svg);
  --icon-pin_inactive-svg: var(--traton-icon-pin_inactive-svg);
  --icon-pin-svg: var(--traton-icon-pin-svg);
  --icon-placeholder-svg: var(--traton-icon-placeholder-svg);
  --icon-plus-svg: var(--traton-icon-plus-svg);
  --icon-print_inactive-svg: var(--traton-icon-print_inactive-svg);
  --icon-print-svg: var(--traton-icon-print-svg);
  --icon-profile_inactive-svg: var(--traton-icon-profile_inactive-svg);
  --icon-profile-svg: var(--traton-icon-profile-svg);
  --icon-proportions_inactive-svg: var(--traton-icon-proportions_inactive-svg);
  --icon-proportions-svg: var(--traton-icon-proportions-svg);
  --icon-redirect-svg: var(--traton-icon-redirect-svg);
  --icon-refresh-svg: var(--traton-icon-refresh-svg);
  --icon-report_inactive-svg: var(--traton-icon-report_inactive-svg);
  --icon-report-svg: var(--traton-icon-report-svg);
  --icon-save_inactive-svg: var(--traton-icon-save_inactive-svg);
  --icon-save-svg: var(--traton-icon-save-svg);
  --icon-search-svg: var(--traton-icon-search-svg);
  --icon-send_inactive-svg: var(--traton-icon-send_inactive-svg);
  --icon-send-svg: var(--traton-icon-send-svg);
  --icon-settings-svg: var(--traton-icon-settings-svg);
  --icon-share-svg: var(--traton-icon-share-svg);
  --icon-skip_backwards-svg: var(--traton-icon-skip_backwards-svg);
  --icon-skip_forward-svg: var(--traton-icon-skip_forward-svg);
  --icon-smartphone_inactive-svg: var(--traton-icon-smartphone_inactive-svg);
  --icon-smartphone-svg: var(--traton-icon-smartphone-svg);
  --icon-sorting-svg: var(--traton-icon-sorting-svg);
  --icon-speedometer_inactive-svg: var(--traton-icon-speedometer_inactive-svg);
  --icon-speedometer-svg: var(--traton-icon-speedometer-svg);
  --icon-star-svg: var(--traton-icon-star-svg);
  --icon-support-svg: var(--traton-icon-support-svg);
  --icon-tick-svg: var(--traton-icon-tick-svg);
  --icon-timer-svg: var(--traton-icon-timer-svg);
  --icon-tool_inactive-svg: var(--traton-icon-tool_inactive-svg);
  --icon-tool-svg: var(--traton-icon-tool-svg);
  --icon-trash_inactive-svg: var(--traton-icon-trash_inactive-svg);
  --icon-trash-svg: var(--traton-icon-trash-svg);
  --icon-truck-svg: var(--traton-icon-truck-svg);
  --icon-unlock-svg: var(--traton-icon-unlock-svg);
  --icon-upload-svg: var(--traton-icon-upload-svg);
  --icon-wallet-svg: var(--traton-icon-wallet-svg);
  --icon-warning-svg: var(--traton-icon-warning-svg);
  --icon-wifi_inactive-svg: var(--traton-icon-wifi_inactive-svg);
  --icon-wifi-svg: var(--traton-icon-wifi-svg);
}

/* Cross-brand placeholder fallbacks — generated alongside icon.scss */
/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.scania {
  --icon-document_word-svg: var(--scania-icon-placeholder-svg);
}

.traton {
  --icon-24v_battery-svg: var(--traton-icon-placeholder-svg);
  --icon-24v_battery_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-acceleration-svg: var(--traton-icon-placeholder-svg);
  --icon-acceleration_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-adblue-svg: var(--traton-icon-placeholder-svg);
  --icon-adblue_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-audio-svg: var(--traton-icon-placeholder-svg);
  --icon-audio_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-award-svg: var(--traton-icon-placeholder-svg);
  --icon-backward-svg: var(--traton-icon-placeholder-svg);
  --icon-backward_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-bug-svg: var(--traton-icon-placeholder-svg);
  --icon-bug_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-bus-svg: var(--traton-icon-placeholder-svg);
  --icon-bus_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-cab_door-svg: var(--traton-icon-placeholder-svg);
  --icon-camera-svg: var(--traton-icon-placeholder-svg);
  --icon-camera_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-charging_complete-svg: var(--traton-icon-placeholder-svg);
  --icon-charging_failed-svg: var(--traton-icon-placeholder-svg);
  --icon-charging_speed-svg: var(--traton-icon-placeholder-svg);
  --icon-charging_speed_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-charging_stopped-svg: var(--traton-icon-placeholder-svg);
  --icon-configurator-svg: var(--traton-icon-placeholder-svg);
  --icon-cookie-svg: var(--traton-icon-placeholder-svg);
  --icon-cookie_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-coolant_level-svg: var(--traton-icon-placeholder-svg);
  --icon-coolant_level_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-cup-svg: var(--traton-icon-placeholder-svg);
  --icon-cup_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-dashboard-svg: var(--traton-icon-placeholder-svg);
  --icon-department-svg: var(--traton-icon-placeholder-svg);
  --icon-department_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-departure_scheduling-svg: var(--traton-icon-placeholder-svg);
  --icon-departure_scheduling_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-diamond-svg: var(--traton-icon-placeholder-svg);
  --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
  --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
  --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
  --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-drop-svg: var(--traton-icon-placeholder-svg);
  --icon-drop_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-engine-svg: var(--traton-icon-placeholder-svg);
  --icon-engine_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-environment-svg: var(--traton-icon-placeholder-svg);
  --icon-environment_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-exit-svg: var(--traton-icon-placeholder-svg);
  --icon-expand-svg: var(--traton-icon-placeholder-svg);
  --icon-expand_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-factory-svg: var(--traton-icon-placeholder-svg);
  --icon-factory_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-ferry-svg: var(--traton-icon-placeholder-svg);
  --icon-ferry_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-flash-svg: var(--traton-icon-placeholder-svg);
  --icon-flash_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-forward-svg: var(--traton-icon-placeholder-svg);
  --icon-forward_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-fuel-svg: var(--traton-icon-placeholder-svg);
  --icon-fuel_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-gift-svg: var(--traton-icon-placeholder-svg);
  --icon-gift_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-guided_tour-svg: var(--traton-icon-placeholder-svg);
  --icon-guided_tour_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-hatch_open-svg: var(--traton-icon-placeholder-svg);
  --icon-hatch_open_1-svg: var(--traton-icon-placeholder-svg);
  --icon-hatch_open_2-svg: var(--traton-icon-placeholder-svg);
  --icon-hatch_open_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-heating_inactive_screen-svg: var(--traton-icon-placeholder-svg);
  --icon-history-svg: var(--traton-icon-placeholder-svg);
  --icon-history_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-idea-svg: var(--traton-icon-placeholder-svg);
  --icon-idea_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-insights-svg: var(--traton-icon-placeholder-svg);
  --icon-key-svg: var(--traton-icon-placeholder-svg);
  --icon-key_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-language-svg: var(--traton-icon-placeholder-svg);
  --icon-layer-svg: var(--traton-icon-placeholder-svg);
  --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-list-svg: var(--traton-icon-placeholder-svg);
  --icon-list_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-lock_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
  --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
  --icon-merge-svg: var(--traton-icon-placeholder-svg);
  --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-microphone-svg: var(--traton-icon-placeholder-svg);
  --icon-microphone_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-minimize_fullscreen-svg: var(--traton-icon-placeholder-svg);
  --icon-navigate-svg: var(--traton-icon-placeholder-svg);
  --icon-navigate_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-notification_snooze-svg: var(--traton-icon-placeholder-svg);
  --icon-oil_level-svg: var(--traton-icon-placeholder-svg);
  --icon-oil_level_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-paperclip-svg: var(--traton-icon-placeholder-svg);
  --icon-pause-svg: var(--traton-icon-placeholder-svg);
  --icon-pause_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
  --icon-play-svg: var(--traton-icon-placeholder-svg);
  --icon-play_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-powerplug-svg: var(--traton-icon-placeholder-svg);
  --icon-powerplug_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-privacy-svg: var(--traton-icon-placeholder-svg);
  --icon-privacy_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-prohibited-svg: var(--traton-icon-placeholder-svg);
  --icon-range-svg: var(--traton-icon-placeholder-svg);
  --icon-range_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-refresh_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-reload-svg: var(--traton-icon-placeholder-svg);
  --icon-reload_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-repeat-svg: var(--traton-icon-placeholder-svg);
  --icon-route-svg: var(--traton-icon-placeholder-svg);
  --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
  --icon-target-svg: var(--traton-icon-placeholder-svg);
  --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-temperature-svg: var(--traton-icon-placeholder-svg);
  --icon-temperature_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-text-svg: var(--traton-icon-placeholder-svg);
  --icon-text_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-thumbs_down-svg: var(--traton-icon-placeholder-svg);
  --icon-thumbs_up-svg: var(--traton-icon-placeholder-svg);
  --icon-trailer-svg: var(--traton-icon-placeholder-svg);
  --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-undo-svg: var(--traton-icon-placeholder-svg);
  --icon-undo_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-video-svg: var(--traton-icon-placeholder-svg);
  --icon-video_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-weight-svg: var(--traton-icon-placeholder-svg);
  --icon-weight_inactive-svg: var(--traton-icon-placeholder-svg);
  --icon-windscreen_heating-svg: var(--traton-icon-placeholder-svg);
  --icon-windscreen_heating_inactive-svg: var(--traton-icon-placeholder-svg);
}