wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/card/vds-card.css

@@ -0,0 +1,1141 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
+:root {
+  font-family: "Roboto Flex", sans-serif, sans-serif;
+  box-sizing: border-box;
+}
+
+:root body {
+  --color-background-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-background-brand-default:#007DBA;
+  --color-background-brand-hover:#056CA0;
+  --color-background-brand-press:#095B87;
+  --color-background-caution-default:#D0A60B;
+  --color-background-caution-lowest-default:#FFF9E5;
+  --color-background-caution-lowest-hover:#FEF3CC;
+  --color-background-caution-lowest-press:#FEE899;
+  --color-background-danger-default:#F34336;
+  --color-background-danger-high-default:#F34336;
+  --color-background-danger-high-hover:#C83E38;
+  --color-background-danger-high-press:#9D3A3A;
+  --color-background-danger-lowest-default:#FEECEB;
+  --color-background-danger-lowest-hover:#FCD9D6;
+  --color-background-danger-lowest-press:#FAB3AE;
+  --color-background-general-default:#8F9295;
+  --color-background-general-lowest-default:#f7f7f7;
+  --color-background-general-lowest-hover:#EEEEEE;
+  --color-background-general-lowest-press:#DEDEDE;
+  --color-background-healthy-default:#7FAE1B;
+  --color-background-healthy-lowest-default:#F2F7E8;
+  --color-background-healthy-lowest-hover:#E5EED1;
+  --color-background-healthy-lowest-press:#CBDEA3;
+  --color-background-information-default:#056CA0;
+  --color-background-information-lowest-default:#E6F2F8;
+  --color-background-information-lowest-hover:#CCE5F1;
+  --color-background-information-lowest-press:#99CBE3;
+  --color-background-neutral-default:#E8E9EB;
+  --color-background-neutral-hover:#CFD3D7;
+  --color-background-neutral-press:#C4C8CE;
+  --color-background-neutral-lowest-default:#F9FAFA;
+  --color-background-neutral-lowest-hover:#E8E9EB;
+  --color-background-neutral-lowest-press:#CFD3D7;
+  --color-background-warning-default:#D17739;
+  --color-background-warning-lowest-default:#FFF3EB;
+  --color-background-warning-lowest-hover:#FFE7D7;
+  --color-background-warning-lowest-press:#FFD0B0;
+  --color-border-high:#041821;
+  --color-border-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-border-low:rgba(4, 24, 33, 0.3215686275);
+  --color-border-lower:rgba(4, 24, 33, 0.1607843137);
+  --color-border-lowest:rgba(4, 24, 33, 0.0784313725);
+  --color-border-brand:#007DBA;
+  --color-border-brand-hover:#CCE5F1;
+  --color-border-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-border-danger:#C83E38;
+  --color-border-healthy:#6B9321;
+  --color-border-caution:#D0A60B;
+  --color-border-warning:#D17739;
+  --color-border-information:#056CA0;
+  --color-border-general:#8F9295;
+  --color-border-focus-1:#ffffff;
+  --color-border-focus-2:#133953;
+  --color-border-white-high:#ffffff;
+  --color-border-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-border-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-border-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-icon-high:#041821;
+  --color-icon-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-icon-low:rgba(4, 24, 33, 0.3215686275);
+  --color-icon-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-icon-healthy:#6B9321;
+  --color-icon-caution:#D0A60B;
+  --color-icon-warning:#D17739;
+  --color-icon-danger:#C83E38;
+  --color-icon-information:#056CA0;
+  --color-icon-general:#8F9295;
+  --color-icon-brand-default:#007DBA;
+  --color-icon-brand-hover:#056CA0;
+  --color-icon-brand-press:#095B87;
+  --color-icon-white-high:#ffffff;
+  --color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-icon-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);
+  --color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);
+  --color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);
+  --color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);
+  --color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);
+  --color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);
+  --color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);
+  --color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);
+  --color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);
+  --color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);
+  --color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);
+  --color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);
+  --color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);
+  --color-link-default:#007DBA;
+  --color-link-hover:#056CA0;
+  --color-link-press:#095B87;
+  --color-text-high:#041821;
+  --color-text-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-text-low:rgba(4, 24, 33, 0.3215686275);
+  --color-text-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-text-brand:#007DBA;
+  --color-text-caution-high:#46482E;
+  --color-text-caution-medium:#D0A60B;
+  --color-text-danger-high:#47323D;
+  --color-text-danger-medium:#C83E38;
+  --color-text-general-high:#364351;
+  --color-text-general-medium:#8F9295;
+  --color-text-healthy-high:#2C4333;
+  --color-text-healthy-medium:#6B9321;
+  --color-text-information-high:#133953;
+  --color-text-information-medium:#056CA0;
+  --color-text-warning-high:#463C3A;
+  --color-text-warning-medium:#D17739;
+  --color-text-white-high:#ffffff;
+  --color-text-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-text-white-low:rgba(255, 255, 255, 0.3215686275);
+  --surface-higher:#ffffff;
+  --surface-high:#ffffff;
+  --surface-medium:#ffffff;
+  --surface-low:#FBFBFB;
+  --surface-lower:#F2F3F5;
+  --surface-neutral-default:#ffffff;
+  --surface-neutral-hover:#E8E9EB;
+  --surface-neutral-press:#CFD3D7;
+  --surface-overlay-default:#213142;
+  --surface-overlay-hover:#334152;
+  --surface-overlay-press:#6F7986;
+  --surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);
+  --box-shadow-color-01:rgba(0, 0, 0, 0.12);
+  --box-shadow-color-02:rgba(0, 0, 0, 0.14);
+  --size-56:3.5rem;
+  --size-44:2.75rem;
+  --size-36:2.25rem;
+  --size-32:2rem;
+  --size-28:1.75rem;
+  --size-24:1.5rem;
+  --size-20:1.25rem;
+  --size-16:1rem;
+  --size-14:0.875rem;
+  --size-12:0.75rem;
+  --size-10:0.625rem;
+  --font-light:300;
+  --font-semibold:600;
+  --font-bold:800;
+  --height-64:4rem;
+  --height-52:3.25rem;
+  --height-44:2.75rem;
+  --height-40:2.5rem;
+  --height-36:2.25rem;
+  --height-32:2rem;
+  --height-28:1.75rem;
+  --height-24:1.5rem;
+  --height-20:1.25rem;
+  --height-16:1rem;
+  --height-12:0.75rem;
+}
+
+:root .theme-light {
+  --color-background-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-background-brand-default:#007DBA;
+  --color-background-brand-hover:#056CA0;
+  --color-background-brand-press:#095B87;
+  --color-background-caution-default:#D0A60B;
+  --color-background-caution-lowest-default:#FFF9E5;
+  --color-background-caution-lowest-hover:#FEF3CC;
+  --color-background-caution-lowest-press:#FEE899;
+  --color-background-danger-default:#F34336;
+  --color-background-danger-high-default:#F34336;
+  --color-background-danger-high-hover:#C83E38;
+  --color-background-danger-high-press:#9D3A3A;
+  --color-background-danger-lowest-default:#FEECEB;
+  --color-background-danger-lowest-hover:#FCD9D6;
+  --color-background-danger-lowest-press:#FAB3AE;
+  --color-background-general-default:#8F9295;
+  --color-background-general-lowest-default:#f7f7f7;
+  --color-background-general-lowest-hover:#EEEEEE;
+  --color-background-general-lowest-press:#DEDEDE;
+  --color-background-healthy-default:#7FAE1B;
+  --color-background-healthy-lowest-default:#F2F7E8;
+  --color-background-healthy-lowest-hover:#E5EED1;
+  --color-background-healthy-lowest-press:#CBDEA3;
+  --color-background-information-default:#056CA0;
+  --color-background-information-lowest-default:#E6F2F8;
+  --color-background-information-lowest-hover:#CCE5F1;
+  --color-background-information-lowest-press:#99CBE3;
+  --color-background-neutral-default:#E8E9EB;
+  --color-background-neutral-hover:#CFD3D7;
+  --color-background-neutral-press:#C4C8CE;
+  --color-background-neutral-lowest-default:#F9FAFA;
+  --color-background-neutral-lowest-hover:#E8E9EB;
+  --color-background-neutral-lowest-press:#CFD3D7;
+  --color-background-warning-default:#D17739;
+  --color-background-warning-lowest-default:#FFF3EB;
+  --color-background-warning-lowest-hover:#FFE7D7;
+  --color-background-warning-lowest-press:#FFD0B0;
+  --color-border-high:#041821;
+  --color-border-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-border-low:rgba(4, 24, 33, 0.3215686275);
+  --color-border-lower:rgba(4, 24, 33, 0.1607843137);
+  --color-border-lowest:rgba(4, 24, 33, 0.0784313725);
+  --color-border-brand:#007DBA;
+  --color-border-brand-hover:#CCE5F1;
+  --color-border-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-border-danger:#C83E38;
+  --color-border-healthy:#6B9321;
+  --color-border-caution:#D0A60B;
+  --color-border-warning:#D17739;
+  --color-border-information:#056CA0;
+  --color-border-general:#8F9295;
+  --color-border-focus-1:#ffffff;
+  --color-border-focus-2:#133953;
+  --color-border-white-high:#ffffff;
+  --color-border-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-border-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-border-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-icon-high:#041821;
+  --color-icon-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-icon-low:rgba(4, 24, 33, 0.3215686275);
+  --color-icon-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-icon-healthy:#6B9321;
+  --color-icon-caution:#D0A60B;
+  --color-icon-warning:#D17739;
+  --color-icon-danger:#C83E38;
+  --color-icon-information:#056CA0;
+  --color-icon-general:#8F9295;
+  --color-icon-brand-default:#007DBA;
+  --color-icon-brand-hover:#056CA0;
+  --color-icon-brand-press:#095B87;
+  --color-icon-white-high:#ffffff;
+  --color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-icon-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);
+  --color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);
+  --color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);
+  --color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);
+  --color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);
+  --color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);
+  --color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);
+  --color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);
+  --color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);
+  --color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);
+  --color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);
+  --color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);
+  --color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);
+  --color-link-default:#007DBA;
+  --color-link-hover:#056CA0;
+  --color-link-press:#095B87;
+  --color-text-high:#041821;
+  --color-text-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-text-low:rgba(4, 24, 33, 0.3215686275);
+  --color-text-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-text-brand:#007DBA;
+  --color-text-caution-high:#46482E;
+  --color-text-caution-medium:#D0A60B;
+  --color-text-danger-high:#47323D;
+  --color-text-danger-medium:#C83E38;
+  --color-text-general-high:#364351;
+  --color-text-general-medium:#8F9295;
+  --color-text-healthy-high:#2C4333;
+  --color-text-healthy-medium:#6B9321;
+  --color-text-information-high:#133953;
+  --color-text-information-medium:#056CA0;
+  --color-text-warning-high:#463C3A;
+  --color-text-warning-medium:#D17739;
+  --color-text-white-high:#ffffff;
+  --color-text-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-text-white-low:rgba(255, 255, 255, 0.3215686275);
+  --surface-higher:#ffffff;
+  --surface-high:#ffffff;
+  --surface-medium:#ffffff;
+  --surface-low:#FBFBFB;
+  --surface-lower:#F2F3F5;
+  --surface-neutral-default:#ffffff;
+  --surface-neutral-hover:#E8E9EB;
+  --surface-neutral-press:#CFD3D7;
+  --surface-overlay-default:#213142;
+  --surface-overlay-hover:#334152;
+  --surface-overlay-press:#6F7986;
+  --surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);
+  --box-shadow-color-01:rgba(0, 0, 0, 0.12);
+  --box-shadow-color-02:rgba(0, 0, 0, 0.14);
+  --size-56:3.5rem;
+  --size-44:2.75rem;
+  --size-36:2.25rem;
+  --size-32:2rem;
+  --size-28:1.75rem;
+  --size-24:1.5rem;
+  --size-20:1.25rem;
+  --size-16:1rem;
+  --size-14:0.875rem;
+  --size-12:0.75rem;
+  --size-10:0.625rem;
+  --font-light:300;
+  --font-semibold:600;
+  --font-bold:800;
+  --height-64:4rem;
+  --height-52:3.25rem;
+  --height-44:2.75rem;
+  --height-40:2.5rem;
+  --height-36:2.25rem;
+  --height-32:2rem;
+  --height-28:1.75rem;
+  --height-24:1.5rem;
+  --height-20:1.25rem;
+  --height-16:1rem;
+  --height-12:0.75rem;
+}
+
+:root .theme-dark {
+  --color-background-disabled:rgba(161, 167, 176, 0.3215686275);
+  --color-background-brand-default:#056CA0;
+  --color-background-brand-hover:#095B87;
+  --color-background-brand-press:#0E4A6C;
+  --color-background-caution-default:#FED133;
+  --color-background-caution-lowest-default:#2F3834;
+  --color-background-caution-lowest-hover:#46482E;
+  --color-background-caution-lowest-press:#746722;
+  --color-background-danger-default:#C83E38;
+  --color-background-danger-high-default:#C83E38;
+  --color-background-danger-high-hover:#9D3A3A;
+  --color-background-danger-high-press:#72363B;
+  --color-background-danger-lowest-default:#72363B;
+  --color-background-danger-lowest-hover:#47323D;
+  --color-background-danger-lowest-press:#2E2B3A;
+  --color-background-general-default:#BDBDBD;
+  --color-background-general-lowest-default:#273646;
+  --color-background-general-lowest-hover:#364351;
+  --color-background-general-lowest-press:#535D67;
+  --color-background-healthy-default:#B2CE76;
+  --color-background-healthy-lowest-default:#223637;
+  --color-background-healthy-lowest-hover:#2C4333;
+  --color-background-healthy-lowest-press:#415E2D;
+  --color-background-information-default:#3397C7;
+  --color-background-information-lowest-default:#153147;
+  --color-background-information-lowest-hover:#133953;
+  --color-background-information-lowest-press:#0E4A6C;
+  --color-background-neutral-default:#101924;
+  --color-background-neutral-hover:#213142;
+  --color-background-neutral-press:#334152;
+  --color-background-neutral-lowest-default:#0B121A;
+  --color-background-neutral-lowest-hover:#101924;
+  --color-background-neutral-lowest-press:#213142;
+  --color-background-warning-default:#FFA261;
+  --color-background-warning-lowest-default:#2F323A;
+  --color-background-warning-lowest-hover:#463C3A;
+  --color-background-warning-lowest-press:#745039;
+  --color-border-high:#ffffff;
+  --color-border-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-border-low:rgba(255, 255, 255, 0.3215686275);
+  --color-border-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-border-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-border-brand:#66B1D5;
+  --color-border-brand-hover:#133953;
+  --color-border-disabled:rgba(161, 167, 176, 0.3215686275);
+  --color-border-danger:#F78E86;
+  --color-border-healthy:#98BE48;
+  --color-border-warning:#FFA261;
+  --color-border-caution:#FED133;
+  --color-border-information:#66B1D5;
+  --color-border-general:#CDCDCD;
+  --color-border-focus-1:#041821;
+  --color-border-focus-2:#CCE5F1;
+  --color-border-white-high:#041821;
+  --color-border-white-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-border-white-low:rgba(4, 24, 33, 0.3215686275);
+  --color-border-white-lower:rgba(4, 24, 33, 0.1607843137);
+  --color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);
+  --color-icon-high:#ffffff;
+  --color-icon-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-icon-low:rgba(255, 255, 255, 0.3215686275);
+  --color-icon-disabled:rgba(161, 167, 176, 0.3215686275);
+  --color-icon-healthy:#98BE48;
+  --color-icon-caution:#FED133;
+  --color-icon-warning:#FFA261;
+  --color-icon-danger:#F78E86;
+  --color-icon-information:#66B1D5;
+  --color-icon-general:#CDCDCD;
+  --color-icon-brand-default:#66B1D5;
+  --color-icon-brand-hover:#99CBE3;
+  --color-icon-brand-press:#CCE5F1;
+  --color-icon-white-high:#041821;
+  --color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-icon-white-low:rgba(4, 24, 33, 0.3215686275);
+  --color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);
+  --color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);
+  --color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);
+  --color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);
+  --color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);
+  --color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);
+  --color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);
+  --color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);
+  --color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);
+  --color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);
+  --color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);
+  --color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);
+  --color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);
+  --color-link-default:#66B1D5;
+  --color-link-hover:#99CBE3;
+  --color-link-press:#CCE5F1;
+  --color-text-high:#ffffff;
+  --color-text-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-text-low:rgba(255, 255, 255, 0.3215686275);
+  --color-text-disabled:rgba(161, 167, 176, 0.6392156863);
+  --color-text-brand:#007DBA;
+  --color-text-caution-high:#FEE899;
+  --color-text-caution-medium:#FEDC66;
+  --color-text-danger-high:#FAB3AE;
+  --color-text-danger-medium:#F78E86;
+  --color-text-general-high:#DEDEDE;
+  --color-text-general-medium:#CDCDCD;
+  --color-text-healthy-high:#CBDEA3;
+  --color-text-healthy-medium:#B2CE76;
+  --color-text-information-high:#99CBE3;
+  --color-text-information-medium:#66B1D5;
+  --color-text-warning-high:#FFD0B0;
+  --color-text-warning-medium:#FFB988;
+  --color-text-white-high:#041821;
+  --color-text-white-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-text-white-low:rgba(4, 24, 33, 0.3215686275);
+  --surface-higher:#192938;
+  --surface-high:#162431;
+  --surface-medium:#0E0E0E;
+  --surface-low:#000000;
+  --surface-lower:#0E0E0E;
+  --surface-neutral-default:#101924;
+  --surface-neutral-hover:#213142;
+  --surface-neutral-press:#6F7986;
+  --surface-overlay-default:#ffffff;
+  --surface-overlay-hover:#E8E9EB;
+  --surface-overlay-press:#CFD3D7;
+  --surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
+  --surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
+  --surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);
+  --surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);
+  --box-shadow-color-01:rgba(0, 0, 0, 0.24);
+  --box-shadow-color-02:rgba(0, 0, 0, 0.28);
+  --size-56:3.5rem;
+  --size-44:2.75rem;
+  --size-36:2.25rem;
+  --size-32:2rem;
+  --size-28:1.75rem;
+  --size-24:1.5rem;
+  --size-20:1.25rem;
+  --size-16:1rem;
+  --size-14:0.875rem;
+  --size-12:0.75rem;
+  --size-10:0.625rem;
+  --font-light:300;
+  --font-semibold:600;
+  --font-bold:800;
+  --height-64:4rem;
+  --height-52:3.25rem;
+  --height-44:2.75rem;
+  --height-40:2.5rem;
+  --height-36:2.25rem;
+  --height-32:2rem;
+  --height-28:1.75rem;
+  --height-24:1.5rem;
+  --height-20:1.25rem;
+  --height-16:1rem;
+  --height-12:0.75rem;
+}
+
+:root body {
+  --spacing-00:0rem;
+  --spacing-01:0.125rem;
+  --spacing-02:0.25rem;
+  --spacing-03:0.5rem;
+  --spacing-04:0.75rem;
+  --spacing-05:1rem;
+  --spacing-06:1.25rem;
+  --spacing-07:1.5rem;
+  --spacing-08:1.75rem;
+  --spacing-09:2rem;
+  --spacing-10:2.25rem;
+  --spacing-11:2.5rem;
+  --spacing-12:2.75rem;
+  --spacing-13:3rem;
+  --spacing-14:3.25rem;
+  --spacing-15:3.5rem;
+  --spacing-16:3.75rem;
+  --spacing-17:4rem;
+  --spacing-18:4.25rem;
+  --spacing-19:4.5rem;
+  --spacing-20:4.75rem;
+  --opacity-64:0.64;
+  --opacity-32:0.32;
+  --opacity-16:0.16;
+  --opacity-08:0.08;
+  --radius-sharp:var(--spacing-00);
+  --radius-medium:var(--spacing-02);
+  --radius-large:var(--spacing-03);
+  --radius-pill:var(--spacing-16);
+  --radius-circle:50%;
+  --static-brand-0:#ffffff;
+  --static-brand-50:#E6F2F8;
+  --static-brand-100:#CCE5F1;
+  --static-brand-200:#99CBE3;
+  --static-brand-300:#66B1D5;
+  --static-brand-400:#3397C7;
+  --static-brand-500:#007DBA;
+  --static-brand-main:#007DBA;
+  --static-brand-600:#056CA0;
+  --static-brand-700:#095B87;
+  --static-brand-800:#0E4A6C;
+  --static-brand-900:#133953;
+  --static-brand-950:#153147;
+  --static-brand-1000:#041821;
+  --static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);
+  --static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);
+  --static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);
+  --static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);
+  --static-green-0:#ffffff;
+  --static-green-50:#F2F7E8;
+  --static-green-100:#E5EED1;
+  --static-green-200:#CBDEA3;
+  --static-green-300:#B2CE76;
+  --static-green-400:#98BE48;
+  --static-green-500:#7FAE1B;
+  --static-green-main:#7FAE1B;
+  --static-green-600:#6B9321;
+  --static-green-700:#557827;
+  --static-green-800:#415E2D;
+  --static-green-900:#2C4333;
+  --static-green-950:#223637;
+  --static-yellow-0:#ffffff;
+  --static-yellow-50:#FFF9E5;
+  --static-yellow-100:#FEF3CC;
+  --static-yellow-200:#FEE899;
+  --static-yellow-300:#FEDC66;
+  --static-yellow-400:#FED133;
+  --static-yellow-500:#FEC600;
+  --static-yellow-main:#FEC600;
+  --static-yellow-600:#D0A60B;
+  --static-yellow-700:#A18717;
+  --static-yellow-800:#746722;
+  --static-yellow-900:#46482E;
+  --static-yellow-950:#2F3834;
+  --static-red-0:#ffffff;
+  --static-red-50:#FEECEB;
+  --static-red-100:#FCD9D6;
+  --static-red-200:#FAB3AE;
+  --static-red-300:#F78E86;
+  --static-red-400:#F5685E;
+  --static-red-500:#F34336;
+  --static-red-main:#F34336;
+  --static-red-600:#C83E38;
+  --static-red-700:#9D3A3A;
+  --static-red-800:#72363B;
+  --static-red-900:#47323D;
+  --static-red-950:#2E2B3A;
+  --static-grey-0:#ffffff;
+  --static-grey-50:#f7f7f7;
+  --static-grey-100:#EEEEEE;
+  --static-grey-200:#DEDEDE;
+  --static-grey-300:#CDCDCD;
+  --static-grey-400:#BDBDBD;
+  --static-grey-500:#ADADAD;
+  --static-grey-main:#ADADAD;
+  --static-grey-600:#8F9295;
+  --static-grey-700:#71787F;
+  --static-grey-800:#535D67;
+  --static-grey-900:#364351;
+  --static-grey-950:#273646;
+  --static-orange-0:#ffffff;
+  --static-orange-50:#FFF3EB;
+  --static-orange-100:#FFE7D7;
+  --static-orange-200:#FFD0B0;
+  --static-orange-300:#FFB988;
+  --static-orange-400:#FFA261;
+  --static-orange-500:#FF8B3A;
+  --static-orange-main:#FF8B3A;
+  --static-orange-600:#D17739;
+  --static-orange-700:#A2633A;
+  --static-orange-800:#745039;
+  --static-orange-900:#463C3A;
+  --static-orange-950:#2F323A;
+  --static-dataviz-cat-sea-green:#0FB5AE;
+  --static-dataviz-cat-palatinate-blue:#4046CA;
+  --static-dataviz-cat-tangerine:#F68511;
+  --static-dataviz-cat-magenta:#DE3D82;
+  --static-dataviz-cat-tropical-indigo:#7E84FA;
+  --static-dataviz-cat-malachite:#72E06A;
+  --static-dataviz-cat-azure:#147AF3;
+  --static-dataviz-cat-violet:#7326D3;
+  --static-dataviz-cat-yellow:#E8C600;
+  --static-dataviz-cat-alloy-orange:#CB5D00;
+  --static-dataviz-cat-green:#008F5D;
+  --static-dataviz-cat-lime:#BCE931;
+  --static-dataviz-seq-viridis-50:#FDE725;
+  --static-dataviz-seq-viridis-100:#D2E21B;
+  --static-dataviz-seq-viridis-150:#A5DB36;
+  --static-dataviz-seq-viridis-200:#7AD151;
+  --static-dataviz-seq-viridis-250:#54C568;
+  --static-dataviz-seq-viridis-300:#35B779;
+  --static-dataviz-seq-viridis-350:#22A884;
+  --static-dataviz-seq-viridis-400:#1F988B;
+  --static-dataviz-seq-viridis-450:#23888E;
+  --static-dataviz-seq-viridis-500:#2A788E;
+  --static-dataviz-seq-viridis-550:#31688E;
+  --static-dataviz-seq-viridis-600:#39568C;
+  --static-dataviz-seq-viridis-650:#414487;
+  --static-dataviz-seq-viridis-700:#472F7D;
+  --static-dataviz-seq-viridis-750:#481A6C;
+  --static-dataviz-seq-viridis-800:#440154;
+  --static-dataviz-seq-magma-50:#FCFDBF;
+  --static-dataviz-seq-magma-100:#FDDEA0;
+  --static-dataviz-seq-magma-150:#FEBF84;
+  --static-dataviz-seq-magma-200:#FE9F6D;
+  --static-dataviz-seq-magma-250:#FA7F5E;
+  --static-dataviz-seq-magma-300:#F1605D;
+  --static-dataviz-seq-magma-350:#DE4968;
+  --static-dataviz-seq-magma-400:#C43C75;
+  --static-dataviz-seq-magma-450:#A8327D;
+  --static-dataviz-seq-magma-500:#8C2981;
+  --static-dataviz-seq-magma-550:#721F81;
+  --static-dataviz-seq-magma-600:#57157E;
+  --static-dataviz-seq-magma-650:#3B0F70;
+  --static-dataviz-seq-magma-700:#20114B;
+  --static-dataviz-seq-magma-750:#0B0924;
+  --static-dataviz-seq-magma-800:#000004;
+  --static-dataviz-seq-rose-50:#FFF4DE;
+  --static-dataviz-seq-rose-100:#FFDDD8;
+  --static-dataviz-seq-rose-150:#FFC6D2;
+  --static-dataviz-seq-rose-200:#FCAFCB;
+  --static-dataviz-seq-rose-250:#F898C4;
+  --static-dataviz-seq-rose-300:#F380BC;
+  --static-dataviz-seq-rose-350:#ED67B4;
+  --static-dataviz-seq-rose-400:#E64BAC;
+  --static-dataviz-seq-rose-450:#D03EA0;
+  --static-dataviz-seq-rose-500:#B93495;
+  --static-dataviz-seq-rose-550:#A12A8B;
+  --static-dataviz-seq-rose-600:#892282;
+  --static-dataviz-seq-rose-650:#701C7A;
+  --static-dataviz-seq-rose-700:#551672;
+  --static-dataviz-seq-rose-750:#37126C;
+  --static-dataviz-seq-rose-800:#001066;
+  --static-dataviz-seq-forest-50:#FFFFE0;
+  --static-dataviz-seq-forest-100:#E2F5BD;
+  --static-dataviz-seq-forest-150:#C5EA99;
+  --static-dataviz-seq-forest-200:#A6DF73;
+  --static-dataviz-seq-forest-250:#8FD16C;
+  --static-dataviz-seq-forest-300:#79C365;
+  --static-dataviz-seq-forest-350:#62B55E;
+  --static-dataviz-seq-forest-400:#4CA658;
+  --static-dataviz-seq-forest-450:#3B9752;
+  --static-dataviz-seq-forest-500:#31884F;
+  --static-dataviz-seq-forest-550:#28794C;
+  --static-dataviz-seq-forest-600:#1E6A48;
+  --static-dataviz-seq-forest-650:#155B45;
+  --static-dataviz-seq-forest-700:#0E4D41;
+  --static-dataviz-seq-forest-750:#073F3E;
+  --static-dataviz-seq-forest-800:#00313A;
+  --static-dataviz-seq-cerulean-50:#EAFFF1;
+  --static-dataviz-seq-cerulean-100:#C9F1E4;
+  --static-dataviz-seq-cerulean-150:#A7E3D7;
+  --static-dataviz-seq-cerulean-200:#85D5CA;
+  --static-dataviz-seq-cerulean-250:#6CC5C0;
+  --static-dataviz-seq-cerulean-300:#58B4B9;
+  --static-dataviz-seq-cerulean-350:#44A2B1;
+  --static-dataviz-seq-cerulean-400:#3091AA;
+  --static-dataviz-seq-cerulean-450:#2880A0;
+  --static-dataviz-seq-cerulean-500:#246E96;
+  --static-dataviz-seq-cerulean-550:#215D8B;
+  --static-dataviz-seq-cerulean-600:#1D4C81;
+  --static-dataviz-seq-cerulean-650:#1C3B77;
+  --static-dataviz-seq-cerulean-700:#1B296D;
+  --static-dataviz-seq-cerulean-750:#1A1662;
+  --static-dataviz-seq-cerulean-800:#180055;
+  --static-dataviz-div-orange-yellow-seafoam-0:#580000;
+  --static-dataviz-div-orange-yellow-seafoam-50:#79260B;
+  --static-dataviz-div-orange-yellow-seafoam-100:#9C4511;
+  --static-dataviz-div-orange-yellow-seafoam-150:#BD651A;
+  --static-dataviz-div-orange-yellow-seafoam-200:#DD8629;
+  --static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;
+  --static-dataviz-div-orange-yellow-seafoam-300:#FED693;
+  --static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;
+  --static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;
+  --static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;
+  --static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;
+  --static-dataviz-div-orange-yellow-seafoam-550:#208288;
+  --static-dataviz-div-orange-yellow-seafoam-600:#076769;
+  --static-dataviz-div-orange-yellow-seafoam-650:#00494B;
+  --static-dataviz-div-orange-yellow-seafoam-700:#002C2D;
+  --static-dataviz-div-red-yellow-blue-0:#4A001E;
+  --static-dataviz-div-red-yellow-blue-50:#751232;
+  --static-dataviz-div-red-yellow-blue-100:#A52747;
+  --static-dataviz-div-red-yellow-blue-150:#C65154;
+  --static-dataviz-div-red-yellow-blue-200:#E47961;
+  --static-dataviz-div-red-yellow-blue-250:#F0A882;
+  --static-dataviz-div-red-yellow-blue-300:#FAD4AC;
+  --static-dataviz-div-red-yellow-blue-350:#FFFFE0;
+  --static-dataviz-div-red-yellow-blue-400:#BCE2CF;
+  --static-dataviz-div-red-yellow-blue-450:#89C0C4;
+  --static-dataviz-div-red-yellow-blue-500:#579EB9;
+  --static-dataviz-div-red-yellow-blue-550:#397AA8;
+  --static-dataviz-div-red-yellow-blue-600:#1C5796;
+  --static-dataviz-div-red-yellow-blue-650:#163771;
+  --static-dataviz-div-red-yellow-blue-700:#10194D;
+  --static-dataviz-div-red-blue-0:#4A001E;
+  --static-dataviz-div-red-blue-50:#731331;
+  --static-dataviz-div-red-blue-100:#9F2945;
+  --static-dataviz-div-red-blue-150:#CC415A;
+  --static-dataviz-div-red-blue-200:#E06E85;
+  --static-dataviz-div-red-blue-250:#ED9AB0;
+  --static-dataviz-div-red-blue-300:#F8C3D9;
+  --static-dataviz-div-red-blue-350:#FAF0FF;
+  --static-dataviz-div-red-blue-400:#C6D0F2;
+  --static-dataviz-div-red-blue-450:#92B2DE;
+  --static-dataviz-div-red-blue-500:#5D94CB;
+  --static-dataviz-div-red-blue-550:#2F74B3;
+  --static-dataviz-div-red-blue-600:#265191;
+  --static-dataviz-div-red-blue-650:#163670;
+  --static-dataviz-div-red-blue-700:#0B194C;
+  --static-white:#ffffff;
+  --static-black:#000000;
+  --elevation-shadow-0:none;
+  --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
+  --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);
+  --elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);
+  --elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);
+  --elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);
+  --elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);
+  --elevation-layer-0:0;
+  --elevation-layer-1:1;
+  --elevation-layer-2:3;
+  --elevation-layer-3:6;
+  --elevation-layer-4:8;
+  --elevation-layer-5:12;
+  --border-thickness-01:0.0625rem;
+  --border-thickness-02:0.078125rem;
+  --border-thickness-03:0.09375rem;
+  --border-thickness-04:0.109375rem;
+  --border-thickness-05:0.125rem;
+  --border-thickness-06:0.140625rem;
+  --border-thickness-07:0.15625rem;
+  --border-thickness-08:0.171875rem;
+  --border-thickness-09:0.1875rem;
+}
+
+:root body .vds-font-display-large {
+  font-size: 3.5rem;
+  font-weight: 300;
+  line-height: 4rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-display-medium {
+  font-size: 2.75rem;
+  font-weight: 300;
+  line-height: 3.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-display-small {
+  font-size: 2.25rem;
+  font-weight: 300;
+  line-height: 2.75rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-headline-large {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 2.5rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-headline-medium {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 2.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-headline-small {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-title-large {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  letter-spacing: 0.00875rem;
+}
+
+:root body .vds-font-title-medium {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-title-small {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-title-extra-small {
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1rem;
+  letter-spacing: 0.00875rem;
+}
+
+:root body .vds-font-title-2x-small {
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 0.75rem;
+  letter-spacing: 0.00875rem;
+}
+
+:root body .vds-font-body-large {
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-body-medium {
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-body-small {
+  font-size: 0.75rem;
+  font-weight: 300;
+  line-height: 1rem;
+  letter-spacing: normal;
+}
+
+/* This mixing can be used to implement font styling. 
+ * to do so, you need to import the scss file and used @include font-style(title, medium);
+ * This will implement styling according to the $volt-font-styles map
+ */
+.vds__divider {
+  width: 0.0625rem;
+  height: 1rem;
+  margin: var(--spacing-01);
+  background-color: var(--color-border-low);
+}
+
+.content_divider_vertical {
+  opacity: 0.16;
+  background: var(--color-border-high);
+  height: 1rem;
+  width: 1px;
+}
+
+.vds-header_content-section {
+  display: flex;
+  gap: var(--spacing-03);
+}
+
+.vds__menu--backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: grayscale(100%) opacity(0.5);
+  pointer-events: auto;
+}
+
+:host {
+  /** Tokens for style override and theming */
+  /** Default variant */
+  --vds-card-default-border-color: var(--color-border-lower);
+  --vds-card-default-border-hover-color: var(--color-border-lower);
+  --vds-card-default-border-press-color: var(--color-border-lower);
+  --vds-card-default-background-color: var(--surface-medium);
+  --vds-card-default-background-hover-color: var(--color-interaction-black-lowest);
+  --vds-card-default-background-press-color: var(--surface-neutral-press);
+  --vds-card-default-selected-border-color: var(--color-border-lower);
+  --vds-card-default-selected-background-color: var(--color-interaction-brand-lowest);
+  /** Primary variant */
+  --vds-card-primary-border-hover-color: var(--color-border-brand-hover);
+  --vds-card-primary-background-color: var(--color-background-brand-default);
+  --vds-card-primary-background-hover-color: var(--color-background-brand-hover);
+  --vds-card-primary-background-press-color: var(--color-background-brand-press);
+  --vds-card-primary-selected-border-color: var(--color-border-brand-hover);
+  --vds-card-primary-selected-background-color: var(--color-background-brand-hover);
+  /** Secondary variant */
+  --vds-card-secondary-border-color: var(--color-border-brand);
+  --vds-card-secondary-border-hover-color: var(--color-border-brand);
+  --vds-card-secondary-border-press-color: var(--color-border-brand);
+  --vds-card-secondary-background-color: var(--surface-medium);
+  --vds-card-secondary-background-hover-color: var(--color-interaction-brand-lowest);
+  --vds-card-secondary-background-press-color: var(--color-interaction-brand-lower);
+  --vds-card-secondary-selected-border-color: var(--color-border-brand);
+  --vds-card-secondary-selected-background-color: var(--color-interaction-brand-lowest);
+  /** Danger variant */
+  --vds-card-danger-border-hover-color: var(--color-interaction-danger-medium);
+  --vds-card-danger-background-color: var(--color-background-danger-default);
+  --vds-card-danger-background-hover-color: var(--color-background-danger-high-hover);
+  --vds-card-danger-background-press-color: var(--color-background-danger-high-press);
+  --vds-card-danger-selected-border-color: var(--color-interaction-danger-medium);
+  --vds-card-danger-selected-background-color: var(--color-background-danger-high-hover);
+  display: block;
+}
+:host .vds__card {
+  border-radius: var(--radius-medium);
+  box-sizing: border-box;
+  z-index: var(--elevation-layer-0);
+}
+:host .vds__card.vds__card--default {
+  border: 0.0625rem solid var(--vds-card-default-border-color);
+  outline: none;
+  background-color: var(--vds-card-default-background-color);
+}
+:host .vds__card.vds__card--default.vds__card--selectable.vds__card--selected {
+  border-color: var(--vds-card-default-selected-border-color);
+  background-color: var(--vds-card-default-selected-background-color);
+}
+:host .vds__card.vds__card--default.vds__card--selectable:is(:active, :active:hover) {
+  border-color: var(--vds-card-default-selected-border-color);
+  background-color: var(--vds-card-default-selected-background-color);
+}
+:host .vds__card.vds__card--default.vds__card--button, :host .vds__card.vds__card--default.vds__card--selectable {
+  cursor: pointer;
+}
+:host .vds__card.vds__card--default.vds__card--button:hover, :host .vds__card.vds__card--default.vds__card--selectable:hover {
+  border-color: var(--vds-card-default-border-hover-color);
+  background-color: var(--vds-card-default-background-hover-color);
+}
+:host .vds__card.vds__card--default.vds__card--button:is(:active, :active:hover), :host .vds__card.vds__card--default.vds__card--selectable:is(:active, :active:hover) {
+  border-color: var(--vds-card-default-border-press-color);
+  background-color: var(--vds-card-default-background-press-color);
+}
+:host .vds__card.vds__card--primary {
+  border: 0.0625rem solid transparent;
+  background-color: var(--vds-card-primary-background-color);
+}
+:host .vds__card.vds__card--primary.vds__card--selectable.vds__card--selected, :host .vds__card.vds__card--primary.vds__card--button.vds__card--selected {
+  outline: 0.25rem solid var(--vds-card-primary-selected-border-color);
+}
+:host .vds__card.vds__card--primary.vds__card--selectable:hover, :host .vds__card.vds__card--primary.vds__card--button:hover {
+  outline: 0.25rem solid var(--vds-card-primary-border-hover-color);
+}
+:host .vds__card.vds__card--primary.vds__card--selectable:active:hover, :host .vds__card.vds__card--primary.vds__card--button:active:hover {
+  outline: none;
+}
+:host .vds__card.vds__card--primary.vds__card--selectable.vds__card--selected {
+  background-color: var(--vds-card-primary-selected-background-color);
+}
+:host .vds__card.vds__card--primary.vds__card--selectable:is(:active, :active:hover) {
+  background-color: var(--vds-card-primary-selected-background-color);
+}
+:host .vds__card.vds__card--primary.vds__card--button, :host .vds__card.vds__card--primary.vds__card--selectable {
+  cursor: pointer;
+}
+:host .vds__card.vds__card--primary.vds__card--button:hover, :host .vds__card.vds__card--primary.vds__card--selectable:hover {
+  background-color: var(--vds-card-primary-background-hover-color);
+}
+:host .vds__card.vds__card--primary.vds__card--button:is(:active, :active:hover), :host .vds__card.vds__card--primary.vds__card--selectable:is(:active, :active:hover) {
+  background-color: var(--vds-card-primary-background-press-color);
+}
+:host .vds__card.vds__card--secondary {
+  border: 0.0625rem solid var(--vds-card-secondary-border-color);
+  outline: none;
+  background-color: var(--vds-card-secondary-background-color);
+}
+:host .vds__card.vds__card--secondary.vds__card--selectable.vds__card--selected {
+  border-color: var(--vds-card-secondary-selected-border-color);
+  background-color: var(--vds-card-secondary-selected-background-color);
+}
+:host .vds__card.vds__card--secondary.vds__card--selectable:is(:active, :active:hover) {
+  border-color: var(--vds-card-secondary-selected-border-color);
+  background-color: var(--vds-card-secondary-selected-background-color);
+}
+:host .vds__card.vds__card--secondary.vds__card--button, :host .vds__card.vds__card--secondary.vds__card--selectable {
+  cursor: pointer;
+}
+:host .vds__card.vds__card--secondary.vds__card--button:hover, :host .vds__card.vds__card--secondary.vds__card--selectable:hover {
+  border-color: var(--vds-card-secondary-border-hover-color);
+  background-color: var(--vds-card-secondary-background-hover-color);
+}
+:host .vds__card.vds__card--secondary.vds__card--button:is(:active, :active:hover), :host .vds__card.vds__card--secondary.vds__card--selectable:is(:active, :active:hover) {
+  border-color: var(--vds-card-secondary-border-press-color);
+  background-color: var(--vds-card-secondary-background-press-color);
+}
+:host .vds__card.vds__card--danger {
+  border: 0.0625rem solid transparent;
+  background-color: var(--vds-card-danger-background-color);
+}
+:host .vds__card.vds__card--danger.vds__card--selectable.vds__card--selected, :host .vds__card.vds__card--danger.vds__card--button.vds__card--selected {
+  outline: 0.25rem solid var(--vds-card-danger-selected-border-color);
+}
+:host .vds__card.vds__card--danger.vds__card--selectable:hover, :host .vds__card.vds__card--danger.vds__card--button:hover {
+  outline: 0.25rem solid var(--vds-card-danger-border-hover-color);
+}
+:host .vds__card.vds__card--danger.vds__card--selectable:active:hover, :host .vds__card.vds__card--danger.vds__card--button:active:hover {
+  outline: none;
+}
+:host .vds__card.vds__card--danger.vds__card--selectable.vds__card--selected {
+  background-color: var(--vds-card-danger-selected-background-color);
+}
+:host .vds__card.vds__card--danger.vds__card--selectable:is(:active, :active:hover) {
+  background-color: var(--vds-card-danger-selected-background-color);
+}
+:host .vds__card.vds__card--danger.vds__card--button, :host .vds__card.vds__card--danger.vds__card--selectable {
+  cursor: pointer;
+}
+:host .vds__card.vds__card--danger.vds__card--button:hover, :host .vds__card.vds__card--danger.vds__card--selectable:hover {
+  background-color: var(--vds-card-danger-background-hover-color);
+}
+:host .vds__card.vds__card--danger.vds__card--button:is(:active, :active:hover), :host .vds__card.vds__card--danger.vds__card--selectable:is(:active, :active:hover) {
+  background-color: var(--vds-card-danger-background-press-color);
+}
+:host .vds__card.vds__card--disabled {
+  pointer-events: none;
+  border: 0.0625rem solid var(--color-border-lower);
+  background-color: var(--surface-medium);
+}
+:host .vds__card.vds__card--disabled ::slotted(*) {
+  opacity: var(--opacity-32);
+}
+:host .vds__card.vds__card--disabled.vds__card--button.vds__card--selected, :host .vds__card.vds__card--disabled.vds__card--selectable.vds__card--selected {
+  outline: none;
+  border-color: var(--color-border-lower);
+  background-color: var(--surface-medium);
+}
+:host .vds__card.vds__card--disabled:is(:hover, :active, :active:hover) {
+  background-color: var(--surface-medium);
+}
+:host .vds__card.padding__spacing-00 {
+  padding: var(--spacing-00);
+}
+:host .vds__card.padding__spacing-01 {
+  padding: var(--spacing-01);
+}
+:host .vds__card.padding__spacing-02 {
+  padding: var(--spacing-02);
+}
+:host .vds__card.padding__spacing-03 {
+  padding: var(--spacing-03);
+}
+:host .vds__card.padding__spacing-04 {
+  padding: var(--spacing-04);
+}
+:host .vds__card.padding__spacing-05 {
+  padding: var(--spacing-05);
+}
+:host .vds__card.padding__spacing-06 {
+  padding: var(--spacing-06);
+}
+:host .vds__card.padding__spacing-07 {
+  padding: var(--spacing-07);
+}
+:host .vds__card.padding__spacing-08 {
+  padding: var(--spacing-08);
+}
+:host .vds__card.padding__spacing-09 {
+  padding: var(--spacing-09);
+}
+:host .vds__card.padding__spacing-10 {
+  padding: var(--spacing-10);
+}
+:host .vds__card.padding__spacing-11 {
+  padding: var(--spacing-11);
+}
+:host .vds__card.padding__spacing-12 {
+  padding: var(--spacing-12);
+}
+:host .vds__card.padding__spacing-13 {
+  padding: var(--spacing-13);
+}
+:host .vds__card.padding__spacing-14 {
+  padding: var(--spacing-14);
+}
+:host .vds__card.padding__spacing-15 {
+  padding: var(--spacing-15);
+}
+:host .vds__card.padding__spacing-16 {
+  padding: var(--spacing-16);
+}
+:host .vds__card.padding__spacing-17 {
+  padding: var(--spacing-17);
+}
+:host .vds__card.padding__spacing-18 {
+  padding: var(--spacing-18);
+}
+:host .vds__card.padding__spacing-19 {
+  padding: var(--spacing-19);
+}
+:host .vds__card.padding__spacing-20 {
+  padding: var(--spacing-20);
+}
+:host .vds__card.shadow__elevation-shadow-0 {
+  box-shadow: var(--elevation-shadow-0);
+}
+:host .vds__card.shadow__elevation-shadow-1 {
+  box-shadow: var(--elevation-shadow-1);
+}
+:host .vds__card.shadow__elevation-shadow-2 {
+  box-shadow: var(--elevation-shadow-2);
+}
+:host .vds__card.shadow__elevation-shadow-3 {
+  box-shadow: var(--elevation-shadow-3);
+}
+:host .vds__card.shadow__elevation-shadow-5 {
+  box-shadow: var(--elevation-shadow-5);
+}
+:host .vds__card.shadow__elevation-shadow-8 {
+  box-shadow: var(--elevation-shadow-8);
+}
+:host .vds__card.shadow__elevation-shadow-17 {
+  box-shadow: var(--elevation-shadow-17);
+}
+
+:host-context(.vds-card--disabled) {
+  pointer-events: none;
+}