@genexus/mercury 0.1.1 → 0.1.3

package/dist/css/mercury.css

@@ -1,235 +1,2534 @@
-/* font weights used by mercury:
-- light (300)
-- regular (400)
-- semi-bold (600)
-- bold (700)
-- extra-bold (800)
-*/
 /*----------------------
-Scrollbar
+Focus
 ----------------------*/
 /*----------------------
-Focus
+Scrollbar
 ----------------------*/
 /*----------------------------------------------------
 Item (applies to every item (tree, grid, list, etc...)
 ----------------------------------------------------*/
-/*----------------------
-Checkbox
-----------------------*/
-*,
-::after,
-::before {
-  box-sizing: border-box;
+.button-tertiary, .button-secondary, .button-primary {
+  --button-base__font-family: inherit;
+  --button-base__font-size: var(--mer-font__size--2xs);
+  --button-base__line-height: var(--mer-line-height--tight);
+  --button-base__text-transform: capitalize;
+  --button-base__border-width: var(--mer-border__width--sm);
+  --button-base__border-style: solid;
+  --button-base__border-color: transparent;
+  --button-base__border-radius: var(--mer-border__radius--sm);
+  --button-base__block-size: var(--mer-control__block-size);
+  --button-base__gap: var(--mer-spacing--xs);
+  --button-base__padding-inline: var(--mer-spacing--sm);
+  --button-icon-only__padding: 0;
+  --button-icon-only__inline-size: var(--mer-control__block-size);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  justify-content: center;
+  border: var(--button-base__border-width);
+  border-radius: var(--button-base__border-radius);
+  block-size: var(--button-base__block-size);
+  border: var(--button-base__border-width) var(--button-base__border-style) var(--button-base__border-color);
+  font-family: var(--button-base__font-family);
+  font-size: var(--button-base__font-size);
+  gap: var(--button-base__gap);
+  line-height: var(--button-base__line-height);
+  padding-inline: var(--button-base__padding-inline);
+  text-transform: var(--button-base__text-transform);
+}
+.button-primary {
+  --button-primary__background-color: var(--mer-accent__primary);
+  --button-primary__border-color: var(--button-primary__background-color);
+  --button-primary__color: var(--mer-text__on-primary);
+  --button-primary__font-weight: var(--mer-font__weight--semi-bold);
+  --button-primary__background-color--hover: var(--mer-accent__primary--hover);
+  --button-primary__border-color--hover: var(
+    --button-primary__background-color--hover
+  );
+  --button-primary__color--hover: var(--mer-text__on-primary);
+  --button-primary__background-color--active: var(
+    --mer-accent__primary--active
+  );
+  --button-primary__border-color--active: var(
+    --button-primary__background-color--active
+  );
+  --button-primary__color--active: var(--mer-text__on-primary--active);
+  --button-primary__background-color--disabled: var(
+    --mer-accent__primary--disabled
+  );
+  --button-primary__border-color--disabled: var(
+    --mer-border-color__primary--disabled
+  );
+  --button-primary__color--disabled: var(--mer-text__on-disabled);
+  background-color: var(--button-primary__background-color);
+  border-color: var(--button-primary__border-color);
+  color: var(--button-primary__color);
+  font-weight: var(--button-primary__font-weight);
+}
+.button-primary:hover {
+  background-color: var(--button-primary__background-color--hover);
+  border-color: var(--button-primary__border-color--hover);
+  color: var(--button-primary__color--hover);
+}
+.button-primary:active {
+  background-color: var(--button-primary__background-color--active);
+  border-color: var(--button-primary__border-color--active);
+  color: var(--button-primary__color--active);
+}
+.button-primary:disabled {
+  background-color: var(--button-primary__background-color--disabled);
+  border-color: var(--button-primary__border-color--disabled);
+  color: var(--button-primary__color--disabled);
 }
 
-:where(button, a) {
-  all: unset;
-  display: inline-flex;
-  align-items: center;
-  user-select: none;
-  touch-action: manipulation;
-  cursor: pointer;
+.button-secondary {
+  --button-secondary__background-color: transparent;
+  --button-secondary__border-color: var(--mer-border-color__neutral);
+  --button-secondary__color: var(--mer-text__neutral);
+  --button-secondary__font-weight: var(--mer-font__weight--semi-bold);
+  --button-secondary__background-color--hover: transparent;
+  --button-secondary__border-color--hover: var(
+    --mer-border-color__primary--hover
+  );
+  --button-secondary__color--hover: var(--mer-text__primary--hover);
+  --button-secondary__background-color--active: transparent;
+  --button-secondary__border-color--active: var(
+    --mer-border-color__primary--active
+  );
+  --button-secondary__color--active: var(--mer-text__on-primary--active);
+  --button-secondary__background-color--disabled: transparent;
+  --button-secondary__border-color--disabled: var(--mer-text__on-disabled);
+  --button-secondary__color--disabled: var(--mer-text__on-disabled);
+  background-color: var(--button-secondary__background-color);
+  border-color: var(--button-secondary__border-color);
+  color: var(--button-secondary__color);
+  font-weight: var(--button-secondary__font-weight);
+}
+.button-secondary:hover {
+  background-color: var(--button-secondary__background-color--hover);
+  border-color: var(--button-secondary__border-color--hover);
+  color: var(--button-secondary__color--hover);
+}
+.button-secondary:active {
+  background-color: var(--button-secondary__background-color--active);
+  border-color: var(--button-secondary__border-color--active);
+  color: var(--button-secondary__color--active);
+}
+.button-secondary:disabled, .button-secondary--disabled {
+  background-color: var(--button-secondary__background-color--disabled);
+  border-color: var(--button-secondary__border-color--disabled);
+  color: var(--button-secondary__color--disabled);
 }
 
-button:disabled {
-  pointer-events: none;
+.button-tertiary {
+  --button-tertiary__background-color: transparent;
+  --button-tertiary__border-color: transparent;
+  --button-tertiary__color: var(--mer-text__primary);
+  --button-tertiary__font-weight: var(--mer-font__weight--semi-bold);
+  --button-tertiary__background-color--hover: transparent;
+  --button-tertiary__border-color--hover: transparent;
+  --button-tertiary__color--hover: var(--mer-text__primary--hover);
+  --button-tertiary__background-color--active: transparent;
+  --button-tertiary__border-color--active: transparent;
+  --button-tertiary__color--active: var(--mer-text__primary--active);
+  --button-tertiary__background-color--disabled: transparent;
+  --button-tertiary__border-color--disabled: transparent;
+  --button-tertiary__color--disabled: var(--mer-text__on-disabled);
+  background-color: var(--button-tertiary__background-color);
+  border-color: var(--button-tertiary__border-color);
+  color: var(--button-tertiary__color);
+  font-weight: var(--button-tertiary__font-weight);
+}
+.button-tertiary:hover {
+  background-color: var(--button-tertiary__background-color--hover);
+  border-color: var(--button-tertiary__border-color--hover);
+  color: var(--button-tertiary__color--hover);
+}
+.button-tertiary:active {
+  background-color: var(--button-tertiary__background-color--active);
+  border-color: var(--button-tertiary__border-color--active);
+  color: var(--button-tertiary__color--active);
+}
+.button-tertiary:disabled, .button-tertiary--disabled {
+  background-color: var(--button-tertiary__background-color--disabled);
+  border-color: var(--button-tertiary__border-color--disabled);
+  color: var(--button-tertiary__color--disabled);
 }
 
-input,
-select,
-textarea {
-  padding: 0;
-  margin: 0;
-  background-color: unset;
-  border: unset;
-  color: unset;
-  font: unset;
-  outline: unset;
+.form-input-text-icon, .form-input-text-only {
+  --mer-form-input__border-color: var(--mer-color__neutral-gray--500);
+  --mer-form-input__border-style: solid;
+  --mer-form-input__border-width: var(--mer-border__width--sm);
+  --mer-form-input__border: var(--mer-form-input__border-width)
+    var(--mer-form-input__border-style) var(--mer-form-input__border-color);
+  --mer-form-input__border-radius: var(--mer-border__radius--sm);
+  --mer-form-input__color: var(--mer-text__bright);
+  --mer-form-input__font-size: var(--mer-body__font-size);
+  --mer-form-input__font-weight: var(--mer-text__on-surface);
+  --mer-form-input__icon-size: var(--mer-icon__box--sm);
+  --mer-form-input__font-family: var(--mer-font-family--inter-regular);
+  font-family: var(--mer-form-input__font-family);
+  border: var(--mer-form-input__border);
+  border-radius: var(--mer-form-input__border-radius);
+  color: var(--mer-form-input__color);
+  font-size: var(--mer-form-input__font-size);
+  block-size: var(--mer-control__block-size);
 }
 
-hr {
-  block-size: 1px;
-  margin: unset;
-  padding: unset;
-  border: unset;
-  background-color: currentColor;
+.form-input-text-only {
+  padding-inline: var(--mer-form-input__padding-inline);
 }
 
-fieldset,
-legend {
-  padding: 0;
-  margin: 0;
+.button-icon-only::before, .icon-mask::before {
+  content: "";
+  display: block;
+  inline-size: var(--mer-icon__box--sm);
+  block-size: var(--mer-icon__box--sm);
+  -webkit-mask: no-repeat center/100% var(--icon-path);
+  background-color: currentColor;
 }
 
-img {
+.button-icon-after-and-text::before, .button-icon-and-text::before, .icon-background::before {
+  content: "";
   display: block;
+  inline-size: var(--mer-icon__box--sm);
+  block-size: var(--mer-icon__box--sm);
+  background: no-repeat center/100% var(--icon-path);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  font: unset;
-  margin: 0;
-  padding: 0;
-  color: unset;
+.form-input-text-icon {
+  background: var(--icon-path) var(--mer-form-input__bg-position--x) center/var(--mer-form-input__icon-size) no-repeat;
 }
 
-body {
-  background-color: var(--mer-body__bg-color);
-  color: var(--mer-body__color);
-  font-size: var(--mer-body__font-size);
-  line-height: var(--mer-body__line-height);
-  font-family: var(--mer-font-family--primary);
-  margin: 0;
+.button-icon-only {
+  --button-icon-only__padding-inline: var(--mer-spacing--xs);
+  inline-size: var(--button-icon-only__inline-size);
+  padding: var(--button-icon-only__padding);
 }
 
-:root {
-  /*----------------------
-    General
-    ----------------------*/
-  --button__padding-block: 0;
-  --button__padding-inline: var(--mer-spacing--sm);
-  --button__border-width: 1px;
-  --button__border-style: solid;
-  --button__border-color: transparent;
-  --button__border-radius: var(--mer-border__radius--sm);
-  --button__font-family: inherit;
-  --button__font-size: inherit;
-  --button__font-weight: var(--mer-font__weight--semi-bold);
-  --button__letter-spacing: inherit;
-  --button__line-height: inherit;
-  --button__color: var(--mer-text__on-primary);
-  --button__height: var(--spacing-comp-05);
-  /*----------------------
-    Primary
-    ----------------------*/
-  --button-primary__color: inherit;
-  --button-primary__background-color: var(--mer-accent__primary);
-  --button-primary__border-color: var(--button-primary__background-color);
-  --button-primary__color--hover: var(--mer-text__on-primary);
-  --button-primary__background-color--hover: var(--mer-accent__primary--hover);
-  --button-primary__border-color--hover: var(
-    --button-primary__background-color--hover
-  );
-  --button-primary__color--active: var(--mer-text__on-primary--active);
-  --button-primary__background-color--active: var(
-    --mer-accent__primary--active
-  );
-  --button-primary__border-color--active: var(
-    --button-primary__background-color--active
-  );
-  --button-primary__color--disabled: inherit;
-  --button-primary__background-color--disabled: inherit;
-  --button-primary__border-color--disabled: inherit;
-  /*----------------------
-    Secondary
-    ----------------------*/
-  --button-secondary__color: inherit;
-  --button-secondary__background-color: inherit;
-  --button-secondary__border-color: inherit;
-  --button-secondary__color--hover: inherit;
-  --button-secondary__background-color--hover: inherit;
-  --button-secondary__border-color--hover: inherit;
-  --button-secondary__color--active: inherit;
-  --button-secondary__background-color--active: inherit;
-  --button-secondary__border-color--active: inherit;
-  --button-secondary__color--disabled: inherit;
-  --button-secondary__background-color--disabled: inherit;
-  --button-secondary__border-color--disabled: inherit;
-  /*----------------------
-    Outlined
-    ----------------------*/
-  --button-outlined__color: inherit;
-  --button-outlined__background-color: inherit;
-  --button-outlined__border-color: inherit;
-  --button-outlined__color--hover: inherit;
-  --button-outlined__background-color--hover: inherit;
-  --button-outlined__border-color--hover: inherit;
-  --button-outlined__color--active: inherit;
-  --button-outlined__background-color--active: inherit;
-  --button-outlined__border-color--active: inherit;
-  --button-outlined__color--disabled: inherit;
-  --button-outlined__background-color--disabled: inherit;
-  --button-outlined__border-color--disabled: inherit;
+.button-icon-after-and-text, .button-icon-and-text {
+  padding-inline: var(--button-base__padding-inline);
+}
+
+.button-icon-after-and-text::before {
+  order: 1;
+}
+
+.form-input-text-icon {
+  padding-inline-start: calc(var(--mer-form-input__padding-inline) * 2 + var(--mer-form-input__icon-size));
+}
+
+.tree-view-primary::part(item__checkbox), .checkbox {
+  --ch-checkbox__container-size: var(--mer-spacing--md);
+  --mer-checkbox__border: var(--mer-border__width--sm) solid
+    var(--mer-border-color__dim);
+  --mer-checkbox__border-radius: var(--mer-border__radius--xs);
+  --mer-checkbox-check__color: var(--mer-border-color__neutral--active);
+  --mer-checkbox__bg-color: transparent;
+  font-weight: var(--mer-label__font-weight);
+}
+.tree-view-primary::part(item__checkbox-input), .checkbox::part(input) {
+  background-color: var(--mer-checkbox__bg-color);
+  border: var(--mer-checkbox__border);
+  border-radius: var(--mer-checkbox__border-radius);
+}
+.tree-view-primary::part(item__checkbox-input):focus, .checkbox::part(input):focus {
+  border-color: var(--borders-un-border-color__focused);
+}
+.tree-view-primary::part(item__checkbox-input disabled), .checkbox::part(input disabled) {
+  border-color: var(--mer-text__disabled);
+}
+.tree-view-primary::part(item__checkbox-option checked), .checkbox::part(option checked) {
+  color: var(--mer-checkbox-check__color);
+}
+.tree-view-primary::part(item__checkbox-option indeterminate), .checkbox::part(option indeterminate) {
+  inline-size: 8px;
+  block-size: 1.5px;
+  border-radius: 2px;
+  color: var(--mer-checkbox-check__color);
+}
+.tree-view-primary::part(item__checkbox-option disabled), .checkbox::part(option disabled) {
+  color: var(--mer-text__disabled);
+}
+.checkbox::part(label) {
+  margin-inline-start: var(--mer-label__space);
+}
+.checkbox::part(label disabled) {
+  color: var(--mer-text__disabled);
+}
+
+.tree-view-primary {
+  --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--2xs);
+  --ch-tree-view-item-gap: var(--mer-spacing--xs);
+  --ch-tree-view-item__checkbox-size: var(--mer-spacing--md);
+  --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md);
+  --ch-tree-view-item__image-size: var(--mer-spacing--md);
+  --ch-tree-view-item__line--inset-inline-end: 4px;
+  --tree-view__min-inline-size: max-content;
+  --tree-view__padding: var(--mer-spacing--xs);
+  --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs);
+  --tree-view-item__color--hover: var(--mer-item__color--hover);
+  --tree-view-item__bg-color--hover: var(--mer-item__bg-color--hover);
+  --tree-view-item__color--selected: var(--mer-item__color--selected);
+  --tree-view-item__bg-color--selected: var(--mer-item__bg-color--selected);
+  --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface);
+  --tree-view-item-dashed-line__opacity: 0.3;
+  --tree-view-item-header__border-radius: var(--mer-border__radius--sm);
+  --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs));
+  --tree-view-item-downloading__inline-size: var(--mer-spacing--sm);
+  --tree-view-item-downloading__block-size: var(--mer-spacing--sm);
+  --tree-view-item-downloading__border: var(--mer-border__width--md) solid
+    var(--mer-accent__primary--active);
+  padding: var(--tree-view__padding);
+  min-inline-size: var(--tree-view__min-inline-size);
+}
+
+.tree-view-primary::part(drag-preview) {
+  padding-inline: 8px;
+  background-color: var(--mer-color__elevation--04);
+  border-radius: 10px;
+  box-shadow: var(--mer-elevation__box-shadow--03);
+  font-size: 8px;
+}
+
+.tree-view-primary::part(item drag-enter) {
+  background-color: var(--tree-view-item__bg-color--hover);
+  outline-width: var(--mer-border__width--sm);
+  outline-style: solid;
+  outline-color: var(--mer-color__primary-blue--200);
+  outline-offset: -1px;
+}
+
+.tree-view-primary::part(drop)::after {
+  background-color: var(--mer-color__primary-blue--200);
+}
+
+.tree-view-primary::part(item__header) {
+  border-radius: var(--tree-view-item-header__border-radius);
+  padding-inline-end: var(--tree-view-item-custom__padding-inline-end);
+}
+.tree-view-primary::part(item__header):focus-visible {
+  outline-width: var(--mer-border__width--sm);
+  outline-style: solid;
+  outline-color: var(--mer-color__primary-blue--200);
+  outline-offset: -1px;
+}
+.tree-view-primary::part(item__header not-selected):hover {
+  background-color: var(--tree-view-item__bg-color--hover);
+  color: var(--tree-view-item__color--hover);
+}
+.tree-view-primary::part(item__header selected) {
+  background-color: var(--tree-view-item__bg-color--selected);
+  color: var(--tree-view-item__color--selected);
+}
+
+.tree-view-primary::part(item__action) {
+  padding-block: var(--tree-view-item-header__padding-block);
+}
+
+.tree-view-primary::part(item__line) {
+  border-color: var(--tree-view-item-dashed-line__border-color);
+  opacity: var(--tree-view-item-dashed-line__opacity);
+}
+
+.tree-view-primary::part(item__downloading) {
+  inline-size: var(--tree-view-item-downloading__inline-size);
+  block-size: var(--tree-view-item-downloading__block-size);
+  border: var(--tree-view-item-downloading__border);
+  border-inline-start-color: transparent;
+}
+
+/*multicolor lists*/
+/*monochrome lists*/
+.light .icon__system_warning--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#primary");
+}
+.light .icon__system_warning--primary-hover, .light .icon__system_warning--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#primary-hover");
+}
+.light .icon__system_warning--primary-active, .light .icon__system_warning--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#primary-active");
+}
+.light .icon__system_warning--primary-disabled, .light .icon__system_warning--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#primary-disabled");
+}
+.light .icon__system_warning--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#on-primary");
+}
+.light .icon__system_warning--on-primary-hover, .light .icon__system_warning--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#on-primary-hover");
+}
+.light .icon__system_warning--on-primary-active, .light .icon__system_warning--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#on-primary-active");
+}
+.light .icon__system_warning--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#on-disabled");
+}
+.light .icon__system_warning--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/warning.svg#neutral");
+}
+.light .icon__system_user--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#primary");
+}
+.light .icon__system_user--primary-hover, .light .icon__system_user--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#primary-hover");
+}
+.light .icon__system_user--primary-active, .light .icon__system_user--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#primary-active");
+}
+.light .icon__system_user--primary-disabled, .light .icon__system_user--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#primary-disabled");
+}
+.light .icon__system_user--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#on-primary");
+}
+.light .icon__system_user--on-primary-hover, .light .icon__system_user--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#on-primary-hover");
+}
+.light .icon__system_user--on-primary-active, .light .icon__system_user--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#on-primary-active");
+}
+.light .icon__system_user--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#on-disabled");
+}
+.light .icon__system_user--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/user.svg#neutral");
+}
+.light .icon__system_tools--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#primary");
+}
+.light .icon__system_tools--primary-hover, .light .icon__system_tools--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#primary-hover");
+}
+.light .icon__system_tools--primary-active, .light .icon__system_tools--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#primary-active");
+}
+.light .icon__system_tools--primary-disabled, .light .icon__system_tools--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#primary-disabled");
+}
+.light .icon__system_tools--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#on-primary");
+}
+.light .icon__system_tools--on-primary-hover, .light .icon__system_tools--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#on-primary-hover");
+}
+.light .icon__system_tools--on-primary-active, .light .icon__system_tools--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#on-primary-active");
+}
+.light .icon__system_tools--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#on-disabled");
+}
+.light .icon__system_tools--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/tools.svg#neutral");
+}
+.light .icon__system_time--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#primary");
+}
+.light .icon__system_time--primary-hover, .light .icon__system_time--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#primary-hover");
+}
+.light .icon__system_time--primary-active, .light .icon__system_time--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#primary-active");
+}
+.light .icon__system_time--primary-disabled, .light .icon__system_time--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#primary-disabled");
+}
+.light .icon__system_time--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#on-primary");
+}
+.light .icon__system_time--on-primary-hover, .light .icon__system_time--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#on-primary-hover");
+}
+.light .icon__system_time--on-primary-active, .light .icon__system_time--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#on-primary-active");
+}
+.light .icon__system_time--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#on-disabled");
+}
+.light .icon__system_time--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/time.svg#neutral");
+}
+.light .icon__system_thunder--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#primary");
+}
+.light .icon__system_thunder--primary-hover, .light .icon__system_thunder--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#primary-hover");
+}
+.light .icon__system_thunder--primary-active, .light .icon__system_thunder--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#primary-active");
+}
+.light .icon__system_thunder--primary-disabled, .light .icon__system_thunder--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#primary-disabled");
+}
+.light .icon__system_thunder--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#on-primary");
+}
+.light .icon__system_thunder--on-primary-hover, .light .icon__system_thunder--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#on-primary-hover");
+}
+.light .icon__system_thunder--on-primary-active, .light .icon__system_thunder--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#on-primary-active");
+}
+.light .icon__system_thunder--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#on-disabled");
+}
+.light .icon__system_thunder--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/thunder.svg#neutral");
+}
+.light .icon__system_show--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#primary");
+}
+.light .icon__system_show--primary-hover, .light .icon__system_show--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#primary-hover");
+}
+.light .icon__system_show--primary-active, .light .icon__system_show--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#primary-active");
+}
+.light .icon__system_show--primary-disabled, .light .icon__system_show--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#primary-disabled");
+}
+.light .icon__system_show--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#on-primary");
+}
+.light .icon__system_show--on-primary-hover, .light .icon__system_show--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#on-primary-hover");
+}
+.light .icon__system_show--on-primary-active, .light .icon__system_show--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#on-primary-active");
+}
+.light .icon__system_show--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#on-disabled");
+}
+.light .icon__system_show--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/show.svg#neutral");
+}
+.light .icon__system_settings--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#primary");
+}
+.light .icon__system_settings--primary-hover, .light .icon__system_settings--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#primary-hover");
+}
+.light .icon__system_settings--primary-active, .light .icon__system_settings--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#primary-active");
+}
+.light .icon__system_settings--primary-disabled, .light .icon__system_settings--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#primary-disabled");
+}
+.light .icon__system_settings--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#on-primary");
+}
+.light .icon__system_settings--on-primary-hover, .light .icon__system_settings--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#on-primary-hover");
+}
+.light .icon__system_settings--on-primary-active, .light .icon__system_settings--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#on-primary-active");
+}
+.light .icon__system_settings--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#on-disabled");
+}
+.light .icon__system_settings--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/settings.svg#neutral");
+}
+.light .icon__system_search--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#primary");
+}
+.light .icon__system_search--primary-hover, .light .icon__system_search--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#primary-hover");
+}
+.light .icon__system_search--primary-active, .light .icon__system_search--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#primary-active");
+}
+.light .icon__system_search--primary-disabled, .light .icon__system_search--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#primary-disabled");
+}
+.light .icon__system_search--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#on-primary");
+}
+.light .icon__system_search--on-primary-hover, .light .icon__system_search--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#on-primary-hover");
+}
+.light .icon__system_search--on-primary-active, .light .icon__system_search--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#on-primary-active");
+}
+.light .icon__system_search--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#on-disabled");
+}
+.light .icon__system_search--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/search.svg#neutral");
+}
+.light .icon__system_retry--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#primary");
+}
+.light .icon__system_retry--primary-hover, .light .icon__system_retry--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#primary-hover");
+}
+.light .icon__system_retry--primary-active, .light .icon__system_retry--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#primary-active");
+}
+.light .icon__system_retry--primary-disabled, .light .icon__system_retry--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#primary-disabled");
+}
+.light .icon__system_retry--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#on-primary");
+}
+.light .icon__system_retry--on-primary-hover, .light .icon__system_retry--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#on-primary-hover");
+}
+.light .icon__system_retry--on-primary-active, .light .icon__system_retry--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#on-primary-active");
+}
+.light .icon__system_retry--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#on-disabled");
+}
+.light .icon__system_retry--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/retry.svg#neutral");
+}
+.light .icon__system_qr-code--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#primary");
+}
+.light .icon__system_qr-code--primary-hover, .light .icon__system_qr-code--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#primary-hover");
+}
+.light .icon__system_qr-code--primary-active, .light .icon__system_qr-code--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#primary-active");
+}
+.light .icon__system_qr-code--primary-disabled, .light .icon__system_qr-code--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#primary-disabled");
+}
+.light .icon__system_qr-code--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#on-primary");
+}
+.light .icon__system_qr-code--on-primary-hover, .light .icon__system_qr-code--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#on-primary-hover");
+}
+.light .icon__system_qr-code--on-primary-active, .light .icon__system_qr-code--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#on-primary-active");
+}
+.light .icon__system_qr-code--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#on-disabled");
+}
+.light .icon__system_qr-code--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/qr-code.svg#neutral");
+}
+.light .icon__system_order-numberically--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#primary");
+}
+.light .icon__system_order-numberically--primary-hover, .light .icon__system_order-numberically--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#primary-hover");
+}
+.light .icon__system_order-numberically--primary-active, .light .icon__system_order-numberically--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#primary-active");
+}
+.light .icon__system_order-numberically--primary-disabled, .light .icon__system_order-numberically--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#primary-disabled");
+}
+.light .icon__system_order-numberically--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#on-primary");
+}
+.light .icon__system_order-numberically--on-primary-hover, .light .icon__system_order-numberically--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#on-primary-hover");
+}
+.light .icon__system_order-numberically--on-primary-active, .light .icon__system_order-numberically--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#on-primary-active");
+}
+.light .icon__system_order-numberically--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#on-disabled");
+}
+.light .icon__system_order-numberically--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/order-numberically.svg#neutral");
+}
+.light .icon__system_news--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#primary");
+}
+.light .icon__system_news--primary-hover, .light .icon__system_news--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#primary-hover");
+}
+.light .icon__system_news--primary-active, .light .icon__system_news--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#primary-active");
+}
+.light .icon__system_news--primary-disabled, .light .icon__system_news--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#primary-disabled");
+}
+.light .icon__system_news--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#on-primary");
+}
+.light .icon__system_news--on-primary-hover, .light .icon__system_news--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#on-primary-hover");
+}
+.light .icon__system_news--on-primary-active, .light .icon__system_news--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#on-primary-active");
+}
+.light .icon__system_news--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#on-disabled");
+}
+.light .icon__system_news--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/news.svg#neutral");
+}
+.light .icon__system_more-options-vertical--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#primary");
+}
+.light .icon__system_more-options-vertical--primary-hover, .light .icon__system_more-options-vertical--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#primary-hover");
+}
+.light .icon__system_more-options-vertical--primary-active, .light .icon__system_more-options-vertical--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#primary-active");
+}
+.light .icon__system_more-options-vertical--primary-disabled, .light .icon__system_more-options-vertical--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#primary-disabled");
+}
+.light .icon__system_more-options-vertical--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#on-primary");
+}
+.light .icon__system_more-options-vertical--on-primary-hover, .light .icon__system_more-options-vertical--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#on-primary-hover");
+}
+.light .icon__system_more-options-vertical--on-primary-active, .light .icon__system_more-options-vertical--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#on-primary-active");
+}
+.light .icon__system_more-options-vertical--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#on-disabled");
+}
+.light .icon__system_more-options-vertical--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/more-options-vertical.svg#neutral");
+}
+.light .icon__system_mail--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#primary");
+}
+.light .icon__system_mail--primary-hover, .light .icon__system_mail--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#primary-hover");
+}
+.light .icon__system_mail--primary-active, .light .icon__system_mail--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#primary-active");
+}
+.light .icon__system_mail--primary-disabled, .light .icon__system_mail--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#primary-disabled");
+}
+.light .icon__system_mail--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#on-primary");
+}
+.light .icon__system_mail--on-primary-hover, .light .icon__system_mail--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#on-primary-hover");
+}
+.light .icon__system_mail--on-primary-active, .light .icon__system_mail--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#on-primary-active");
+}
+.light .icon__system_mail--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#on-disabled");
+}
+.light .icon__system_mail--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/mail.svg#neutral");
+}
+.light .icon__system_logout--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#primary");
+}
+.light .icon__system_logout--primary-hover, .light .icon__system_logout--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#primary-hover");
+}
+.light .icon__system_logout--primary-active, .light .icon__system_logout--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#primary-active");
+}
+.light .icon__system_logout--primary-disabled, .light .icon__system_logout--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#primary-disabled");
+}
+.light .icon__system_logout--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#on-primary");
+}
+.light .icon__system_logout--on-primary-hover, .light .icon__system_logout--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#on-primary-hover");
+}
+.light .icon__system_logout--on-primary-active, .light .icon__system_logout--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#on-primary-active");
+}
+.light .icon__system_logout--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#on-disabled");
+}
+.light .icon__system_logout--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/logout.svg#neutral");
+}
+.light .icon__system_log-out--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#primary");
+}
+.light .icon__system_log-out--primary-hover, .light .icon__system_log-out--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#primary-hover");
+}
+.light .icon__system_log-out--primary-active, .light .icon__system_log-out--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#primary-active");
+}
+.light .icon__system_log-out--primary-disabled, .light .icon__system_log-out--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#primary-disabled");
+}
+.light .icon__system_log-out--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#on-primary");
+}
+.light .icon__system_log-out--on-primary-hover, .light .icon__system_log-out--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#on-primary-hover");
+}
+.light .icon__system_log-out--on-primary-active, .light .icon__system_log-out--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#on-primary-active");
+}
+.light .icon__system_log-out--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#on-disabled");
+}
+.light .icon__system_log-out--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/log-out.svg#neutral");
+}
+.light .icon__system_lock--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#primary");
+}
+.light .icon__system_lock--primary-hover, .light .icon__system_lock--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#primary-hover");
+}
+.light .icon__system_lock--primary-active, .light .icon__system_lock--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#primary-active");
+}
+.light .icon__system_lock--primary-disabled, .light .icon__system_lock--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#primary-disabled");
+}
+.light .icon__system_lock--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#on-primary");
+}
+.light .icon__system_lock--on-primary-hover, .light .icon__system_lock--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#on-primary-hover");
+}
+.light .icon__system_lock--on-primary-active, .light .icon__system_lock--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#on-primary-active");
+}
+.light .icon__system_lock--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#on-disabled");
+}
+.light .icon__system_lock--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/lock.svg#neutral");
+}
+.light .icon__system_list--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#primary");
+}
+.light .icon__system_list--primary-hover, .light .icon__system_list--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#primary-hover");
+}
+.light .icon__system_list--primary-active, .light .icon__system_list--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#primary-active");
+}
+.light .icon__system_list--primary-disabled, .light .icon__system_list--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#primary-disabled");
+}
+.light .icon__system_list--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#on-primary");
+}
+.light .icon__system_list--on-primary-hover, .light .icon__system_list--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#on-primary-hover");
+}
+.light .icon__system_list--on-primary-active, .light .icon__system_list--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#on-primary-active");
+}
+.light .icon__system_list--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#on-disabled");
+}
+.light .icon__system_list--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/list.svg#neutral");
+}
+.light .icon__system_link--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#primary");
+}
+.light .icon__system_link--primary-hover, .light .icon__system_link--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#primary-hover");
+}
+.light .icon__system_link--primary-active, .light .icon__system_link--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#primary-active");
+}
+.light .icon__system_link--primary-disabled, .light .icon__system_link--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#primary-disabled");
+}
+.light .icon__system_link--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#on-primary");
+}
+.light .icon__system_link--on-primary-hover, .light .icon__system_link--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#on-primary-hover");
+}
+.light .icon__system_link--on-primary-active, .light .icon__system_link--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#on-primary-active");
+}
+.light .icon__system_link--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#on-disabled");
+}
+.light .icon__system_link--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/link.svg#neutral");
+}
+.light .icon__system_link-variant--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#primary");
+}
+.light .icon__system_link-variant--primary-hover, .light .icon__system_link-variant--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#primary-hover");
+}
+.light .icon__system_link-variant--primary-active, .light .icon__system_link-variant--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#primary-active");
+}
+.light .icon__system_link-variant--primary-disabled, .light .icon__system_link-variant--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#primary-disabled");
+}
+.light .icon__system_link-variant--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#on-primary");
+}
+.light .icon__system_link-variant--on-primary-hover, .light .icon__system_link-variant--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#on-primary-hover");
+}
+.light .icon__system_link-variant--on-primary-active, .light .icon__system_link-variant--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#on-primary-active");
+}
+.light .icon__system_link-variant--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#on-disabled");
+}
+.light .icon__system_link-variant--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/link-variant.svg#neutral");
+}
+.light .icon__system_home--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#primary");
+}
+.light .icon__system_home--primary-hover, .light .icon__system_home--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#primary-hover");
+}
+.light .icon__system_home--primary-active, .light .icon__system_home--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#primary-active");
+}
+.light .icon__system_home--primary-disabled, .light .icon__system_home--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#primary-disabled");
+}
+.light .icon__system_home--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#on-primary");
+}
+.light .icon__system_home--on-primary-hover, .light .icon__system_home--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#on-primary-hover");
+}
+.light .icon__system_home--on-primary-active, .light .icon__system_home--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#on-primary-active");
+}
+.light .icon__system_home--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#on-disabled");
+}
+.light .icon__system_home--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/home.svg#neutral");
+}
+.light .icon__system_grid--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#primary");
+}
+.light .icon__system_grid--primary-hover, .light .icon__system_grid--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#primary-hover");
+}
+.light .icon__system_grid--primary-active, .light .icon__system_grid--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#primary-active");
+}
+.light .icon__system_grid--primary-disabled, .light .icon__system_grid--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#primary-disabled");
+}
+.light .icon__system_grid--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#on-primary");
+}
+.light .icon__system_grid--on-primary-hover, .light .icon__system_grid--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#on-primary-hover");
+}
+.light .icon__system_grid--on-primary-active, .light .icon__system_grid--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#on-primary-active");
+}
+.light .icon__system_grid--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#on-disabled");
+}
+.light .icon__system_grid--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/grid.svg#neutral");
+}
+.light .icon__system_filters--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#primary");
+}
+.light .icon__system_filters--primary-hover, .light .icon__system_filters--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#primary-hover");
+}
+.light .icon__system_filters--primary-active, .light .icon__system_filters--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#primary-active");
+}
+.light .icon__system_filters--primary-disabled, .light .icon__system_filters--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#primary-disabled");
+}
+.light .icon__system_filters--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#on-primary");
+}
+.light .icon__system_filters--on-primary-hover, .light .icon__system_filters--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#on-primary-hover");
+}
+.light .icon__system_filters--on-primary-active, .light .icon__system_filters--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#on-primary-active");
+}
+.light .icon__system_filters--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#on-disabled");
+}
+.light .icon__system_filters--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/filters.svg#neutral");
+}
+.light .icon__system_expand--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#primary");
+}
+.light .icon__system_expand--primary-hover, .light .icon__system_expand--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#primary-hover");
+}
+.light .icon__system_expand--primary-active, .light .icon__system_expand--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#primary-active");
+}
+.light .icon__system_expand--primary-disabled, .light .icon__system_expand--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#primary-disabled");
+}
+.light .icon__system_expand--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#on-primary");
+}
+.light .icon__system_expand--on-primary-hover, .light .icon__system_expand--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#on-primary-hover");
+}
+.light .icon__system_expand--on-primary-active, .light .icon__system_expand--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#on-primary-active");
+}
+.light .icon__system_expand--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#on-disabled");
+}
+.light .icon__system_expand--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/expand.svg#neutral");
+}
+.light .icon__system_drag--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#primary");
+}
+.light .icon__system_drag--primary-hover, .light .icon__system_drag--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#primary-hover");
+}
+.light .icon__system_drag--primary-active, .light .icon__system_drag--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#primary-active");
+}
+.light .icon__system_drag--primary-disabled, .light .icon__system_drag--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#primary-disabled");
+}
+.light .icon__system_drag--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#on-primary");
+}
+.light .icon__system_drag--on-primary-hover, .light .icon__system_drag--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#on-primary-hover");
+}
+.light .icon__system_drag--on-primary-active, .light .icon__system_drag--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#on-primary-active");
+}
+.light .icon__system_drag--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#on-disabled");
+}
+.light .icon__system_drag--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/drag.svg#neutral");
+}
+.light .icon__system_download--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#primary");
+}
+.light .icon__system_download--primary-hover, .light .icon__system_download--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#primary-hover");
+}
+.light .icon__system_download--primary-active, .light .icon__system_download--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#primary-active");
+}
+.light .icon__system_download--primary-disabled, .light .icon__system_download--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#primary-disabled");
+}
+.light .icon__system_download--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#on-primary");
+}
+.light .icon__system_download--on-primary-hover, .light .icon__system_download--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#on-primary-hover");
+}
+.light .icon__system_download--on-primary-active, .light .icon__system_download--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#on-primary-active");
+}
+.light .icon__system_download--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#on-disabled");
+}
+.light .icon__system_download--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/download.svg#neutral");
+}
+.light .icon__system_database--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#primary");
+}
+.light .icon__system_database--primary-hover, .light .icon__system_database--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#primary-hover");
+}
+.light .icon__system_database--primary-active, .light .icon__system_database--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#primary-active");
+}
+.light .icon__system_database--primary-disabled, .light .icon__system_database--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#primary-disabled");
+}
+.light .icon__system_database--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#on-primary");
+}
+.light .icon__system_database--on-primary-hover, .light .icon__system_database--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#on-primary-hover");
+}
+.light .icon__system_database--on-primary-active, .light .icon__system_database--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#on-primary-active");
+}
+.light .icon__system_database--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#on-disabled");
+}
+.light .icon__system_database--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/database.svg#neutral");
+}
+.light .icon__system_dashboard--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#primary");
+}
+.light .icon__system_dashboard--primary-hover, .light .icon__system_dashboard--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#primary-hover");
+}
+.light .icon__system_dashboard--primary-active, .light .icon__system_dashboard--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#primary-active");
+}
+.light .icon__system_dashboard--primary-disabled, .light .icon__system_dashboard--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#primary-disabled");
+}
+.light .icon__system_dashboard--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#on-primary");
+}
+.light .icon__system_dashboard--on-primary-hover, .light .icon__system_dashboard--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#on-primary-hover");
+}
+.light .icon__system_dashboard--on-primary-active, .light .icon__system_dashboard--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#on-primary-active");
+}
+.light .icon__system_dashboard--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#on-disabled");
+}
+.light .icon__system_dashboard--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/dashboard.svg#neutral");
+}
+.light .icon__system_contact--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#primary");
+}
+.light .icon__system_contact--primary-hover, .light .icon__system_contact--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#primary-hover");
+}
+.light .icon__system_contact--primary-active, .light .icon__system_contact--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#primary-active");
+}
+.light .icon__system_contact--primary-disabled, .light .icon__system_contact--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#primary-disabled");
+}
+.light .icon__system_contact--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#on-primary");
+}
+.light .icon__system_contact--on-primary-hover, .light .icon__system_contact--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#on-primary-hover");
+}
+.light .icon__system_contact--on-primary-active, .light .icon__system_contact--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#on-primary-active");
+}
+.light .icon__system_contact--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#on-disabled");
+}
+.light .icon__system_contact--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/contact.svg#neutral");
+}
+.light .icon__system_connector--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#primary");
+}
+.light .icon__system_connector--primary-hover, .light .icon__system_connector--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#primary-hover");
+}
+.light .icon__system_connector--primary-active, .light .icon__system_connector--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#primary-active");
+}
+.light .icon__system_connector--primary-disabled, .light .icon__system_connector--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#primary-disabled");
+}
+.light .icon__system_connector--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#on-primary");
+}
+.light .icon__system_connector--on-primary-hover, .light .icon__system_connector--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#on-primary-hover");
+}
+.light .icon__system_connector--on-primary-active, .light .icon__system_connector--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#on-primary-active");
+}
+.light .icon__system_connector--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#on-disabled");
+}
+.light .icon__system_connector--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/connector.svg#neutral");
+}
+.light .icon__system_close--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#primary");
+}
+.light .icon__system_close--primary-hover, .light .icon__system_close--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#primary-hover");
+}
+.light .icon__system_close--primary-active, .light .icon__system_close--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#primary-active");
+}
+.light .icon__system_close--primary-disabled, .light .icon__system_close--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#primary-disabled");
+}
+.light .icon__system_close--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#on-primary");
+}
+.light .icon__system_close--on-primary-hover, .light .icon__system_close--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#on-primary-hover");
+}
+.light .icon__system_close--on-primary-active, .light .icon__system_close--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#on-primary-active");
+}
+.light .icon__system_close--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#on-disabled");
+}
+.light .icon__system_close--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/close.svg#neutral");
+}
+.light .icon__system_chevron-up--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#primary");
+}
+.light .icon__system_chevron-up--primary-hover, .light .icon__system_chevron-up--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#primary-hover");
+}
+.light .icon__system_chevron-up--primary-active, .light .icon__system_chevron-up--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#primary-active");
+}
+.light .icon__system_chevron-up--primary-disabled, .light .icon__system_chevron-up--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#primary-disabled");
+}
+.light .icon__system_chevron-up--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#on-primary");
+}
+.light .icon__system_chevron-up--on-primary-hover, .light .icon__system_chevron-up--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#on-primary-hover");
+}
+.light .icon__system_chevron-up--on-primary-active, .light .icon__system_chevron-up--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#on-primary-active");
+}
+.light .icon__system_chevron-up--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#on-disabled");
+}
+.light .icon__system_chevron-up--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-up.svg#neutral");
+}
+.light .icon__system_chevron-right--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#primary");
+}
+.light .icon__system_chevron-right--primary-hover, .light .icon__system_chevron-right--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#primary-hover");
+}
+.light .icon__system_chevron-right--primary-active, .light .icon__system_chevron-right--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#primary-active");
+}
+.light .icon__system_chevron-right--primary-disabled, .light .icon__system_chevron-right--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#primary-disabled");
+}
+.light .icon__system_chevron-right--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#on-primary");
+}
+.light .icon__system_chevron-right--on-primary-hover, .light .icon__system_chevron-right--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#on-primary-hover");
+}
+.light .icon__system_chevron-right--on-primary-active, .light .icon__system_chevron-right--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#on-primary-active");
+}
+.light .icon__system_chevron-right--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#on-disabled");
+}
+.light .icon__system_chevron-right--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-right.svg#neutral");
+}
+.light .icon__system_chevron-down--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#primary");
+}
+.light .icon__system_chevron-down--primary-hover, .light .icon__system_chevron-down--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#primary-hover");
+}
+.light .icon__system_chevron-down--primary-active, .light .icon__system_chevron-down--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#primary-active");
+}
+.light .icon__system_chevron-down--primary-disabled, .light .icon__system_chevron-down--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#primary-disabled");
+}
+.light .icon__system_chevron-down--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#on-primary");
+}
+.light .icon__system_chevron-down--on-primary-hover, .light .icon__system_chevron-down--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#on-primary-hover");
+}
+.light .icon__system_chevron-down--on-primary-active, .light .icon__system_chevron-down--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#on-primary-active");
+}
+.light .icon__system_chevron-down--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#on-disabled");
+}
+.light .icon__system_chevron-down--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/chevron-down.svg#neutral");
+}
+.light .icon__system_check--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#primary");
+}
+.light .icon__system_check--primary-hover, .light .icon__system_check--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#primary-hover");
+}
+.light .icon__system_check--primary-active, .light .icon__system_check--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#primary-active");
+}
+.light .icon__system_check--primary-disabled, .light .icon__system_check--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#primary-disabled");
+}
+.light .icon__system_check--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#on-primary");
+}
+.light .icon__system_check--on-primary-hover, .light .icon__system_check--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#on-primary-hover");
+}
+.light .icon__system_check--on-primary-active, .light .icon__system_check--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#on-primary-active");
+}
+.light .icon__system_check--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#on-disabled");
+}
+.light .icon__system_check--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/check.svg#neutral");
+}
+.light .icon__system_card--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#primary");
+}
+.light .icon__system_card--primary-hover, .light .icon__system_card--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#primary-hover");
+}
+.light .icon__system_card--primary-active, .light .icon__system_card--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#primary-active");
+}
+.light .icon__system_card--primary-disabled, .light .icon__system_card--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#primary-disabled");
+}
+.light .icon__system_card--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#on-primary");
+}
+.light .icon__system_card--on-primary-hover, .light .icon__system_card--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#on-primary-hover");
+}
+.light .icon__system_card--on-primary-active, .light .icon__system_card--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#on-primary-active");
+}
+.light .icon__system_card--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#on-disabled");
+}
+.light .icon__system_card--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/card.svg#neutral");
+}
+.light .icon__system_card-variant--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#primary");
+}
+.light .icon__system_card-variant--primary-hover, .light .icon__system_card-variant--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#primary-hover");
+}
+.light .icon__system_card-variant--primary-active, .light .icon__system_card-variant--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#primary-active");
+}
+.light .icon__system_card-variant--primary-disabled, .light .icon__system_card-variant--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#primary-disabled");
+}
+.light .icon__system_card-variant--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#on-primary");
+}
+.light .icon__system_card-variant--on-primary-hover, .light .icon__system_card-variant--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#on-primary-hover");
+}
+.light .icon__system_card-variant--on-primary-active, .light .icon__system_card-variant--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#on-primary-active");
+}
+.light .icon__system_card-variant--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#on-disabled");
+}
+.light .icon__system_card-variant--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/card-variant.svg#neutral");
+}
+.light .icon__system_assistant--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#primary");
+}
+.light .icon__system_assistant--primary-hover, .light .icon__system_assistant--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#primary-hover");
+}
+.light .icon__system_assistant--primary-active, .light .icon__system_assistant--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#primary-active");
+}
+.light .icon__system_assistant--primary-disabled, .light .icon__system_assistant--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#primary-disabled");
+}
+.light .icon__system_assistant--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#on-primary");
+}
+.light .icon__system_assistant--on-primary-hover, .light .icon__system_assistant--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#on-primary-hover");
+}
+.light .icon__system_assistant--on-primary-active, .light .icon__system_assistant--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#on-primary-active");
+}
+.light .icon__system_assistant--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#on-disabled");
+}
+.light .icon__system_assistant--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/assistant.svg#neutral");
+}
+.light .icon__system_arrow-right--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#primary");
+}
+.light .icon__system_arrow-right--primary-hover, .light .icon__system_arrow-right--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#primary-hover");
+}
+.light .icon__system_arrow-right--primary-active, .light .icon__system_arrow-right--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#primary-active");
+}
+.light .icon__system_arrow-right--primary-disabled, .light .icon__system_arrow-right--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#primary-disabled");
+}
+.light .icon__system_arrow-right--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#on-primary");
+}
+.light .icon__system_arrow-right--on-primary-hover, .light .icon__system_arrow-right--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#on-primary-hover");
+}
+.light .icon__system_arrow-right--on-primary-active, .light .icon__system_arrow-right--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#on-primary-active");
+}
+.light .icon__system_arrow-right--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#on-disabled");
+}
+.light .icon__system_arrow-right--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/arrow-right.svg#neutral");
+}
+.light .icon__system_add--primary {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#primary");
+}
+.light .icon__system_add--primary-hover, .light .icon__system_add--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#primary-hover");
+}
+.light .icon__system_add--primary-active, .light .icon__system_add--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#primary-active");
+}
+.light .icon__system_add--primary-disabled, .light .icon__system_add--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#primary-disabled");
+}
+.light .icon__system_add--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#on-primary");
+}
+.light .icon__system_add--on-primary-hover, .light .icon__system_add--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#on-primary-hover");
+}
+.light .icon__system_add--on-primary-active, .light .icon__system_add--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#on-primary-active");
+}
+.light .icon__system_add--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#on-disabled");
+}
+.light .icon__system_add--neutral {
+  --icon-path: url("../assets/icons/.generated/system/light/add.svg#neutral");
+}
+.dark .icon__system_warning--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#primary");
+}
+.dark .icon__system_warning--primary-hover, .dark .icon__system_warning--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#primary-hover");
+}
+.dark .icon__system_warning--primary-active, .dark .icon__system_warning--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#primary-active");
+}
+.dark .icon__system_warning--primary-disabled, .dark .icon__system_warning--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#primary-disabled");
+}
+.dark .icon__system_warning--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#on-primary");
+}
+.dark .icon__system_warning--on-primary-hover, .dark .icon__system_warning--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#on-primary-hover");
+}
+.dark .icon__system_warning--on-primary-active, .dark .icon__system_warning--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#on-primary-active");
+}
+.dark .icon__system_warning--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#on-disabled");
+}
+.dark .icon__system_warning--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/warning.svg#neutral");
+}
+.dark .icon__system_user--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#primary");
+}
+.dark .icon__system_user--primary-hover, .dark .icon__system_user--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#primary-hover");
+}
+.dark .icon__system_user--primary-active, .dark .icon__system_user--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#primary-active");
+}
+.dark .icon__system_user--primary-disabled, .dark .icon__system_user--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#primary-disabled");
+}
+.dark .icon__system_user--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#on-primary");
+}
+.dark .icon__system_user--on-primary-hover, .dark .icon__system_user--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#on-primary-hover");
+}
+.dark .icon__system_user--on-primary-active, .dark .icon__system_user--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#on-primary-active");
+}
+.dark .icon__system_user--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#on-disabled");
+}
+.dark .icon__system_user--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/user.svg#neutral");
+}
+.dark .icon__system_tools--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#primary");
+}
+.dark .icon__system_tools--primary-hover, .dark .icon__system_tools--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#primary-hover");
+}
+.dark .icon__system_tools--primary-active, .dark .icon__system_tools--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#primary-active");
+}
+.dark .icon__system_tools--primary-disabled, .dark .icon__system_tools--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#primary-disabled");
+}
+.dark .icon__system_tools--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#on-primary");
+}
+.dark .icon__system_tools--on-primary-hover, .dark .icon__system_tools--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#on-primary-hover");
+}
+.dark .icon__system_tools--on-primary-active, .dark .icon__system_tools--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#on-primary-active");
+}
+.dark .icon__system_tools--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#on-disabled");
+}
+.dark .icon__system_tools--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/tools.svg#neutral");
+}
+.dark .icon__system_time--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#primary");
+}
+.dark .icon__system_time--primary-hover, .dark .icon__system_time--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#primary-hover");
+}
+.dark .icon__system_time--primary-active, .dark .icon__system_time--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#primary-active");
+}
+.dark .icon__system_time--primary-disabled, .dark .icon__system_time--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#primary-disabled");
+}
+.dark .icon__system_time--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#on-primary");
+}
+.dark .icon__system_time--on-primary-hover, .dark .icon__system_time--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#on-primary-hover");
+}
+.dark .icon__system_time--on-primary-active, .dark .icon__system_time--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#on-primary-active");
+}
+.dark .icon__system_time--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#on-disabled");
+}
+.dark .icon__system_time--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/time.svg#neutral");
+}
+.dark .icon__system_thunder--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#primary");
+}
+.dark .icon__system_thunder--primary-hover, .dark .icon__system_thunder--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#primary-hover");
+}
+.dark .icon__system_thunder--primary-active, .dark .icon__system_thunder--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#primary-active");
+}
+.dark .icon__system_thunder--primary-disabled, .dark .icon__system_thunder--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#primary-disabled");
+}
+.dark .icon__system_thunder--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#on-primary");
+}
+.dark .icon__system_thunder--on-primary-hover, .dark .icon__system_thunder--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#on-primary-hover");
+}
+.dark .icon__system_thunder--on-primary-active, .dark .icon__system_thunder--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#on-primary-active");
+}
+.dark .icon__system_thunder--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#on-disabled");
+}
+.dark .icon__system_thunder--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/thunder.svg#neutral");
+}
+.dark .icon__system_show--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#primary");
+}
+.dark .icon__system_show--primary-hover, .dark .icon__system_show--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#primary-hover");
+}
+.dark .icon__system_show--primary-active, .dark .icon__system_show--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#primary-active");
+}
+.dark .icon__system_show--primary-disabled, .dark .icon__system_show--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#primary-disabled");
+}
+.dark .icon__system_show--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#on-primary");
+}
+.dark .icon__system_show--on-primary-hover, .dark .icon__system_show--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#on-primary-hover");
+}
+.dark .icon__system_show--on-primary-active, .dark .icon__system_show--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#on-primary-active");
+}
+.dark .icon__system_show--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#on-disabled");
+}
+.dark .icon__system_show--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/show.svg#neutral");
+}
+.dark .icon__system_settings--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#primary");
+}
+.dark .icon__system_settings--primary-hover, .dark .icon__system_settings--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#primary-hover");
+}
+.dark .icon__system_settings--primary-active, .dark .icon__system_settings--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#primary-active");
+}
+.dark .icon__system_settings--primary-disabled, .dark .icon__system_settings--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#primary-disabled");
+}
+.dark .icon__system_settings--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#on-primary");
+}
+.dark .icon__system_settings--on-primary-hover, .dark .icon__system_settings--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#on-primary-hover");
+}
+.dark .icon__system_settings--on-primary-active, .dark .icon__system_settings--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#on-primary-active");
+}
+.dark .icon__system_settings--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#on-disabled");
+}
+.dark .icon__system_settings--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/settings.svg#neutral");
+}
+.dark .icon__system_search--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#primary");
+}
+.dark .icon__system_search--primary-hover, .dark .icon__system_search--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#primary-hover");
+}
+.dark .icon__system_search--primary-active, .dark .icon__system_search--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#primary-active");
+}
+.dark .icon__system_search--primary-disabled, .dark .icon__system_search--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#primary-disabled");
+}
+.dark .icon__system_search--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#on-primary");
+}
+.dark .icon__system_search--on-primary-hover, .dark .icon__system_search--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#on-primary-hover");
+}
+.dark .icon__system_search--on-primary-active, .dark .icon__system_search--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#on-primary-active");
+}
+.dark .icon__system_search--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#on-disabled");
+}
+.dark .icon__system_search--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/search.svg#neutral");
+}
+.dark .icon__system_retry--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#primary");
+}
+.dark .icon__system_retry--primary-hover, .dark .icon__system_retry--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#primary-hover");
+}
+.dark .icon__system_retry--primary-active, .dark .icon__system_retry--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#primary-active");
+}
+.dark .icon__system_retry--primary-disabled, .dark .icon__system_retry--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#primary-disabled");
+}
+.dark .icon__system_retry--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#on-primary");
+}
+.dark .icon__system_retry--on-primary-hover, .dark .icon__system_retry--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#on-primary-hover");
+}
+.dark .icon__system_retry--on-primary-active, .dark .icon__system_retry--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#on-primary-active");
+}
+.dark .icon__system_retry--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#on-disabled");
+}
+.dark .icon__system_retry--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/retry.svg#neutral");
+}
+.dark .icon__system_qr-code--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#primary");
+}
+.dark .icon__system_qr-code--primary-hover, .dark .icon__system_qr-code--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#primary-hover");
+}
+.dark .icon__system_qr-code--primary-active, .dark .icon__system_qr-code--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#primary-active");
+}
+.dark .icon__system_qr-code--primary-disabled, .dark .icon__system_qr-code--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#primary-disabled");
+}
+.dark .icon__system_qr-code--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#on-primary");
+}
+.dark .icon__system_qr-code--on-primary-hover, .dark .icon__system_qr-code--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#on-primary-hover");
+}
+.dark .icon__system_qr-code--on-primary-active, .dark .icon__system_qr-code--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#on-primary-active");
+}
+.dark .icon__system_qr-code--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#on-disabled");
+}
+.dark .icon__system_qr-code--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/qr-code.svg#neutral");
+}
+.dark .icon__system_order-numberically--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#primary");
+}
+.dark .icon__system_order-numberically--primary-hover, .dark .icon__system_order-numberically--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#primary-hover");
+}
+.dark .icon__system_order-numberically--primary-active, .dark .icon__system_order-numberically--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#primary-active");
+}
+.dark .icon__system_order-numberically--primary-disabled, .dark .icon__system_order-numberically--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#primary-disabled");
+}
+.dark .icon__system_order-numberically--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#on-primary");
+}
+.dark .icon__system_order-numberically--on-primary-hover, .dark .icon__system_order-numberically--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#on-primary-hover");
+}
+.dark .icon__system_order-numberically--on-primary-active, .dark .icon__system_order-numberically--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#on-primary-active");
+}
+.dark .icon__system_order-numberically--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#on-disabled");
+}
+.dark .icon__system_order-numberically--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/order-numberically.svg#neutral");
+}
+.dark .icon__system_news--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#primary");
+}
+.dark .icon__system_news--primary-hover, .dark .icon__system_news--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#primary-hover");
+}
+.dark .icon__system_news--primary-active, .dark .icon__system_news--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#primary-active");
+}
+.dark .icon__system_news--primary-disabled, .dark .icon__system_news--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#primary-disabled");
+}
+.dark .icon__system_news--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#on-primary");
+}
+.dark .icon__system_news--on-primary-hover, .dark .icon__system_news--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#on-primary-hover");
+}
+.dark .icon__system_news--on-primary-active, .dark .icon__system_news--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#on-primary-active");
+}
+.dark .icon__system_news--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#on-disabled");
+}
+.dark .icon__system_news--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/news.svg#neutral");
+}
+.dark .icon__system_more-options-vertical--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#primary");
+}
+.dark .icon__system_more-options-vertical--primary-hover, .dark .icon__system_more-options-vertical--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#primary-hover");
+}
+.dark .icon__system_more-options-vertical--primary-active, .dark .icon__system_more-options-vertical--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#primary-active");
+}
+.dark .icon__system_more-options-vertical--primary-disabled, .dark .icon__system_more-options-vertical--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#primary-disabled");
+}
+.dark .icon__system_more-options-vertical--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#on-primary");
+}
+.dark .icon__system_more-options-vertical--on-primary-hover, .dark .icon__system_more-options-vertical--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#on-primary-hover");
+}
+.dark .icon__system_more-options-vertical--on-primary-active, .dark .icon__system_more-options-vertical--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#on-primary-active");
+}
+.dark .icon__system_more-options-vertical--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#on-disabled");
+}
+.dark .icon__system_more-options-vertical--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/more-options-vertical.svg#neutral");
+}
+.dark .icon__system_mail--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#primary");
+}
+.dark .icon__system_mail--primary-hover, .dark .icon__system_mail--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#primary-hover");
+}
+.dark .icon__system_mail--primary-active, .dark .icon__system_mail--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#primary-active");
+}
+.dark .icon__system_mail--primary-disabled, .dark .icon__system_mail--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#primary-disabled");
+}
+.dark .icon__system_mail--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#on-primary");
+}
+.dark .icon__system_mail--on-primary-hover, .dark .icon__system_mail--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#on-primary-hover");
+}
+.dark .icon__system_mail--on-primary-active, .dark .icon__system_mail--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#on-primary-active");
+}
+.dark .icon__system_mail--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#on-disabled");
+}
+.dark .icon__system_mail--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/mail.svg#neutral");
+}
+.dark .icon__system_logout--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#primary");
+}
+.dark .icon__system_logout--primary-hover, .dark .icon__system_logout--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#primary-hover");
+}
+.dark .icon__system_logout--primary-active, .dark .icon__system_logout--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#primary-active");
+}
+.dark .icon__system_logout--primary-disabled, .dark .icon__system_logout--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#primary-disabled");
+}
+.dark .icon__system_logout--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#on-primary");
+}
+.dark .icon__system_logout--on-primary-hover, .dark .icon__system_logout--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#on-primary-hover");
+}
+.dark .icon__system_logout--on-primary-active, .dark .icon__system_logout--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#on-primary-active");
+}
+.dark .icon__system_logout--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#on-disabled");
+}
+.dark .icon__system_logout--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/logout.svg#neutral");
+}
+.dark .icon__system_log-out--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#primary");
+}
+.dark .icon__system_log-out--primary-hover, .dark .icon__system_log-out--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#primary-hover");
+}
+.dark .icon__system_log-out--primary-active, .dark .icon__system_log-out--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#primary-active");
+}
+.dark .icon__system_log-out--primary-disabled, .dark .icon__system_log-out--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#primary-disabled");
+}
+.dark .icon__system_log-out--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#on-primary");
+}
+.dark .icon__system_log-out--on-primary-hover, .dark .icon__system_log-out--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#on-primary-hover");
+}
+.dark .icon__system_log-out--on-primary-active, .dark .icon__system_log-out--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#on-primary-active");
+}
+.dark .icon__system_log-out--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#on-disabled");
+}
+.dark .icon__system_log-out--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/log-out.svg#neutral");
+}
+.dark .icon__system_lock--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#primary");
+}
+.dark .icon__system_lock--primary-hover, .dark .icon__system_lock--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#primary-hover");
+}
+.dark .icon__system_lock--primary-active, .dark .icon__system_lock--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#primary-active");
+}
+.dark .icon__system_lock--primary-disabled, .dark .icon__system_lock--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#primary-disabled");
+}
+.dark .icon__system_lock--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#on-primary");
+}
+.dark .icon__system_lock--on-primary-hover, .dark .icon__system_lock--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#on-primary-hover");
+}
+.dark .icon__system_lock--on-primary-active, .dark .icon__system_lock--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#on-primary-active");
+}
+.dark .icon__system_lock--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#on-disabled");
+}
+.dark .icon__system_lock--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/lock.svg#neutral");
+}
+.dark .icon__system_list--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#primary");
+}
+.dark .icon__system_list--primary-hover, .dark .icon__system_list--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#primary-hover");
+}
+.dark .icon__system_list--primary-active, .dark .icon__system_list--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#primary-active");
+}
+.dark .icon__system_list--primary-disabled, .dark .icon__system_list--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#primary-disabled");
+}
+.dark .icon__system_list--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#on-primary");
+}
+.dark .icon__system_list--on-primary-hover, .dark .icon__system_list--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#on-primary-hover");
+}
+.dark .icon__system_list--on-primary-active, .dark .icon__system_list--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#on-primary-active");
+}
+.dark .icon__system_list--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#on-disabled");
+}
+.dark .icon__system_list--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/list.svg#neutral");
+}
+.dark .icon__system_link--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#primary");
+}
+.dark .icon__system_link--primary-hover, .dark .icon__system_link--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#primary-hover");
+}
+.dark .icon__system_link--primary-active, .dark .icon__system_link--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#primary-active");
+}
+.dark .icon__system_link--primary-disabled, .dark .icon__system_link--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#primary-disabled");
+}
+.dark .icon__system_link--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#on-primary");
+}
+.dark .icon__system_link--on-primary-hover, .dark .icon__system_link--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#on-primary-hover");
+}
+.dark .icon__system_link--on-primary-active, .dark .icon__system_link--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#on-primary-active");
+}
+.dark .icon__system_link--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#on-disabled");
+}
+.dark .icon__system_link--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/link.svg#neutral");
+}
+.dark .icon__system_link-variant--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#primary");
+}
+.dark .icon__system_link-variant--primary-hover, .dark .icon__system_link-variant--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#primary-hover");
+}
+.dark .icon__system_link-variant--primary-active, .dark .icon__system_link-variant--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#primary-active");
+}
+.dark .icon__system_link-variant--primary-disabled, .dark .icon__system_link-variant--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#primary-disabled");
+}
+.dark .icon__system_link-variant--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#on-primary");
+}
+.dark .icon__system_link-variant--on-primary-hover, .dark .icon__system_link-variant--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#on-primary-hover");
+}
+.dark .icon__system_link-variant--on-primary-active, .dark .icon__system_link-variant--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#on-primary-active");
+}
+.dark .icon__system_link-variant--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#on-disabled");
+}
+.dark .icon__system_link-variant--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/link-variant.svg#neutral");
+}
+.dark .icon__system_home--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#primary");
+}
+.dark .icon__system_home--primary-hover, .dark .icon__system_home--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#primary-hover");
+}
+.dark .icon__system_home--primary-active, .dark .icon__system_home--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#primary-active");
+}
+.dark .icon__system_home--primary-disabled, .dark .icon__system_home--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#primary-disabled");
+}
+.dark .icon__system_home--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#on-primary");
+}
+.dark .icon__system_home--on-primary-hover, .dark .icon__system_home--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#on-primary-hover");
+}
+.dark .icon__system_home--on-primary-active, .dark .icon__system_home--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#on-primary-active");
+}
+.dark .icon__system_home--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#on-disabled");
+}
+.dark .icon__system_home--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/home.svg#neutral");
+}
+.dark .icon__system_grid--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#primary");
+}
+.dark .icon__system_grid--primary-hover, .dark .icon__system_grid--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#primary-hover");
+}
+.dark .icon__system_grid--primary-active, .dark .icon__system_grid--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#primary-active");
+}
+.dark .icon__system_grid--primary-disabled, .dark .icon__system_grid--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#primary-disabled");
+}
+.dark .icon__system_grid--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#on-primary");
+}
+.dark .icon__system_grid--on-primary-hover, .dark .icon__system_grid--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#on-primary-hover");
+}
+.dark .icon__system_grid--on-primary-active, .dark .icon__system_grid--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#on-primary-active");
+}
+.dark .icon__system_grid--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#on-disabled");
+}
+.dark .icon__system_grid--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/grid.svg#neutral");
+}
+.dark .icon__system_filters--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#primary");
+}
+.dark .icon__system_filters--primary-hover, .dark .icon__system_filters--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#primary-hover");
+}
+.dark .icon__system_filters--primary-active, .dark .icon__system_filters--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#primary-active");
+}
+.dark .icon__system_filters--primary-disabled, .dark .icon__system_filters--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#primary-disabled");
+}
+.dark .icon__system_filters--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#on-primary");
+}
+.dark .icon__system_filters--on-primary-hover, .dark .icon__system_filters--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#on-primary-hover");
+}
+.dark .icon__system_filters--on-primary-active, .dark .icon__system_filters--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#on-primary-active");
+}
+.dark .icon__system_filters--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#on-disabled");
+}
+.dark .icon__system_filters--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/filters.svg#neutral");
+}
+.dark .icon__system_expand--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#primary");
+}
+.dark .icon__system_expand--primary-hover, .dark .icon__system_expand--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#primary-hover");
+}
+.dark .icon__system_expand--primary-active, .dark .icon__system_expand--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#primary-active");
+}
+.dark .icon__system_expand--primary-disabled, .dark .icon__system_expand--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#primary-disabled");
+}
+.dark .icon__system_expand--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#on-primary");
+}
+.dark .icon__system_expand--on-primary-hover, .dark .icon__system_expand--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#on-primary-hover");
+}
+.dark .icon__system_expand--on-primary-active, .dark .icon__system_expand--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#on-primary-active");
+}
+.dark .icon__system_expand--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#on-disabled");
+}
+.dark .icon__system_expand--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/expand.svg#neutral");
+}
+.dark .icon__system_drag--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#primary");
+}
+.dark .icon__system_drag--primary-hover, .dark .icon__system_drag--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#primary-hover");
+}
+.dark .icon__system_drag--primary-active, .dark .icon__system_drag--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#primary-active");
+}
+.dark .icon__system_drag--primary-disabled, .dark .icon__system_drag--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#primary-disabled");
+}
+.dark .icon__system_drag--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#on-primary");
+}
+.dark .icon__system_drag--on-primary-hover, .dark .icon__system_drag--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#on-primary-hover");
+}
+.dark .icon__system_drag--on-primary-active, .dark .icon__system_drag--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#on-primary-active");
+}
+.dark .icon__system_drag--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#on-disabled");
+}
+.dark .icon__system_drag--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/drag.svg#neutral");
+}
+.dark .icon__system_download--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#primary");
+}
+.dark .icon__system_download--primary-hover, .dark .icon__system_download--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#primary-hover");
+}
+.dark .icon__system_download--primary-active, .dark .icon__system_download--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#primary-active");
+}
+.dark .icon__system_download--primary-disabled, .dark .icon__system_download--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#primary-disabled");
+}
+.dark .icon__system_download--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#on-primary");
+}
+.dark .icon__system_download--on-primary-hover, .dark .icon__system_download--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#on-primary-hover");
+}
+.dark .icon__system_download--on-primary-active, .dark .icon__system_download--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#on-primary-active");
+}
+.dark .icon__system_download--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#on-disabled");
+}
+.dark .icon__system_download--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/download.svg#neutral");
+}
+.dark .icon__system_database--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#primary");
+}
+.dark .icon__system_database--primary-hover, .dark .icon__system_database--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#primary-hover");
+}
+.dark .icon__system_database--primary-active, .dark .icon__system_database--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#primary-active");
+}
+.dark .icon__system_database--primary-disabled, .dark .icon__system_database--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#primary-disabled");
+}
+.dark .icon__system_database--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#on-primary");
+}
+.dark .icon__system_database--on-primary-hover, .dark .icon__system_database--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#on-primary-hover");
+}
+.dark .icon__system_database--on-primary-active, .dark .icon__system_database--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#on-primary-active");
+}
+.dark .icon__system_database--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#on-disabled");
+}
+.dark .icon__system_database--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/database.svg#neutral");
+}
+.dark .icon__system_dashboard--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#primary");
+}
+.dark .icon__system_dashboard--primary-hover, .dark .icon__system_dashboard--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#primary-hover");
+}
+.dark .icon__system_dashboard--primary-active, .dark .icon__system_dashboard--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#primary-active");
+}
+.dark .icon__system_dashboard--primary-disabled, .dark .icon__system_dashboard--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#primary-disabled");
+}
+.dark .icon__system_dashboard--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#on-primary");
+}
+.dark .icon__system_dashboard--on-primary-hover, .dark .icon__system_dashboard--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#on-primary-hover");
+}
+.dark .icon__system_dashboard--on-primary-active, .dark .icon__system_dashboard--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#on-primary-active");
+}
+.dark .icon__system_dashboard--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#on-disabled");
+}
+.dark .icon__system_dashboard--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/dashboard.svg#neutral");
+}
+.dark .icon__system_contact--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#primary");
+}
+.dark .icon__system_contact--primary-hover, .dark .icon__system_contact--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#primary-hover");
+}
+.dark .icon__system_contact--primary-active, .dark .icon__system_contact--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#primary-active");
+}
+.dark .icon__system_contact--primary-disabled, .dark .icon__system_contact--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#primary-disabled");
+}
+.dark .icon__system_contact--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#on-primary");
+}
+.dark .icon__system_contact--on-primary-hover, .dark .icon__system_contact--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#on-primary-hover");
+}
+.dark .icon__system_contact--on-primary-active, .dark .icon__system_contact--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#on-primary-active");
+}
+.dark .icon__system_contact--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#on-disabled");
+}
+.dark .icon__system_contact--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/contact.svg#neutral");
+}
+.dark .icon__system_connector--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#primary");
+}
+.dark .icon__system_connector--primary-hover, .dark .icon__system_connector--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#primary-hover");
+}
+.dark .icon__system_connector--primary-active, .dark .icon__system_connector--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#primary-active");
+}
+.dark .icon__system_connector--primary-disabled, .dark .icon__system_connector--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#primary-disabled");
+}
+.dark .icon__system_connector--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#on-primary");
+}
+.dark .icon__system_connector--on-primary-hover, .dark .icon__system_connector--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#on-primary-hover");
+}
+.dark .icon__system_connector--on-primary-active, .dark .icon__system_connector--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#on-primary-active");
+}
+.dark .icon__system_connector--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#on-disabled");
+}
+.dark .icon__system_connector--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/connector.svg#neutral");
+}
+.dark .icon__system_close--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#primary");
+}
+.dark .icon__system_close--primary-hover, .dark .icon__system_close--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#primary-hover");
+}
+.dark .icon__system_close--primary-active, .dark .icon__system_close--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#primary-active");
+}
+.dark .icon__system_close--primary-disabled, .dark .icon__system_close--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#primary-disabled");
+}
+.dark .icon__system_close--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#on-primary");
+}
+.dark .icon__system_close--on-primary-hover, .dark .icon__system_close--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#on-primary-hover");
+}
+.dark .icon__system_close--on-primary-active, .dark .icon__system_close--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#on-primary-active");
+}
+.dark .icon__system_close--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#on-disabled");
+}
+.dark .icon__system_close--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/close.svg#neutral");
+}
+.dark .icon__system_chevron-up--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#primary");
+}
+.dark .icon__system_chevron-up--primary-hover, .dark .icon__system_chevron-up--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#primary-hover");
+}
+.dark .icon__system_chevron-up--primary-active, .dark .icon__system_chevron-up--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#primary-active");
+}
+.dark .icon__system_chevron-up--primary-disabled, .dark .icon__system_chevron-up--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#primary-disabled");
+}
+.dark .icon__system_chevron-up--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#on-primary");
+}
+.dark .icon__system_chevron-up--on-primary-hover, .dark .icon__system_chevron-up--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#on-primary-hover");
+}
+.dark .icon__system_chevron-up--on-primary-active, .dark .icon__system_chevron-up--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#on-primary-active");
+}
+.dark .icon__system_chevron-up--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#on-disabled");
+}
+.dark .icon__system_chevron-up--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-up.svg#neutral");
+}
+.dark .icon__system_chevron-right--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#primary");
+}
+.dark .icon__system_chevron-right--primary-hover, .dark .icon__system_chevron-right--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#primary-hover");
+}
+.dark .icon__system_chevron-right--primary-active, .dark .icon__system_chevron-right--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#primary-active");
+}
+.dark .icon__system_chevron-right--primary-disabled, .dark .icon__system_chevron-right--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#primary-disabled");
+}
+.dark .icon__system_chevron-right--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#on-primary");
+}
+.dark .icon__system_chevron-right--on-primary-hover, .dark .icon__system_chevron-right--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#on-primary-hover");
+}
+.dark .icon__system_chevron-right--on-primary-active, .dark .icon__system_chevron-right--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#on-primary-active");
+}
+.dark .icon__system_chevron-right--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#on-disabled");
+}
+.dark .icon__system_chevron-right--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-right.svg#neutral");
+}
+.dark .icon__system_chevron-down--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#primary");
+}
+.dark .icon__system_chevron-down--primary-hover, .dark .icon__system_chevron-down--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#primary-hover");
+}
+.dark .icon__system_chevron-down--primary-active, .dark .icon__system_chevron-down--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#primary-active");
+}
+.dark .icon__system_chevron-down--primary-disabled, .dark .icon__system_chevron-down--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#primary-disabled");
+}
+.dark .icon__system_chevron-down--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#on-primary");
+}
+.dark .icon__system_chevron-down--on-primary-hover, .dark .icon__system_chevron-down--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#on-primary-hover");
+}
+.dark .icon__system_chevron-down--on-primary-active, .dark .icon__system_chevron-down--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#on-primary-active");
+}
+.dark .icon__system_chevron-down--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#on-disabled");
+}
+.dark .icon__system_chevron-down--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/chevron-down.svg#neutral");
+}
+.dark .icon__system_check--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#primary");
+}
+.dark .icon__system_check--primary-hover, .dark .icon__system_check--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#primary-hover");
+}
+.dark .icon__system_check--primary-active, .dark .icon__system_check--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#primary-active");
+}
+.dark .icon__system_check--primary-disabled, .dark .icon__system_check--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#primary-disabled");
+}
+.dark .icon__system_check--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#on-primary");
+}
+.dark .icon__system_check--on-primary-hover, .dark .icon__system_check--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#on-primary-hover");
+}
+.dark .icon__system_check--on-primary-active, .dark .icon__system_check--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#on-primary-active");
+}
+.dark .icon__system_check--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#on-disabled");
+}
+.dark .icon__system_check--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/check.svg#neutral");
+}
+.dark .icon__system_card--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#primary");
+}
+.dark .icon__system_card--primary-hover, .dark .icon__system_card--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#primary-hover");
+}
+.dark .icon__system_card--primary-active, .dark .icon__system_card--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#primary-active");
+}
+.dark .icon__system_card--primary-disabled, .dark .icon__system_card--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#primary-disabled");
+}
+.dark .icon__system_card--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#on-primary");
+}
+.dark .icon__system_card--on-primary-hover, .dark .icon__system_card--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#on-primary-hover");
+}
+.dark .icon__system_card--on-primary-active, .dark .icon__system_card--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#on-primary-active");
+}
+.dark .icon__system_card--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#on-disabled");
+}
+.dark .icon__system_card--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/card.svg#neutral");
+}
+.dark .icon__system_card-variant--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#primary");
+}
+.dark .icon__system_card-variant--primary-hover, .dark .icon__system_card-variant--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#primary-hover");
+}
+.dark .icon__system_card-variant--primary-active, .dark .icon__system_card-variant--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#primary-active");
+}
+.dark .icon__system_card-variant--primary-disabled, .dark .icon__system_card-variant--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#primary-disabled");
+}
+.dark .icon__system_card-variant--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#on-primary");
+}
+.dark .icon__system_card-variant--on-primary-hover, .dark .icon__system_card-variant--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#on-primary-hover");
+}
+.dark .icon__system_card-variant--on-primary-active, .dark .icon__system_card-variant--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#on-primary-active");
+}
+.dark .icon__system_card-variant--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#on-disabled");
+}
+.dark .icon__system_card-variant--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/card-variant.svg#neutral");
+}
+.dark .icon__system_assistant--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#primary");
+}
+.dark .icon__system_assistant--primary-hover, .dark .icon__system_assistant--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#primary-hover");
+}
+.dark .icon__system_assistant--primary-active, .dark .icon__system_assistant--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#primary-active");
+}
+.dark .icon__system_assistant--primary-disabled, .dark .icon__system_assistant--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#primary-disabled");
+}
+.dark .icon__system_assistant--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#on-primary");
+}
+.dark .icon__system_assistant--on-primary-hover, .dark .icon__system_assistant--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#on-primary-hover");
+}
+.dark .icon__system_assistant--on-primary-active, .dark .icon__system_assistant--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#on-primary-active");
+}
+.dark .icon__system_assistant--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#on-disabled");
+}
+.dark .icon__system_assistant--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/assistant.svg#neutral");
+}
+.dark .icon__system_arrow-right--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#primary");
+}
+.dark .icon__system_arrow-right--primary-hover, .dark .icon__system_arrow-right--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#primary-hover");
+}
+.dark .icon__system_arrow-right--primary-active, .dark .icon__system_arrow-right--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#primary-active");
+}
+.dark .icon__system_arrow-right--primary-disabled, .dark .icon__system_arrow-right--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#primary-disabled");
+}
+.dark .icon__system_arrow-right--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#on-primary");
+}
+.dark .icon__system_arrow-right--on-primary-hover, .dark .icon__system_arrow-right--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#on-primary-hover");
 }
-
-/*----------------------
-  General button styles
-  ----------------------*/
-.button {
-  font-family: var(--button__font-family);
-  padding-block-start: var(--button__padding-block);
-  padding-block-end: var(--button__padding-block);
-  padding-inline-start: var(--button__padding-inline);
-  padding-inline-end: var(--button__padding-inline);
-  height: var(--button__height);
-  font-weight: var(--button__font-weight);
-  color: var(--button__color);
-  border-radius: var(--button__border-radius);
-  border-width: var(--button__border-width);
-  border-style: var(--button__border-style);
-  border-color: var(--button-primary__border-color);
+.dark .icon__system_arrow-right--on-primary-active, .dark .icon__system_arrow-right--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#on-primary-active");
 }
-
-/*----------------------
-  Button primary
-  ----------------------*/
-.button--primary {
-  background-color: var(--button-primary__background-color);
+.dark .icon__system_arrow-right--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#on-disabled");
 }
-.button--primary:hover {
-  color: var(--button-primary__color--hover);
-  background-color: var(--button-primary__background-color--hover);
-  border-color: var(--button-primary__border-color--hover);
+.dark .icon__system_arrow-right--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/arrow-right.svg#neutral");
 }
-.button--primary:active {
-  color: var(--button-primary__color--active);
-  background-color: var(--button-primary__background-color--active);
-  border-color: var(--button-primary__border-color--active);
+.dark .icon__system_add--primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#primary");
+}
+.dark .icon__system_add--primary-hover, .dark .icon__system_add--primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#primary-hover");
+}
+.dark .icon__system_add--primary-active, .dark .icon__system_add--primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#primary-active");
 }
+.dark .icon__system_add--primary-disabled, .dark .icon__system_add--primary:disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#primary-disabled");
+}
+.dark .icon__system_add--on-primary {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#on-primary");
+}
+.dark .icon__system_add--on-primary-hover, .dark .icon__system_add--on-primary:hover {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#on-primary-hover");
+}
+.dark .icon__system_add--on-primary-active, .dark .icon__system_add--on-primary:active {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#on-primary-active");
+}
+.dark .icon__system_add--on-disabled {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#on-disabled");
+}
+.dark .icon__system_add--neutral {
+  --icon-path: url("../assets/icons/.generated/system/dark/add.svg#neutral");
+}
+
 @font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 300;
-  src: url("../src/assets/fonts/Inter_Light.woff2") format("woff2");
+  font-family: Inter_Light;
+  src: url("../assets/fonts/Inter_Light.woff2");
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  src: url("../src/assets/fonts/Inter_Regular.woff2") format("woff2");
+  font-family: Inter_Regular;
+  src: url("../assets/fonts/Inter_Regular.woff2");
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  src: url("../src/assets/fonts/Inter_SemiBold.woff2") format("woff2");
+  font-family: Inter_SemiBold;
+  src: url("../assets/fonts/Inter_SemiBold.woff2");
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  src: url("../src/assets/fonts/Inter_Bold.woff2") format("woff2");
+  font-family: Inter_Bold;
+  src: url("../assets/fonts/Inter_Bold.woff2");
   font-display: swap;
 }
 @font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 800;
-  src: url("../src/assets/fonts/Inter_ExtraBold.woff2") format("woff2");
+  font-family: Inter_ExtraBold;
+  src: url("../assets/fonts/Inter_ExtraBold.woff2");
   font-display: swap;
 }
-:root {
+:root.light {
   --mer-color__primary-blue--200: #2070ce;
-  --mer-color__primary-blue--300: #ffffff;
+  --mer-color__primary-blue--300: #5498e8;
   --mer-color__primary-blue--400: #437dc0;
   --mer-color__primary-blue--600: #335884;
   --mer-color__neutral-gray--00: #363636;
@@ -251,24 +2550,26 @@ body {
   --mer-color__tinted-yellow--60: #ffc96b99;
   --mer-color__tinted-red--5: #fb7c840d;
   --mer-color__tinted-red--60: #fb7c8499;
-  --mer-color__tinted-green--5: #64d9a80d;
-  --mer-color__tinted-green--60: #64d9a899;
+  --mer-color__tinted-green--5: #3fa89b0d;
+  --mer-color__tinted-green--60: #3fa89b99;
   --mer-color__tinted-blue--5: #2070ce0d;
   --mer-color__tinted-blue--8: #2070ce14;
   --mer-color__tinted-blue--10: #2070ce1a;
   --mer-color__tinted-blue--20: #2070ce33;
   --mer-color__tinted-blue--50: #2070ce80;
-  --mer-color__message-green--100: #64d9a8;
-  --mer-color__message-green--200: #5dc599;
+  --mer-color__message-green--100: #3fa89b;
+  --mer-color__message-green--200: #3fa89b;
   --mer-color__message-yellow--100: #ffc96b;
   --mer-color__message-yellow--200: #ffc96b;
   --mer-color__message-red--100: #fb7c84;
   --mer-color__message-red--200: #fb7c84;
+  --mer-color__message-red--300: #dd8f94;
   --mer-color__surface: #f4f5f5;
-  --mer-color__elevation--01: var(--mer-color__neutral-gray--900);
-  --mer-color__elevation--02: var(--mer-color__neutral-gray--900);
-  --mer-color__elevation--03: var(--mer-color__neutral-gray--900);
-  --mer-color__elevation--04: var(--mer-color__neutral-gray--900);
+  --mer-color__elevation--01: #f1f1f1;
+  --mer-color__elevation--02: #e4e4e4;
+  --mer-color__elevation--03: #dedede;
+  --mer-color__elevation--04: #ffffff;
+  --mer-color__secondary-green--200: #3fa89b;
 }
 
 :root.dark {
@@ -293,63 +2594,56 @@ body {
   --mer-color__neutral-gray--1400: #2d3134;
   --mer-color__tinted-yellow--5: #ffc96b0d;
   --mer-color__tinted-yellow--60: #ffc96b99;
-  --mer-color__tinted-red--5: #53272a0d;
+  --mer-color__tinted-red--5: #fb7c840d;
   --mer-color__tinted-red--60: #fb7c8499;
-  --mer-color__tinted-green--50: #64d9a80d;
-  --mer-color__tinted-green--60: #64d9a899;
-  --mer-color__tinted-blue--5: #0d5ba70d;
+  --mer-color__tinted-green--5: #3fa89b0d;
+  --mer-color__tinted-green--60: #3fa89b99;
+  --mer-color__tinted-blue--5: #5ba7ff0d;
   --mer-color__tinted-blue--8: #5ba7ff14;
   --mer-color__tinted-blue--10: #5ba7ff1a;
   --mer-color__tinted-blue--20: #5ba7ff33;
   --mer-color__tinted-blue--50: #5ba7ff80;
-  --mer-color__message-green--100: #64d9a8;
-  --mer-color__message-green--200: #5dc599;
+  --mer-color__message-green--100: #3fa89b;
+  --mer-color__message-green--200: #3fa89b;
   --mer-color__message-yellow--100: #ffc96b;
   --mer-color__message-yellow--200: #f9bd56;
   --mer-color__message-red--100: #fb7c84;
   --mer-color__message-red--200: #e35861;
+  --mer-color__message-red--300: #dd8f94;
   --mer-color__surface: #1a1d20;
   --mer-color__elevation--01: #202428;
   --mer-color__elevation--02: #262a2f;
   --mer-color__elevation--03: #2b3237;
   --mer-color__elevation--04: #3b4044;
+  --mer-color__secondary-green--200: #3fa89b;
 }
 
 :root {
-  --mer-border__width--sm: 1px;
-  --mer-border__width--md: 2px;
-  --mer-border__width--lg: 4px;
-  --mer-border__radius--xs: 2px;
-  --mer-border__radius--sm: 4px;
-  --mer-border__radius--md: 8px;
-  --mer-border__radius--lg: 12px;
-  --mer-border__radius--xl: 30px;
   --mer-accent__primary: var(--mer-color__primary-blue--200);
   --mer-accent__primary--hover: var(--mer-color__primary-blue--400);
   --mer-accent__primary--active: var(--mer-color__primary-blue--600);
-  --mer-accent__primary--disabled: var(--mer-color__neutral-gray--700);
+  --mer-accent__primary--disabled: #5b5b5b;
   --mer-accent__primary--destructive: var(--mer-color__message-red--100);
   --mer-border-color__primary: var(--mer-accent__primary);
   --mer-border-color__primary--hover: var(--mer-accent__primary--hover);
   --mer-border-color__primary--active: var(--mer-accent__primary--active);
   --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);
-  --mer-border-color__primary--focused: var(--mer-color__neutral-gray--00);
+  --mer-border-color__primary--focused: var(--mer-color__neutral-gray--300);
   --mer-border-color__error: var(--mer-color__message-red--100);
   --mer-border-color__warning: var(--mer-color__message-yellow--100);
   --mer-border-color__success: var(--mer-color__message-green--100);
   --mer-border-color__neutral: var(--mer-color__neutral-gray--200);
-  --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100);
-  --mer-border-color__neutral--active: var(--mer-color__neutral-gray--00);
+  --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--00);
+  --mer-border-color__neutral--active: var(--mer-color__neutral-gray--100);
   --mer-border-color__dim: var(--mer-color__neutral-gray--600);
-  --mer-border-color__control--focused: var(--mer-color__primary-blue--200);
-  --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--1400);
-  --mer-heading__font-color: var(--mer-color__neutral-gray--100);
+  --mer-border-color__on-elevation--01: var(--mer-color__elevation--03);
   --mer-icon__on-surface: var(--mer-color__neutral-gray--300);
   --mer-icon__on-primary: var(--mer-color__neutral-gray--800);
+  --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--200);
   --mer-icon__on-primary--active: var(--mer-color__neutral-gray--00);
-  --mer-icon__on-disabled: var(--mer-color__neutral-gray--500);
+  --mer-icon__on-disabled: var(--mer-color__neutral-gray--400);
   --mer-icon__on-message: var(--mer-color__neutral-gray--700);
-  --mer-icon__on-elevation: var(--mer-color__neutral-gray--600);
+  --mer-icon__on-elevation: var(--mer-color__neutral-gray--100);
   --mer-icon__primary: var(--mer-accent__primary);
   --mer-icon__primary--hover: var(--mer-accent__primary--hover);
   --mer-icon__primary--active: var(--mer-accent__primary--active);
@@ -362,7 +2656,7 @@ body {
   --mer-icon__bright: var(--mer-color__neutral-gray--00);
   --mer-item__color: ;
   --mer-item__bg-color: ;
-  --mer-item__border-color: var(--mer-color__tinted-blue--20);
+  --mer-item__border-color: ;
   --mer-item__color--hover: var(--mer-color__neutral-gray--100);
   --mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
   --mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
@@ -371,63 +2665,43 @@ body {
   --mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
   --mer-item__color--selected-hover: var(--mer-color__neutral-gray--100);
   --mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
-  --mer-item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
-  /*----------------------
-  Body
-  ----------------------*/
-  --mer-body__bg-color: var(--mer-color__surface);
-  --mer-body__color: var(--mer-text__on-surface);
-  --mer-body__font-size: var(--mer-font__size--xxs);
-  --mer-body__line-height: var(--mer-line-height--regular);
-  /*----------------------
-  Scrollbar
-  ----------------------*/
-  --mer-scrollbar__size: var(--mer-spacing--xs);
-  --mer-scrollbar-track__bg-color: var(--mer-color__elevation--03);
-  --mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
-  --mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
-  --mer-scrollbar-thumb__bg-color--hover: var(--mer-color__elevation--04);
-  --mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
-  --mer-scrollbar-corner__bg: rgba(0, 0, 0, 0);
-  /*----------------------
-  Icon
-  ----------------------*/
-  --mer-icon-shell__size--sm: var(--mer-spacing--md);
-  --mer-icon__size--sm: var(--mer-spacing--sm);
-  --mer-icon-shell__size--lg: var(--mer-spacing--sm);
-  --mer-icon__size--lg: var(--mer-spacing--xs);
-  /*----------------------
-  Label
-  ----------------------*/
-  --mer-label__space: var(--mer-spacing--xs);
-  --mer-label__font-size: inherit;
-  --mer-label__font-weight: var(--mer-font__weight--semi-bold);
-  --mer-label__color: inherit;
+  --mer-item__border-color--selected-hover: var(
+    --mer-color__tinted-blue--20
+  );
   --mer-text__on-surface: var(--mer-color__neutral-gray--300);
   --mer-text__on-primary: var(--mer-color__neutral-gray--800);
   --mer-text__on-primary--active: var(--mer-color__neutral-gray--00);
-  --mer-text__on-disabled: var(--mer-color__neutral-gray--500);
+  --mer-text__on-disabled: var(--mer-color__neutral-gray--400);
   --mer-text__on-message: var(--mer-color__neutral-gray--700);
-  --mer-text__on-elevation: var(--mer-color__neutral-gray--00);
+  --mer-text__on-elevation: var(--mer-color__neutral-gray--100);
   --mer-text__primary: var(--mer-accent__primary);
   --mer-text__primary--hover: var(--mer-accent__primary--hover);
   --mer-text__primary--active: var(--mer-accent__primary--active);
-  --mer-text__primary--disabled: #5b5b5b;
-  --mer-text__disabled: var(--mer-color__neutral-gray--600);
+  --mer-text__primary--disabled: var(--mer-accent__primary--disabled);
   --mer-text__neutral: var(--mer-color__neutral-gray--200);
   --mer-text__highlighted: var(--mer-color__neutral-gray--100);
   --mer-text__bright: var(--mer-color__neutral-gray--00);
-  /*background color*/
+  --mer-text__success: var(--mer-color__message-green--200);
+  --mer-text__error: var(--mer-color__message-red--300);
+}
+
+:root {
+  --mer-border__width--sm: 1px;
+  --mer-border__width--md: 2px;
+  --mer-border__width--lg: 4px;
+  --mer-border__radius--xs: 2px;
+  --mer-border__radius--sm: 4px;
+  --mer-border__radius--md: 8px;
+  --mer-border__radius--lg: 12px;
+  --mer-border__radius--xl: 30px;
   --mer-elevation__background-color--01: var(--mer-color__neutral-gray--900);
   --mer-elevation__background-color--02: var(--mer-color__neutral-gray--900);
   --mer-elevation__background-color--03: var(--mer-color__neutral-gray--900);
   --mer-elevation__background-color--04: var(--mer-color__neutral-gray--900);
-  /*border*/
   --mer-elevation__border-01: transparent;
   --mer-elevation__border-02: transparent;
   --mer-elevation__border-03: transparent;
   --mer-elevation__border-04: transparent;
-  /*box shadow*/
   --mer-elevation__box-shadow--01: 0px 2px 1px -1px rgba(0, 0, 0, 0.08),
     0px 1px 4px 0px rgba(0, 0, 0, 0.06);
   --mer-elevation__box-shadow--02: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
@@ -436,26 +2710,36 @@ body {
     0px 5px 5px -3px rgba(0, 0, 0, 0.1);
   --mer-elevation__box-shadow--04: 0px 5px 22px 4px rgba(0, 0, 0, 0.12),
     0px 7px 8px -4px rgba(0, 0, 0, 0.1);
-  /*Families*/
-  --mer-font-family--primary: "Inter", sans-serif;
-  /*Weights*/
+  --mer-elevation__background-color--01: var(--mer-color__elevation--01);
+  --mer-elevation__background-color--02: var(--mer-color__elevation--02);
+  --mer-elevation__background-color--03: var(--mer-color__elevation--03);
+  --mer-elevation__background-color--04: var(--mer-color__elevation--04);
+  --mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
+  --mer-elevation__border-03: transparent;
+  --mer-elevation__border-04: transparent;
+  --mer-elevation__box-shadow--01: none;
+  --mer-elevation__box-shadow--02: none;
+  --mer-elevation__box-shadow--03: none;
+  --mer-elevation__box-shadow--04: none;
+  --mer-font-family--inter-light: "Inter_Light", arial, sans-serif;
+  --mer-font-family--inter-regular: "Inter_Regular", arial, sans-serif;
+  --mer-font-family--inter-semi-bold: "Inter_SemiBold", arial, sans-serif;
+  --mer-font-family--inter-bold: "Inter_Bold", arial, sans-serif;
+  --mer-font-family--inter-extra-bold: "Inter_ExtraBold", arial, sans-serif;
   --mer-font__weight--light: 300;
   --mer-font__weight--regular: 400;
   --mer-font__weight--semi-bold: 600;
   --mer-font__weight--bold: 700;
   --mer-font__weight--extra-bold: 800;
-  /*Sizes*/
-  --mer-font__size--xxs: 12px;
+  --mer-font__size--2xs: 12px;
   --mer-font__size--xs: 14px;
   --mer-font__size--sm: 16px;
   --mer-font__size--md: 20px;
   --mer-font__size--lg: 24px;
   --mer-font__size--xl: 36px;
-  /*Line Heights*/
   --mer-line-height--tight: 1.4em;
-  --mer-line-height--regular: 1.6em;
+  --mer-line-height--regular: 1.5em;
   --mer-line-height--comfortable: 1.7em;
-  /*Letter Spacings (to be done)*/
   --mer-spacing--3xs: 2px;
   --mer-spacing--2xs: 4px;
   --mer-spacing--xs: 8px;
@@ -471,266 +2755,286 @@ body {
   --mer-timing--regular: 500;
   --mer-timing--slow: 1000;
 }
-:root.dark {
-  /*background color*/
-  --mer-elevation__background-color--01: var(--mer-color__elevation--01);
-  --mer-elevation__background-color--02: var(--mer-color__elevation--02);
-  --mer-elevation__background-color--03: var(--mer-color__elevation--03);
-  --mer-elevation__background-color--04: var(--mer-color__elevation--04);
-  /*border*/
-  --mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
-  --mer-elevation__border-03: transparent;
-  --mer-elevation__border-04: transparent;
-  /*box shadow*/
-  --mer-elevation__box-shadow--01: none;
-  --mer-elevation__box-shadow--02: none;
-  --mer-elevation__box-shadow--03: none;
-  --mer-elevation__box-shadow--04: none;
-}
-
-:root {
-  --mer-checkbox__size: var(--mer-spacing--md);
-  --mer-checkbox__border-width: var(--mer-border__width--sm);
-  --mer-checkbox__border-style: solid;
-  --mer-checkbox__border-color: var(--mer-border-color__dim);
-  --mer-checkbox__border-radius: var(--mer-border__radius--xs);
-  --mer-checkbox-check__border-color: var(--mer-border-color__neutral--active);
-  --mer-checkbox__bg-color: transparent;
-}
 
 :root {
   /*----------------------
-  tree-view-item
+  Body
   ----------------------*/
-  --tree-view-item__color: inherit;
-  --tree-view-item__font-size: inherit;
-  --tree-view-item__gap: var(--mer-spacing--xs);
-  --tree-view-item__checkbox-size: var(--mer-checkbox__size);
-  --tree-view-item-expandable-button__size: var(--mer-spacing--md);
-  --tree-view-item-image-size__: var(--mer-spacing--md);
-  --tree-view-item-custom__padding-inline-start: var(--mer-view-spacing--2xs);
-  --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs);
+  --mer-body__bg-color: var(--mer-color__surface);
+  --mer-body__color: var(--mer-text__on-surface);
+  --mer-body__font-size: var(--mer-font__size--xxs);
+  --mer-body__line-height: var(--mer-line-height--regular);
   /*----------------------
-  tree-view-item -> Sates
+  Heading
   ----------------------*/
-  --tree-view-item__color--hover: var(--mer-item__color--hover);
-  --tree-view-item__bg-color--hover: var(--mer-item__bg-color--hover);
-  --tree-view-item__color--selected: var(--mer-item__color--selected);
-  --tree-view-item__bg-color--selected: var(--mer-item__bg-color--selected);
+  --mer-heading__color: var(--mer-color__neutral-gray--100);
   /*----------------------
-  tree-view-item -> Parts
+  Scrollbar
   ----------------------*/
-  --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface);
-  --tree-view-item-dashed-line__opacity: 0.3;
-  --tree-view-item-header__border-radius: var(--mer-border__radius--sm);
-  --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs));
-  --tree-view-item-downloading__inline-size: var(--mer-spacing--sm);
-  --tree-view-item-downloading__block-size: var(--mer-spacing--sm);
-  --tree-view-item-downloading__border-width: var(--mer-border__width--md);
-  --tree-view-item-downloading__border-style: solid;
-  --tree-view-item-downloading__border-color: var(
-    --mer-accent__primary--active
-  );
-  --tree-view-item-folder-action__inline-size: var(--mer-spacing--md);
-  --tree-view-item-folder-action__block-size: var(--mer-spacing--md);
-  --tree-view-item-pending-commit__bg-color: var(--mer-accent__primary);
+  --mer-scrollbar__size: var(--mer-spacing--xs);
+  --mer-scrollbar-track__bg-color: var(--mer-color__elevation--03);
+  --mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
+  --mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
+  --mer-scrollbar-thumb__bg-color--hover: var(--mer-color__elevation--04);
+  --mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
+  --mer-scrollbar-corner__bg: rgba(0, 0, 0, 0);
   /*----------------------
-  tree-view-container
+  Icon Size
   ----------------------*/
-  --tree-view-container__min-inline-size: var(max-content);
-  --tree-view-container__padding: var(--mer-spacing--xs);
-}
-
-.tree-view {
+  --mer-icon__box--sm: var(--mer-spacing--md);
+  --mer-icon__box--lg: var(--mer-spacing--lg);
+  /*----------------------------------------------------------
+  Form Input (form-input-*** background-position-x RTL support)
+  -----------------------------------------------------------*/
+  --mer-form-input__padding-inline: var(--mer-spacing--xs);
+  --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline);
+  --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value);
+  /*-------------------------------------------------------------
+  Inline Control (Should have the same height to look good inline)
+  -------------------------------------------------------------*/
+  --mer-control__block-size: var(--mer-spacing--lg);
   /*----------------------
-  General use variables
+  Label
   ----------------------*/
-  --ch-tree-view-item-custom-padding-inline-start: 8px;
-  --ch-tree-view-item-gap: var(--tree-view-item__gap);
-  --ch-tree-view-item__checkbox-size: var(--tree-view-item__checkbox-size);
-  --ch-tree-view-item__expandable-button-size: var(
-    --tree-view-item-expandable-button__size
+  --mer-label__space: var(--mer-spacing--xs);
+  --mer-label__font-size: inherit;
+  --mer-label__font-weight: var(--mer-font__weight--semi-bold);
+  --mer-label__color: inherit;
+}
+
+body {
+  display: grid;
+  grid-template-rows: 1fr;
+  min-block-size: 100dvh;
+  margin: 0;
+  background-color: var(--mer-color__surface);
+  color: var(--mer-text__on-surface);
+  line-height: var(--mer-line-height--regular);
+  font-family: Inter_Regular;
+}
+
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+:where(button, a) {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  touch-action: manipulation;
+  cursor: pointer;
+}
+
+button:disabled {
+  pointer-events: none;
+}
+
+input,
+select,
+textarea {
+  padding: 0;
+  margin: 0;
+  background-color: unset;
+  border: unset;
+  color: unset;
+  font: unset;
+  outline: unset;
+}
+
+hr {
+  block-size: 1px;
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background-color: currentColor;
+}
+
+fieldset,
+legend {
+  padding: 0;
+  margin: 0;
+}
+
+img {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font: unset;
+  margin: 0;
+  padding: 0;
+  color: unset;
+}
+
+:root[dir=rtl] {
+  --mer-form-input__bg-position--x: calc(
+    100% - var(--mer-form-input__bg-position--x-value)
   );
-  --ch-tree-view-item__image-size: var(--mer-icon-shell__size--sm);
 }
-.tree-view::-webkit-scrollbar {
+
+.tree-view-primary::-webkit-scrollbar {
   width: var(--mer-scrollbar__size);
   height: var(--mer-scrollbar__size);
 }
-.tree-view::-webkit-scrollbar-track {
+.tree-view-primary::-webkit-scrollbar-track {
   background-color: var(--mer-scrollbar-track__bg-color);
   border-radius: var(--mer-scrollbar-track__border-radius);
 }
-.tree-view::-webkit-scrollbar-thumb {
+.tree-view-primary::-webkit-scrollbar-thumb {
   background-color: var(--mer-scrollbar-thumb__bg-color);
   border-radius: var(--mer-scrollbar-thumb__border-radius);
 }
-.tree-view::-webkit-scrollbar-thumb:hover {
+.tree-view-primary::-webkit-scrollbar-thumb:hover {
   background-color: var(--mer-scrollbar-thumb__bg-color--hover);
 }
-.tree-view::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0);
-}
-.tree-view .ch-tree-view-container {
-  padding: var(--tree-view-container__padding);
+.tree-view-primary::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
-.tree-view-item {
-  font-size: var(--tree-view-item__color);
-  color: var(--tree-view-item__font-size);
-  /*----------------------
-  Parts
-  ----------------------*/
-  /*----------------------
-  Parts -> dynamic icons
-  ----------------------*/
+.code {
+  /* begin of WA */
+  overflow: auto;
+  /* end of WA */
+  background-color: var(--ch-code__bg-color);
+  border: var(--ch-code__border);
+  border-radius: var(--ch-code__border-radius);
+  padding: var(--ch-code__padding);
+  --ch-code__color-base: var(--mer-text__on-surface);
+  --ch-code__color-blue: var(--mer-color__primary-blue--400);
+  --ch-code__color-light-blue: var(--mer-color__primary-blue--200);
+  --ch-code__color-red: var(--mer-color__message-red--200);
+  --ch-code__color-green: var(--mer-color__message-green--200);
+  --ch-code__bg-color: var(--mer-color__neutral-gray--800);
+  --ch-code__border: var(--mer-border__width--sm) solid
+    var(--mer-color__elevation--01);
+  --ch-code__border-radius: var(--mer-border__radius--sm);
+  --ch-code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
 }
-.tree-view-item::part(checkbox__container) {
-  box-sizing: border-box;
-  background-color: var(--mer-checkbox__bg-color);
-  /*additional styles*/
-  width: var(--mer-checkbox__size);
-  height: var(--mer-checkbox__size);
-  position: relative;
-  border-width: var(--mer-checkbox__border-width);
-  border-style: var(--mer-checkbox__border-style);
-  border-color: var(--mer-checkbox__border-color);
-  border-radius: var(--mer-checkbox__border-radius);
+.code pre {
+  margin: 0;
 }
-.tree-view-item::part(checkbox__container):after {
-  content: "";
-  position: absolute;
-  display: block;
-  border: solid;
-  border-color: transparent;
-  z-index: 0;
+.code .hljs-tag {
+  white-space: nowrap;
 }
-.tree-view-item::part(checkbox__container):focus-within {
-  box-shadow: none;
-  outline-width: var(--mer-border__width--sm);
-  outline-style: solid;
-  outline-color: var(--mer-color__primary-blue--200);
-  outline-offset: -1px;
+.code pre {
+  overflow: auto;
 }
-.tree-view-item::part(checkbox__container checkbox__checked):after {
-  left: 5px;
-  top: 2.5px;
-  width: 4.5px;
-  height: 7.5px;
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-  border-color: var(--mer-checkbox-check__border-color);
-}
-.tree-view-item::part(checkbox__container checkbox__indeterminate):after {
-  left: 50%;
-  top: 50%;
-  width: 8px;
-  height: 2px;
-  border: 0;
-  background-color: var(--mer-checkbox-check__border-color);
-  -webkit-transform: rotate(0) translateY(-50%) translateX(-50%);
-  -ms-transform: rotate(0) translateY(-50%) translateX(-50%);
-  transform: rotate(0) translateY(-50%) translateX(-50%);
-}
-.tree-view-item::part(checkbox__option) {
-  display: none;
-}
-.tree-view-item::part(checkbox__input) {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
+.code pre::-webkit-scrollbar {
+  width: var(--mer-scrollbar__size);
+  height: var(--mer-scrollbar__size);
 }
-.tree-view-item::part(dashed-line) {
-  border-color: var(--tree-view-item-dashed-line__border-color);
-  opacity: var(--tree-view-item-dashed-line__opacity);
+.code pre::-webkit-scrollbar-track {
+  background-color: var(--mer-scrollbar-track__bg-color);
+  border-radius: var(--mer-scrollbar-track__border-radius);
 }
-.tree-view-item::part(header) {
-  border-radius: var(--tree-view-item-header__border-radius);
-  padding-inline-end: var(--tree-view-item-custom__padding-inline-end);
+.code pre::-webkit-scrollbar-thumb {
+  background-color: var(--mer-scrollbar-thumb__bg-color);
+  border-radius: var(--mer-scrollbar-thumb__border-radius);
 }
-.tree-view-item::part(header):hover {
-  color: var(--tree-view-item__color--hover);
-  background-color: var(--tree-view-item__bg-color--hover);
+.code pre::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mer-scrollbar-thumb__bg-color--hover);
 }
-.tree-view-item::part(header):focus {
-  outline-width: var(--mer-border__width--sm);
-  outline-style: solid;
-  outline-color: var(--mer-color__primary-blue--200);
-  outline-offset: -1px;
+.code pre::-webkit-scrollbar-corner {
+  background: transparent;
 }
-.tree-view-item[selected]::part(header) {
-  color: var(--tree-view-item__color--selected);
-  background-color: var(--tree-view-item__bg-color--selected);
+.code .hljs-doctag,
+.code .hljs-keyword,
+.code .hljs-meta .hljs-keyword,
+.code .hljs-template-tag,
+.code .hljs-template-variable,
+.code .hljs-type,
+.code .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: var(--ch-code__color-blue);
 }
-.tree-view-item::part(action) {
-  padding-block: var(--tree-view-item-header__padding-block);
+.code .hljs-title,
+.code .hljs-title.class_,
+.code .hljs-title.class_.inherited__,
+.code .hljs-title.function_ {
+  color: var(--ch-code__color-base);
 }
-.tree-view-item::part(downloading) {
-  inline-size: var(--tree-view-item-downloading__inline-size);
-  block-size: var(--tree-view-item-downloading__block-size);
-  border-width: var(--tree-view-item-downloading__border-width);
-  border-style: var(--tree-view-item-downloading__border-style);
-  border-color: var(--tree-view-item-downloading__border-color);
-  border-inline-start-color: transparent;
+.code .hljs-attr,
+.code .hljs-attribute,
+.code .hljs-literal,
+.code .hljs-meta,
+.code .hljs-number,
+.code .hljs-operator,
+.code .hljs-variable,
+.code .hljs-selector-attr,
+.code .hljs-selector-class,
+.code .hljs-selector-id {
+  color: var(--ch-code__color-blue);
 }
-.tree-view-item--folder::part(action)::before, .tree-view-item--module::part(action)::before {
-  content: "";
-  inline-size: var(--tree-view-item-folder-action__inline-size);
-  block-size: var(--tree-view-item-folder-action__block-size);
-  background-repeat: no-repeat;
+.code .hljs-regexp,
+.code .hljs-string,
+.code .hljs-meta .hljs-string {
+  color: var(--ch-code__color-green); /* DARK: color-mix(in srgb, var(--colors-foundation-un-color__red--300) 60%, #000) */
 }
-.tree-view-item--folder::part(action)::before {
-  background-image: url("../src/showcase/assets/icons/folder.svg");
+.code .hljs-built_in,
+.code .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
 }
-.tree-view-item--folder::part(action expanded)::before {
-  background-image: url("../src/showcase/assets/icons/folder-open.svg");
+.code .hljs-comment,
+.code .hljs-code,
+.code .hljs-formula {
+  color: var(--ch-code__color-green);
 }
-.tree-view-item--module::part(action)::before {
-  background-image: url("../src/showcase/assets/icons/module.svg");
+.code .hljs-name,
+.code .hljs-quote,
+.code .hljs-selector-tag,
+.code .hljs-selector-pseudo {
+  color: var(--ch-code__color-light-blue);
 }
-.tree-view-item--module::part(action expanded)::before {
-  background-image: url("../src/showcase/assets/icons/module-open.svg");
+.code .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
 }
-.tree-view-item--pending-commit::part(action)::before {
-  content: "";
-  position: relative;
-  z-index: 1;
-  width: 5px;
-  height: 5px;
-  align-self: end;
-  margin-block-end: 3px;
-  margin-inline-start: 1px;
-  background-color: var(--tree-view-item-pending-commit__bg-color);
-  border-radius: 50%;
-}
-
-.tree-view .ch-tree-view-drag-info {
-  padding-inline: 6px;
-  padding-block: 2px;
-  background-color: var(--mer-color__elevation--04);
-  border: 1px solid var(--ds-border-color--regular);
-  border-radius: 10px;
-  box-shadow: var(--gxg-grid-row__box-shadow--dragging);
-  font-size: 8px;
+.code .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
 }
-
-ch-tree-view-drop::after {
-  background-color: cyan;
+.code .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
 }
-
-/*-- Other Selectors (these depend on the tag class name)---*/
-.ch-tree-view-item--drag-enter {
-  background-color: yellow;
-  outline: 1px solid currentColor;
-  outline-offset: -1px;
+.code .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+.code .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+.code .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.code .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+.code .hljs-char.escape_,
+.code .hljs-link,
+.code .hljs-params,
+.code .hljs-property,
+.code .hljs-punctuation,
+.code .hljs-tag {
+  /* purposely ignored */
 }
 
 /*# sourceMappingURL=mercury.css.map */