@genexus/mercury 0.0.2

package/dist/css/mercury.css

@@ -0,0 +1,736 @@
+/* font weights used by mercury:
+- light (300)
+- regular (400)
+- semi-bold (600)
+- bold (700)
+- extra-bold (800)
+*/
+/*----------------------
+Scrollbar
+----------------------*/
+/*----------------------
+Focus
+----------------------*/
+/*----------------------------------------------------
+Item (applies to every item (tree, grid, list, etc...)
+----------------------------------------------------*/
+/*----------------------
+Checkbox
+----------------------*/
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+:where(button, a) {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  touch-action: manipulation;
+  cursor: pointer;
+}
+
+button:disabled {
+  pointer-events: none;
+}
+
+input,
+select,
+textarea {
+  padding: 0;
+  margin: 0;
+  background-color: unset;
+  border: unset;
+  color: unset;
+  font: unset;
+  outline: unset;
+}
+
+hr {
+  block-size: 1px;
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background-color: currentColor;
+}
+
+fieldset,
+legend {
+  padding: 0;
+  margin: 0;
+}
+
+img {
+  display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  font: unset;
+  margin: 0;
+  padding: 0;
+  color: unset;
+}
+
+body {
+  background-color: var(--mer-body__bg-color);
+  color: var(--mer-body__color);
+  font-size: var(--mer-body__font-size);
+  line-height: var(--mer-body__line-height);
+  font-family: var(--mer-font-family--primary);
+  margin: 0;
+}
+
+:root {
+  /*----------------------
+    General
+    ----------------------*/
+  --button__padding-block: 0;
+  --button__padding-inline: var(--mer-spacing--sm);
+  --button__border-width: 1px;
+  --button__border-style: solid;
+  --button__border-color: transparent;
+  --button__border-radius: var(--mer-border__radius--sm);
+  --button__font-family: inherit;
+  --button__font-size: inherit;
+  --button__font-weight: var(--mer-font__weight--semi-bold);
+  --button__letter-spacing: inherit;
+  --button__line-height: inherit;
+  --button__color: var(--mer-text__on-primary);
+  --button__height: var(--spacing-comp-05);
+  /*----------------------
+    Primary
+    ----------------------*/
+  --button-primary__color: inherit;
+  --button-primary__background-color: var(--mer-accent__primary);
+  --button-primary__border-color: var(--button-primary__background-color);
+  --button-primary__color--hover: var(--mer-text__on-primary);
+  --button-primary__background-color--hover: var(--mer-accent__primary--hover);
+  --button-primary__border-color--hover: var(
+    --button-primary__background-color--hover
+  );
+  --button-primary__color--active: var(--mer-text__on-primary--active);
+  --button-primary__background-color--active: var(
+    --mer-accent__primary--active
+  );
+  --button-primary__border-color--active: var(
+    --button-primary__background-color--active
+  );
+  --button-primary__color--disabled: inherit;
+  --button-primary__background-color--disabled: inherit;
+  --button-primary__border-color--disabled: inherit;
+  /*----------------------
+    Secondary
+    ----------------------*/
+  --button-secondary__color: inherit;
+  --button-secondary__background-color: inherit;
+  --button-secondary__border-color: inherit;
+  --button-secondary__color--hover: inherit;
+  --button-secondary__background-color--hover: inherit;
+  --button-secondary__border-color--hover: inherit;
+  --button-secondary__color--active: inherit;
+  --button-secondary__background-color--active: inherit;
+  --button-secondary__border-color--active: inherit;
+  --button-secondary__color--disabled: inherit;
+  --button-secondary__background-color--disabled: inherit;
+  --button-secondary__border-color--disabled: inherit;
+  /*----------------------
+    Outlined
+    ----------------------*/
+  --button-outlined__color: inherit;
+  --button-outlined__background-color: inherit;
+  --button-outlined__border-color: inherit;
+  --button-outlined__color--hover: inherit;
+  --button-outlined__background-color--hover: inherit;
+  --button-outlined__border-color--hover: inherit;
+  --button-outlined__color--active: inherit;
+  --button-outlined__background-color--active: inherit;
+  --button-outlined__border-color--active: inherit;
+  --button-outlined__color--disabled: inherit;
+  --button-outlined__background-color--disabled: inherit;
+  --button-outlined__border-color--disabled: inherit;
+}
+
+/*----------------------
+  General button styles
+  ----------------------*/
+.button {
+  font-family: var(--button__font-family);
+  padding-block-start: var(--button__padding-block);
+  padding-block-end: var(--button__padding-block);
+  padding-inline-start: var(--button__padding-inline);
+  padding-inline-end: var(--button__padding-inline);
+  height: var(--button__height);
+  font-weight: var(--button__font-weight);
+  color: var(--button__color);
+  border-radius: var(--button__border-radius);
+  border-width: var(--button__border-width);
+  border-style: var(--button__border-style);
+  border-color: var(--button-primary__border-color);
+}
+
+/*----------------------
+  Button primary
+  ----------------------*/
+.button--primary {
+  background-color: var(--button-primary__background-color);
+}
+.button--primary:hover {
+  color: var(--button-primary__color--hover);
+  background-color: var(--button-primary__background-color--hover);
+  border-color: var(--button-primary__border-color--hover);
+}
+.button--primary:active {
+  color: var(--button-primary__color--active);
+  background-color: var(--button-primary__background-color--active);
+  border-color: var(--button-primary__border-color--active);
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../src/assets/fonts/Inter_Light.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../src/assets/fonts/Inter_Regular.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../src/assets/fonts/Inter_SemiBold.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../src/assets/fonts/Inter_Bold.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  src: url("../src/assets/fonts/Inter_ExtraBold.woff2") format("woff2");
+  font-display: swap;
+}
+:root {
+  --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.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;
+  --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;
+  --mer-color__tinted-yellow--5: #ffc96b0d;
+  --mer-color__tinted-yellow--60: #ffc96b99;
+  --mer-color__tinted-red--5: #53272a0d;
+  --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;
+  --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;
+  --mer-color__surface: #1a1d20;
+  --mer-color__elevation--01: #202428;
+  --mer-color__elevation--02: #262a2f;
+  --mer-color__elevation--03: #2b3237;
+  --mer-color__elevation--04: #3b4044;
+}
+
+:root {
+  --mer-border__width--sm: 1px;
+  --mer-border__width--md: 2px;
+  --mer-border__width--lg: 4px;
+  --mer-border__radius--xs: 2px;
+  --mer-border__radius--sm: 4px;
+  --mer-border__radius--md: 8px;
+  --mer-border__radius--lg: 12px;
+  --mer-border__radius--xl: 30px;
+  --mer-accent__primary: var(--mer-color__primary-blue--200);
+  --mer-accent__primary--hover: var(--mer-color__primary-blue--400);
+  --mer-accent__primary--active: var(--mer-color__primary-blue--600);
+  --mer-accent__primary--disabled: var(--mer-color__neutral-gray--700);
+  --mer-accent__primary--destructive: var(--mer-color__message-red--100);
+  --mer-border-color__primary: var(--mer-accent__primary);
+  --mer-border-color__primary--hover: var(--mer-accent__primary--hover);
+  --mer-border-color__primary--active: var(--mer-accent__primary--active);
+  --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);
+  --mer-border-color__primary--focused: var(--mer-color__neutral-gray--00);
+  --mer-border-color__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);
+  --mer-heading__font-color: var(--mer-color__neutral-gray--100);
+  --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);
+  --mer-item__color: ;
+  --mer-item__bg-color: ;
+  --mer-item__border-color: var(--mer-color__tinted-blue--20);
+  --mer-item__color--hover: var(--mer-color__neutral-gray--100);
+  --mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
+  --mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
+  --mer-item__color--selected: var(--mer-color__neutral-gray--100);
+  --mer-item__bg-color--selected: var(--mer-color__tinted-blue--10);
+  --mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
+  --mer-item__color--selected-hover: var(--mer-color__neutral-gray--100);
+  --mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
+  --mer-item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
+  /*----------------------
+  Body
+  ----------------------*/
+  --mer-body__bg-color: var(--mer-color__surface);
+  --mer-body__color: var(--mer-text__on-surface);
+  --mer-body__font-size: var(--mer-font__size--xxs);
+  --mer-body__line-height: var(--mer-line-height--regular);
+  /*----------------------
+  Scrollbar
+  ----------------------*/
+  --mer-scrollbar__size: var(--mer-spacing--xs);
+  --mer-scrollbar-track__bg-color: var(--mer-color__elevation--03);
+  --mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
+  --mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
+  --mer-scrollbar-thumb__bg-color--hover: var(--mer-color__elevation--04);
+  --mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
+  --mer-scrollbar-corner__bg: rgba(0, 0, 0, 0);
+  /*----------------------
+  Icon
+  ----------------------*/
+  --mer-icon-shell__size--sm: var(--mer-spacing--md);
+  --mer-icon__size--sm: var(--mer-spacing--sm);
+  --mer-icon-shell__size--lg: var(--mer-spacing--sm);
+  --mer-icon__size--lg: var(--mer-spacing--xs);
+  /*----------------------
+  Label
+  ----------------------*/
+  --mer-label__space: var(--mer-spacing--xs);
+  --mer-label__font-size: inherit;
+  --mer-label__font-weight: var(--mer-font__weight--semi-bold);
+  --mer-label__color: inherit;
+  --mer-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);
+  /*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);
+  /*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--xxs: 12px;
+  --mer-font__size--xs: 14px;
+  --mer-font__size--sm: 16px;
+  --mer-font__size--md: 20px;
+  --mer-font__size--lg: 24px;
+  --mer-font__size--xl: 36px;
+  /*Line Heights*/
+  --mer-line-height--tight: 1.4em;
+  --mer-line-height--regular: 1.6em;
+  --mer-line-height--comfortable: 1.7em;
+  /*Letter Spacings (to be done)*/
+  --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;
+  --mer-timing--super-fast: 100;
+  --mer-timing--fast: 200;
+  --mer-timing--regular: 500;
+  --mer-timing--slow: 1000;
+}
+:root.dark {
+  /*background color*/
+  --mer-elevation__background-color--01: var(--mer-color__elevation--01);
+  --mer-elevation__background-color--02: var(--mer-color__elevation--02);
+  --mer-elevation__background-color--03: var(--mer-color__elevation--03);
+  --mer-elevation__background-color--04: var(--mer-color__elevation--04);
+  /*border*/
+  --mer-elevation__border-01: 1px solid var(--mer-color__elevation--03);
+  --mer-elevation__border-03: transparent;
+  --mer-elevation__border-04: transparent;
+  /*box shadow*/
+  --mer-elevation__box-shadow--01: none;
+  --mer-elevation__box-shadow--02: none;
+  --mer-elevation__box-shadow--03: none;
+  --mer-elevation__box-shadow--04: none;
+}
+
+:root {
+  --mer-checkbox__size: var(--mer-spacing--md);
+  --mer-checkbox__border-width: var(--mer-border__width--sm);
+  --mer-checkbox__border-style: solid;
+  --mer-checkbox__border-color: var(--mer-border-color__dim);
+  --mer-checkbox__border-radius: var(--mer-border__radius--xs);
+  --mer-checkbox-check__border-color: var(--mer-border-color__neutral--active);
+  --mer-checkbox__bg-color: transparent;
+}
+
+:root {
+  /*----------------------
+  tree-view-item
+  ----------------------*/
+  --tree-view-item__color: inherit;
+  --tree-view-item__font-size: inherit;
+  --tree-view-item__gap: var(--mer-spacing--xs);
+  --tree-view-item__checkbox-size: var(--mer-checkbox__size);
+  --tree-view-item-expandable-button__size: var(--mer-spacing--md);
+  --tree-view-item-image-size__: var(--mer-spacing--md);
+  --tree-view-item-custom__padding-inline-start: var(--mer-view-spacing--2xs);
+  --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs);
+  /*----------------------
+  tree-view-item -> Sates
+  ----------------------*/
+  --tree-view-item__color--hover: var(--mer-item__color--hover);
+  --tree-view-item__bg-color--hover: var(--mer-item__bg-color--hover);
+  --tree-view-item__color--selected: var(--mer-item__color--selected);
+  --tree-view-item__bg-color--selected: var(--mer-item__bg-color--selected);
+  /*----------------------
+  tree-view-item -> Parts
+  ----------------------*/
+  --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface);
+  --tree-view-item-dashed-line__opacity: 0.3;
+  --tree-view-item-header__border-radius: var(--mer-border__radius--sm);
+  --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs));
+  --tree-view-item-downloading__inline-size: var(--mer-spacing--sm);
+  --tree-view-item-downloading__block-size: var(--mer-spacing--sm);
+  --tree-view-item-downloading__border-width: var(--mer-border__width--md);
+  --tree-view-item-downloading__border-style: solid;
+  --tree-view-item-downloading__border-color: var(
+    --mer-accent__primary--active
+  );
+  --tree-view-item-folder-action__inline-size: var(--mer-spacing--md);
+  --tree-view-item-folder-action__block-size: var(--mer-spacing--md);
+  --tree-view-item-pending-commit__bg-color: var(--mer-accent__primary);
+  /*----------------------
+  tree-view-container
+  ----------------------*/
+  --tree-view-container__min-inline-size: var(max-content);
+  --tree-view-container__padding: var(--mer-spacing--xs);
+}
+
+.tree-view {
+  /*----------------------
+  General use variables
+  ----------------------*/
+  --ch-tree-view-item-custom-padding-inline-start: 8px;
+  --ch-tree-view-item-gap: var(--tree-view-item__gap);
+  --ch-tree-view-item__checkbox-size: var(--tree-view-item__checkbox-size);
+  --ch-tree-view-item__expandable-button-size: var(
+    --tree-view-item-expandable-button__size
+  );
+  --ch-tree-view-item__image-size: var(--mer-icon-shell__size--sm);
+}
+.tree-view::-webkit-scrollbar {
+  width: var(--mer-scrollbar__size);
+  height: var(--mer-scrollbar__size);
+}
+.tree-view::-webkit-scrollbar-track {
+  background-color: var(--mer-scrollbar-track__bg-color);
+  border-radius: var(--mer-scrollbar-track__border-radius);
+}
+.tree-view::-webkit-scrollbar-thumb {
+  background-color: var(--mer-scrollbar-thumb__bg-color);
+  border-radius: var(--mer-scrollbar-thumb__border-radius);
+}
+.tree-view::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mer-scrollbar-thumb__bg-color--hover);
+}
+.tree-view::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
+}
+.tree-view .ch-tree-view-container {
+  padding: var(--tree-view-container__padding);
+}
+
+.tree-view-item {
+  font-size: var(--tree-view-item__color);
+  color: var(--tree-view-item__font-size);
+  /*----------------------
+  Parts
+  ----------------------*/
+  /*----------------------
+  Parts -> dynamic icons
+  ----------------------*/
+}
+.tree-view-item::part(checkbox__container) {
+  box-sizing: border-box;
+  background-color: var(--mer-checkbox__bg-color);
+  /*additional styles*/
+  width: var(--mer-checkbox__size);
+  height: var(--mer-checkbox__size);
+  position: relative;
+  border-width: var(--mer-checkbox__border-width);
+  border-style: var(--mer-checkbox__border-style);
+  border-color: var(--mer-checkbox__border-color);
+  border-radius: var(--mer-checkbox__border-radius);
+}
+.tree-view-item::part(checkbox__container):after {
+  content: "";
+  position: absolute;
+  display: block;
+  border: solid;
+  border-color: transparent;
+  z-index: 0;
+}
+.tree-view-item::part(checkbox__container):focus-within {
+  box-shadow: none;
+  outline-width: var(--mer-border__width--sm);
+  outline-style: solid;
+  outline-color: var(--mer-color__primary-blue--200);
+  outline-offset: -1px;
+}
+.tree-view-item::part(checkbox__container checkbox__checked):after {
+  left: 5px;
+  top: 2.5px;
+  width: 4.5px;
+  height: 7.5px;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border-color: var(--mer-checkbox-check__border-color);
+}
+.tree-view-item::part(checkbox__container checkbox__indeterminate):after {
+  left: 50%;
+  top: 50%;
+  width: 8px;
+  height: 2px;
+  border: 0;
+  background-color: var(--mer-checkbox-check__border-color);
+  -webkit-transform: rotate(0) translateY(-50%) translateX(-50%);
+  -ms-transform: rotate(0) translateY(-50%) translateX(-50%);
+  transform: rotate(0) translateY(-50%) translateX(-50%);
+}
+.tree-view-item::part(checkbox__option) {
+  display: none;
+}
+.tree-view-item::part(checkbox__input) {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.tree-view-item::part(dashed-line) {
+  border-color: var(--tree-view-item-dashed-line__border-color);
+  opacity: var(--tree-view-item-dashed-line__opacity);
+}
+.tree-view-item::part(header) {
+  border-radius: var(--tree-view-item-header__border-radius);
+  padding-inline-end: var(--tree-view-item-custom__padding-inline-end);
+}
+.tree-view-item::part(header):hover {
+  color: var(--tree-view-item__color--hover);
+  background-color: var(--tree-view-item__bg-color--hover);
+}
+.tree-view-item::part(header):focus {
+  outline-width: var(--mer-border__width--sm);
+  outline-style: solid;
+  outline-color: var(--mer-color__primary-blue--200);
+  outline-offset: -1px;
+}
+.tree-view-item[selected]::part(header) {
+  color: var(--tree-view-item__color--selected);
+  background-color: var(--tree-view-item__bg-color--selected);
+}
+.tree-view-item::part(action) {
+  padding-block: var(--tree-view-item-header__padding-block);
+}
+.tree-view-item::part(downloading) {
+  inline-size: var(--tree-view-item-downloading__inline-size);
+  block-size: var(--tree-view-item-downloading__block-size);
+  border-width: var(--tree-view-item-downloading__border-width);
+  border-style: var(--tree-view-item-downloading__border-style);
+  border-color: var(--tree-view-item-downloading__border-color);
+  border-inline-start-color: transparent;
+}
+.tree-view-item--folder::part(action)::before, .tree-view-item--module::part(action)::before {
+  content: "";
+  inline-size: var(--tree-view-item-folder-action__inline-size);
+  block-size: var(--tree-view-item-folder-action__block-size);
+  background-repeat: no-repeat;
+}
+.tree-view-item--folder::part(action)::before {
+  background-image: url("../src/showcase/assets/icons/folder.svg");
+}
+.tree-view-item--folder::part(action expanded)::before {
+  background-image: url("../src/showcase/assets/icons/folder-open.svg");
+}
+.tree-view-item--module::part(action)::before {
+  background-image: url("../src/showcase/assets/icons/module.svg");
+}
+.tree-view-item--module::part(action expanded)::before {
+  background-image: url("../src/showcase/assets/icons/module-open.svg");
+}
+.tree-view-item--pending-commit::part(action)::before {
+  content: "";
+  position: relative;
+  z-index: 1;
+  width: 5px;
+  height: 5px;
+  align-self: end;
+  margin-block-end: 3px;
+  margin-inline-start: 1px;
+  background-color: var(--tree-view-item-pending-commit__bg-color);
+  border-radius: 50%;
+}
+
+.tree-view .ch-tree-view-drag-info {
+  padding-inline: 6px;
+  padding-block: 2px;
+  background-color: var(--mer-color__elevation--04);
+  border: 1px solid var(--ds-border-color--regular);
+  border-radius: 10px;
+  box-shadow: var(--gxg-grid-row__box-shadow--dragging);
+  font-size: 8px;
+}
+
+ch-tree-view-drop::after {
+  background-color: cyan;
+}
+
+/*-- Other Selectors (these depend on the tag class name)---*/
+.ch-tree-view-item--drag-enter {
+  background-color: yellow;
+  outline: 1px solid currentColor;
+  outline-offset: -1px;
+}
+
+/*# sourceMappingURL=mercury.css.map */