.theme-dark {
  // Local variables for reused colors

  //dark sidebar
  $darkest: #141419;

  //dark body
  $darker: #1b1c21;

  //dark inputs
  $dark: #27292e;

  //dark borders and button
  $medium: #4a4b52;

  // dark disabled,
  $light: #6c6c76;

  //dark secondary
  $lighter: #b6b6c2;

  // dark main text
  $lightest: #ffffff;

  // menu cluster description active+hover
  $desc-light: #EEEFF4;

  $secondary: $lighter;
  $disabled: $light;

  //Contrast colors
  $contrasted-dark: $lightest !default;
  $contrasted-light: $darkest !default;

  $drag-over: #DCDEE7;

  $slate: #4B4F6B;

  --slate: #{$slate};

  --lightest                   : #{rgba($lightest, 1)};

  --default                    : #{$dark};
  --default-text               : #{$light};
  --default-hover-bg           : #{darken($dark, 10%)};
  --default-hover-text         : #{saturate($lightest, 20%)};
  --default-active-bg          : #{darken($dark, 25%)};
  --default-active-text        : #{contrast-color(darken($dark, 25%))};
  --default-border             : #{$dark};
  --default-banner-bg          : #{rgba($dark, 0.15)};
  --default-light-bg           : #{rgba($dark, 0.05)};
  --slider-light-bg            : #{rgba($darker, 1)};
  --slider-light-bg-right      : #{rgba($darker, 0)};

  --muted                      : #{$disabled};

  --body-bg                    : #{$darker};
  --body-text                  : #{$lightest};
  --scrollbar-thumb            : #{$medium};
  --scrollbar-thumb-dropdown   : #{$medium};

  --side-menu-desc             : #{$desc-light};

  --header-bg                  : #{$darker};
  --header-border              : #{$medium};
  --header-btn-bg              : transparent;
  --header-btn-text            : #{$lightest};
  --header-btn-text-hover      : #{$lightest};
  --header-input-text          : #{$lightest};

  // Header, Footer and Consent banner defaults
  --banner-text-color          : #{$lightest};

  --nav-bg                     : #{$darkest};
  --nav-active                 : #333;
  --nav-border                 : #{$medium};
  --nav-hover                  : var(--primary);
  --nav-expander-hover         : var(--primary-banner-bg);
  --nav-icon-badge-bg          : #{$dark};

  --disabled-bg                : #{darken($disabled, 10%)};
  --disabled-text              : #{$secondary};
  --box-bg                     : #{$darkest};
  --subtle-border              : #{$darkest};
  --border                     : #{$medium};

  --topmenu-bg                 : #{$darkest};
  --topmenu-text               : #{$lightest};
  --topmost-border             : #{$medium};
  --topmost-shadow             : #{lighten($darkest, 5%)};
  --topmost-light-hover        : #{$medium};

  --accent-btn                 : var(--primary-banner-bg);
  --accent-btn-hover           : var(--primary);
  --accent-btn-hover-text      : #{$lightest};

  --modal-bg                   : #{$dark};
  --modal-border               : #{$medium};
  --overlay-bg                 : #{rgba($darkest, 0.75)};
  --overlay-model-bg           : rgba($darkest, 0.45);
  --shadow                     : #{rgba($darkest, 0.9)};

  --checkbox-tick              : #{$lightest};
  --checkbox-border            : #{$medium};
  --checkbox-tick-disabled     : #{lighten($disabled, 50%)};
  --checkbox-disabled-bg       : #{$disabled};
  --checkbox-ticked-bg         : var(--link);

  --drag-over-inner-bg         : #{rgba($drag-over, 0.9)};
  --drag-over-outer-bg         : #{rgba($drag-over, 0)};

  --dropdown-bg                : #{mix($medium, $dark, 10%)};
  --dropdown-border            : #{$light};
  --dropdown-divider           : #{$light};
  --dropdown-text              : #{$lightest};
  --dropdown-active-text       : #{$lightest};
  --dropdown-active-bg         : #{$light};
  --dropdown-hover-text        : #{$lightest};
  --dropdown-hover-bg          : #{$slate};
  --dropdown-disabled-bg       : #{$disabled};
  --dropdown-disabled-text     : #{$disabled};
  --dropdown-group-text        : #{$lighter};
  --dropdown-highlight-text    : var(--link);

  --input-text                 : #{$lightest};
  --input-label                : #{$lighter};
  --input-placeholder          : #{$disabled};
  --input-border               : var(--border);
  --input-bg                   : var(--body-bg);
  --input-bg-accent            : #{darken($dark, 3%)};
  --input-hover-bg             : var(--box-bg);
  --input-focus-bg             : var(--box-bg);
  --input-disabled-text        : #{darken($lightest, 50%)};
  --input-disabled-label       : #{darken($lighter, 30%)};
  --input-disabled-bg          : #{darken($disabled, 30%)};
  --input-disabled-border      : #{darken($medium, 30%)};
  --input-disabled-placeholder : #{darken($disabled, 10%)};
  --input-addon-bg             : #{$darker};

  --progress-bg                : #{$medium};
  --progress-divider           : #{$lightest};

  --sortable-table-bg          : #{lighten($darkest, 10%)};
  --sortable-table-row-bg      : #{$darker};;
  --sortable-table-header-bg   : #{$darkest};
  --sortable-table-top-divider : var(--border);
  --sortable-table-hover-bg    : #{$darkest};
  --sortable-table-selected-bg : var(--primary-light-bg);
  --sortable-table-group-label : #{$lighter};

  --tag-primary                : #{$lightest};
  --tag-bg                     : #{$medium};

  --popover-bg                 : #{$darker};
  --popover-border             : var(--border);
  --popover-text               : var(--body-text);

  --tooltip-bg                 : #{$medium};
  --tooltip-border             : var(--tag-primary);
  --tooltip-text               : var(--body-text);
  --tooltip-text-warning       : var(--body-text);


  --tabbed-border              : #{$medium};
  --tabbed-sidebar-bg          : #{$darkest};
  --tabbed-container-bg        : #{mix($medium, $dark, 20%)};

  --yaml-editor-bg             : #{$darkest};

  --diff-border                : var(--border);
  --diff-header-bg             : var(--nav-bg);
  --diff-header-border         : var(--border);
  --diff-header                : #{rgba($darkest, 0.3)};
  --diff-linenum-bg            : var(--nav-bg);
  --diff-linenum               : var(--muted);
  --diff-linenum-border        : var(--border);
  --diff-line-ins-bg           : $success;
  --diff-line-del-bg           : #{rgba($error, 0.75)};
  --diff-del-bg                : #{rgba($error, 0.3)};
  --diff-del-border            : #{$error};
  --diff-ins-bg                : #{rgba($success, 0.3)};
  --diff-ins-border            : #{rgba($success, 0.5)};
  --diff-chg-ins               : #{rgba($success, 0.25)};
  --diff-chg-del               : #{rgba($warning, 0.5)};
  --diff-chg-dela               : #{rgba($warning, 1)};
  --diff-empty-placeholder     : #{$darker};


  --wm-tabs-bg                 : #{mix($medium, $dark, 10%)};
  --wm-tab-bg                  : #{$darkest};
  --wm-closer-hover-bg         : #{$medium};
  --wm-tab-active-bg           : #{$darker};
  --wm-title-bg                : #{$darkest};
  --wm-title-border            : #{$medium};
  --wm-body-bg                 : #{$darkest};
  --wm-border                  : black;

  --glance-divider             : #{$medium};

  --resource-gauge-back-circle : 74, 75, 82, 0.5;

  --simple-box-bg              : #{$darker};
  --simple-box-border          : #{$medium};
  --simple-box-divider         : #{$medium};
  --simple-box-shadow          : none;

  --terminal-bg                : var(--wm-body-bg);
  --terminal-cursor            : var(--warning);
  --terminal-selection         : #{$selected};
  --terminal-text              : var(--body-text);

  --logs-bg                    : var(--wm-body-bg);
  --logs-highlight             : var(--wm-body-bg);
  --logs-highlight-bg          : var(--warning);
  --logs-text                  : var(--body-text);

  --gauge-divider              : rgba(255, 255, 255, 0.3);
  --gauge-success-primary      : 75, 95, 64;
  --gauge-success-secondary    : 150, 189, 127;
  --gauge-warning-primary      : 218, 195, 66;
  --gauge-warning-secondary    : 109, 98, 33;
  --gauge-error-primary        : 239, 90, 83;
  --gauge-error-secondary      : 120, 45, 42;

  --product-icon               : #{$lighter};
  --product-icon-active        : #{$lightest};

  --badge-state-disabled-text  : #{$desc-light};
  --badge-state-disabled-bg    : #{$medium};
  --badge-state-disabled-border: #{$lighter};

  $slate: #4B4F6B;

  --slate: #{$slate};
}