@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap");
:root {
  --ui-animaton-speed: 0.2s;
}

/*ALIGNMENT*/
/*Ellipsis*/
/*****************************************************
TYPOGRAPHY
*****************************************************/
/*Title 01 (Positive)*/
.gxg-title-01 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-01-font-weight);
  font-size: var(--ds-title-01-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
}

/*Title 01 (Negative)*/
.gxg-title-01--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-01-font-weight);
  font-size: var(--ds-title-01-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Title 02 (Positive)*/
.gxg-title-02 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-02-font-weight);
  font-size: var(--ds-title-02-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
}

.gxg-title-02--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-02-font-weight);
  font-size: var(--ds-title-02-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--color-on-primary);
}

/*Title 03*/
.gxg-title-03 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-03-font-weight);
  font-size: var(--ds-title-03-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
}

.gxg-title-03--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-03-font-weight);
  font-size: var(--ds-title-03-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Title 04*/
.gxg-title-04 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-04-font-weight);
  font-size: var(--ds-title-04-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
}

.gxg-title-04--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-04-font-weight);
  font-size: var(--ds-title-04-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Title 05*/
.gxg-title-05 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-05-font-weight);
  font-size: var(--ds-title-05-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
}

.gxg-title-05--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-05-font-weight);
  font-size: var(--ds-title-05-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Text*/
.gxg-text {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
}

.gxg-text--negative {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

.gxg-text--gray {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--dimmed);
}

/*Quote*/
.gxg-quote {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  font-style: italic;
}

.gxg-quote--negative {
  color: var(--ds-base-font-color--negative);
}

/*Link*/
.gxg-link {
  line-height: unset;
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--link);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}
.gxg-link:hover {
  color: var(--ds-base-font-color--link-hover);
}
.gxg-link:active {
  color: var(--ds-base-font-color--link-active);
}

.gxg-link-gray {
  line-height: unset;
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--link);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  color: var(--ds-base-font-color--dimmed);
}
.gxg-link-gray:hover {
  line-height: unset;
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--link);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  color: var(--ds-base-font-color--dimmed);
  filter: brightness(1.4);
}

/*Alerts*/
.gxg-alert-error {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--error);
  display: inline-block;
}

.gxg-alert-warning {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--warning);
  display: inline-block;
}

.gxg-alert-success {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--success);
  display: inline-block;
}

/*Tab*/
.gxg-tab--disabled {
  color: var(--color-primary-disabled);
  pointer-events: none;
}
.gxg-tab--disabled[disabled] {
  color: var(--color-primary-disabled);
  pointer-events: none;
}

/*Label*/
.gxg-label {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--gxg-label-font-weight);
  font-size: var(--gxg-label-font-size);
  color: var(--gxg-label-color);
  text-align: center;
  line-height: 1.455em;
  display: flex;
  align-items: center;
}
.gxg-label:hover {
  color: var(--color-primary-hover);
}
.gxg-label:focus {
  color: var(--color-primary-active);
}
.gxg-label:active {
  color: var(--color-primary-active);
}
.gxg-label[disabled] {
  color: var(--color-primary-disabled);
}

.gxg-label--negative {
  color: var(--color-on-primary);
}
.gxg-label--negative[disabled] {
  color: var(--color-on-disabled);
}

/*****************************************************
GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
*****************************************************/
/*****************************************************
FORM ELEMENTS
*****************************************************/
.gxg-scrollbar {
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.gxg-scrollbar::-webkit-scrollbar {
  width: var(--gxg-scrollbar-width);
  height: var(--gxg-scrollbar-width);
}
.gxg-scrollbar::-webkit-scrollbar-track {
  background-color: var(--gxg-scrollbar-track-background);
  border-radius: var(--gxg-scrollbar-track-border-radius);
}
.gxg-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--gxg-scrollbar-track-thumb-background);
  border-radius: var(--gxg-scrollbar-track-thumb-radius);
}
.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
}
.gxg-scrollbar::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

/*--- Elevation ---*/
/*********************************
TOKENS FOR BORDERS
*********************************/
:root {
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;
  --border-style-regular: solid;
  --border-radius-xs: 1px;
  --border-radius-sm: 2px;
  --border-radius-md: 3px;
  --border-radius-lg: 8px;
  --box-shadow-values: inset 0px 0px 0px 2px;
}

:root {
  --color-primary-enabled: #0266a0;
  --color-primary-active: #005688;
  --color-primary-hover: #0077de;
  --color-primary-disabled: #828385;
  --color-primary-active--inverted: #4ba3d4;
  /*Added by Bruno (improve button primary focus contrast)*/
}

:root.dark {
  --color-primary-enabled: #91c8e4;
  --color-primary-active: #4ba3d4;
  --color-primary-hover: #8dcbff;
  --color-primary-disabled: #828385;
  --color-primary-active--inverted: #335884;
  /*Added by Bruno (improve button primary focus contrast)*/
}

:root {
  --color-secondary-enabled: #cfdee6;
  --color-secondary-enabled--hover: #ddecf4;
  /*added by Bruno*/
  --color-secondary-active: #6a8c9f;
  --color-secondary-hover: #97b0bf;
  --color-secondary-disabled: #828385;
}

:root.dark {
  --color-secondary-enabled: #5d7c8d;
  --color-secondary-enabled--hover: #6e8d9dad;
  /*added by Bruno*/
  --color-secondary-active: #3f5460;
  --color-secondary-hover: #4d6776;
  --color-secondary-disabled: #828385;
}

:root {
  --color-primary-hover-opacity-01: rgba(0, 119, 222, 0.1);
}

:root.dark {
  --color-primary-hover-opacity-01: rgba(141, 203, 255, 0.1);
}

:root {
  --color-on-primary: #fff;
  --color-on-secondary: #000;
  --color-on-background: #000;
  --color-on-alert: #000;
  --color-on-disabled: #a4a5a6;
  --color-always-black: #000;
  --color-always-white: #fff;
}

:root.dark {
  --color-on-primary: #1d1e22;
  --color-on-secondary: #fff;
  --color-on-background: #fff;
  --color-on-alert: #fff;
  --color-on-disabled: #616164;
  --color-always-black: #000;
  --color-always-white: #fff;
}

:root {
  --color-primary: var(--color-primary-enabled);
  --color-secondary: var(--color-secondary-enabled);
}

:root.dark {
  --color-primary-rgb: var(--color-primary-enabled);
  --color-secondary: var(--color-secondary-enabled);
}

:root {
  --color-background: #fff;
  --color-background--rgb: 255, 255, 255;
  /*added by Bruno for the ide-loader*/
  --color-shadow--rgb: 0, 0, 0;
  /*added by Bruno for gx-ide-ui shadows*/
}

:root.dark {
  --color-background: #1d1e22;
  --color-background--rgb: 0, 0, 0;
  /*added by Bruno for the ide-loader*/
  --color-shadow--rgb: 255, 255, 255;
  /*added by Bruno for gx-ide-ui shadows*/
}

:root {
  --color-error-dark: #f02031;
  --color-error-light: #ffeaee;
  --color-warning-dark: #ff8000;
  --color-warning-light: #ffe7e6;
  --color-success-dark: #02a08b;
  --color-success-light: #e1f3f1;
}

:root.dark {
  --color-error-dark: #f9464e;
  --color-error-light: #281617;
  --color-warning-dark: #ffab13;
  --color-warning-light: #292011;
  --color-success-dark: #50beae;
  --color-success-light: #172221;
}

:root {
  --gray-00: #f4f4f4;
  /*added by Bruno*/
  --gray-01: #e8e8e9;
  --gray-02: #c6c6c7;
  --gray-02--rgb: 198, 198, 199;
  /*added by Bruno for the ide-loader*/
  --gray-03: #a4a5a6;
  --gray-04: #828385;
  --gray-05: #616164;
  --gray-06: #3e3f42;
  --gray-07: #28292d;
}

:root.dark {
  --gray-00: #232326;
  /*added by Bruno*/
  --gray-01: #28292d;
  --gray-02: #3e3f42;
  --gray-02--rgb: 62, 63, 66;
  /*added by Bruno for the ide-loader*/
  --gray-03: #616164;
  --gray-04: #828385;
  --gray-05: #a4a5a6;
  --gray-06: #c6c6c7;
  --gray-07: #e8e8e9;
}

:root {
  --icons01-enabled: #0266a0;
  --icons02-enabled: #605cab;
  --icons03-enabled: #00746b;
  --icons04-enabled: #00a99d;
  --icons05-enabled: #39b54a;
  --icons06-enabled: #ed145b;
  --icons07-enabled: #f26522;
  --icons08-enabled: #f7941d;
  --icons09-enabled: #616164;
  --icons01-active: #004a81;
  --icons02-active: #484099;
  --icons03-active: #02645b;
  --icons04-active: #00998c;
  --icons05-active: #2fa640;
  --icons06-active: #dc105a;
  --icons07-active: #e75e1e;
  --icons08-active: #f3891b;
  --icons09-active: #3e3f42;
  --icons01-hover: #2088c2;
  --icons02-hover: #9e9ecc;
  --icons03-hover: #009187;
  --icons04-hover: #7ccdc7;
  --icons05-hover: #79cc81;
  --icons06-hover: #f4608d;
  --icons07-hover: #f59065;
  --icons08-hover: #fab454;
  --icons09-hover: #828385;
  --icons-disabled: #a4a5a6;
}

:root.dark {
  --icons01-enabled: #4ba3d4;
  --icons02-enabled: #9e9ecc;
  --icons03-enabled: #24a19a;
  --icons04-enabled: #7ccdc7;
  --icons05-enabled: #a1daa5;
  --icons06-enabled: #f4608d;
  --icons07-enabled: #f59065;
  --icons08-enabled: #fab454;
  --icons09-enabled: #a4a5a6;
  --icons01-active: #4497c6;
  --icons02-active: #7979b8;
  --icons03-active: #009088;
  --icons04-active: #45b9b1;
  --icons05-active: #7bcc81;
  --icons06-active: #f03d73;
  --icons07-active: #f37943;
  --icons08-active: #f9a533;
  --icons09-active: #c6c6c7;
  --icons01-hover: #6abee0;
  --icons02-hover: #c4c4e1;
  --icons03-hover: #7ec8c5;
  --icons04-hover: #b0e0dd;
  --icons05-hover: #c6e8c8;
  --icons06-hover: #f78ead;
  --icons07-hover: #facebc;
  --icons08-hover: #fddfb4;
  --icons09-hover: #828385;
  --icons-disabled: #3e3f42;
}

:root {
  --color-bpm-01: #ff9a1b;
  --color-bpm-02: #1b82ff;
  --color-bpm-03: #ffed39;
  --color-bpm-04: #ff261b;
  --color-bpm-05: #2dcf76;
  --color-bpm-start: #87cf2d;
  --color-bpm-end: #ff261b;
  --color-bpm-gateways: #2dcf76;
  --color-bpm-intermediate: #3e3f42;
}

:root.dark {
  --color-bpm-01: #ffb754;
  --color-bpm-02: #5bb2ff;
  --color-bpm-03: #fef69c;
  --color-bpm-04: #f89491;
  --color-bpm-05: #96e3b0;
  --color-bpm-start: #87cf2d;
  --color-bpm-end: #ff261b;
  --color-bpm-gateways: #2dcf76;
  --color-bpm-intermediate: #c6c6c7;
}

:root {
  /*gxg-tabs boundary is not clear on dark. A subtle gray border only for dark helps fix this problem.*/
  --border-color-dark-only: transparent;
}

:root.dark {
  --border-color-dark-only: var(--gray-02);
}

/*********************************
TOKENS FOR ELEVATION
*********************************/
:root {
  --box-shadow-00: none;
  --box-shadow-01: 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-02: 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-03: 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 3px 3px -2px rgba(0, 0, 0, 0.12), 0px 1px 8px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-04: 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
    0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
  --box-shadow-06: 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  --box-shadow-08: 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
  --box-shadow-09: 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
    0px 3px 16px 2px rgba(0, 0, 0, 0.12), 0px 5px 6px -3px rgba(0, 0, 0, 0.2);
  --box-shadow-12: 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12), 0px 7px 8px -4px rgba(0, 0, 0, 0.2);
}

/*gemini*/
/*********************************
TOKENS FOR FONTS
*********************************/
:root {
  /*font families*/
  --font-family-primary: "Open Sans", sans-serif;
  --font-family-secondary: sans-serif;
  /*None, at the time of writing*/
  /*font weights*/
  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  /*font sizes*/
  --font-size-xxs: 8px;
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-md: 11px;
  --font-size-lg: 12px;
  --font-size-xl: 13px;
  /*font sizes (mercury only)*/
  --mer-font_size-xxs: 12px;
  --mer-font_size-xs: 14px;
  --mer-font_size-s: 16px;
  --mer-font_size-m: 20px;
  --mer-font_size-l: 24px;
  --mer-font_size-xl: 36px;
  /*font styles*/
  --font-style-regular: normal;
  /*font line heights*/
  --line-height-regular: normal;
  --line-height-comfortable: 1.9em;
  /*font letter spacings*/
  --letter-spacing-xs: 0.2px;
  --letter-spacing-sm: 0.25px;
  --letter-spacing-md: 0.3px;
  --letter-spacing-lg: 0.6px;
}

/*********************************
TITLES STYLES
*********************************/
/*Title 01*/
.gxg-title-01 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-01-font-weight);
  font-size: var(--ds-title-01-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
}
.gxg-title-01--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-01-font-weight);
  font-size: var(--ds-title-01-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Title 02*/
.gxg-title-02 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-02-font-weight);
  font-size: var(--ds-title-02-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
}
.gxg-title-02--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-02-font-weight);
  font-size: var(--ds-title-02-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--color-on-primary);
}

/*Title 03*/
.gxg-title-03 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-03-font-weight);
  font-size: var(--ds-title-03-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
}
.gxg-title-03--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-03-font-weight);
  font-size: var(--ds-title-03-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  text-transform: uppercase;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Title 04*/
.gxg-title-04 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-04-font-weight);
  font-size: var(--ds-title-04-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
}
.gxg-title-04--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-04-font-weight);
  font-size: var(--ds-title-04-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Title 05*/
.gxg-title-05 {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-05-font-weight);
  font-size: var(--ds-title-05-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
}
.gxg-title-05--negative {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--ds-title-05-font-weight);
  font-size: var(--ds-title-05-font-size);
  letter-spacing: var(--ds-base-font-letter-spacing--regular);
  color: var(--ds-base-font-color);
  text-align: start;
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}

/*Text*/
.gxg-text {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  cursor: pointer;
}
.gxg-text--negative {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--negative);
}
.gxg-text--gray {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--dimmed);
}

/*Link*/
.gxg-link {
  line-height: unset;
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  color: var(--ds-base-font-color--link);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}
.gxg-link:hover {
  color: var(--ds-base-font-color--link-hover);
}
.gxg-link:active {
  color: var(--ds-base-font-color--link-active);
}

/*Quote*/
.gxg-quote {
  font-family: var(--ds-base-font-family-primary);
  font-size: var(--ds-base-font-size);
  color: var(--ds-base-font-size-color);
  font-weight: var(--ds-base-font-size-weight);
  line-height: var(--ds-base-font-line-height--comfortable);
  font-style: italic;
}
.gxg-quote--negative {
  color: var(--ds-base-font-color--negative);
}

/*Tab*/
.gxg-tab {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-lg);
  color: var(--color-on-background);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.778em;
}
.gxg-tab:active {
  font-weight: var(--font-weight-bold);
}
.gxg-tab--active {
  font-weight: var(--font-weight-bold);
}
.gxg-tab--disabled {
  color: var(--color-primary-disabled);
  pointer-events: none;
}

/*label*/
.gxg-label {
  font-family: var(--ds-base-font-family-primary);
  font-weight: var(--gxg-label-font-weight);
  font-size: var(--gxg-label-font-size);
  color: var(--gxg-label-color);
  text-align: center;
  line-height: 1.455em;
  display: flex;
  align-items: center;
}
.gxg-label--disabled {
  color: var(--color-primary-disabled);
}
.gxg-label:not(.gxg-label--negative):not(.gxg-label--negative-disabled):not(.gxg-label--disabled):hover {
  color: var(--color-primary-hover);
}
.gxg-label:not(.gxg-label--negative):not(.gxg-label--negative-disabled):not(.gxg-label--disabled):focus {
  color: var(--color-primary-active);
}
.gxg-label:not(.gxg-label--negative):not(.gxg-label--negative-disabled):not(.gxg-label--disabled):active {
  color: var(--color-primary-active);
}
.gxg-label--negative {
  color: var(--color-on-primary);
}
.gxg-label--negative-disabled {
  color: var(--color-on-disabled);
}

/*********************************
TOKENS FOR OUTLINES
*********************************/
:root {
  --outline-width-regular: 2px;
  --outline-style-regular: solid;
}

/*********************************
TOKENS FOR SPACING COMPONENTS
*********************************/
/*This is the spacing for the components itself (inside the component)*/
:root {
  --spacing-comp-00: 2px;
  --spacing-comp-01: 4px;
  --spacing-comp-02: 8px;
  --spacing-comp-03: 12px;
  --spacing-comp-04: 16px;
  --spacing-comp-05: 24px;
  --spacing-comp-06: 32px;
  --spacing-comp-07: 40px;
  --spacing-comp-08: 50px;
  --spacing-comp-09: 60px;
}

/*********************************
TOKENS FOR SPACING LAYOUT
*********************************/
/*This is the spacing for the layout/environment in which the components are embedded (outside the component)*/
/*
Note: this set of spacing values (xs, s, etc...) have been added as a spacing type to the alert component,
and maybe to other components as well. If you are going to add a new spacing value (for example xxs, or xxl)
you will need to also add that new value to all the components that are making use of this spacing values.
*/
:root {
  --spacing-lay-xs: 4px;
  --spacing-lay-s: 8px;
  --spacing-lay-m: 16px;
  --spacing-lay-l: 32px;
  --spacing-lay-xl: 64px;
}

/*********************************
TOKENS FOR TIMING (in miliseconds)
*********************************/
:root {
  --timing-01: 200;
  --timing-02: 500;
  --timing-03: 1000;
  --timing-04: 2000;
  --timing-05: 3500;
  --timing-06: 5000;
  --timing-07: 7000;
  --timing-08: 9000;
  --timing-09: 12000;
  --timing-10: 15000;
}

:root[enable-mercury-ds] {
  --mer-color__primary-blue--200: #2070ce;
  --mer-color__primary-blue--300: #ffffff;
  --mer-color__primary-blue--400: #437dc0;
  --mer-color__primary-blue--600: #335884;
  --mer-color__neutral-gray--00: #363636;
  --mer-color__neutral-gray--100: #525151;
  --mer-color__neutral-gray--200: #616161;
  --mer-color__neutral-gray--300: #696969;
  --mer-color__neutral-gray--400: #666666;
  --mer-color__neutral-gray--500: #7f7f7f;
  --mer-color__neutral-gray--600: #999999;
  --mer-color__neutral-gray--700: #b3b3b3;
  --mer-color__neutral-gray--800: #cccccc;
  --mer-color__neutral-gray--900: #ffffff;
  --mer-color__neutral-gray--1000: #f8f8f8;
  --mer-color__neutral-gray--1100: #f1f1f1;
  --mer-color__neutral-gray--1200: #e4e4e4;
  --mer-color__neutral-gray--1300: #dedede;
  --mer-color__neutral-gray--1400: #ffffff;
  --mer-color__tinted-yellow--5: #ffc96b0d;
  --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-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-yellow--100: #ffc96b;
  --mer-color__message-yellow--200: #ffc96b;
  --mer-color__message-red--100: #fb7c84;
  --mer-color__message-red--200: #fb7c84;
  --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);
}
:root[enable-mercury-ds].dark {
  --mer-color__primary-blue--200: #5ba7ff;
  --mer-color__primary-blue--300: #5498e8;
  --mer-color__primary-blue--400: #437dc0;
  --mer-color__primary-blue--600: #335884;
}
:root[enable-mercury-ds].dark {
  --mer-color__neutral-gray--00: #ffffff;
  --mer-color__neutral-gray--100: #cccccc;
  --mer-color__neutral-gray--200: #b3b3b3;
  --mer-color__neutral-gray--300: #999999;
  --mer-color__neutral-gray--400: #7f7f7f;
  --mer-color__neutral-gray--500: #666666;
  --mer-color__neutral-gray--600: #4d4d4d;
  --mer-color__neutral-gray--700: #333333;
  --mer-color__neutral-gray--800: #1a1a1a;
  --mer-color__neutral-gray--900: #000000;
  --mer-color__neutral-gray--1000: #1f2225;
  --mer-color__neutral-gray--1100: #24272a;
  --mer-color__neutral-gray--1200: #2d3032;
  --mer-color__neutral-gray--1300: #3b3e40;
  --mer-color__neutral-gray--1400: #2d3134;
}
:root[enable-mercury-ds].dark {
  --mer-color__tinted-yellow--5: #ffc96b0d;
  --mer-color__tinted-yellow--60: #ffc96b99;
  --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-blue--8: #5ba7ff14;
  --mer-color__tinted-blue--10: #5ba7ff1a;
  --mer-color__tinted-blue--20: #5ba7ff33;
  --mer-color__tinted-blue--50: #5ba7ff80;
}
:root[enable-mercury-ds].dark {
  --mer-color__message-green--100: #64d9a8;
  --mer-color__message-green--200: #5dc599;
  --mer-color__message-yellow--100: #ffc96b;
  --mer-color__message-yellow--200: #f9bd56;
  --mer-color__message-red--100: #fb7c84;
  --mer-color__message-red--200: #e35861;
}
:root[enable-mercury-ds].dark {
  --mer-color__surface: #1a1d20;
}
:root[enable-mercury-ds].dark {
  --mer-color__elevation--01: #202428;
  --mer-color__elevation--02: #262a2f;
  --mer-color__elevation--03: #2b3237;
  --mer-color__elevation--04: #3b4044;
}

/*--- Gemini ---*/
:root[enable-mercury-ds] {
  /*background color*/
  --mer-elevation__background-color--01: var(--gray-00);
  --mer-elevation__background-color--02: var(--gray-01);
  --mer-elevation__background-color--03: var(--gray-01);
  --mer-elevation__background-color--04: var(--gray-01);
  /*border*/
  --mer-elevation__border-01: transparent;
  --mer-elevation__border-02: 1px solid var(--gray-01);
  --mer-elevation__border-03: transparent;
  --mer-elevation__border-04: transparent;
  /*box shadow*/
  --mer-elevation__box-shadow--01: var(--box-shadow-02);
  --mer-elevation__box-shadow--02: var(--box-shadow-02);
  --mer-elevation__box-shadow--03: none;
  --mer-elevation__box-shadow--04: none;
}
:root[enable-mercury-ds].dark {
  /*background color*/
  --mer-elevation__background-color--01: var(--gray-00);
  --mer-elevation__background-color--02: var(--gray-01);
  --mer-elevation__background-color--03: var(--gray-01);
  --mer-elevation__background-color--04: var(--gray-01);
  /*border*/
  --mer-elevation__border-01: transparent;
  --mer-elevation__border-02: 1px solid var(--gray-02);
  --mer-elevation__border-03: transparent;
  --mer-elevation__border-04: transparent;
  /*box shadow*/
  --mer-elevation__box-shadow--01: var(--box-shadow-02);
  --mer-elevation__box-shadow--02: var(--box-shadow-02);
  --mer-elevation__box-shadow--03: none;
  --mer-elevation__box-shadow--04: none;
}

/*--- Mercury ---*/
:root.mercury {
  /*background color*/
  --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),
    0px 2px 4px -1px rgba(0, 0, 0, 0.1);
  --mer-elevation__box-shadow--03: 0px 3px 14px 2px rgba(0, 0, 0, 0.12),
    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);
}
:root.mercury.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[enable-mercury-ds] {
  /*Families*/
  --mer-font-family--primary: "Inter", sans-serif;
  /*Weights*/
  --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--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: normal;
  --mer-line-height--comfortable: 1.7em;
  /*Letter Spacings*/
  --mer-letter-spacing--tight: ;
  --mer-letter-spacing--regular: ;
  --mer-letter-spacing--comfortable: ;
}

:root[enable-mercury-ds] {
  --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;
}

:root[enable-mercury-ds] {
  --mer-spacing--3xs: 2px;
  --mer-spacing--2xs: 4px;
  --mer-spacing--xs: 8px;
  --mer-spacing--sm: 12px;
  --mer-spacing--md: 16px;
  --mer-spacing--lg: 24px;
  --mer-spacing--xl: 32px;
  --mer-spacing--2xl: 40px;
  --mer-spacing--3xl: 48px;
  --mer-spacing--4xl: 64px;
}

:root[enable-mercury-ds] {
  --mer-timing--super-fast: 100;
  --mer-timing--fast: 200;
  --mer-timing--regular: 500;
  --mer-timing--slow: 1000;
}

:root[enable-mercury-ds] {
  --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--destructive: var(--mer-color__message-red--100);
}

:root[enable-mercury-ds] {
  --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__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__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);
}

/*Added by Bruno*/
:root[enable-mercury-ds] {
  --mer-border-color__dark-only: transparent;
}
:root[enable-mercury-ds].dark {
  --mer-border-color__dark-only: var(--mer-color__neutral-gray--1100);
}

:root[enable-mercury-ds] {
  --mer-heading__font-color: var(--mer-color__neutral-gray--100);
}

:root[enable-mercury-ds] {
  --mer-icon__on-surface: var(--mer-color__neutral-gray--300);
  --mer-icon__on-primary: var(--mer-color__neutral-gray--800);
  --mer-icon__on-primary--active: var(--mer-color__neutral-gray--00);
  --mer-icon__on-disabled: var(--mer-color__neutral-gray--500);
  --mer-icon__on-message: var(--mer-color__neutral-gray--700);
  --mer-icon__on-elevation: var(--mer-color__neutral-gray--600);
  --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);
  --mer-icon__primary--disabled: var(--mer-accent__primary--disabled);
  --mer-icon__error: var(--mer-color__message-red--100);
  --mer-icon__warning: var(--mer-color__message-yellow--100);
  --mer-icon__success: var(--mer-color__message-green--100);
  --mer-icon__neutral: var(--mer-color__neutral-gray--200);
  --mer-icon__highlighted: var(--mer-color__neutral-gray--100);
  --mer-icon__bright: var(--mer-color__neutral-gray--00);
}

:root[enable-mercury-ds] {
  --mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
  --mer-item__bg-color--selected: var(--mer-color__tinted-blue--10);
  --mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
  --mer-item__border-color: var(--mer-color__tinted-blue--20);
  --mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
}

:root[enable-mercury-ds] {
  --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-message: var(--mer-color__neutral-gray--700);
  --mer-text__on-elevation: var(--mer-color__neutral-gray--00);
  --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__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);
}

:root {
  /*--- General ---*/
  --ds-base-background-color: var(--color-background);
  /*--- Font ---*/
  --ds-base-font-family-primary: var(--font-family-primary);
  --ds-base-font-size: var(--font-size-lg);
  --ds-base-font-color: var(--color-on-background);
  --ds-base-font-color--negative: var(--color-on-primary);
  --ds-base-font-color--dimmed: var(--gray-05);
  --ds-base-font-color--link: var(--color-primary);
  --ds-base-font-color--link-hover: var(--color-primary-hover);
  --ds-base-font-color--link-active: var(--color-primary-active);
  --ds-base-font-color--warning: var(--ds-warning-color--dark);
  --ds-base-font-color--error: var(--ds-alert-color--dark);
  --ds-base-font-color--success: var(--ds-success-color--dark);
  --ds-base-font-weight: var(--font-weight-regular);
  --ds-base-font-line-height--regular: var(--line-height-regular);
  --ds-base-font-line-height--comfortable: var(--line-height-comfortable);
  --ds-base-font-letter-spacing--regular: normal;
  --ds-base-font-letter-spacing--comfortable: var(--letter-spacing-lg);
  /*--- Other ---*/
  --ds-border-color-dark-only: var(--border-color-dark-only);
  --ds-form-text-height: 20px;
  --ds-border-common-styles: var(--border-width-sm) solid
    var(--ds-border-color--regular);
  /*--- Border ---*/
  --ds-border-color--error: var(--color-error-dark);
  --ds-border-color--warning: var(--color-warning-dark);
  --ds-border-color--success: var(--color-success-dark);
  --ds-border-color-control--focused: var(--color-primary-enabled);
  /*--- Icon ---*/
  --ds-icon-mask-size: 100%;
  --ds-icon-size-box--regular: 20px;
  --ds-icon-size-box--small: 20px;
  --ds-icon-size--regular: 16px;
  --ds-icon-size--small: 12px;
  /*--- List Item ---*/
  --ds-list-item-height: var(--spacing-comp-05);
  --ds-list-item-height--spaced: calc(var(--spacing-comp-05) + 2px);
  /*--- Form Control ---*/
  --ds-form-control-height: var(--spacing-comp-05);
  --ds-form-control-gap--vertical: var(--spacing-comp-04);
  --ds-form-control-gap--horizontal: var(--spacing-comp-04);
  --ds-form-control-color: var(--color-on-background);
  --ds-form-control-placeholder-color: var(--gray-05);
  --ds-form-control-placeholder-style: regular;
  --ds-form-control-background-color: var(--color-background);
  --ds-form-control-border: var(--border-width-sm) solid
    var(--ds-border-color--regular);
  --ds-form-control-border-radius: var(--border-radius-sm);
  --ds-form-control-border-color--hover: var(--ds-border-color--regular);
  --ds-form-control-font-size: var(--font-size-lg);
  --ds-form-control-padding-horizontal: var(--spacing-comp-02);
  --ds-form-control-padding-vertical: var(--spacing-comp-02);
  /*--- Colors ---*/
  --ds-row-background-color-odd: var(--gray-00);
  --ds-row-background-color-even: var(--color-background);
  --ds-row-background-color-odd--hover: var(--gray-01);
  --ds-row-background-color-even--hover: var(--gray-01);
  --ds-border-color--regular: var(--gray-02);
  /*hover*/
  --ds-item-color--hover: var(--color-on-background);
  --ds-filter-brightness--hover: 1.03;
  /*focus*/
  --ds-focus-border-width: var(--border-width-md);
  --ds-focus-border-color: var(--color-primary-enabled);
  /*item*/
  --ds-item-background-color--hover: var(--gray-01);
  --ds-item-background-color--selected: var(--color-secondary-enabled);
  --ds-item-background-color--selected-hover: var(
    --color-secondary-enabled--hover
  );
  --ds-item-border-color: var(--gray-00);
  --ds-item-border-color--selected: var(--color-secondary-hover);
  --ds-item-color--selected: var(--mer-color__neutral-gray--100);
  /*active*/
  --ds-item-background-color--active: var(--color-secondary-active);
  --ds-color--active: var(--color-on-primary);
  /*disabled*/
  --ds-border-color-disabled: var(--gray-01);
  --ds-background-color-disabled: var(--gray-00);
  --ds-color-disabled: var(--gray-04);
  --ds-color-on-disabled: var(--gray-04);
  --ds-icon-color-disabled: var(--gray-04);
  --ds-icon-color-on-disabled: var(--gray-04);
  /*checkbox*/
  --ds-checkbox-size: var(--spacing-comp-04);
  /*scrollbar*/
  --gxg-scrollbar-width: 6px;
  --gxg-scrollbar-track-background: var(--gray-02);
  --gxg-scrollbar-track-border-radius: 10px;
  --gxg-scrollbar-track-thumb-background: var(--gray-04);
  --gxg-scrollbar-track-thumb-radius: 10px;
  --gxg-scrollbar-track-thumb-border: none;
  --gxg-scrollbar-track-thumb-hover-background: var(--gray-05);
  /*Titles*/
  --ds-title-01-font-size: var(--font-size-xl);
  --ds-title-01-font-weight: var(--font-weight-bold);
  --ds-title-02-font-size: var(--font-size-lg);
  --ds-title-02-font-weight: var(--font-weight-bold);
  --ds-title-03-font-size: var(--font-size-lg);
  --ds-title-03-font-weight: var(--font-weight-regular);
  --ds-title-04-font-size: var(--font-size-xl);
  --ds-title-04-font-weight: var(--font-weight-semibold);
  --ds-title-05-font-size: var(--font-size-lg);
  --ds-title-05-font-weight: var(--font-weight-semibold);
  /*Alert / Warning / Message */
  --ds-alert-color--dark: var(--color-error-dark);
  --ds-alert-color--light: var(--color-error-light);
  --ds-warning-color--dark: var(--color-warning-dark);
  --ds-warning-color--light: var(--color-warning-light);
  --ds-success-color--dark: var(--color-success-dark);
  --ds-success-color--light: var(--color-success-light);
}
:root.dark:not(.mercury) {
  --ds-item-background-color--selected: var(--color-secondary-active);
  --ds-item-background-color--selected--hover: var(
    --color-secondary-enabled--hover
  );
}
:root.mercury {
  /*--- General ---*/
  --ds-base-background-color: var(--mer-color__surface);
  /*--- Font ---*/
  --ds-base-font-family-primary: var(--mer-font-family--primary);
  --ds-base-font-size: var(--mer-font__size--xs);
  --ds-base-font-color: var(--mer-text__on-surface);
  --ds-base-font-color--negative: var(--mer-color__neutral-gray--800);
  --ds-base-font-color--dimmed: var(--mer-text__on-surface);
  --ds-base-font-color--link: var(--mer-text__primary);
  --ds-base-font-color--link-hover: var(--mer-text__primary--hover);
  --ds-base-font-color--link-active: var(--mer-text__primary--active);
  --ds-base-font-weight: var(--mer-font__weight--regular);
  --ds-base-font-line-height--regular: var(--mer-line-height--regular);
  --ds-base-font-line-height--comfortable: var(
    --mer-line-height--comfortable
  );
  --ds-base-font-letter-spacing--regular: normal;
  --ds-base-font-letter-spacing--comfortable: var(
    --mer-letter-letter-spacing--comfortable
  );
  /*--- Other ---*/
  --ds-border-color-dark-only: var(--mer-border-color__dark-only);
  --ds-form-text-height: 20px;
  --ds-border-common-styles: var(--mer-border__width--sm) solid
    var(--ds-border-color--regular);
  /*--- Border ---*/
  --ds-border-color--error: var(--mer-border-color__error);
  --ds-border-color--warning: var(--mer-border-color__warning);
  --ds-border-color--success: var(--mer-border-color__success);
  --ds-border-color-control--focused: var(
    --mer-border-color__control--focused
  );
  /*--- Icon ---*/
  --ds-icon-mask-size: 100%;
  --ds-icon-size-box--regular: 32px;
  --ds-icon-size-box--small: 24px;
  --ds-icon-size--regular: 18px;
  --ds-icon-size--small: 16px;
  /*--- List Item ---*/
  --ds-list-item-height: var(--mer-spacing--lg);
  --ds-list-item-height--spaced: var(--mer-spacing--xl);
  /*--- Form Control ---*/
  --ds-form-control-height: 26px;
  --ds-form-control-gap--vertical: var(--mer-spacing--md);
  --ds-form-control-gap--horizontal: var(--mer-spacing--md);
  --ds-form-control-color: var(--mer-text__bright);
  --ds-form-control-placeholder-color: var(--mer-text__on-surface);
  --ds-form-control-placeholder-style: italic;
  --ds-form-control-background-color: var(--mer-color__surface);
  --ds-form-control-border: var(--mer-border__width--sm) solid
    var(--mer-border-color__dim);
  --ds-form-control-border-color--hover: var(--mer-color__neutral-gray--00);
  --ds-form-control-border-radius: var(--mer-border__width--lg);
  --ds-form-control-font-size: var(--mer-font__size--2xs);
  --ds-form-control-padding-horizontal: var(--mer-spacing--xs);
  --ds-form-control-padding-vertical: var(--mer-spacing--xs);
  /*--- Colors ---*/
  --ds-row-background-color-odd: var(--mer-color__surface);
  --ds-row-background-color-even: var(--mer-color__surface);
  --ds-row-background-color-odd--hover: var(
    --ds-item-background-color--hover
  );
  --ds-row-background-color-even--hover: var(
    --ds-item-background-color--hover
  );
  --ds-border-color--regular: var(--mer-border-color__dim);
  --ds-border-color--regular: var(--mer-border-color__on-elevation--01);
  /*focus*/
  --ds-focus-border-width: var(--mer-border__width--sm);
  --ds-focus-border-color: var(--mer-border-color__primary--focused);
  /*item*/
  --ds-item-background-color--hover: var(--mer-item__bg-color--hover);
  --ds-item-background-color--selected: var(--mer-item__bg-color--selected);
  --ds-item-background-color--selected-hover: var(
    --mer-item__bg-color--selected-hover
  );
  --ds-item-border-color: var(--mer-color__elevation--01);
  --ds-item-border-color--selected: var(--mer-item__border-color--selected);
  --ds-item-color--selected: var(--mer-text__on-surface);
  /*active*/
  --ds-item-background-color--active: var();
  --ds-color--active: var();
  /*disabled*/
  --ds-border-color-disabled: var(--mer-accent__primary--disabled);
  --ds-background-color-disabled: var(--mer-color__neutral-gray--1100);
  --ds-color-disabled: var(--mer-text__primary--disabled);
  --ds-color-on-disabled: var(--mer-text__on-disabled);
  --ds-icon-color-disabled: var(--mer-icon__primary--disabled);
  --ds-icon-color-on-disabled: var(--mer-icon__on-disabled);
  /*checkbox*/
  --ds-checkbox-size: var();
  /*scrollbar*/
  --gxg-scrollbar-width: var(--mer-spacing--xs);
  --gxg-scrollbar-track-background: var(--mer-color__elevation--03);
  --gxg-scrollbar-track-border-radius: 10px;
  --gxg-scrollbar-track-thumb-background: var(--mer-color__elevation--04);
  --gxg-scrollbar-track-thumb-radius: 10px;
  --gxg-scrollbar-track-thumb-border: none;
  --gxg-scrollbar-track-thumb-hover-background: var(
    --mer-color__elevation--04
  );
  /*Titles*/
  --ds-title-01-font-size: var(--mer-font__size--sm);
  --ds-title-01-font-weight: var(--mer-font__weight--bold);
  --ds-title-02-font-size: var(--mer-font__size-xs);
  --ds-title-02-font-weight: var(--mer-font__weight--bold);
  --ds-title-03-font-size: var(--mer-font__size-xs);
  --ds-title-03-font-weight: var(--mer-font__weight--regular);
  --ds-title-04-font-size: var(--mer-font__size-s);
  --ds-title-04-font-weight: var(--mer-font__weight--semi-bold);
  --ds-title-05-font-size: var(--mer-font__size-xs);
  --ds-title-05-font-weight: var(--mer-font__weight--semi-bold);
  /*Alert / Warning / Message */
  --ds-alert-color--dark: var(--mer-color__message-red--200);
  --ds-alert-color--light: var(--mer-color__message-red--100);
  --ds-warning-color--dark: var(--mer-color__message-yellow--200);
  --ds-warning-color--light: var(--mer-color__message-yellow--100);
  --ds-success-color--dark: var(--mer-color__message-green--200);
  --ds-success-color--light: var(--mer-color__message-green--100);
}

:root.gxg-large {
  --ds-form-text-height: var(--spacing-comp-05);
}

:root.dark:not(.mercury) {
  --ds-filter-brightness--hover: 1.1;
}

/*--- Gemini ---*/
:root {
  /*--- General ---*/
  --gxg-button-icon-size: 20px;
  --gxg-button-border-radius: var(--border-radius-xs);
  --gxg-button-border-width: var(--border-width-sm);
  --gxg-button-padding-horizontal: var(--spacing-comp-03);
  --gxg-button-icon-padding-start: var(--spacing-comp-03);
  --gxg-button-height: var(--ds-form-control-height);
  --gxg-button-font-size: var(--font-size-lg);
  --gxg-button-font-weight: var(--font-weight-semi-bold);
  --gxg-button-icon-margin-inline-end: var(--spacing-comp-01);
  --gxg-button-primary-focus-outline-color: var(
    --color-primary-active--inverted
  );
  /*--- Primary ---*/
  --gxg-button-primary-bg-color: var(--color-primary-enabled);
  --gxg-button-primary-color: var(--color-on-primary);
  --gxg-button-primary-border-color: var(--color-primary-enabled);
  --gxg-button-primary-icon-color: var(--gxg-button-primary-color);
  --gxg-button-primary-icon-color-disabled: var(--ds-color--disabled);
  /*hover*/
  --gxg-button-primary-bg-color-hover: var(--color-primary-hover);
  --gxg-button-primary-color-hover: var(--color-on-primary);
  --gxg-button-primary-border-color-hover: var(--color-primary-hover);
  --gxg-button-primary-icon-color-hover: var(--gxg-button-primary-color-hover);
  /*active*/
  --gxg-button-primary-bg-color-active: var(--color-primary-active);
  --gxg-button-primary-color-active: var(--color-on-primary);
  --gxg-button-primary-border-color-active: var(--color-primary-active);
  --gxg-button-primary-icon-color-active: var(
    --gxg-button-primary-color-active
  );
  /*--- Secondary ---*/
  --gxg-button-secondary-bg-color: transparent;
  --gxg-button-secondary-color: var(--color-primary-enabled);
  --gxg-button-secondary-border-color: transparent;
  --gxg-button-secondary-lateral-padding: var(--spacing-comp-03);
  --gxg-button-secondary-text-decoration: none;
  --gxg-button-secondary-icon-color: var(--gxg-button-secondary-color);
  --gxg-button-secondary-icon-color-disabled: var(--ds-color--disabled);
  /*hover*/
  --gxg-button-secondary-bg-color-hover: var(--color-primary-hover-opacity-01);
  --gxg-button-secondary-color-hover: var(--color-primary-hover);
  --gxg-button-secondary-border-color-hover: transparent;
  --gxg-button-secondary-icon-color-hover: var(
    --gxg-button-secondary-color-hover
  );
  /*active*/
  --gxg-button-secondary-bg-color-active: var(--color-primary-hover-opacity-01);
  --gxg-button-secondary-color-active: var(--color-primary-active);
  --gxg-button-secondary-border-color-active: transparent;
  --gxg-button-secondary-icon-color-active: var(
    --gxg-button-secondary-color-active
  );
  /*--- Tertiary ---*/
  --gxg-button-tertiary-bg-color: transparent;
  --gxg-button-tertiary-border-color: transparent;
  --gxg-button-tertiary-icon-color: var(--color-on-background);
  --gxg-button-tertiary-icon-color-disabled: var(--ds-color--disabled);
  /*hover*/
  --gxg-button-tertiary-bg-color-hover: transparent;
  --gxg-button-tertiary-border-color-hover: transparent;
  --gxg-button-tertiary-icon-color-hover: var(--gray-05);
  /*active*/
  --gxg-button-tertiary-bg-color-active: transparent;
  --gxg-button-tertiary-border-color-active: transparent;
  --gxg-button-tertiary-icon-color-active: var(--gray-07);
  /*--- Outlined ---*/
  --gxg-button-outlined-bg-color: transparent;
  --gxg-button-outlined-color: var(--color-primary-enabled);
  --gxg-button-outlined-border-color: var(--color-primary-enabled);
  --gxg-button-outlined-icon-color: var(--gxg-button-outlined-color);
  --gxg-button-outlined-icon-color-disabled: var(--ds-color--disabled);
  /*hover*/
  --gxg-button-outlined-bg-color-hover: var(--color-primary-hover-opacity-01);
  --gxg-button-outlined-color-hover: var(--color-primary-hover);
  --gxg-button-outlined-border-color-hover: var(--color-primary-hover);
  --gxg-button-outlined-icon-color-hover: var(
    --gxg-button-outlined-color-hover
  );
  /*active*/
  --gxg-button-outlined-bg-color-active: var(--color-primary-hover-opacity-01);
  --gxg-button-outlined-color-active: var(--color-primary-active);
  --gxg-button-outlined-border-color-active: var(--color-primary-active);
  --gxg-button-outlined-icon-color-active: var(
    --gxg-button-outlined-color-active
  );
  /*--- Unselected ---*/
  /*enabled*/
  --gxg-button-unselected-bg-color--enabled: transparent;
  --gxg-button-unselected-color--enabled: var(--color-primary-enabled);
  /*hover*/
  --gxg-button-unselected-bg-color--hover: var(
    --gxg-button-secondary-bg-color-hover
  );
  --gxg-button-unselected-color--hover: var(--color-primary-enabled);
  /*active*/
  --gxg-button-unselected-bg-color--active: var(
    --gxg-button-secondary-bg-color-active
  );
  --gxg-button-unselected-color--active: var(
    --gxg-button-secondary-color-active
  );
  /*disabled*/
  --gxg-button-unselected-bg-color--disabled: transparent;
  --gxg-button-unselected-color--disabled: var(--ds-color-disabled);
}

/*--- Mercury ---*/
:root.mercury {
  /*general*/
  --gxg-button-icon-size: 20px;
  --gxg-button-border-radius: var(--mer-border__radius--sm);
  --gxg-button-border-width: var(--mer-border__width--sm);
  --gxg-button-padding-horizontal: var(--mer-spacing--sm);
  --gxg-button-icon-padding-start: var(--mer-spacing--sm);
  --gxg-button-height: var(--ds-form-control-height);
  --gxg-button-font-size: var(--mer-font__size--2xs);
  --gxg-button-font-weight: var(--mer-font__weight--semi-bold);
  --gxg-button-icon-margin-inline-end: var(--mer-spacing--2xs);
  --gxg-button-primary-focus-outline-color: var(--ds-focus-border-color);
  /*--- Primary ---*/
  --gxg-button-primary-bg-color: var(--mer-accent__primary);
  --gxg-button-primary-color: var(--mer-text__on-primary);
  --gxg-button-primary-border-color: var(--mer-border-color__primary);
  --gxg-button-primary-icon-color: var(--mer-icon__on-primary);
  --gxg-button-primary-icon-color-disabled: var(--mer-icon__on-disabled);
  /*hover*/
  --gxg-button-primary-bg-color-hover: var(--mer-accent__primary--hover);
  --gxg-button-primary-color-hover: var(--mer-text__on-primary);
  --gxg-button-primary-border-color-hover: var(
    --mer-border-color__primary--hover
  );
  --gxg-button-primary-icon-color-hover: var(--mer-icon__on-primary);
  /*active*/
  --gxg-button-primary-bg-color-active: var(--mer-accent__primary--active);
  --gxg-button-primary-color-active: var(--mer-text__on-primary--active);
  --gxg-button-primary-border-color-active: var(
    --mer-border-color__primary--active
  );
  --gxg-button-primary-icon-color-active: var(--mer-icon__on-primary--active);
  /*--- Secondary ---*/
  --gxg-button-secondary-bg-color: transparent;
  --gxg-button-secondary-color: var(--mer-text__primary);
  --gxg-button-secondary-border-color: transparent;
  --gxg-button-secondary-icon-color: var(--mer-icon__primary);
  --gxg-button-secondary-lateral-padding: 0;
  /*hover*/
  --gxg-button-secondary-bg-color-hover: transparent;
  --gxg-button-secondary-color-hover: var(--mer-text__primary--hover);
  --gxg-button-secondary-border-color-hover: transparent;
  --gxg-button-secondary-icon-color-hover: var(--mer-icon__primary--hover);
  /*active*/
  --gxg-button-secondary-bg-color-active: transparent;
  --gxg-button-secondary-color-active: var(--mer-text__primary--active);
  --gxg-button-secondary-border-color-active: transparent;
  --gxg-button-secondary-icon-color-active: var(--mer-icon__primary--active);
  /*--- Tertiary ---*/
  --gxg-button-tertiary-bg-color: transparent;
  --gxg-button-tertiary-border-color: transparent;
  --gxg-button-tertiary-icon-color: var(--mer-icon__primary);
  --gxg-button-tertiary-icon-color-disabled: var(--ds-icon-color-disabled);
  /*hover*/
  --gxg-button-tertiary-bg-color-hover: transparent;
  --gxg-button-tertiary-border-color-hover: transparent;
  --gxg-button-tertiary-icon-color-hover: var(--mer-icon__primary--hover);
  /*active*/
  --gxg-button-tertiary-bg-color-active: transparent;
  --gxg-button-tertiary-border-color-active: transparent;
  --gxg-button-tertiary-icon-color-active: var(--mer-icon__primary--active);
  /*--- Outlined ---*/
  --gxg-button-outlined-bg-color: transparent;
  --gxg-button-outlined-color: var(--mer-text__neutral);
  --gxg-button-outlined-border-color: var(--mer-border-color__neutral);
  --gxg-button-outlined-icon-color: var(--mer-icon__neutral);
  /*hover*/
  --gxg-button-outlined-bg-color-hover: transparent;
  --gxg-button-outlined-color-hover: var(--mer-text__primary--hover);
  --gxg-button-outlined-border-color-hover: var(
    --mer-border-color__primary--hover
  );
  --gxg-button-outlined-icon-color-hover: var(--mer-icon__primary--hover);
  /*active*/
  --gxg-button-outlined-bg-color-active: transparent;
  --gxg-button-outlined-color-active: var(--mer-text__on-primary--active);
  --gxg-button-outlined-border-color-active: var(
    --mer-border-color__primary--active
  );
  --gxg-button-outlined-icon-color-active: var(--mer-icon__on-primary--active);
  /*--- Unselected ---*/
  /*enabled*/
  --gxg-button-unselected-bg-color--enabled: transparent;
  --gxg-button-unselected-color--enabled: var(--mer-text__neutral);
  /*hover*/
  --gxg-button-unselected-bg-color--hover: var(
    --gxg-button-primary-bg-color-hover
  );
  --gxg-button-unselected-color--hover: var(--gxg-button-primary-color-hover);
  /*active*/
  --gxg-button-unselected-bg-color--active: var(
    --gxg-button-primary-bg-color-active
  );
  --gxg-button-unselected-color--active: var(--gxg-button-primary-color-active);
  /*disabled*/
  --gxg-button-unselected-bg-color--disabled: transparent;
  --gxg-button-unselected-color--disabled: var();
}

:root {
  --gxg-button-group-container-gap: var(--border-width-sm);
  --gxg-button-group-container-bg-color: var(--gray-02);
}
:root.mercury {
  --gxg-button-group-container-gap: var(--mer-border__width--sm);
  --gxg-button-group-container-bg-color: var(--mer-color__neutral-gray--700);
}

/*--- Elevation ---*/
/*--- Gemini ---*/
:root {
  --gxg-buttons-group__gap: var(--spacing-comp-01);
  --gxg-buttons-group__padding: var(--spacing-comp-01) var(--spacing-comp-01);
  --gxg-buttons-group__border-radius: var(--border-radius-sm);
}

/*--- Mercury ---*/
:root.mercury {
  --gxg-buttons-group__gap: var(--mer-spacing--2xs);
  --gxg-buttons-group__padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs);
  --gxg-buttons-group__border-radius: var(--mer-border__radius--sm);
}

/*Gemini*/
:root {
  /*--- General ---*/
  --gxg-card_background-color: var(--gray-00);
  --gxg-card_background-white: var(--color-background);
  --gxg-card_background-gray: var(--gray-01);
  --gxg-card_box-shadow: var(--gxg-card-box-shadow);
  --gxg-card_border-radius: var(--border-radius-md);
  --gxg-card_padding-xs: var(--spacing-comp-01);
  --gxg-card_padding-s: var(--spacing-comp-02);
  --gxg-card_padding-m: var(--spacing-comp-03);
  --gxg-card_padding-l: var(--spacing-comp-04);
  --gxg-card_padding-xl: var(--spacing-comp-05);
  --gxg-card_padding-xxl: var(--spacing-comp-06);
  --gxg-card_padding-xxxl: var(--spacing-comp-07);
  /*header*/
  --gxg-card-header_margin: var(--spacing-comp-04) var(--spacing-comp-04) 0
    var(--spacing-comp-04);
  --gxg-card-header_padding-block-end: var(--spacing-comp-04);
  --gxg-card-header_border-block-end: 1px solid var(--gray-02);
  --gxg-card-header_gap: var(--spacing-comp-06);
  /*header left col*/
  --gxg-card-header-left_gap: var(--spacing-comp-03);
  --gxg-card-header-left_width: 50%;
  /*header right col*/
  --gxg-card-header-right_gap: var(--spacing-comp-03);
  --gxg-card-header-right_width: 50%;
  --gxg-card-header-right_font-size: var(--font-size-xl);
  /*subtitle wrapper*/
  --gxg-card-subtitle-wrapper_color: var(--color-on-background);
  --gxg-card-subtitle-wrapper_padding-inline-end: 3px;
  --gxg-card-subtitle-wrapper_link-color: var(--gray-06);
  /*content*/
  --gxg-card-content_padding: var(--spacing-comp-04);
  --gxg-card-content_font-size: inherit;
  --gxg-card-content_line-height: var(--line-height-default);
  --gxg-card-content_color: var(--gray-06);
  /*--- Card 'Section' ---*/
  --gxg-card-section_font-size: 13px;
  --gxg-card-section_border-radius: var(--border-radius-lg);
  --gxg-card-section_padding: 0;
  --gxg-card-section-title_font-size: var(--font-size--xl);
  --gxg-card-section-title_font-weight: var(--font-weight-bold);
  /*--- Card 'Article' ---*/
  --gxg-card-article_background-color: var(--gray-01);
  --gxg-card-article_font-size: 12px;
  --gxg-card-article_border: 1px solid var(--gray-02);
  --gxg-card-article_border-radius: var(--border-radius-md);
  --gxg-card-article_padding: 0;
  --gxg-card-article-title_margin: 0;
  --gxg-card-article-title_color: var(--gray-06);
  --gxg-card-article-title_font-weight: var(--font-weight-bold);
  --gxg-card-article-title_font-size: 14px;
  --gxg-card-article-subtitle-wrapper_color: var(--gray-06);
  --gxg-card-article-subtitle-wrapper_font-style: italic;
  --gxg-card-article-subtitle-wrapper_font-size: var(--font-size-xl);
  --gxg-card-article-subtitle-content_font-style: italic;
  --gxg-card-article-subtitle-content_color: var(--gray-04);
  --gxg-card-article-subtitle-content_line-height: var(
    --line-height-comfortable
  );
  --gxg-card-article-title-semibold_font-weight: var(--font-weight-semibold);
  --gxg-card-article-content_color: var(--gray-04);
  /*--- Card 'Mini' ---*/
  --gxg-card-mini_background-color: var(--gray-01);
  --gxg-card-mini_font-size: 12px;
  --gxg-card-mini_border: 1px solid var(--gray-02);
  --gxg-card-mini_border-radius: var(--border-radius-md);
  --gxg-card-mini_padding: 0;
  --gxg-card-mini-header_margin: var(--spacing-comp-02) var(--spacing-comp-02) 0
    var(--spacing-comp-02);
  --gxg-card-mini-header_padding-block-end: var(--spacing-comp-02);
  --gxg-card-mini-header_border-bottom: 0;
  --gxg-card-mini-header-left_width: 100%;
  --gxg-card-mini-header-left_gap: var(--spacing-comp-03);
  --gxg-card-mini-title_margin: 0;
  --gxg-card-mini-title_font-weight: 600;
  --gxg-card-mini-title_font-size: 12px;
  --gxg-card-mini-title_color: var(--gray-06);
  --gxg-card-mini-content_font-style: italic;
  --gxg-card-mini-content_padding: 0 var(--spacing-comp-02)
    var(--spacing-comp-02) var(--spacing-comp-02);
  --gxg-card-mini-content_color: var(--gray-04);
  /*--- Card Actionable ---*/
  --gxg-card-actionable-background-color--hover: var(
    --mer-color__neutral-gray--1100
  );
  --gxg-card-actionable-border-color--hover: var();
  --gxg-card-box-shadow: none;
}
:root.dark {
  --gxg-card-box-shadow: var(--box-shadow-02);
}

/*Mercury*/
:root.mercury {
  /*--- General ---*/
  --gxg-card_background-color: var(--mer-elevation--01);
  --gxg-card_background-white: var(--mer-elevation--01);
  --gxg-card_background-gray: var(--mer-elevation--01);
  --gxg-card_box-shadow: none;
  --gxg-card_border-radius: var(--mer-border__radius--sm);
  --gxg-card_padding-xs: var(--mer-spacing--2xs);
  --gxg-card_padding-s: var(--mer-spacing--xs);
  --gxg-card_padding-m: var(--mer-spacing--sm);
  --gxg-card_padding-l: var(--mer-spacing--md);
  --gxg-card_padding-xl: var(--mer-spacing--lg);
  --gxg-card_padding-xxl: var(--mer-spacing--xl);
  --gxg-card_padding-xxxl: var(--mer-spacing--2xl);
  /*header*/
  --gxg-card-header_margin: var(--mer-spacing--sm) var(--mer-spacing--sm) 0
    var(--mer-spacing--sm);
  --gxg-card-header_padding-block-end: var(--mer-spacing--sm);
  --gxg-card-header_border-block-end: var(--mer-border__width--sm) solid
    var(--mer-color__neutral-gray--1300);
  --gxg-card-header_gap: var(--mer-spacing--xl);
  /*header left col*/
  --gxg-card-header-left_gap: var(--mer-spacing--md);
  --gxg-card-header-left_width: 60%;
  /*header right col*/
  --gxg-card-header-right_gap: var(--mer-spacing--md);
  --gxg-card-header-right_width: 40%;
  --gxg-card-header-right_font-size: var(--mer-font__size--2xs);
  /*subtitle wrapper*/
  --gxg-card-subtitle-wrapper_color: var(--mer-color__neutral-gray--400);
  --gxg-card-subtitle-wrapper_padding-inline-end: 3px;
  --gxg-card-subtitle-wrapper_link-color: var(--mer-color__neutral-gray--00);
  /*content*/
  --gxg-card-content_padding: var(--mer-spacing--sm);
  --gxg-card-content_font-size: var(--mer-font__size--xs);
  --gxg-card-content_line-height: var(--mer-line-height--comfortable);
  --gxg-card-content_color: var(--mer-color__neutral-gray--200);
  /*--- Card 'Section' ---*/
  --gxg-card-section_font-size: var(--mer-font__size--xs);
  --gxg-card-section_border-radius: var(--mer-border__radius--sm);
  --gxg-card-section_padding: 0;
  --gxg-card-section-title_font-size: var(--mer-font__size--xs);
  --gxg-card-section-title_font-weight: var(--mer-font__weight--bold);
  /*--- Card 'Article' ---*/
  --gxg-card-article_background-color: var(--mer-color__neutral-gray--800);
  --gxg-card-article_font-size: var(--mer-font__size--xs);
  --gxg-card-article_border: 1px solid var(--mer-color__elevation--03);
  --gxg-card-article_border-radius: var(--mer-border__radius--sm);
  --gxg-card-article_padding: 0;
  --gxg-card-article-title_margin: 0;
  --gxg-card-article-title_color: var(--mer-color__neutral-gray--100);
  --gxg-card-article-title_font-weight: var(--mer-font__weight--bold);
  --gxg-card-article-title_font-size: var(--mer-font__size--xs);
  --gxg-card-article-subtitle-wrapper_color: var(--mer-text__on-surface);
  --gxg-card-article-subtitle-wrapper_font-style: italic;
  --gxg-card-article-subtitle-wrapper_font-size: var(--mer-font__size--xs);
  --gxg-card-article-subtitle-content_font-style: italic;
  --gxg-card-article-subtitle-content_color: ;
  --gxg-card-article-subtitle-content_line-height: var(--mer-text__on-surface);
  --gxg-card-article-title-semibold_font-weight: var(
    --mer-font__weight--semi-bold
  );
  --gxg-card-article-content_color: var(--mer-text__on-surface);
  /*--- Card 'Mini' ---*/
  --gxg-card-mini_background-color: var(--mer-color__neutral-gray--1000);
  --gxg-card-mini_font-size: var(--mer-font__size--2xs);
  --gxg-card-mini_border: 1px solid var(--mer-color__elevation--04);
  --gxg-card-mini_border-radius: var(--mer-border__radius--sm);
  --gxg-card-mini_padding: 0;
  --gxg-card-mini-header_margin: var(--mer-spacing--xs) var(--mer-spacing--xs) 0
    var(--mer-spacing--xs);
  --gxg-card-mini-header_padding-block-end: var(--mer-spacing--xs);
  --gxg-card-mini-header_border-bottom: none;
  --gxg-card-mini-header-left_width: 60%;
  --gxg-card-mini-header-left_gap: var(--mer-spacing--sm);
  --gxg-card-mini-title_margin: 0;
  --gxg-card-mini-title_font-weight: var(--mer-font__weight--semi-bold);
  --gxg-card-mini-title_font-size: var(--mer-font__size--2xs);
  --gxg-card-mini-title_color: var(--mer-color__neutral-gray--100);
  --gxg-card-mini-content_font-style: normal;
  --gxg-card-mini-content_padding: 0 var(--mer-spacing--sm)
    var(--mer-spacing--xs) var(--mer-spacing--sm);
  --gxg-card-mini-content_color: var(--mer-color__neutral-gray--200);
  /*--- Other ---*/
  /*no content*/
  --gxg-card-actionable-hover_filter-brightness: var(
    --ds-filter-brightness--hover
  );
  --gxg-card-box-shadow: none;
}
:root.mercury.dark {
  --gxg-card-box-shadow: var(--mer-elevation--01);
}

:root {
  --gxg-card-actionable-brightness--hover: 1.02;
}
:root.dark {
  --gxg-card-actionable-brightness--hover: 1.1;
}

/*--- Gemini ---*/
:root {
  /*--- Combo Box ---*/
  --gxg-combo-box-items-container_background-color: var(--color-background);
  --gxg-combo-box-items-container_color: var(--ds-base-font-color);
  --gxg-combo-box-items-container_font-size: var(--ds-base-font-size);
  --gxg-combo-box-items-container_padding: 0;
  --gxg-combo-box-items-buttons-wrapper--iie: var(--spacing-comp-01);
  --gxg-combo-box-no-occurrences_font-size: var(--font-size-sm);
  --gxg-combo-box-no-occurrences_color: var(--ds-form-control-color);
  --gxg-combo-box-no-occurrences_padding: var(--spacing-comp-01);
  --gxg-combo-box-no-occurrences_background-color: transparent;
  --gxg-combo-box-no-occurrences_command-color: var(--gray-04);
  /*--- Combo Box Item ---*/
  --gxg-combo-box-item_padding: var(--spacing-comp-00) var(--spacing-comp-01);
  --gxg-combo-box-item_border-radius: 0;
  --gxg-combo-box-item_container-gap: var(--spacing-comp-01);
  --gxg-combo-box-item_container-color--hover: var(--ds-base-font-color);
  --gxg-combo-box-item_container-no-icon-pis: var(--spacing-comp-02);
  --gxg-combo-box-item_icon-size: var(--ds-icon-size--small);
  --gxg-combo-box-item_font-weight: var();
  --gxg-combo-box-item--selected_icon-color: var(--ds-item-color--selected);
  --gxg-combo-box-item--selected_color: var(--ds-item-color--selected);
  --gxg-combo-box-item--height: var(--ds-list-item-height--spaced);
}

/*--- Mercury ---*/
:root.mercury {
  /*--- Combo Box ---*/
  --gxg-combo-box-items-container_background-color: var(
    var(--mer-color__neutral-gray--1000) ;
  );
  --gxg-combo-box-items-container_color: var(--ds-base-font-color);
  --gxg-combo-box-items-container_font-size: var(--mer-font__size--2xs);
  --gxg-combo-box-items-container_padding: var(--mer-spacing--xs);
  --gxg-combo-box-items-buttons-wrapper--iie: var(--mer-spacing--2xs);
  --gxg-combo-box-no-occurrences_font-size: var(--mer-font__size--2xs);
  --gxg-combo-box-no-occurrences_color: var(--ds-form-control-color);
  --gxg-combo-box-no-occurrences_padding: var(--mer-spacing--xs);
  --gxg-combo-box-no-occurrences_background-color: transparent;
  --gxg-combo-box-no-occurrences_command-color: var(--mer-text__on-surface);
  /*--- Combo Box Item ---*/
  --gxg-combo-box-item_padding: var(--mer-spacing--sm) var(--mer-spacing--sm)
    var(--mer-spacing--sm) var(--mer-spacing--xs);
  --gxg-combo-box-item_border-radius: var(--mer-border__radius--sm);
  --gxg-combo-box-item_container-gap: var(--mer-spacing--xs);
  --gxg-combo-box-item_container-color--hover: var(
    --mer-color__neutral-gray--100
  );
  --gxg-combo-box-item_container-no-icon-pis: var(--mer-spacing--sm);
  --gxg-combo-box-item_icon-size: var(--ds-icon-size--small);
  --gxg-combo-box-item_font-weight: var(--mer-font__weight--semi-bold);
  --gxg-combo-box-item--selected_icon-color: var(--mer-icon__highlighted);
  --gxg-combo-box-item--selected_color: var(--ds-item-color--selected);
  --gxg-combo-box-item--height: 26px;
}

:root {
  --gxg-checkbox-spacing: var(--spacing-comp-01);
  --gxg-checkbox-size: var(--spacing-comp-04);
  --gxg-checkbox-border-color: var(--gray-04);
  --gxg-checkbox-border-color--hover: var(--gxg-checkbox-border-color);
  --gxg-checkbox-border-width: var(--border-width-sm);
  --gxg-checkbox-border-radius: var(--border-radius-md);
  --gxg-checkbox-background-color: var(--color-background);
  --gxg-checkbox-indicator-color: var(--color-primary-enabled);
  /*error*/
  --gxg-checkbox-border-color-error: var(--color-error-dark);
  --gxg-checkbox-background-color-error: var(--color-error-light);
  --gxg-checkbox-indicator-color-error: var(--color-error-dark);
  /*disabled*/
  --gxg-checkbox-disabled-background-color: var(--ds-background-color-disabled);
}
:root.mercury {
  --gxg-checkbox-spacing: var(--mer-spacing--2xs);
  --gxg-checkbox-size: var(--mer-spacing--md);
  --gxg-checkbox-border-color: var(--mer-border-color__dim);
  --gxg-checkbox-border-color--hover: var(--mer-color__neutral-gray--00);
  --gxg-checkbox-border-width: var(--mer-border__width--sm);
  --gxg-checkbox-border-radius: var(--mer-border__radius--xs);
  --gxg-checkbox-background-color: transparent;
  --gxg-checkbox-indicator-color: var(--mer-border-color__neutral--active);
  /*error*/
  --gxg-checkbox-border-color-error: var(--mer-border-color__error);
  --gxg-checkbox-background-color-error: transparent;
  /*to do*/
  --gxg-checkbox-indicator-color-error: var(--mer-border-color__error);
  /*disabled*/
  --gxg-checkbox-disabled-background-color: transparent;
}

:root {
  --gxg-label-font-size--regular: var(--font-size-lg);
  --gxg-label-font-size--large: var(--font-size-lg);
  --gxg-label-font-weight: var(--font-weight-regular);
  --gxg-label-color: var(--color-on-background);
  --gxg-label-color-disabled: var(--ds-color-disabled);
  --gxg-label-separation-horizontal: var(--spacing-lay-s);
  --gxg-label-separation-vertical: var(--spacing-lay-xs);
}
:root.mercury {
  --gxg-label-font-size--regular: var(--mer-font__size--2xs);
  --gxg-label-font-size--large: var(--mer-font__size--xs);
  --gxg-label-font-weight: var(--mer-font__weight--semi-bold);
  --gxg-label-color: var(--mer-text__on-surface);
  --gxg-label-color-disabled: var(--ds-color-disabled);
  --gxg-label-separation-horizontal: var(--mer-spacing--xs);
  --gxg-label-separation-vertical: var(--mer-spacing--xs);
}

:root {
  --gxg-radio-group-margin: var(--spacing-comp-02);
  --gxg-radio-size: var(--spacing-comp-04);
  --gxg-radio-border-width: var(--border-width-sm);
  --gxg-radio-border-color: var(--gray-04);
  --gxg-radio-border-color--hover: var(--gxg-radio-border-color);
  --gxg-radio-background-color: var(--color-background);
  --gxg-radio-indicator-size: var(--spacing-comp-02);
  --gxg-radio-indicator-color: var(--color-primary-enabled);
  /*disabled*/
  --gxg-radio-background-color-disabled: var(--ds-background-color-disabled);
}
:root.mercury {
  --gxg-radio-group-margin: var(--mer-spacing--xs);
  --gxg-radio-size: var(--mer-spacing--md);
  --gxg-radio-border-width: var(--mer-border__width--sm);
  --gxg-radio-border-color: var(--mer-border-color__dim);
  --gxg-radio-border-color--hover: var(--mer-color__neutral-gray--00);
  --gxg-radio-background-color: transparent;
  --gxg-radio-indicator-size: var(--mer-spacing--xs);
  --gxg-radio-indicator-color: var(--mer-color__neutral-gray--00);
  /*disabled*/
  --gxg-radio-background-color-disabled: transparent;
}

:root {
  --gxg-form-text-minimal-icon-not-start__cursor-inside-pis: var(
    --spacing-comp-01
  );
  --gxg-form-text-minimal-icon-not-start__focus-pis: var(--spacing-comp-01);
  --gxg-form-text-minimal-over-dark-background: var(--color-on-primary);
  --gxg-form-text-height: var(--ds-form-control-height);
  --gxg-form-text-icon-size: var(--ds-icon-size-box--small);
}

:root.mercury {
  --gxg-form-text-minimal-icon-not-start__cursor-inside-pis: var(
    --mer-spacing--2xs
  );
  --gxg-form-text-minimal-icon-not-start__focus-pis: var(--mer-spacing--2xs);
  --gxg-form-text-minimal-over-dark-background: var(--mer-text__on-primary);
  --gxg-form-text-height: var(--ds-form-control-height);
  --gxg-form-text-icon-size: var(--ds-icon-size-box--small);
}

/*Gemini*/
:root {
  --gxg-textarea-padding: var(--spacing-comp-01) var(--spacing-comp-02);
}

/*Mercury*/
:root.mercury {
  --gxg-textarea-padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);
}

:root {
  --gxg-form-message-icon__margin-inline-end: var(--spacing-comp-01);
}

:root.mercury {
  --gxg-form-message-icon__margin-inline-end: var(--mer-border__radius--md);
}

/*Gemini*/
:root {
  /*--- General ---*/
  --gxg-grid-base__border-color: var(--gray-02);
  --gxg-grid-base__border-width: var(--border-width-sm);
  --gxg-grid-base__border-radius: var(--border-radius-sm);
  --gxg-grid-base__font-size: var(--font-size-lg);
  --gxg-grid-base__font-color: var(--gray-06);
  --gxg-grid__indent: var(--spacing-comp-02);
  --gxg-grid-row-actions__padding-top: var(--spacing-comp-00);
  --gxg-grid-row-actions__right: var(--spacing-comp-02);
  --gxg-grid-part-caret__size: var(--spacing-comp-04);
  --gxg-grid-part-caret__margin-inline-end: var(--spacing-comp-01);
  /*settings*/
  --gxg-grid-settings-mask__color: var(--color-on-secondary);
  --gxg-grid-settings-window__background-color: var(--color-background);
  --gxg-grid-settings-window__padding: var(--spacing-comp-03);
  --gxg-grid-settings-window__border-radius: var(--border-width-lg);
  --gxg-grid-settings-window__box-shadow: var(--box-shadow-04);
  --gxg-grid-settings-window__margin: var(--spacing-comp-05);
  --gxg-grid-settings-header__gap: var(--spacing-comp-04);
  --gxg-grid-settings-padding-bottom: var(--spacing-comp-02);
  --gxg-grid-settings-margin-bottom: var(--spacing-comp-03);
  --gxg-grid-settings-font-weight: var(--font-weight-bold);
  --gxg-grid-settings-close__size: var(--spacing-comp-05);
  --gxg-grid-settings-close__background-color: var(--color-secondary-enabled);
  --gxg-grid-settings-close__background-color--hover: var(
    --color-secondary-hover
  );
  --gxg-grid-settings-columns__gap: var(--spacing-comp-03);
  --gxg-grid-settings-columns-label__gap: var(--spacing-comp-03);
  --gxg-grid-settings-columns-label__height: var(--spacing-comp-04);
  /*--- Header & Footer ---*/
  --gxg-grid-header__background-color: var(--color-background);
  /*--- Button/Icon ---*/
  --gxg-grid-button__icon-color: var(--color-on-secondary);
  --gxg-grid-button__size: var(--spacing-comp-05);
  --gxg-grid-button__background-color: var(--color-secondary-enabled);
  --gxg-grid-button__background-color--hover: var(--color-secondary-hover);
  /*--- Column ---*/
  --gxg-grid-column__background-color: var(--color-background);
  --gxg-grid-column__font-weight: var(--font-weight-bold);
  --gxg-grid-column__padding: var(--spacing-comp-02) !important;
  --gxg-grid-column-bar__gap: var(--spacing-comp-02);
  --gxg-grid-column-bar-sort__width: var(--spacing-comp-03);
  --gxg-grid-column-bar-sort__height: var(--spacing-comp-03);
  --gxg-grid-column-bar-sort__margin-start: var(--spacing-comp-02);
  --gxg-grid-column-bar-sort__margin-end: var(--spacing-comp-01);
  --gxg-grid-column-bar-resize-split__background-color: var(--gray-02);
  --gxg-grid-column-bar-settings-button__width: var(--spacing-comp-05);
  --gxg-grid-column-bar-settings-button__height: var(--spacing-comp-05);
  --gxg-grid-column-bar-settings-button__background-color--hover: var(
    --gray-02
  );
  --gxg-grid-column-par-bar-resize-split__width: var(--border-width-md);
  --gxg-grid-column-par-bar-resize-split__border-radius: 0;
  /*--- Row ---*/
  --gxg-grid-row__background-color: var(--color-background);
  --gxg-grid-row__color: var(--gray-04);
  --gxg-grid-row__border-width: var(--border-width-md);
  --gxg-grid-row__box-shadow--dragging: var(--box-shadow-03);
  --gxg-grid-row-cell__color--selected: var(--color-on-secondary);
  /*--- Rowset Legend ---*/
  --gxg-grid-rowset-legend__background-color: var(--gray-01);
  --gxg-grid-rowset-legend__padding-inline-start: var(--spacing-comp-02);
  --gxg-grid-rowset-legend__padding-inline-end: var(--spacing-comp-02);
  --gxg-grid-rowset-legend__padding-block-start: var(--spacing-comp-01);
  --gxg-grid-rowset-legend__padding-block-end: var(--spacing-comp-01);
  --gxg-grid-rowset-legend__gap: var(--spacing-comp-01);
  /*--- Cell ---*/
  --gxg-grid-cell__border-top-width: var(--border-width-sm);
  --gxg-grid-cell__padding-inline-start: var(--spacing-comp-02);
  --gxg-grid-cell__padding-inline-end: var(--spacing-comp-02);
  --gxg-grid-cell__padding-block-start: var(--spacing-comp-01);
  --gxg-grid-cell__padding-block-end: var(--spacing-comp-01);
  --gxg-grid-cell-drag-icon__size: var(--spacing-comp-04);
  --gxg-grid-cell__font-size: var(--font-size-lg);
}

/*Mercury*/
:root.mercury {
  /*--- General ---*/
  --gxg-grid-base__border-color: var(--mer-border-color__dim);
  --gxg-grid-base__border-width: var(--mer-border__width--sm);
  --gxg-grid-base__border-radius: var(--mer-border__radius--md);
  --gxg-grid-base__font-size: var(--mer-font__size--2xs);
  --gxg-grid-base__font-color: var(--mer-text__on-surface);
  --gxg-grid__indent: var(--mer-spacing--xs);
  --gxg-grid-row-actions__padding-top: var(--mer-spacing--3xs);
  --gxg-grid-row-actions__right: var(--mer-spacing--xs);
  --gxg-grid-part-caret__size: var(--mer-spacing--md);
  --gxg-grid-part-caret__margin-inline-end: var(--mer-spacing--2xs);
  /*settings*/
  --gxg-grid-settings-mask__color: var(--mer-text__on-surface);
  --gxg-grid-settings-window__background-color: var(--mer-color__surface);
  --gxg-grid-settings-window__padding: var(--mer-spacing--sm);
  --gxg-grid-settings-window__border-radius: var(--mer-border__width--lg);
  --gxg-grid-settings-window__box-shadow: var(--box-shadow-04);
  --gxg-grid-settings-window__margin: var(--mer-spacing--lg);
  --gxg-grid-settings-header__gap: var(--mer-spacing--md);
  --gxg-grid-settings-padding-bottom: var(--mer-spacing--xs);
  --gxg-grid-settings-margin-bottom: var(--mer-spacing--sm);
  --gxg-grid-settings-font-weight: var(--mer-font__weight--bold);
  --gxg-grid-settings-close__size: var(--mer-spacing--lg);
  --gxg-grid-settings-close__background-color: var(
    --mer-accent__primary--active
  );
  --gxg-grid-settings-close__background-color--hover: var(
    --mer-accent__primary--hover
  );
  --gxg-grid-settings-columns__gap: var(--mer-spacing--sm);
  --gxg-grid-settings-columns-label__gap: var(--mer-spacing--sm);
  --gxg-grid-settings-columns-label__height: var(--mer-spacing--md);
  /*--- Header & Footer ---*/
  --gxg-grid-header__background-color: var(--mer-color__surface);
  /*--- Button/Icon ---*/
  --gxg-grid-button__icon-color: var();
  --gxg-grid-button__size: var();
  --gxg-grid-button__background-color: var(--mer-accent__primary--active);
  --gxg-grid-button__background-color--hover: var(--mer-accent__primary--hover);
  /*--- Column ---*/
  --gxg-grid-column__background-color: var(--mer-color__elevation--01);
  --gxg-grid-column__font-weight: var(--mer-font__weight--bold);
  --gxg-grid-column__padding: var(--mer-spacing--xs) !important;
  --gxg-grid-column-bar__gap: var(--mer-spacing--xs);
  --gxg-grid-column-bar-sort__width: var(--mer-spacing--sm);
  --gxg-grid-column-bar-sort__height: var(--mer-spacing--sm);
  --gxg-grid-column-bar-sort__margin-start: var(--mer-spacing--xs);
  --gxg-grid-column-bar-sort__margin-end: var(--mer-spacing--xs);
  --gxg-grid-column-bar-resize-split__background-color: var(
    --mer-color__neutral-gray--300
  );
  --gxg-grid-column-bar-settings-button__width: var(--mer-spacing--lg);
  --gxg-grid-column-bar-settings-button__height: var(--mer-spacing--lg);
  --gxg-grid-column-bar-settings-button__background-color--hover: var(
    --mer-border-color__neutral
  );
  --gxg-grid-column-par-bar-resize-split__width: var(--mer-border__width--md);
  --gxg-grid-column-par-bar-resize-split__border-radius: var(
    --mer-border__radius--xs
  );
  /*--- Row ---*/
  --gxg-grid-row__background-color: var(--mer-color__surface);
  --gxg-grid-row__color: var(--mer-text__on-surface);
  --gxg-grid-row__border-width: var(--mer-border__width--md);
  --gxg-grid-row__box-shadow--dragging: var(--box-shadow-03);
  --gxg-grid-row-cell__color--selected: var(--mer-color__neutral-gray--100);
  /*--- Rowset Legend ---*/
  --gxg-grid-rowset-legend__background-color: var(
    --mer-color__neutral-gray--900
  );
  --gxg-grid-rowset-legend__padding-inline-start: var(--mer-spacing--xs);
  --gxg-grid-rowset-legend__padding-inline-end: var(--mer-spacing--xs);
  --gxg-grid-rowset-legend__padding-block-start: var(--mer-spacing--2xs);
  --gxg-grid-rowset-legend__padding-block-end: var(--mer-spacing--2xs);
  --gxg-grid-rowset-legend__gap: var(--mer-spacing--md);
  /*--- Cell ---*/
  --gxg-grid-cell__border-top-width: var(--mer-border__width--sm);
  --gxg-grid-cell__padding-inline-start: var(--mer-spacing--xs);
  --gxg-grid-cell__padding-inline-end: var(--mer-spacing--xs);
  --gxg-grid-cell__padding-block-start: var(--mer-spacing--2xs);
  --gxg-grid-cell__padding-block-end: var(--mer-spacing--2xs);
  --gxg-grid-cell-drag-icon__size: var(--mer-spacing--md);
  --gxg-grid-cell__font-size: var(--mer-font__size--2xs);
}

/*Gemini*/
:root {
  /*--- General ---*/
  --gxg-list-box-general__font-size: var(--ds-base-font-size);
  --gxg-list-box-general__border-radius: var(--ds-form-control-border-radius);
  /*--- Main ---*/
  --gxg-list-box-main__padding: 0;
  /*--- Container ---*/
  --gxg-list-box-container__border: var(--ds-border-common-styles);
  /*--- Header ---*/
  --gxg-list-box-header__height: 26px;
  --gxg-list-box-header__background-color: var(--gray-01);
  --gxg-list-box-header__padding: var(--spacing-comp-01) var(--spacing-comp-02);
  --gxg-list-box-header__font-weight: var(--font-weight-semi-bold);
  --gxg-list-box-header__color: var(--ds-base-font-color);
  /*--- Icon ---*/
  --gxg-list-box-icon__margin-inline-end: var(--spacing-comp-01);
  /*--- Checkbox ---*/
  --gxg-list-box-checkbox__margin-inline-end: var(--spacing-comp-01);
  /*--- List ---*/
  --gxg-list-box-suggestions-container__background-color: var(--gray-01);
  --gxg-list-box-suggestions-container__color: var(--gray-06);
  --gxg-list-box-suggestions-container__font-size: var(--font-size-sm);
  --gxg-list-box-suggestions-container__padding: var(--spacing-comp-01)
    var(--spacing-comp-02);
  --gxg-list-box-suggestions-container__gap: var(--spacing-comp-01);
  /*--- Item ---*/
  --gxg-list-box-item__height: var(--ds-list-item-height--spaced);
  --gxg-list-box-item__border: 1px solid var(--gray-00);
  --gxg-list-box-item__background-color--hover: var(
    --ds-item-background-color--hover
  );
  --gxg-tree-view-item__outline-offset--active: -2px;
  /*--- Item > Container ---*/
  --gxg-list-box-item-container__padding: var(--spacing-comp-00)
    var(--spacing-comp-02);
  --gxg-list-box-item-container-icon-no-checkbox__padding-inline-start: var(
    --spacing-comp-01
  );
  /*--- Item > Icon ---*/
  --gxg-list-box-item-icon__margin-inline-end: var(--spacing-comp-02);
  --gxg-list-box-item-checkbox__margin-inline-end: var(--spacing-comp-01);
  --gxg-list-box-item-icon__size-box--regular: var(--ds-icon-size-box--regular);
  --gxg-list-box-item-icon__size--regular: var(--ds-icon-size--regular);
}

/*Mercury*/
:root.mercury {
  /*--- General ---*/
  --gxg-list-box-general__font-size: var(--mer-font__size--2xs);
  --gxg-list-box-general__border-radius: 0;
  /*--- Main ---*/
  --gxg-list-box-main__padding: var(--mer-spacing--xs);
  /*--- Container ---*/
  --gxg-list-box-container__border: 1px solid
    var(--mer-border-color__on-elevation--01);
  /*--- Header ---*/
  --gxg-list-box-header__height: 26px;
  --gxg-list-box-header__background-color: var(
    --mer-border-color__on-elevation--01
  );
  --gxg-list-box-header__padding: var(--mer-spacing--xs)
    calc(var(--gxg-list-box-main__padding) + var(--mer-spacing--sm));
  --gxg-list-box-header__font-weight: var(--mer-font__weight--semi-bold);
  --gxg-list-box-header__color: var(--mer-text__highlighted);
  /*--- Icon ---*/
  --gxg-list-box-icon__margin-inline-end: var(--mer-spacing--2xs);
  /*--- Checkbox ---*/
  --gxg-list-box-checkbox__margin-inline-end: var(--mer-spacing--2xs);
  /*--- List ---*/
  --gxg-list-box-suggestions-container__background-color: var();
  --gxg-list-box-suggestions-container__color: var(
    --mer-color__neutral-gray--800
  );
  --gxg-list-box-suggestions-container__font-size: var(--mer-font__size--2xs);
  --gxg-list-box-suggestions-container__padding: var() var(--spacing-comp-02);
  --gxg-list-box-suggestions-container__gap: var();
  /*--- Item ---*/
  --gxg-list-box-item__height: 26px;
  --gxg-list-box-item__border: 1px solid
    var(--mer-border-color__on-elevation--01);
  --gxg-list-box-item__background-color--hover: var(
    --mer-color__tinted-blue--8
  );
  --gxg-tree-view-item__outline-offset--active: -1px;
  /*--- Item > Container ---*/
  --gxg-list-box-item-container__padding: var(--mer-spacing--3xs)
    var(--mer-spacing--sm);
  --gxg-list-box-item-container-icon-no-checkbox__padding-inline-start: var(
    --mer-spacing--2xs
  );
  /*--- Item > Icon ---*/
  --gxg-list-box-item-icon__margin-inline-end: var(--mer-spacing--2xs);
  --gxg-list-box-item-checkbox__margin-inline-end: var(--mer-spacing--2xs);
  --gxg-list-box-item-icon__size-box--regular: var(--ds-icon-size-box--small);
  --gxg-list-box-item-icon__size--regular: var(--ds-icon-size--small);
}

/*Gemini*/
:root {
  /*--- Wrapper ---*/
  --gxg-ide-loader-wrapper__background-color--from: rgba(
    var(--color-background--rgb),
    0.45
  );
  --gxg-ide-loader-wrapper__background-color--to: rgba(
    var(--color-background--rgb),
    0.25
  );
  --gxg-ide-loader-wrapper__backdrop-filter: blur(15px);
  --gxg-ide-loader-wrapper__padding: var(--spacing-comp-05);
  --gxg-ide-loader-wrapper__color: var(--color-on-secondary);
  /*--- Spinner ---*/
  --gxg-ide-loader-spinner__border: 2px var(--gray-01) solid;
  --gxg-ide-loader-spinner__border-top: 2px var(--color-primary-enabled) solid;
  --gxg-ide-loader-spinner__width: 30px;
  --gxg-ide-loader-spinner__height: 30px;
  /*--- Content Wrapper ---*/
  --gxg-ide-loader-content-wrapper__mbs: var(--spacing-comp-04);
  --gxg-ide-loader-content-wrapper__gap: var(--spacing-comp-02);
  --gxg-ide-loader-content-wrapper__max-width: 400px;
}

/*Mercury*/
:root.mercury {
  /*--- Wrapper ---*/
  --gxg-ide-loader-wrapper__background-color--from: rgba(255, 255, 255, 0.45);
  --gxg-ide-loader-wrapper__background-color--to: rgba(204, 204, 204, 0.25);
  --gxg-ide-loader-wrapper__backdrop-filter: blur(15px);
  --gxg-ide-loader-wrapper__padding: var(--mer-spacing--xl);
  --gxg-ide-loader-wrapper__color: var(--mer-text__on-surface);
  /*--- Spinner ---*/
  --gxg-ide-loader-spinner__border: var(--mer-border__width--lg)
    var(--mer-border-color__dim) solid;
  --gxg-ide-loader-spinner__border-top: var(--mer-border__width--lg)
    var(--mer-border-color__primary) solid;
  --gxg-ide-loader-spinner__width: var(--mer-spacing--xl);
  --gxg-ide-loader-spinner__height: var(--mer-spacing--xl);
  /*--- Content Wrapper ---*/
  --gxg-ide-loader-content-wrapper__mbs: var(--mer-spacing--md);
  --gxg-ide-loader-content-wrapper__gap: var(--mer-spacing--xs);
  --gxg-ide-loader-content-wrapper__max-width: 400px;
}

:root.mercury.dark {
  /*--- Wrapper ---*/
  --gxg-ide-loader-wrapper__background-color--from: rgba(10, 10, 10, 0.45);
  --gxg-ide-loader-wrapper__background-color--to: rgba(20, 20, 20, 0.25);
}

:root {
  /*single pill (gxg-pill)*/
  --gxg-pill__font-size: var(--ds-base-font-size);
  --gxg-pill__font-weight: var(--ds-base-font-weight);
  --gxg-pill__border-radius: 11px;
  --gxg-pill__height: var(--spacing-comp-04);
  --gxg-pill__padding-inline-start: var(--spacing-comp-02);
  --gxg-pill__padding-inline-end: var(--spacing-comp-03);
  --gxg-pill__color--disabled: var(--gray-03);
  --gxg-pill-static__font-style: italic;
  --gxg-pill-static__color: var(--ds-base-font-color);
  --gxg-pill-static__background-color: var(--gray-01);
  --gxg-pill-static__border: 1px solid var(--gray-01);
  --gxg-pill-with-action__font-style: normal;
  --gxg-pill-with-action__color: var(--ds-base-font-color);
  --gxg-pill-with-action__background-color: var(--ds-base-background-color);
  --gxg-pill-with-action__border: 1px solid var(--gray-02);
  --gxg-pill-with-action__border--hover: 1px solid var(--gray-07);
  --gxg-pill-with-action__border--disabled: 1px solid var(--gray-03);
  /*pills group (gxg-pills)*/
  --gxg-pills__gap: var(--spacing-comp-02);
}
:root.mercury {
  /*single pill (gxg-pill)*/
  --gxg-pill__font-size: var(--mer-font__size--2xs);
  --gxg-pill__font-weight: var(--mer-font__weight--regular);
  --gxg-pill__border-radius: 30px;
  --gxg-pill__height: 30px;
  --gxg-pill__padding-inline-start: var(--mer-spacing--sm);
  --gxg-pill__padding-inline-end: var(--mer-spacing--sm);
  --gxg-pill__color--disabled: var(--mer-text__on-disabled);
  --gxg-pill-static__font-style: italic;
  --gxg-pill-static__color: var(--mer-color__neutral-gray--300);
  --gxg-pill-static__background-color: var(--mer-color__elevation--01);
  --gxg-pill-static__border: 1px solid var(--mer-color__elevation--01);
  --gxg-pill-with-action__font-style: italic;
  --gxg-pill-with-action__color: var(--mer-color__neutral-gray--300);
  --gxg-pill-with-action__background-color: var(--mer-color__elevation--01);
  --gxg-pill-with-action__border: 1px solid var(--mer-color__elevation--01);
  --gxg-pill-with-action__border--hover: 1px solid
    var(--mer-color__elevation--02);
  --gxg-pill-with-action__border--disabled: 1px solid var(--gray-03);
  /*pills group (gxg-pills)*/
  --gxg-pills__gap: var(--mer-spacing--xs);
}

/*Gemini*/
:root {
  /*SUGGEST*/
  /*--- general ---*/
  --gxg-suggest-general__font-size: var(--ds-base-font-family-primary);
  --gxg-suggest-general__border: none;
  /*--- input ---*/
  --gxg-suggest-input__font-size: var(--ds-form-control-font-size);
  --gxg-suggest-input__height: calc(var(--spacing-comp-05) * 1.15);
  --gxg-suggest-input__border: var(--ds-border-common-styles);
  --gxg-suggest-input__padding: var(--spacing-comp-01) var(--spacing-comp-02);
  --gxg-suggest-input__background-color: var(--color-background);
  /*--- header ---*/
  --gxg-suggest-header__padding-block-end: var(--spacing-comp-02);
  /*--- close-button ---*/
  --gxg-suggest-close-button__line-height--after: var(--spacing-comp-05);
  /*--- drop-down ---*/
  --gxg-suggest-drop-down__background-color: var(--color-background);
  --gxg-suggest-drop-down__margin-top: var(--spacing-comp-01);
  --gxg-suggest-drop-down__padding: var(--spacing-comp-02);
  --gxg-suggest-drop-down__box-shadow: var(--box-shadow-02);
  /*SUGGEST LIST*/
  --gxg-suggest-list__padding: var(--spacing-comp-01);
  --gxg-suggest-list-part-list__padding: 0;
  --gxg-suggest-list__border: var(--ds-border-common-styles);
  --gxg-suggest-list__border-radius: 0;
  --gxg-suggest-list-title__font-weight: var(--font-weight-semi-bold);
  --gxg-suggest-list-title__margin: var(--spacing-comp-01) 0;
  --gxg-suggest-list-title__padding: var(--spacing-comp-01)
    var(--spacing-comp-02);
  --gxg-suggest-list-item-next-sibling__margin-block-start: var(
    --spacing-comp-02
  );
  --gxg-suggest-list-after-list-item__margin-block-start: var(
    --spacing-comp-02
  );
  --gxg-suggest-list-title__background-color: transparent;
  --gxg-suggest-list-title__color: var(--ds-base-font-color);
  /*SUGGEST LIST ITEM*/
  --gxg-suggest-list-item-button__padding: var(--spacing-comp-01)
    var(--spacing-comp-02);
  --gxg-suggest-list-item-button__padding--with-icon: var(--spacing-comp-01)
    var(--spacing-comp-02);
  --gxg-suggest-list-item-button__gap: var(--spacing-comp-01);
  --gxg-suggest-list-item-button__color--hover: inherit;
  --gxg-suggest-list-item-button__background-color: var(
    --ds-item-background-color--hover
  );
  --gxg-suggest-list-item-icon__size: var(--spacing-comp-04);
  --gxg-suggest-list-item-icon__margin-right: var(--spacing-comp-00);
  --gxg-suggest-list-item-icon__background-color--hover: var(
    --ds-item-background-color--hover
  );
  --gxg-suggest-list-item__line-height: var(
    --ds-base-font-line-height--comfortable
  );
  --gxg-suggest-list-item__height: var(--gxg-suggest-input__height);
  --gxg-suggest-list-item__border-radius: 0;
}

/*Mercury*/
:root.mercury {
  /*SUGGEST*/
  /*--- general ---*/
  --gxg-suggest-general__font-size: var(--mer-font__size--2xs);
  --gxg-suggest-general__border: var(--gxg-suggest-list__border);
  --gxg-suggest-general__border: 1px solid
    var(--mer-border-color__on-elevation--01);
  /*--- input ---*/
  --gxg-suggest-input__font-size: var(--ds-form-control-font-size);
  --gxg-suggest-input__height: var(--ds-form-control-height);
  --gxg-suggest-input__padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);
  --gxg-suggest-input__background-color: var(--ds-base-background-color);
  /*--- header ---*/
  --gxg-suggest-header__padding-block-end: var(
    --gxg-suggest-header__padding-block-end
  );
  /*--- close-button ---*/
  --gxg-suggest-close-button__line-height--after: var(--mer-spacing--lg);
  /*--- drop-down ---*/
  --gxg-suggest-drop-down__background-color: var(--mer-color__surface);
  --gxg-suggest-drop-down__margin-top: var(--mer-spacing--2xs);
  --gxg-suggest-drop-down__padding: var(--mer-spacing--xs);
  --gxg-suggest-drop-down__box-shadow: var(--box-shadow-02);
  --gxg-suggest-drop-down__border: var(--box-shadow-02);
  /*SUGGEST LIST*/
  --gxg-suggest-list__padding: 0;
  --gxg-suggest-list-part-list__padding: var(--mer-border__radius--md);
  --gxg-suggest-list__border: 1px solid
    var(--mer-border-color__on-elevation--01);
  --gxg-suggest-list__border-radius: 0;
  --gxg-suggest-list-title__font-weight: var(--mer-font__weight--semi-bold);
  --gxg-suggest-list-title__margin: 0;
  --gxg-suggest-list-title__padding: var(--mer-spacing--xs)
    calc(var(--mer-spacing--xs) + var(--mer-spacing--sm));
  --gxg-suggest-list-title__background-color: var(--mer-color__elevation--01);
  --gxg-suggest-list-title__color: var(--mer-text__highlighted);
  --gxg-suggest-list-item-next-sibling__margin-block-start: var(
    --mer-spacing--xs
  );
  --gxg-suggest-list-after-list-item__margin-block-start: var(
    --mer-spacing--xs
  );
  /*SUGGEST LIST ITEM*/
  --gxg-suggest-list-item-button__padding: var(--mer-spacing--2xs)
    var(--mer-spacing--sm);
  --gxg-suggest-list-item-button__padding--with-icon: var(--spacing-comp-01)
    var(--spacing-comp-01);
  --gxg-suggest-list-item-button__gap: var(--mer-spacing--2xs);
  --gxg-suggest-list-item-button__color--hover: var(
    --mer-color__neutral-gray--100
  );
  --gxg-suggest-list-item-button__background-color: var(
    --mer-color__tinted-blue--8
  );
  --gxg-suggest-list-item-icon__size: var(--mer-spacing--md);
  --gxg-suggest-list-item-icon__margin-right: var(--mer-spacing--3xs);
  --gxg-suggest-list-item-icon__background-color--hover: var(
    --ds-item-background-color--hover
  );
  --gxg-suggest-list-item__line-height: var(
    --ds-base-font-line-height--comfortable
  );
  --gxg-suggest-list-item__border-radius: 0;
}

:root {
  /*--- Tabs ---*/
  --gxg-tabs-border-width: var(--border-width-sm);
  --gxg-tabs-border-color: var(--ds-border-color-dark-only);
  --gxg-tabs-border-radius: var(--border-width-md);
  /*--- Tab Bar ---*/
  --gxg-tab-bar-background-color: var(--color-background);
  --gxg-tab-button-color--selected: var(--color-on-background);
  --gxg-tab-bar-border-width: var(--border-width-sm);
  --gxg-tab-bar-border-color: var(--gxg-border-color--regular);
  /*--- Tab Button ---*/
  --gxg-tab-button-color: var(--color-on-background);
  --gxg-tab-button-icon-color: var(--color-on-background);
  --gxg-tab-button-font-size: var(--font-size-lg);
  --gxg-tab-button-font-text-transform: uppercase;
  --gxg-tab-button-font-weight: var(--font-weight-semibold);
  --gxg-tab-button-font-weight-selected: var(--font-weight-semibold);
  --gxg-tab-button-horizontal-padding: var(--spacing-comp-04);
  --gxg-tab-button-height: var(--spacing-comp-06);
  /*line*/
  --gxg-tab-button-line-height: var(--spacing-comp-01);
  --gxg-tab-button-line-background-color: var(--color-primary-enabled);
  --gxg-tab-button-line-background-color-hover: var(--color-primary-hover);
  --gxg-tab-button-line-background-color-active: var(--color-primary-active);
  /*--- Tab ---*/
  --gxg-tab-background-color: var(--color-background);
  --gxg-tab-color: var(--color-on-background);
  --gxg-tab-font-size: var(--ds-base-font-size);
  --gxg-tab-horizontal-padding: var(--spacing-comp-03);
  --gxg-tab-vertical-padding: var(--spacing-comp-03);
  /*font-family, font-size, color. font-weight, and line-height should be defined by using the 'gxg-text' mixin*/
  /*--- Menu Tab Button ---*/
  --gxg-tab-menu-button-padding: var(--spacing-comp-02);
  --gxg-tab-menu-button-min-height: var(--spacing-comp-06);
  --gxg-tab-menu-button-font-size: var(--font-size-md);
  /*--- Reduced ---*/
  --gxg-tab-button-font-size--reduced: var(--font-size-sm);
  --gxg-tab-button-height--reduced: var(--spacing-comp-05);
  --gxg-tab-button-vertical-padding--reduced: var(--spacing-comp-02);
  --gxg-tab-button-horizontal-padding--reduced: var(--spacing-comp-02);
  --gxg-tab-font-size--reduced: var(--gxg-tab-button-font-size--reduced);
  --gxg-tab-horizontal-padding--reduced: var(--spacing-comp-02);
  --gxg-tab-vertical-padding--reduced: var(--spacing-comp-02);
  /*--- Stacked ---*/
  --gxg-tab-button-horizontal-padding--stacked: var(--spacing-comp-02);
}
:root.mercury {
  /*--- Tabs ---*/
  --gxg-tabs-border-width: var(--mer-border__width--sm);
  --gxg-tabs-border-color: var(--ds-border-color--regular);
  --gxg-tabs-border-radius: var(--mer-border__width--lg);
  /*--- Tab Bar ---*/
  --gxg-tab-bar-background-color: var(--mer-color__surface);
  --gxg-tab-bar-border-width: var(--mer-border__width--sm);
  --gxg-tab-bar-border-color: transparent;
  /*--- Tab Button ---*/
  --gxg-tab-button-color: var(--mer-text__on-surface);
  --gxg-tab-button-color--selected: var(--mer-text__on-elevation);
  --gxg-tab-button-icon-color: var(--mer-icon__on-elevation);
  --gxg-tab-button-font-size: var(--mer-font__size--2xs);
  --gxg-tab-button-font-text-transform: capitalize;
  --gxg-tab-button-font-weight: var(--mer-font__weight--regular);
  --gxg-tab-button-font-weight-selected: var(--mer-font__weight--semi-bold);
  --gxg-tab-button-horizontal-padding: var(--mer-spacing--sm);
  --gxg-tab-button-height: var(--mer-spacing--xl);
  /*line*/
  --gxg-tab-button-line-height: var(--mer-border__width--sm);
  --gxg-tab-button-line-background-color: var(--mer-border-color__primary);
  --gxg-tab-button-line-background-color-hover: var(
    --mer-border-color__primary--hover
  );
  --gxg-tab-button-line-background-color-active: var(
    --mer-border-color__primary--active
  );
  /*--- Tab ---*/
  --gxg-tab-background-color: var(--mer-color__surface);
  --gxg-tab-color: var(--mer-text__on-surface);
  --gxg-tab-font-size: var(--ds-base-font-size);
  --gxg-tab-horizontal-padding: var(--mer-spacing--sm);
  --gxg-tab-vertical-padding: var(--mer-spacing--sm);
  /*font-family, font-size, color. font-weight, and line-height should be defined by using the 'gxg-text' mixin*/
  /*--- Menu Tab Button ---*/
  --gxg-tab-menu-button-padding: var(--mer-spacing--xs);
  --gxg-tab-menu-button-min-height: var(--mer-spacing--xl);
  --gxg-tab-menu-button-font-size: var(--mer-font__size--xs);
  /*--- Reduced ---*/
  --gxg-tab-button-font-size--reduced: var(--mer-font__size--2xs);
  --gxg-tab-button-height--reduced: var(--mer-spacing--lg);
  --gxg-tab-button-vertical-padding--reduced: var(--mer-spacing--xs);
  --gxg-tab-button-horizontal-padding--reduced: var(--mer-spacing--xs);
  --gxg-tab-font-size--reduced: var(--gxg-tab-button-font-size--reduced);
  --gxg-tab-font-size--reduced: var(--gxg-tab-button-font-size--reduced);
  --gxg-tab-horizontal-padding--reduced: var(--mer-spacing--xs);
  --gxg-tab-vertical-padding--reduced: var(--mer-spacing--xs);
  /*--- Stacked ---*/
  --gxg-tab-button-horizontal-padding--stacked: var(--mer-spacing--xs);
}

/*Gemini*/
/*Mercury*/
/*Gemini*/
/*Mercury*/
/*--- Gemini ---*/
:root {
  /*--- General ---*/
  --gxg-title-editable__color: var(--ds-base-font-color);
  --gxg-title-editable__color--editing: var(--color-primary-enabled);
  --gxg-title-editable-wrapper__gap: var(--spacing-comp-02);
  --gxg-title-editable__font-weight: var(--mer-font__weight--bold);
  /*--- h1 ---*/
  --gxg-title-editable-h1__font-size: 20px;
  /*--- h2 ---*/
  --gxg-title-editable-h2__font-size: 16px;
}

/*--- Mercury ---*/
:root.mercury {
  /*--- General ---*/
  --gxg-title-editable__color: var(--mer-color__neutral-gray--100);
  --gxg-title-editable__color--editing: var(--mer-color__primary-blue--200);
  --gxg-title-editable-wrapper__gap: var(--mer-spacing--xs);
  --gxg-title-editable__font-weight: var(--mer-font__weight--bold);
  /*--- h1 ---*/
  --gxg-title-editable-h1__font-size: var(--mer-font__size--lg);
  /*--- h2 ---*/
  --gxg-title-editable-h2__font-size: var(--mer-font__size--xs);
}

:root {
  --gxg-tooltip__background-color: var(--gray-02);
  --gxg-tooltip__color: var(--ds-base-font-color);
  --gxg-tooltip__padding: var(--spacing-comp-01) var(--spacing-comp-02);
  --gxg-tooltip__font-size: var(--font-size-xs);
  --gxg-tooltip__border-radius: var(--border-width-md);
}
:root.mercury {
  --gxg-tooltip__background-color: var(--mer-color__neutral-gray--700);
  --gxg-tooltip__color: var(--ds-base-font-color);
  --gxg-tooltip__padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);
  --gxg-tooltip__font-size: var(--mer-font__size--2xs);
  --gxg-tooltip__border-radius: var(--mer-border__width--sm);
}

/*Gemini*/
:root {
  /*--- General ---*/
  --gxg-tree-view-container__padding: var(--spacing-comp-02);
  --gxg-tree-view-item-dashed-line__border-color: var(--gray-02);
  /*--- Item ---*/
  --gxg-tree-view-item__gap: var(--spacing-comp-02);
  --gxg-tree-view-item__custom-padding-inline-start: var(--spacing-comp-01);
  --gxg-tree-view-item__custom-padding-inline-end: var(--spacing-comp-01);
  --gxg-tree-view-item__color--hover: inherit;
  --gxg-tree-view-item__font-size: var(--font-size-lg);
  /*--- Icon ---*/
  --gxg-tree-view-icon__size: var(--spacing-comp-04);
  /*--- Header ---*/
  --gxg-tree-view-item-header__min-height: var(--spacing-comp-05);
  --gxg-tree-view-item-header__padding-top: var(--spacing-comp-00);
  --gxg-tree-view-item-header__padding-bottom: var(--spacing-comp-00);
  --gxg-tree-view-item-header__padding-inline-end: var(--spacing-comp-02);
  --gxg-tree-view-item-header__outline-offset--focus: -2px;
  --gxg-tree-view-item-header__border-radius: var(--border-radius-sm);
  /*--- Expandable Button ---*/
  --gxg-tree-view-item-expandable-button__background-color: var(--gray-00);
  --gxg-tree-view-item-expandable-button__background-color--before: var(
    --gray-04
  );
  --gxg-tree-view-item-expandable-button__background-color--hover: var(
    --color-background
  );
  /*--- Left Image ---*/
  --gxg-tree-view-item-left-img__size: var(--spacing-comp-04);
  /*--- Downloading ---*/
  --gxg-tree-view-item-downloading__size: var(--spacing-comp-03);
  --gxg-tree-view-item-downloading__border: var(--border-width-md) solid
    var(--color-primary-enabled);
}

/*Mercury*/
:root.mercury {
  /*--- General ---*/
  --gxg-tree-view-container__padding: var(--mer-spacing--xs);
  --gxg-tree-view-item-dashed-line__border-color: var(
    --ds-border-color--regular
  );
  /*--- Item ---*/
  --gxg-tree-view-item__gap: var(--mer-spacing--xs);
  --gxg-tree-view-item__custom-padding-inline-start: var(--mer-spacing--2xs);
  --gxg-tree-view-item__custom-padding-inline-end: var(--mer-spacing--2xs);
  --gxg-tree-view-item__color--hover: var(--mer-color__neutral-gray--100);
  --gxg-tree-view-item__font-size: var(--mer-font__size--2xs);
  /*--- Icon ---*/
  --gxg-tree-view-icon__size: var(--mer-spacing--md);
  /*--- Header ---*/
  --gxg-tree-view-item-header__min-height: var(--mer-spacing--xl);
  --gxg-tree-view-item-header__padding-top: var(--mer-spacing--3xs);
  --gxg-tree-view-item-header__padding-bottom: var(--mer-spacing--3xs);
  --gxg-tree-view-item-header__padding-inline-end: var(--mer-spacing--xs);
  --gxg-tree-view-item-header__outline-offset--focus: -1px;
  --gxg-tree-view-item-header__border-radius: var(--mer-border__radius--sm);
  /*--- Expandable Button ---*/
  --gxg-tree-view-item-expandable-button__background-color: var(
    --mer-color__neutral-gray--1100
  );
  --gxg-tree-view-item-expandable-button__background-color--before: var(
    --mer-color__neutral-gray--200
  );
  --gxg-tree-view-item-expandable-button__background-color--hover: var(
    --mer-color__neutral-gray--900
  );
  /*--- Left Image ---*/
  --gxg-tree-view-item-left-img__size: var(--mer-spacing--md);
  /*--- Downloading ---*/
  --gxg-tree-view-item-downloading__size: var(--mer-spacing--sm);
  --gxg-tree-view-item-downloading__border: var(--mer-border__width--md) solid
    var(--mer-accent__primary--active);
}
:root {
  --section-common-border: 1px solid
    var(--color-border-surface-on-elevation-1);
  --tree-view-min-inline-size: max-content;
}

.control-wrapper {
  display: flex;
  gap: var(--spacing-gap-m);
  align-items: center;
}
.control-wrapper--vertical {
  flex-direction: column;
  align-items: start;
}

.controls-wrapper {
  display: flex;
  gap: var(--spacing-gap-m);
}
.controls-wrapper--vertical {
  flex-direction: column;
  align-items: start;
}

.input-text {
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid var(--color-border-neutral-default);
  border-radius: 4px;
  height: 26px;
  color: var(--color-text-neutral-default);
  font-size: var(--font-size-body-xs);
}
.input-text--full-width {
  align-self: stretch;
}