:root {
  --p-0: 0;
  --p-05: 0.25rem;
  --p-1: 0.5rem;
  --p-2: 1rem;
  --p-3: 2rem;
  --p-16: 4rem;

  ---m-1: -0.5rem;
  ---m-2: -1rem;
  --m-0: 0;
  --m-05: 0.25rem;
  --m-1: 0.5rem;
  --m-2: 1rem;
  --m-3: 2rem;

  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 0.75rem;
  --gap-4: 1rem;
  --gap-5: 1.25rem;
  --gap-6: 1.5rem;
  --gap-7: 1.75rem;
  --gap-8: 2rem;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.125);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.095), 0 6px 6px rgba(0, 0, 0, 0.115);
  --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.125), 0 10px 10px rgba(0, 0, 0, 0.11);
  --shadow-5: 0 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.11);

  --red-100: hsl(0, 100%, 97%);
  --red-200: hsl(0, 100%, 87%);
  --red-300: hsl(0, 100%, 77%);
  --red-400: hsl(0, 100%, 67%);
  --red-500: hsl(357, 82%, 60%);
  --red-600: hsl(354, 70%, 49%);
  --red-700: hsl(352, 75%, 41%);
  --red-800: hsl(350, 73%, 35%);
  --red-900: hsl(348, 69%, 30%);
  --red-950: hsl(351, 80%, 16%);

  --blue-10: hsl(210, 45%, 98%);

  --blue-50: hsl(213, 73%, 97%);
  --blue-100: hsl(215, 75%, 94%);
  --blue-200: hsl(209, 75%, 86%);
  --blue-250: hsl(215, 53.7%, 83.9%);
  --blue-300: hsl(208, 74%, 74%);
  --blue-400: hsl(208, 70%, 60%);
  --blue-500: hsl(208, 70%, 48%);
  --blue-500-fade: hsl(212, 45%, 48%);
  /* original gitlab blue */
  --blue-600: hsl(210, 77%, 36%);
  --blue-700: hsl(210, 76%, 32%);
  --blue-800: hsl(211, 71%, 27%);
  --blue-900: hsl(212, 64%, 24%);
  --blue-950: hsl(213, 63%, 16%);
  --blue-accent: hsl(212, 100%, 47%);

  --blue-poc: hsl(210.21deg 66.2% 41.76%);

  --yellow-50: hsl(48, 100%, 96%);
  --yellow-100: hsl(48, 100%, 90%);
  --yellow-200: hsl(48, 100%, 77%);
  --yellow-300: hsl(46, 100%, 65%);
  --yellow-400: hsl(44, 100%, 56%);
  --yellow-500: hsl(38, 95%, 50%);
  --yellow-600: hsl(34, 94%, 45%);
  --yellow-800: hsl(26, 94%, 37%);
  --yellow-900: hsl(21, 81%, 26%);
  --yellow-950: hsl(21, 94%, 14%);

  --green-50: hsl(125, 65%, 97%);
  --green-100: hsl(132, 68%, 93%);
  --green-200: hsl(132, 63%, 85%);
  --green-300: hsl(133, 62%, 73%);
  --green-400: hsl(134, 56%, 58%);
  --green-500: hsl(134, 58%, 45%);
  --green-600: hsl(134, 62%, 37%);
  --green-700: hsl(134, 58%, 29%);
  --green-800: hsl(135, 53%, 24%);
  --green-900: hsl(135, 50%, 20%);
  --green-950: hsl(136, 65%, 10%);

  --gray-0: hsl(0, 0%, 100%);
  --gray-10: hsl(240, 12%, 99%);
  --gray-20: hsl(240, 12%, 98%);
  --gray-50: hsl(240, 12%, 97%);
  --gray-100: hsl(240, 7%, 92%);
  --gray-100-08: hsla(250, 9%, 13%, 0.08);
  --gray-150: hsl(230 37.5% 96.86%);
  --gray-200: hsl(240, 8%, 87%);
  --gray-300: hsl(233, 7%, 78%);
  --gray-400: hsl(240, 7%, 68%);
  --gray-500: hsl(240, 7%, 60%);
  --gray-600: hsl(248, 7%, 53%);
  --gray-700: hsl(248, 6%, 48%);
  --gray-800: hsl(251, 5%, 40%);
  --gray-900: hsl(248, 5%, 33%);
  --gray-950: hsl(252, 5%, 10%);

  /* Colors */
  --white-two: var(--gray-0);
  --black: hsl(240, 8%, 13%);
  --black-two: hsl(58, 89%, 7%);
  --black-black: hsl(0, 0%, 0%);

  --white: var(--gray-10);
  --lavender: var(gray-100);
  --very-light-blue-two: var(--gray-100);
  --very-light-blue: var(--gray-100);
  --very-light-blue-four: var(--gray-100);
  --powder-blue: var(--gray-200);
  --greyish-brown-23: var(--gray-300);
  --cooler-grey: var(--gray-400);
  --cool-grey: var(--gray-400);
  --light-peach: var(--gray-400);
  --steel: var(--gray-600);
  --grey: var(--gray-600);
  --raisin-black: var(--gray-800);
  --gitlab-grey: var(--gray-950);

  --medium-yellow: var(--yellow-400);
  --rc-tree-highlight: var(--yellow-100);
  --soft-yellow: var(--yellow-100);

  --dark-green: var(--green-700);
  --medium-green: var(--green-600);
  --soft-green: var(--green-100);

  --smoke: var(--blue-50);
  --gitlab-blue-text: var(--blue-100);
  --gitlab-blue-icon: var(--blue-300);
  --gitlab-primary-blue: var(--blue-500);
  --gitlab-blue: var(--blue-600);
  --cadet-blue: var(--blue-700);
  --deep-sky-blue: var(--blue-accent);
  --cerulean-blue: var(--blue-accent);

  --font-white: var(--gray-100);
  --font-black: var(--black-black);

  --medium-red: var(--red-600);

  --gitlab-normal-box-shadow: inset 0 0 0 1px var(--gray-100);

  --nav-link-font-size: var(--font-size-normal) !important;

  /* Table styles */
  --table-key-disabled: var(--gray-200);
  --table-text-color: var(--bold-text-color);
  --table-border: var(--gray-300);
  --table-row-background-normal: var(--white-two);
  --table-row-striped-background: var(--sidenav-bg);
  --table-row-dark-striped-background: var(--table-row-background-normal);
  --table-border-style: solid 1px var(--table-border);
  --table-highlighted-row-background: hsla(207, 82%, 38%, 0.08);
  --table-row-height: 48px;

  /* Variant Styles for buttons and... */
  --default-button-bg: var(--white-two);
  --default-button-border-color: var(--gray-300);
  --default-button-hover: var(--gray-100);
  --primary-bg: var(--blue-500);
  --primary-bg-hover: var(--blue-600);
  --primary-button-border-color: var(--blue-700);
  --primary-text: var(--white-two);
  --success-bg: var(--medium-green);
  --success-bg-hover: var(--dark-green);
  --success-button-border-color: var(--green-700);
  --success-text: var(--white-two);
  --danger-bg: var(--red-600);
  --danger-bg-hover: var(--red-900);
  --danger-button-border-color: var(--red-900);
  --danger-text: var(--white-two);
  --disabled-text: var(--white-two);
  --disabled-bg: var(--gray-600);
  --toggle-carat-bg: var(--gray-100);
  --toggle-carat: var(--gray-600);

  --hover-brighten: brightness(1.07);

  --button-shadow: 0 3px 6px var(--gray-100), 0 3px 6px var(--gray-200);

  /* Style overrides */
  --logo-invert: invert(0);

  /* Borders */
  --border-color-light: var(--gray-300);
  --border-color-normal: var(--gray-400);
  --radius-normal: 0.25rem;
  --base-modal-width: 12rem;

  /* Toggle Switch */
  --toggle-border-radius: 200px;
  --toggle-height: 25px;
  --toggle-width: calc(var(--toggle-height) * 2);
  --toggle-button-height: calc(var(--toggle-height) * 0.8);

  /* =========== FONT SIZES ============ */
  /* FONT SIZES */
  /* 10px */
  --font-size-small: 0.625rem;
  /* 12px */
  --font-size-medium: 0.75rem;
  /* 14px */
  --font-size-normal: 0.875rem;
  /* 15px */
  --font-size-large: 0.938rem;
  /* 20px */
  --font-size-xl: 1.25rem;
  /* 32px */
  --font-size-xxl: 2rem;
  /* ==================================== */

  /* Icons */
  --normal-icon-color: var(--gray-500);

  /* Tabs */
  --tab-border-radius: 0.5rem 0.5rem 0 0;
  --tab-background: var(--white-two);
  --tab-active-background: var(--smoke);

  /* ===============REWORK================== */
  --submenu-dispatcher-hover-bg: var(--gray-100);
  --subtable-head-row-normal: var(--gray-100);
  --submenu-divider-color: var(--gray-300);
  --submenu-hover-bg: var(--gray-100);

  /* Sidenav styles */
  --sidenav-width: 260px;
  --logo-image-outline: 1px dashed var(--sidenav-header-icon-color);
  --sidenav-bg: var(--smoke);
  --sidenav-bg-hover: var(--gray-100-08);
  --sidenav-header-bg: var(--gitlab-blue);
  --sidenav-header-text-color: var(--gitlab-blue-text);
  --sidenav-header-icon-color: var(--gitlab-blue-icon);
  --sidenav-border-color: var(--gray-100);
  --sidenav-header-button-bg: var(--blue-500-fade);
  --sidenav-header-button-hover: var(--blue-500);
  --sidenav-header-button-attention: var(--blue-800);

  /* Main content styles */
  --max-width-wide: 1600px;
  --main-content-header-bg: var(--white-two);
  --main-content-contrast-bg: var(--gray-20);
  --normal-breadcrumb-color: var(--gray-700);
  --active-breadcrumb-color: var(--normal-text-color);
  --layout-divider-color: var(--gray-200);
  --subheader-min-height: 41px;
  --max-form-width: 1248px;

  /* Font styles */
  --inactive-tab-hover-indicator: var(--gray-300);
  --bold-text-color: var(--gray-800);
  --normal-text-color: var(--font-black);
  --active-text-color: var(--blue-600);
  --placeholder-text-color: var(--gray-700);
  --sidenav-link-group-header-color: var(--blue-600);
  --inactive-text-color: var(--gray-900);

  /* Form Field styles */
  --field-label-text-color: var(--normal-text-color);
  --field-background-normal: var(--sidenav-bg);
  --field-background-disabled: var(--gray-100);
  --field-text-disabled: var(--gray-800);
  --field-min-height: 32px;

  /* ======================================= */

  --padding-y-normal: 0.4rem;
  --padding-x-normal: 0.55rem;
}

.mui-theme {
  font-family: Inter-IRC, sans-serif;
  --nav-link-gradient: linear-gradient(to right, hsl(from var(--gitlab-blue) h s l / 60%), var(--gitlab-blue));
  --nav-link-border-radius: 0.25rem 25px 25px 0.25rem;
  --pill-border-radius: 25px;
  --nav-link-height: 38px;
  --poc-normal-border-radius: 6px;

  --poc-primary-blue: var(--blue-500);
  --app-bg-color: hsl(230, 37%, 97%);
  --normal-font-color: var(--gray-700);
  --normal-font-color: hsla(261, 23%, 19%, 0.9);
  --table-cell-font-color: rgba(46, 38, 61, 0.9);

  --field-background-normal: var(--white-two);

  --poc-light-font-color: var(--gray-500);
  --wv-bc: var(--gray-200);

  --font-swatch-1: var(--gray-900);
  --font-swatch-2: var(--gray-600);

  --wv-rush-smear: hsl(0, 100%, 88%);
  --wv-priority-smear: hsl(30, 100%, 85%);
  --wv-hold-smear: hsl(291, 30%, 83%);
  --wv-unread-smear: hsl(126, 36%, 83%);

  /* border overrides */
  --radius-normal: 4px;

  /* text overrides */
  --disabled-text: hsla(0, 0%, 0%, 0.38);

  /* sidenav styles */
  --sidenav-transition-duration: 0.3s;
  --sidenav-collapsed-width: 68px;
  --sidenav-expanded-width: var(--sidenav-width);

  /* notification styles */
  --new-notification-chip-bg: hsla(207, 82%, 38%, 0.16);
  --new-notification-chip-text: hsla(207, 82%, 38%, 1);
  --notification-icon-color: hsla(94, 100%, 40%, 1);
  --notification-icon-bg: hsla(96, 64%, 90%, 1);
  --notification-description-color: hsla(261, 23%, 19%, 0.7);
  --notification-date-color: hsla(261, 23%, 19%, 0.4);
  --notification-unread-indicator-color: hsla(263, 7%, 44%, 1);

  /* chart styles */
  --chart-bar-color-yellow: hsla(40, 100%, 67%, 1);
  --chart-bar-color-green: hsla(143, 40%, 65%, 1);
  --chart-bar-color-blue: hsla(209, 100%, 61%, 1);

  /* tabs */
  --tab-option-font-size: 1rem;
}

.classic-theme {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
}

.dark-mode {
  --gray-10: hsl(230 7% 2%);
  --gray-100: hsl(230 7% 12%);
  --gray-150: hsl(230 7% 18%);
  --gray-200: hsl(230 7% 23%);
  --gray-300: hsl(230 7% 30%);
  --gray-400: hsl(230 7% 40%);

  --gray-600: hsl(230 7% 66%);
  --gray-700: hsl(230 7% 76%);
  --gray-800: hsl(230 7% 86%);
  --gray-900: hsl(230 7% 96%);
  --gray-950: hsl(230 7% 100%);

  /** POC styles dark mode **/
  --app-bg-color: var(--gray-150);
  --poc-black-font-color: var(--gray-900);
  --poc-dark-font-color: var(--gray-800);
  --poc-normal-font-color: var(--gray-700);
  --poc-light-font-color: var(--gray-600);

  --font-swatch-1: var(--gray-900);
  --font-swatch-2: var(--gray-600);

  --poc-white-font-color: var(--gray-10);

  --default-button-hover: var(--gray-100);

  --wv-rush-smear: hsl(0, 100%, 20%);
  --wv-priority-smear: hsl(30, 100%, 20%);
  --wv-hold-smear: hsl(291, 30%, 20%);
  --wv-unread-smear: hsl(126, 36%, 20%);

  /** POC Styles dark mode**/

  --lavender: hsl(240, 7%, 18%);
  color-scheme: dark !important;
  --logo-image-outline: none;
  --gitlab-normal-box-shadow: inset 0 0 0 1px hsl(240, 4%, 20%) !important;
  --default-button-bg: hsl(260, 6%, 21%);
  --default-button-border-color: hsl(250, 4%, 33%);
  --submenu-dispatcher-hover-bg: hsl(240, 4%, 35%);
  --submenu-hover-bg: hsl(260, 6%, 21%);
  --submenu-divider-color: hsl(260, 5%, 24%);

  /* Table styles */
  --table-row-background-normal: var(--black);
  --table-row-striped-background: var(--default-button-bg);
  --table-row-dark-striped-background: var(--black);
  --table-text-color: var(--font-white);
  --subtable-head-row-normal: var(--gitlab-grey);

  /* Sidenav styles */
  --sidenav-bg: var(--black);
  --sidenav-header-bg: var(--gitlab-grey);
  --sidenav-header-text-color: var(--font-white);
  --sidenav-header-icon-color: hsl(252, 3%, 65%);
  --sidenav-bg-hover: hsl(240, 4%, 21%);
  --sidenav-border-color: hsl(240, 5%, 18%);
  --sidenav-header-button-bg: var(--black);
  --sidenav-header-button-hover: hsl(240, 4%, 35%);

  /* Main content styles */
  --main-content-header-bg: var(--black);
  --main-content-contrast-bg: var(--black);
  --normal-breadcrumb-color: hsl(240, 3%, 76%);
  --active-breadcrumb-color: var(--normal-text-color);
  --layout-divider-color: hsl(240, 4%, 26%);

  /* Font styles */
  --active-text-color: var(--white-two);
  --inactive-text-color: hsl(252, 3%, 30%);
  --inactive-tab-hover-indicator: hsl(240, 3%, 73%);
  --bold-text-color: var(--white-two);
  --normal-text-color: var(--font-white);
  --placeholder-text-color: hsl(260, 2%, 49%);
  --sidenav-link-group-header-color: var(--white-two);

  /* Form Field styles */
  --field-label-text-color: var(--normal-text-color);
  --field-background-normal: var(--sidenav-bg);
  --field-background-disabled: var(--submenu-hover-bg);

  /* ======================================= */

  /* Tabs */
  --tab-background: var(--very-light-blue-four);
  --tab-active-background: var(--white-two);
}