//
// Variables
// -------------------------------------------------------------------------------------

// Colors
// -------------------------------------------------------------------------------------

@import "colors";

// Base
// -------------------------------------------------------------------------------------

$link-color: $brand-primary;
$link-hover-color: darken($link-color, 15%);
$link-hover-decoration: none;

$grid-unit-x: 8px;
$grid-unit-y: 8px;

$margin-base-y: $grid-unit-y * 4;
$margin-base-x: $grid-unit-x * 4;

$themes-base: (
  theme-default: (
    body-bg: $color-new-bg,
    text-color: map-get(map-get($themes, theme-default), color-text-default),
    border-color: map-get(map-get($themes, theme-default), color-border),
    box-shadow: 0 4px 8px $color-grey-rgba-08,
    box-shadow-2: 0 24px 36px $color-grey-rgba-16,
    box-shadow-new: -4px 8px 24px rgba(44, 63, 88, 0.02),
    box-shadow-new-2: 0px 20px 50px rgba(44, 63, 88, 0.15),
    box-shadow-new-hover: 0px 4px 4px rgba(0, 0, 0, 0.25),
    backdrop: $color-grey-1
  ),
  theme-dark: (
    body-bg: $color-new-bg-dt,
    text-color: map-get(map-get($themes, theme-dark), color-text-default),
    border-color: map-get(map-get($themes, theme-dark), color-border),
    box-shadow: none,
    box-shadow-2: none,
    box-shadow-new: none,
    box-shadow-new-2: none,
    box-shadow-new-hover: none,
    backdrop: $color-bg-dt
  )
);
$themes: concat($themes, $themes-base);

// Typography
// -------------------------------------------------------------------------------------

$font-family-proxima: "Proxima Nova", sans-serif;
$font-family-monospace: menlo, monaco, consolas, "Courier New", monospace;
$font-family-base: $font-family-proxima;
$font-family-awesome: "Font Awesome 6 Pro";
$font-family-proxima-sbold: "Proxima Nova SemiBold", sans-serif;

$font-size-base: 14px;
$font-size-large: 16px;
$font-size-small: 12px;
$font-size-extra-small: 10px;

$font-size-h1: 36px;
$font-size-h2: 30px;
$font-size-h3: 24px;
$font-size-h4: 18px;
$font-size-h5: 14px;
$font-size-h6: 12px;

$font-family-awesome-weight: 300;

$font-weight-light: 300;
$font-weight-regular: normal;
$font-weight-medium: 500;
$font-weight-bold: 600;
$line-height-base: 1.7142857143; // 24/14
$line-height-computed: floor(($font-size-base * $line-height-base)); // ~24px

$headings-font-family: inherit;
$headings-font-weight: $font-weight-medium;
$headings-line-height: 1.1;

$blockquote-font-size: ($font-size-base * 1.25);
$page-header-border-color: $gray-lighter;
$dl-horizontal-offset: ceil($grid-unit-y * 22.5);
$dl-options-x: $grid-unit-x * 15;

$themes-type: (
  theme-default: (
    headings-color: map-get(map-get($themes, theme-default), color-new-heading),
    headings-small-color:
      map-get(map-get($themes, theme-default), color-new-body-dark),
    blockquote-border-color:
      map-get(map-get($themes, theme-default), color-text-light),
    blockquote-small-color:
      map-get(map-get($themes, theme-default), color-text-light),
    hr-border: $color-grey-rgba-08
  ),
  theme-dark: (
    headings-color: map-get(map-get($themes, theme-dark), color-new-heading),
    headings-small-color:
      map-get(map-get($themes, theme-dark), color-new-body-dark),
    blockquote-border-color:
      map-get(map-get($themes, theme-dark), color-text-light),
    blockquote-small-color:
      map-get(map-get($themes, theme-dark), color-text-light),
    hr-border: $color-white-rgba-08
  )
);
$themes: concat($themes, $themes-type);

// Paths
// -------------------------------------------------------------------------------------

$image-path: "~@/images";
$fa-font-path: "~@styles/fonts/fontawesome/webfonts";
$font-path: "~@styles/fonts/" !default;
$logo-path: "~@/images/logo.svg";
$icon-font-path: "~@styles/fonts/" !default;
$flag-icon-css-path: "~@/images/flags";
$flag-icon-rect-path: "/4x3";
$flag-icon-square-path: "/1x1";

// Z-indexes
// -------------------------------------------------------------------------------------

$zindex-navbar: 1000;
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-popover: 1060;
$zindex-tooltip: 1070;
$zindex-navbar-fixed: 1030;
$zindex-modal-background: 1030;
$zindex-modal: 1050;
$zindex-sidebar-mobile: 1050;
$zindex-fullscreen: 1070;
$zindex-loader-big: 1090;

//
// Utilities
// -------------------------------------------------------------------------------------

$overflows: auto, hidden, visible;
$positions: static, relative, absolute, fixed, sticky !default;

//
// Components
// -------------------------------------------------------------------------------------

$padding-base-vertical: $grid-unit-y * 2;
$padding-base-horizontal: $grid-unit-x * 2;

$padding-large-vertical: $grid-unit-y * 3;
$padding-large-horizontal: $grid-unit-x * 3;

$padding-small-vertical: $grid-unit-y;
$padding-small-horizontal: $grid-unit-x;

$padding-xs-vertical: ceil($grid-unit-y * 0.5);
$padding-xs-horizontal: ceil($grid-unit-y * 0.5);

$border-radius-base: 4px;
$border-radius-large: $border-radius-base * 2;
$border-radius-small: 3px;

$border-radius-new-large: $border-radius-base * 5;
$border-radius-new-medium: $border-radius-base * 3;
$border-radius-new-small: $border-radius-base * 2;

$border-width: 1px;

// Component Animation
// -------------------------------------------------------------------------------------

$component-animation-duration: 0.35s;

$component-animation-timing: ease;

$transition-fade: opacity 0.15s linear;
$transition-collapse: height 0.35s ease;
$transition-collapse-width: width 0.35s ease;

// Tables
// -------------------------------------------------------------------------------------

$table-cell-padding: $grid-unit-y;
$table-condensed-cell-padding: ceil($grid-unit-y * 0.5);

$table-bg: transparent;

$table-default-padding: ceil($margin-base-x * 0.5);

$themes-tables: (
  theme-default: (
    table-border-color: $color-new-border,
    table-nesting-bg: $color-new-bg,
    table-bg-accent: $color-bg-grey,
    table-bg-hover: $color-new-bg,
    table-bg-active: $color-grey-rgba-04,
    table-bg-active-hover: $color-grey-rgba-08,
    table-bg-grey: $color-new-border,
    table-bg-default: $color-grey-5,
    table-bg-volitile: $color-grey-4
  ),
  theme-dark: (
    table-border-color: $color-new-border-dt,
    table-nesting-bg: transparent,
    table-bg-accent: $color-white-rgba-04,
    table-bg-hover: $color-new-bg-dt,
    table-bg-active: $color-white-rgba-04,
    table-bg-active-hover: $color-white-rgba-08,
    table-bg-grey: $color-new-border-dt,
    table-bg-default: $color-grey-1,
    table-bg-volitile: $color-grey-4
  )
);
$themes: concat($themes, $themes-tables);

// Buttons
// -------------------------------------------------------------------------------------

$btn-font-weight: $font-weight-regular;

$btn-primary-bg: $brand-primary;
$btn-success-bg: $brand-success;
$btn-info-bg: $brand-info;
$btn-warning-bg: $brand-warning;
$btn-danger-bg: $brand-danger;

$btn-border-radius-base: $border-radius-base * 3;

$btn-padding-y: $grid-unit-y;
$btn-line-height: $grid-unit-y * 3;
$btn-height: $btn-padding-y * 2 + $btn-line-height;

$btn-lg-padding-y: ceil($grid-unit-y * 1.5);
$btn-lg-line-height: $grid-unit-y * 3;
$btn-lg-height: $btn-lg-padding-y * 2 + $btn-lg-line-height;

$btn-sm-padding-y: $padding-small-vertical;
$btn-sm-line-height: $grid-unit-y * 2;
$btn-sm-height: $btn-sm-padding-y * 2 + $btn-sm-line-height;

$themes-buttons: (
  theme-default: (
    btn-default-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    btn-default-bg: $color-white,
    btn-default-border:
      map-get(map-get($themes, theme-default), color-new-border),
    btn-default-bg-hover: $color-new-bg,
    btn-default-color-hover:
      map-get(map-get($themes, theme-default), color-new-body-dark),
    btn-default-bg-active: $color-new-bg,
    btn-default-border-active:
      map-get(map-get($themes, theme-default), color-new-border),
    btn-default-bg-active-hover: $color-new-grey,
    btn-default-color-disabled: $color-new-body-light,
    btn-default-no-borders-bg-hover: $color-new-border,
    btn-default-no-borders-bg-active: $color-new-border,
    btn-default-no-borders-bg-active-hover: $color-new-grey,
    btn-link-color:
      map-get(map-get($themes, theme-default), color-new-body-dark),
    btn-link-hover-bg: rgba($color-new-body-dark, 0.04),
    btn-link-active-color:
      map-get(map-get($themes, theme-default), color-new-body-dark),
    btn-link-active-bg: rgba($color-new-body-dark, 0.08),
    btn-link-active-hover-bg: rgba($color-new-body-dark, 0.1),
    btn-link-disabled-bg: rgba($color-new-body-dark, 0.2),
    btn-link-disabled-color:
      map-get(map-get($themes, theme-default), color-new-body-light)
  ),
  theme-dark: (
    btn-default-color:
      map-get(map-get($themes, theme-dark), color-new-body-dark),
    btn-default-bg: $color-new-surface-dt,
    btn-default-border: map-get(map-get($themes, theme-dark), color-border),
    btn-default-bg-hover: $color-new-surface-dt,
    btn-default-color-hover: $color-white,
    btn-default-bg-active: $color-new-surface-dt,
    btn-default-border-active:
      map-get(map-get($themes, theme-dark), color-border),
    btn-default-bg-active-hover: $color-new-grey-dt,
    btn-default-color-disabled: $color-new-body-dark-dt,
    btn-default-no-borders-bg-hover: $color-new-border-dt,
    btn-default-no-borders-bg-active: $color-new-border-dt,
    btn-default-no-borders-bg-active-hover: $color-new-grey-dt,
    btn-link-color: map-get(map-get($themes, theme-dark), color-new-body-dark),
    btn-link-hover-bg: $color-new-surface-dt,
    btn-link-active-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    btn-link-active-bg: $color-new-surface-dt,
    btn-link-active-hover-bg: $color-new-grey-dt,
    btn-link-disabled-bg: $color-new-grey-dt,
    btn-link-disabled-color: $color-new-body-dark-dt
  )
);
$themes: concat($themes, $themes-buttons);

// Forms
// -------------------------------------------------------------------------------------

$input-bg-inverse: transparent;

$input-border-radius: $border-radius-new-medium;
$input-border-radius-large: $input-border-radius;
$input-border-radius-small: $input-border-radius;

$input-border-focus: $brand-primary;

$input-line-height-base: $grid-unit-x * 3;
$input-font-weight: $font-weight-regular;

$input-height-base: ceil($grid-unit-y * 5);
$input-height-large: ceil($grid-unit-y * 6);
$input-height-small: ceil($grid-unit-y * 4);

$input-padding-base-y: ceil(
  ($input-height-base - $input-line-height-base - 2) * 0.5
);
$input-padding-base-x: ceil($grid-unit-x * 2);

$input-padding-sm-y: $grid-unit-y;
$input-padding-sm-x: $padding-base-horizontal;

$input-padding-lg-y: $padding-base-vertical;
$input-padding-lg-x: $padding-base-horizontal;

$form-group-margin-bottom: $grid-unit-y * 2;

$form-select-icon-size: $grid-unit-x * 3;
$form-select-icon-right: $grid-unit-x;

$cursor-disabled: not-allowed;

$form-help-block-margin-top: ceil($grid-unit-y * 0.5);
$form-help-block-margin-bottom: $grid-unit-y;

$input-group-addon-height: $grid-unit-y * 2.5;
$input-group-addon-width: $grid-unit-y * 2;
$input-group-addon-space: $grid-unit-x;

$input-group-lg-addon-height: $grid-unit-y * 3;
$input-group-lg-addon-width: $grid-unit-y * 2.5;
$input-group-lg-addon-space: $grid-unit-x;

$themes-forms: (
  theme-default: (
    legend-color: map-get(map-get($themes, theme-default), color-new-heading),
    legend-border-color: $color-new-border,
    input-color: $color-new-heading,
    input-bg: $color-white,
    input-border: $color-new-border,
    input-color-placeholder: $color-new-body-light,
    input-color-placeholder-inverse: $color-white-rgba-48,
    input-color-placeholder-disabled-inverse: $color-white-rgba-24,
    input-bg-disabled: $color-new-bg,
    form-control-success-text: $brand-success,
    form-control-success-icon: $brand-success,
    form-control-success-bg: rgba($brand-success, 0.06),
    form-control-success-border: $brand-success-light-4,
    form-control-success-border-focus:
      darken(map-get(map-get($themes, theme-default), color-new-border), 10%),
    form-control-warning-text: $brand-warning,
    form-control-warning-icon: $brand-warning,
    form-control-warning-bg: rgba($brand-warning, 0.06),
    form-control-warning-border: $brand-warning-light-4,
    form-control-warning-border-focus:
      darken(map-get(map-get($themes, theme-default), color-new-border), 10%),
    form-control-danger-text: $brand-danger,
    form-control-danger-icon: $brand-danger,
    form-control-danger-bg: rgba($brand-danger, 0.06),
    form-control-danger-border: rgba($brand-danger, 0.24),
    form-control-danger-border-focus:
      darken(map-get(map-get($themes, theme-default), color-new-border), 10%),
    form-select-icon-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    input-group-btn-bg: $color-new-bg,
    input-group-btn-bg-disabled: $color-new-bg,
    input-group-pos-abs-addon-bg: $color-new-bg
  ),
  theme-dark: (
    legend-color: map-get(map-get($themes, theme-dark), color-new-heading),
    legend-border-color: $color-new-border-dt,
    input-color: $color-new-body-light-dt,
    input-bg: transparent,
    input-border: map-get(map-get($themes, theme-dark), color-new-border),
    input-color-placeholder: $color-new-body-dark-dt,
    input-color-placeholder-inverse: $color-white-rgba-48,
    input-color-placeholder-disabled-inverse: $color-white-rgba-60,
    input-bg-disabled: $color-new-bg-dt,
    form-control-success-text:
      map-get(map-get($themes, theme-dark), color-new-heading),
    form-control-success-icon: $brand-success,
    form-control-success-bg: transparent,
    form-control-success-border: rgba($brand-success, 0.24),
    form-control-success-border-focus: rgba($brand-success, 0.4),
    form-control-warning-text:
      map-get(map-get($themes, theme-dark), color-new-heading),
    form-control-warning-icon: $brand-warning,
    form-control-warning-bg: transparent,
    form-control-warning-border: rgba($brand-warning, 0.24),
    form-control-warning-border-focus: rgba($brand-warning, 0.4),
    form-control-danger-text:
      map-get(map-get($themes, theme-dark), color-new-heading),
    form-control-danger-icon: $brand-danger,
    form-control-danger-bg: transparent,
    form-control-danger-border: rgba($brand-danger, 0.24),
    form-control-danger-border-focus: rgba($brand-danger, 0.4),
    form-select-icon-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    input-group-btn-bg: $color-new-bg-dt,
    input-group-btn-bg-disabled: $color-new-bg,
    input-group-pos-abs-addon-bg: $color-new-bg
  )
);
$themes: concat($themes, $themes-forms);

$themes-forms-extra: (
  theme-default: (
    input-group-addon-border-color:
      map-get(map-get($themes, theme-default), input-border)
  ),
  theme-dark: (
    input-group-addon-border-color:
      map-get(map-get($themes, theme-dark), input-border)
  )
);
$themes: concat($themes, $themes-forms-extra);

// Dropdowns
// -------------------------------------------------------------------------------------

$dropdown-border-radius: $border-radius-new-medium;

$dropdown-padding: $grid-unit-y * 1.5;

$dropdown-link-active-color: $brand-primary;
$dropdown-link-active-hover-color: $brand-primary;
$dropdown-link-active-bg: transparent;

$dropdown-arrow-size: ceil($grid-unit-y * 1.5);
$dropdown-arrow-transition-180deg: transform 0.16s ease-out;

$themes-dropdowns: (
  theme-default: (
    dropdown-bg: $color-white,
    dropdown-link-color:
      map-get(map-get($themes, theme-default), color-new-body-dark),
    dropdown-link-hover-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    dropdown-link-hover-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    dropdown-link-active-hover-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    dropdown-link-disabled-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    dropdown-divider-bg:
      map-get(map-get($themes, theme-default), color-new-border),
    dropdown-data-body-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    dropdown-header-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    dropdown-table-header-color:
      map-get(map-get($themes, theme-default), color-new-body-light)
  ),
  theme-dark: (
    dropdown-bg: $color-bg-dt-04,
    dropdown-link-color:
      map-get(map-get($themes, theme-dark), color-new-body-dark),
    dropdown-link-hover-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    dropdown-link-hover-bg: map-get(map-get($themes, theme-dark), color-new-bg),
    dropdown-link-active-hover-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    dropdown-link-disabled-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    dropdown-divider-bg: map-get(map-get($themes, theme-dark), color-new-border),
    dropdown-data-body-bg: map-get(map-get($themes, theme-dark), color-new-bg),
    dropdown-header-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    dropdown-table-header-color:
      map-get(map-get($themes, theme-dark), color-new-body-light)
  )
);
$themes: concat($themes, $themes-dropdowns);

// Media queries breakpoints
// -------------------------------------------------------------------------------------

$screen-xs: 480px;
$screen-xs-min: $screen-xs;

$screen-sm: 768px;
$screen-sm-min: $screen-sm;

$screen-md: 992px;
$screen-md-min: $screen-md;

$screen-lg: 1200px;
$screen-lg-min: $screen-lg;

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);

// Grid system
// -------------------------------------------------------------------------------------

$grid-columns: 12;
$grid-gutter-width: $grid-unit-y * 2;

$grid-float-breakpoint: $screen-md-min;
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);

$displays: none, inline, inline-block, block, table, table-row, table-cell, flex,
  inline-flex;

$grid-breakpoints: (
  xs: 0,
  sm: $screen-xs,
  //480
    md: $screen-sm,
  //768
    lg: $screen-md,
  //992
    xl: $screen-lg//1200
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

$enable-grid-classes: true;

// Container sizes
// -------------------------------------------------------------------------------------

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 940px,
  xl: 1140px
);

@include _assert-ascending($container-max-widths, "$container-max-widths");

// Spacing
// -------------------------------------------------------------------------------------

$spacer: $grid-unit-y * 2;
$spacers: ();
$spacers: map-merge(
  (
    0: 0,
    1: (
      $spacer * 0.25
    ),
    2: (
      $spacer * 0.5
    ),
    3: $spacer,
    4: (
      $spacer * 1.5
    ),
    5: (
      $spacer * 3
    )
  ),
  $spacers
);

// Navbar
// -------------------------------------------------------------------------------------

$navbar-height: ceil($grid-unit-y * 11) - 1;
$navbar-height-mobile: ceil($grid-unit-y * 8);

$navbar-border-radius: 0;
$navbar-padding-horizontal: floor(($grid-gutter-width * 0.5));
$navbar-padding-vertical: (($navbar-height - $line-height-computed) * 0.5);

$navbar-default-bg: transparent;
$navbar-default-line-height: $grid-unit-y * 3;

$navbar-default-link-hover-color: $brand-primary;
$navbar-default-link-hover-bg: transparent;
$navbar-default-link-active-color: $brand-primary;
$navbar-default-link-active-bg: transparent;
$navbar-default-link-disabled-bg: transparent;

$navbar-default-brand-hover-color: $brand-primary;
$navbar-default-brand-hover-bg: transparent;

$themes-navbar: (
  theme-default: (
    navbar-default-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    navbar-default-brand-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    navbar-default-badge-bg: $color-grey-rgba-04,
    navbar-default-badge-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    navbar-default-link-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    navbar-default-link-disabled-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    navbar-default-toggle-border-color: color-new-body-dark,
    navbar-default-toggle-hover-bg: color-new-bg,
    navbar-default-toggle-icon-bar-bg:
      map-get(map-get($themes, theme-default), color-new-bg)
  ),
  theme-dark: (
    navbar-default-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    navbar-default-brand-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    navbar-default-badge-bg: $color-white-rgba-04,
    navbar-default-badge-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    navbar-default-link-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    navbar-default-link-disabled-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    navbar-default-toggle-border-color: color-new-body-dark,
    navbar-default-toggle-hover-bg: color-new-bg,
    navbar-default-toggle-icon-bar-bg:
      map-get(map-get($themes, theme-dark), color-new-bg)
  )
);
$themes: concat($themes, $themes-navbar);

// Navs
// -------------------------------------------------------------------------------------

$nav-line-height: $grid-unit-y * 3;

$nav-link-padding-x: $grid-unit-y * 2.5;

$nav-link-padding: 0 $nav-link-padding-x $grid-unit-y * 2;

$nav-tabs-active-link-hover-color: $brand-primary;
$nav-tabs-active-link-hover-border-color: $brand-primary;

$themes-navs: (
  theme-default: (
    nav-disabled-link-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    nav-disabled-link-hover-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    nav-tabs-border-color: $color-new-border,
    nav-tabs-link-hover-border-color:
      map-get(map-get($themes, theme-default), color-new-body-dark),
    nav-tabs-active-link-hover-border-color: $brand-primary
  ),
  theme-dark: (
    nav-disabled-link-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    nav-disabled-link-hover-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    nav-tabs-border-color: $color-new-border-dt,
    nav-tabs-link-hover-border-color:
      map-get(map-get($themes, theme-dark), color-new-body-dark),
    nav-tabs-active-link-hover-border-color: $brand-primary
  )
);
$themes: concat($themes, $themes-navs);

// Pagination
// -------------------------------------------------------------------------------------

$pagination-active-color: $color-white;
$pagination-active-bg: $brand-primary;

$themes-pagination: (
  theme-default: (
    pagination-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    pagination-bg: map-get(map-get($themes, theme-default), color-new-bg),
    pagination-hover-bg:
      map-get(map-get($themes, theme-default), color-new-border),
    pagination-disabled-bg:
      map-get(map-get($themes, theme-default), color-new-bg)
  ),
  theme-dark: (
    pagination-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    pagination-bg: map-get(map-get($themes, theme-dark), color-new-bg),
    pagination-hover-bg: map-get(map-get($themes, theme-dark), color-new-border),
    pagination-disabled-bg: map-get(map-get($themes, theme-dark), color-new-bg)
  )
);
$themes: concat($themes, $themes-pagination);

// Form and alerts
// -------------------------------------------------------------------------------------

$state-primary-bg: rgba($brand-primary, 0.06);
$state-success-bg: rgba($brand-success, 0.06);
$state-info-bg: rgba($brand-info, 0.06);
$state-warning-bg: rgba($brand-warning, 0.06);
$state-danger-bg: rgba($brand-danger, 0.06);

// Tooltips
// -------------------------------------------------------------------------------------

$tooltip-font-size: $font-size-base;
$tooltip-max-width: $grid-unit-x * 25;
$tooltip-opacity: 1;

$tooltip-arrow-width: $grid-unit-x - 3;
$tooltip-arrow-width-2: $grid-unit-x - 5;

$tooltip-padding-y: $padding-xs-vertical;
$tooltip-padding-x: $padding-small-horizontal;
$tooltip-border-radius: $border-radius-base * 2;

$tooltip-margin: 0;
$tooltip-arrow-height: 6px;

$themes-tooltip: (
  theme-default: (
    tooltip-color: $color-white,
    tooltip-bg: $color-grey-1,
    tooltip-light-bg: $color-white,
    tooltip-light-color:
      map-get(map-get($themes, theme-default), color-text-dark)
  ),
  theme-dark: (
    tooltip-color: $color-bg-dt,
    tooltip-bg: map-get(map-get($themes, theme-dark), color-text-dark),
    tooltip-light-bg: $color-bg-dt-12,
    tooltip-light-color: map-get(map-get($themes, theme-dark), color-text-dark)
  )
);
$themes: concat($themes, $themes-tooltip);
$themes-tooltip-2: (
  theme-default: (
    tooltip-arrow-color: map-get(map-get($themes, theme-default), tooltip-bg),
    tooltip-light-arrow-color:
      map-get(map-get($themes, theme-default), tooltip-light-bg)
  ),
  theme-dark: (
    tooltip-arrow-color: map-get(map-get($themes, theme-dark), tooltip-bg),
    tooltip-light-arrow-color:
      map-get(map-get($themes, theme-dark), tooltip-light-bg)
  )
);
$themes: concat($themes, $themes-tooltip-2);

// Labels
// -------------------------------------------------------------------------------------

$label-primary-bg: $brand-primary;
$label-success-bg: $brand-success;
$label-info-bg: $brand-info;
$label-warning-bg: $brand-warning;
$label-danger-bg: $brand-danger;

$label-line-height: $grid-unit-y * 2;
$label-padding-y: $grid-unit-y * 0.5;
$label-padding-x: $grid-unit-x * 1.5;
$label-font-size: $font-size-small;

$label-line-height-lg: $grid-unit-y * 2;
$label-padding-y-lg: $padding-small-vertical;
$label-padding-x-lg: $padding-base-horizontal;
$label-font-size-lg: $font-size-base;

$label-line-height-xl: $grid-unit-y * 3;
$label-padding-y-xl: $padding-small-vertical;
$label-padding-x-xl: $padding-large-horizontal;
$label-font-size-xl: $font-size-large;

$themes-dropdowns: (
  theme-default: (
    label-default-bg: map-get(map-get($themes, theme-default), color-new-border),
    label-close-color: $color-grey-rgba-16,
    label-close-color-hover: $color-grey-rgba-32,
    label-unselected-border-color: $color-grey-rgba-16,
    label-unselected-bg: $color-white,
    label-unselected-hover-bg: $color-grey-rgba-04,
    label-unselected-hover-border-color: $color-grey-rgba-08,
    label-unselected-close-color: $color-grey-rgba-32,
    label-user-bg: $color-white,
    label-user-border-color: $color-grey-rgba-16,
    label-user-bg-hover: $color-grey-rgba-04,
    label-user-hover-border-color: $color-grey-rgba-08,
    label-user-close-color: $color-grey-rgba-16,
    label-user-close-color-hover: $color-grey-rgba-32,
    label-org-bg: $color-white,
    label-org-border: $color-grey-rgba-16
  ),
  theme-dark: (
    label-default-bg: map-get(map-get($themes, theme-dark), color-new-border),
    label-close-color: $color-white-rgba-32,
    label-close-color-hover: $color-white-rgba-48,
    label-unselected-border-color: $color-white-rgba-16,
    label-unselected-bg: $color-white-rgba-04,
    label-unselected-hover-bg: $color-white-rgba-08,
    label-unselected-hover-border-color: $color-white-rgba-08,
    label-unselected-close-color: $color-white-rgba-32,
    label-user-bg: $color-white-rgba-08,
    label-user-border-color:
      map-get(map-get($themes, theme-dark), color-text-dark),
    label-user-bg-hover: $color-white-rgba-12,
    label-user-hover-border-color:
      map-get(map-get($themes, theme-dark), color-text-dark),
    label-user-close-color: $color-white-rgba-16,
    label-org-bg: $color-bg-dt-12,
    label-org-border: $color-white-rgba-16
  )
);
$themes: concat($themes, $themes-dropdowns);

// Modals
// -------------------------------------------------------------------------------------

$modal-content-padding-y: $grid-unit-y * 3;
$modal-content-padding-x: $grid-unit-y * 3;

$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform 0.3s ease-out;
$modal-scale-transform: scale(1.02);

$modal-footer-margin-between: $grid-unit-y * 2;

$modal-inner-padding: $modal-content-padding-y $modal-content-padding-x;

$modal-dialog-margin: $grid-unit-y * 4;
$modal-dialog-margin-mobile: $grid-unit-y;

$modal-title-line-height: $grid-unit-y * 4;

$modal-backdrop-opacity: 0.8;

$modal-nav-padding-y: $modal-content-padding-y;

$modal-xl: 1300px;
$modal-lg: 1054px;
$modal-md: 600px;
$modal-sm: 400px;

$modal-border-radius: $border-radius-new-large;

$themes-modal: (
  theme-default: (
    modal-backdrop-bg: map-get(map-get($themes, theme-default), backdrop),
    modal-content-bg:
      map-get(map-get($themes, theme-default), color-new-surface),
    modal-inner-border-color:
      map-get(map-get($themes, theme-default), color-new-border)
  ),
  theme-dark: (
    modal-backdrop-bg: map-get(map-get($themes, theme-dark), backdrop),
    modal-content-bg: map-get(map-get($themes, theme-dark), color-new-surface),
    modal-inner-border-color:
      map-get(map-get($themes, theme-dark), color-new-border)
  )
);
$themes: concat($themes, $themes-modal);

// Alerts
// -------------------------------------------------------------------------------------

$alert-padding: ($grid-unit-y * 2 - 2) ($grid-unit-x * 3 - 2);
$alert-border-radius: $border-radius-new-large;
$alert-link-font-weight: bold;

$alert-default-bg: $color-bg;
$alert-default-text: $color-white;
$alert-default-border: $color-bg;
$alert-default-title-color: $color-white;

$alert-primary-bg: $color-white;
$alert-primary-text: $color-text-dark;
$alert-primary-border: $brand-primary;
$alert-primary-title-color: $brand-primary;

$alert-success-bg: $color-white;
$alert-success-text: $color-text-dark;
$alert-success-border: $brand-success;
$alert-success-title-color: $brand-success;

$alert-info-bg: $color-white;
$alert-info-text: $color-text-dark;
$alert-info-border: $brand-info;
$alert-info-title-color: $brand-info;

$alert-warning-bg: $color-white;
$alert-warning-text: $color-text-dark;
$alert-warning-border: $brand-warning;
$alert-warning-title-color: $brand-warning;

$alert-danger-bg: $color-white;
$alert-danger-text: $color-text-dark;
$alert-danger-border: $brand-danger;
$alert-danger-title-color: $brand-danger;

$themes-alert: (
  theme-default: (
    alert-default-bg: $color-bg,
    alert-default-text: $color-white,
    alert-success-bg: $color-white,
    alert-success-text:
      map-get(map-get($themes, theme-default), color-text-dark),
    alert-info-bg: $color-white,
    alert-info-text: map-get(map-get($themes, theme-default), color-text-dark),
    alert-warning-bg: $color-white,
    alert-warning-text:
      map-get(map-get($themes, theme-default), color-text-dark),
    alert-danger-bg: $color-white,
    alert-danger-text: map-get(map-get($themes, theme-default), color-text-dark)
  ),
  theme-dark: (
    alert-default-bg: $color-bg,
    alert-default-text: $color-white,
    alert-success-bg: $color-bg,
    alert-success-text: map-get(map-get($themes, theme-dark), color-text-dark),
    alert-info-bg: $color-bg,
    alert-info-text: map-get(map-get($themes, theme-dark), color-text-dark),
    alert-warning-bg: $color-bg,
    alert-warning-text: map-get(map-get($themes, theme-dark), color-text-dark),
    alert-danger-bg: $color-bg,
    alert-danger-text: map-get(map-get($themes, theme-dark), color-text-dark)
  )
);
$themes: concat($themes, $themes-alert);

// Progress bars
// -------------------------------------------------------------------------------------

$progress-bar-color: $color-white;
$progress-border-radius: $border-radius-base;

$progress-bar-bg: $brand-primary;
$progress-bar-success-bg: $brand-success;
$progress-bar-warning-bg: $brand-warning;
$progress-bar-danger-bg: $brand-danger;
$progress-bar-info-bg: $brand-info;

$themes-progress-bar: (
  theme-default: (
    progress-bg: $color-new-bg
  ),
  theme-dark: (
    progress-bg: $color-new-bg-dt
  )
);
$themes: concat($themes, $themes-progress-bar);

// List group
// -------------------------------------------------------------------------------------

$list-group-border-radius: $border-radius-base * 5;

$list-group-item-line-height: $grid-unit-y * 5;
$list-group-item-padding-x: $grid-unit-x * 3;
$list-group-item-padding-y: $padding-small-vertical;

$themes-list-group: (
  theme-default: (
    list-group-bg: $color-white,
    list-group-border-inner:
      map-get(map-get($themes, theme-default), color-new-border),
    list-group-disabled-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    list-group-disabled-bg:
      map-get(map-get($themes, theme-default), color-new-border),
    list-group-disabled-text-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    list-group-hover-bg: $color-new-bg,
    list-group-active-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-active-bg: map-get(map-get($themes, theme-default), color-new-bg),
    list-group-active-border:
      map-get(map-get($themes, theme-default), color-new-border),
    list-group-active-text-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-link-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-link-hover-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-link-heading-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-light:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-only-icons-color: $color-new-body-dark,
    list-group-only-icons-color-hover: $color-new-heading,
    list-group-only-icons-active-bg: $color-new-bg,
    list-group-only-icons-hover-bg: $color-new-bg,
    list-group-only-icons-badge-color: $color-new-body-dark,
    list-group-only-icons-no-bg-color-hover: $brand-primary
  ),
  theme-dark: (
    list-group-bg: $color-new-surface-dt,
    list-group-border-inner:
      map-get(map-get($themes, theme-dark), color-new-border),
    list-group-disabled-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    list-group-disabled-bg:
      map-get(map-get($themes, theme-dark), color-new-border),
    list-group-disabled-text-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    list-group-hover-bg: $color-new-bg-dt,
    list-group-active-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    list-group-active-bg: map-get(map-get($themes, theme-dark), color-new-bg),
    list-group-active-border:
      map-get(map-get($themes, theme-dark), color-new-border),
    list-group-active-text-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    list-group-link-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    list-group-link-hover-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    list-group-link-heading-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    list-group-light:
      map-get(map-get($themes, theme-default), color-new-heading),
    list-group-only-icons-color: $color-new-body-light-dt,
    list-group-only-icons-color-hover: $color-new-heading-dt,
    list-group-only-icons-active-bg: $color-new-surface-dt,
    list-group-only-icons-hover-bg: $color-new-surface-dt,
    list-group-only-icons-badge-color: $color-bg-dt,
    list-group-only-icons-no-bg-color-hover: $brand-primary
  )
);
$themes: concat($themes, $themes-list-group);

// Panels
// -------------------------------------------------------------------------------------

$panel-padding-x: $grid-unit-x * 3;
$panel-padding-y: $grid-unit-y * 3;
$panel-title-line-height: $grid-unit-y * 4;
$panel-border-radius: $border-radius-new-large;
$panel-bordered-border-height: ceil($grid-unit-y * 0.5);

$panel-padding-lg: $grid-unit-x * 4;
$panel-padding-sm: $grid-unit-x * 2;
$panel-padding-xs: $grid-unit-x;

$panel-group-collapse-icon-size: ceil($grid-unit-x * 1.5);

$themes-panel: (
  theme-default: (
    panel-bg: $color-white,
    panel-border-inner: $color-new-border,
    panel-text: map-get(map-get($themes, theme-default), color-new-body-dark),
    panel-group-transparent-panel-title-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    panel-group-transparent-panel-title-hover-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    panel-group-transparent-panel-title-focus-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    panel-group-transparent-panel-heading-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    panel-group-transparent-list-group-item-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    panel-group-transparent-list-group-item-hover-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    panel-group-transparent-list-group-item-focus-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    panel-group-transparent-collapse-list-group-item-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    panel-group-transparent-icon-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    panel-group-transparent-collapse-list-group-item-hover-bg:
      $color-grey-rgba-04,
    panel-group-transparent-collapse-list-group-item-focus-bg:
      $color-grey-rgba-08,
    panel-station-hover-bg: $color-white,
    panel-station-avatar-border: $color-new-border,
    panel-station-avatar-border-hover: $color-new-border,
    panel-user-hover-bg: $color-white
  ),
  theme-dark: (
    panel-bg: $color-new-surface-dt,
    panel-border-inner: $color-new-border-dt,
    panel-text: map-get(map-get($themes, theme-dark), color-new-body-dark),
    panel-group-transparent-panel-title-color:
      map-get(map-get($themes, theme-dark), color-new-heading),
    panel-group-transparent-panel-title-hover-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    panel-group-transparent-panel-title-focus-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    panel-group-transparent-panel-heading-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    panel-group-transparent-list-group-item-color:
      map-get(map-get($themes, theme-default), color-new-heading),
    panel-group-transparent-list-group-item-hover-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    panel-group-transparent-list-group-item-focus-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    panel-group-transparent-collapse-list-group-item-color:
      map-get(map-get($themes, theme-dark), color-text-dark),
    panel-group-transparent-icon-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    panel-group-transparent-collapse-list-group-item-hover-bg:
      $color-white-rgba-04,
    panel-group-transparent-collapse-list-group-item-focus-bg:
      $color-white-rgba-08,
    panel-station-hover-bg: $color-new-border-dt,
    panel-station-avatar-border: $color-new-border-dt,
    panel-station-avatar-border-hover: $color-new-body-dark-dt,
    panel-user-hover-bg: $color-white-rgba-08
  )
);
$themes: concat($themes, $themes-panel);

// Badges
// -------------------------------------------------------------------------------------

$badge-link-hover-color: $color-white;

$badge-font-weight: $font-weight-medium;
$badge-line-height: $grid-unit-y * 2;
$badge-border-radius: $border-radius-base * 3;
$badge-font-size: $font-size-small;

$badge-padding-x: $grid-unit-x;
$badge-padding-y: $padding-xs-vertical;

$badge-height: $badge-line-height + ($padding-xs-vertical * 2);

// Breadcrumbs
// -------------------------------------------------------------------------------------

$breadcrumb-padding-vertical: $grid-unit-y;
$breadcrumb-padding-horizontal: 0;
$breadcrumb-bg: transparent;
$breadcrumb-color-hover: $brand-primary;
$breadcrumb-separator: "\f054";
$breadcrumb-line-height: $grid-unit-y * 3;

// Carousel
// -------------------------------------------------------------------------------------

$carousel-control-color: $brand-primary;
$carousel-control-width: 15%;
$carousel-control-opacity: 0.5;
$carousel-control-font-size: 20px;

$carousel-indicator-hover-border-color: $brand-primary;

$themes-carousel: (
  theme-default: (
    carousel-caption-color: $color-white,
    carousel-indicator-bg: $color-new-bg,
    carousel-indicator-hover-bg: $color-new-body-dark
  ),
  theme-dark: (
    carousel-caption-color:
      map-get(map-get($themes, theme-dark), color-text-dark),
    carousel-indicator-bg: $color-new-bg-dt,
    carousel-indicator-hover-bg: $color-new-body-dark-dt
  )
);
$themes: concat($themes, $themes-carousel);

// Code
// -------------------------------------------------------------------------------------

$code-color: $brand-danger;

$kbd-color: $color-white;
$kbd-bg: $color-grey-1;
$pre-scrollable-max-height: $grid-unit-y * 3;

$themes-code: (
  theme-default: (
    code-bg: $color-white,
    pre-bg: $color-grey-5,
    pre-color: map-get(map-get($themes, theme-default), color-text-dark),
    pre-border-color: $color-border
  ),
  theme-dark: (
    code-bg: $color-white-rgba-87,
    pre-bg: $color-white-rgba-08,
    pre-color: map-get(map-get($themes, theme-dark), color-text-dark),
    pre-border-color: $color-border
  )
);
$themes: concat($themes, $themes-code);

//
// Plugins
// -------------------------------------------------------------------------------------

// Bootstrap and WebUi Popovers
// -------------------------------------------------------------------------------------

$popover-padding: $grid-unit-y * 1.5;

$popover-min-width: $grid-unit-y * 7;
$popover-min-height: $grid-unit-y * 4;

$popover-arrow-width: $grid-unit-y;
$popover-arrow-outer-width: ($popover-arrow-width + 1);

$popover-border-radius: $border-radius-new-large;

$popover-font-size: $font-size-base;

$popover-close-size: $grid-unit-y * 2;

$popover-z-index: $zindex-popover;
$popover-backdrop-z-index: ($popover-z-index - 1);

$themes-popover: (
  theme-default: (
    popover-bg: $color-white,
    popover-border-color: $color-new-border,
    popover-inner-border-color: $color-new-border,
    popover-fallback-border-color: $color-grey-1,
    popover-box-shadow:
      map-get(map-get($themes, theme-default), box-shadow-new-2),
    popover-arrow-color: $color-white,
    popover-close-color:
      map-get(map-get($themes, theme-default), color-new-body-dark)
  ),
  theme-dark: (
    popover-bg: $color-new-surface-dt,
    popover-border-color: transparent,
    popover-inner-border-color: $color-new-border-dt,
    popover-fallback-border-color: #ccc,
    popover-box-shadow: map-get(map-get($themes, theme-dark), box-shadow-new-2),
    popover-arrow-color: $color-new-surface-dt,
    popover-close-color:
      map-get(map-get($themes, theme-dark), color-new-body-dark)
  )
);
$themes: concat($themes, $themes-popover);

// Gridster
// -------------------------------------------------------------------------------------

$themes-gridster: (
  theme-default: (
    gridster-preview-holder-bg: $color-grey-4
  ),
  theme-dark: (
    gridster-preview-holder-bg: $color-white-rgba-04
  )
);
$themes: concat($themes, $themes-gridster);

// Editor Js
// -------------------------------------------------------------------------------------

$themes-editor-js: (
  theme-default: (
    editor-js-toolbar-bg: $color-bg-dt-white-08,
    editor-js-block-selected: $color-grey-rgba-04
  ),
  theme-dark: (
    editor-js-toolbar-bg: $color-bg-dt-08,
    editor-js-block-selected: $color-white-rgba-08
  )
);
$themes: concat($themes, $themes-editor-js);

// Awesome Bootstrap Checkboxes
// -------------------------------------------------------------------------------------

$abc-font-family-icon: $font-family-awesome;
$abc-fa-var-check: "\f00c";
$abc-check-icon: $abc-fa-var-check;
$abc-border-width: 1px;
$abc-checkbox-size: $grid-unit-y * 2;

$themes-abc-checkboxes: (
  theme-default: (
    abc-checkbox-hover: rgba($color-text-dark, 0.04)
  ),
  theme-dark: (
    abc-checkbox-hover: $color-white-rgba-08
  )
);
$themes: concat($themes, $themes-abc-checkboxes);

//
// Project
// -------------------------------------------------------------------------------------

// Avatar
// -------------------------------------------------------------------------------------

$avatar-xs: $grid-unit-y * 3;
$avatar-sm: $grid-unit-y * 4;
$avatar-md: $grid-unit-y * 5;
$avatar-lg: $grid-unit-y * 6;
$avatar-xl: $grid-unit-y * 8;
$avatar-xxl: $grid-unit-y * 10;
$avatar-xxxl: $grid-unit-y * 20;

$avatar-border-radius-xs: $border-radius-base * 2;
$avatar-border-radius-sm: $border-radius-base * 2;
$avatar-border-radius-md: $border-radius-base * 3;
$avatar-border-radius-lg: $border-radius-base * 4;
$avatar-border-radius-xl: $border-radius-base * 5;
$avatar-border-radius-xxl: $border-radius-base * 7;
$avatar-border-radius-xxxl: $border-radius-base * 12;

$themes-avatar: (
  theme-default: (
    avatar-bg: $color-new-bg
  ),
  theme-dark: (
    avatar-bg: $color-new-bg-dt
  )
);
$themes: concat($themes, $themes-avatar);

// Card
// -------------------------------------------------------------------------------------

$theme-card: (
  theme-default: (
    card-bg: map-get(map-get($themes, theme-default), color-new-surface)
  ),
  theme-dark: (
    card-bg: map-get(map-get($themes, theme-dark), color-new-surface)
  )
);
$themes: concat($themes, $theme-card);

// File
// -------------------------------------------------------------------------------------

$file-block-width: ceil($grid-unit-x * 21.5);
$file-block-height: $grid-unit-y * 15;

$file-block-inline-width: $grid-unit-x * 7;
$file-block-inline-height: $grid-unit-y * 9;

$file-block-inline-sm-width: $grid-unit-x * 5;
$file-block-inline-sm-height: $grid-unit-y * 6;

$file-block-xs-width: $grid-unit-x * 7;
$file-block-xs-height: $grid-unit-y * 9;

$theme-file: (
  theme-default: (
    file-drop-hover-bg: $color-new-bg,
    file-drop-focus-bg: $color-grey-rgba-04,
    file-block-desc-hover: $color-white,
    file-box-default: $color-grey-4,
    file-inline-sm-border: $color-new-border
  ),
  theme-dark: (
    file-drop-hover-bg: $color-new-bg-dt,
    file-drop-focus-bg: $color-white-rgba-08,
    file-block-desc-hover: $color-white-rgba-08,
    file-box-default: $color-white-rgba-12,
    file-inline-sm-border: $color-new-border-dt
  )
);
$themes: concat($themes, $theme-file);

// Image
// -------------------------------------------------------------------------------------

$theme-image: (
  theme-default: (
    image-bg: $color-new-bg
  ),
  theme-dark: (
    image-bg: $color-new-bg-dt
  )
);
$themes: concat($themes, $theme-image);

// Kanban
// -------------------------------------------------------------------------------------

$theme-kanban: (
  theme-default: (
    kanban-column-bg: $color-grey-rgba-04,
    kanban-column-dark-bg: $color-grey-rgba-08,
    kanban-card-border-color: $color-grey-rgba-08,
    kanban-card-bg: $color-white
  ),
  theme-dark: (
    kanban-column-bg: $color-white-rgba-04,
    kanban-column-dark-bg: $color-white-rgba-08,
    kanban-card-border-color: transparent,
    kanban-card-bg: $color-white-rgba-08
  )
);
$themes: concat($themes, $theme-kanban);

// Layout
// -------------------------------------------------------------------------------------

$layout-margin: ceil($grid-unit-y * 3);
$layout-max-width: ceil($grid-unit-x * 122);

$layout-fixed-sidenav-width: $grid-unit-x * 9;
$layout-fixed-subsidenav-width: $grid-unit-x * 31;

$layout-fixed-subsidenav-base-sm-width: $grid-unit-x * 20;

$layout-fixed-subsidenav-sm-width: (
    $layout-fixed-subsidenav-base-sm-width * 0.5
  ) + $layout-fixed-sidenav-width;
$layout-fixed-navbar-height: $navbar-height;
$layout-fixed-navbar-height-mobile: $navbar-height-mobile;
$layout-fixed-padding: $grid-unit-y * 4;
$layout-fixed-padding-mobile: $padding-base-horizontal;

$layout-footer-height: $navbar-height;
$layout-footer-margin: $layout-margin;

$theme-layout: (
  theme-default: (
    layout-fixed-sidebar-bg: $color-white,
    layout-fixed-sidebar-backdrop-bg:
      map-get(map-get($themes, theme-default), backdrop),
    layout-fixed-sidenav-bg: $color-white,
    layout-fixed-sidenav-list-scroll-bg: transparent,
    layout-fixed-sidenav-list-scroll-thumb: $color-new-border,
    layout-fixed-sidenav-language: $color-new-body-light,
    layout-fixed-sidenav-made: $color-new-body-light,
    layout-fixed-sidenav-bottom-line-color: $color-new-border,
    layout-fixed-subsidenav-bg: $color-white,
    layout-fixed-subsidenav-border-color: $color-new-border,
    layout-fixed-subsidenav-scroll-bg: rgba($color-new-border, 0.4),
    layout-fixed-subsidenav-scroll-thumb: $color-new-border,
    layout-fixed-subsidenav-btn-collapse-color: $color-new-body-dark,
    layout-fixed-content-bg: map-get(map-get($themes, theme-default), body-bg),
    layout-fixed-header-bg: map-get(map-get($themes, theme-default), body-bg),
    layout-fixed-navbar-open-bg: $color-white,
    layout-fixed-navbar-border-color: $color-new-border,
    layout-fixed-footer-bg: $color-new-bg
  ),
  theme-dark: (
    layout-fixed-sidebar-bg: $color-bg-dt,
    layout-fixed-sidebar-backdrop-bg:
      map-get(map-get($themes, theme-dark), backdrop),
    layout-fixed-sidenav-bg: $color-new-bg-dt,
    layout-fixed-sidenav-list-scroll-bg: transparent,
    layout-fixed-sidenav-list-scroll-thumb: $color-new-border-dt,
    layout-fixed-sidenav-language: $color-new-body-dark-dt,
    layout-fixed-sidenav-made: $color-new-body-dark-dt,
    layout-fixed-sidenav-bottom-line-color: $color-new-border-dt,
    layout-fixed-subsidenav-bg: $color-new-bg-dt,
    layout-fixed-subsidenav-border-color: $color-new-border-dt,
    layout-fixed-subsidenav-scroll-bg: rgba($color-new-border-dt, 0.4),
    layout-fixed-subsidenav-scroll-thumb: $color-new-border-dt,
    layout-fixed-subsidenav-btn-collapse-color: $color-new-body-dark-dt,
    layout-fixed-content-bg: map-get(map-get($themes, theme-dark), body-bg),
    layout-fixed-header-bg: map-get(map-get($themes, theme-dark), body-bg),
    layout-fixed-navbar-open-bg: $color-new-bg-dt,
    layout-fixed-navbar-border-color: $color-new-border-dt,
    layout-fixed-footer-bg: $color-new-bg-dt
  )
);
$themes: concat($themes, $theme-layout);

// Loader
// -------------------------------------------------------------------------------------

$loader-big-bg: $gray-dark;
$loader-big-animation-delay: 100;

// Map Popover
// -------------------------------------------------------------------------------------

$theme-map-popover: (
  theme-default: (
    map-popover-bg: $color-white
  ),
  theme-dark: (
    map-popover-bg: $color-bg-dt
  )
);
$themes: concat($themes, $theme-map-popover);

// Separator
// -------------------------------------------------------------------------------------

$theme-separator: (
  theme-default: (
    separator-bg: map-get(map-get($themes, theme-default), color-new-border)
  ),
  theme-dark: (
    separator-bg: map-get(map-get($themes, theme-dark), color-new-border)
  )
);
$themes: concat($themes, $theme-separator);

// Story
// -------------------------------------------------------------------------------------

$theme-story: (
  theme-default: (
    story-bg: map-get(map-get($themes, theme-default), panel-bg),
    story-border: map-get(map-get($themes, theme-default), panel-border),
    story-border-width:
      map-get(map-get($themes, theme-default), panel-border-width)
  ),
  theme-dark: (
    story-bg: map-get(map-get($themes, theme-dark), panel-bg),
    story-border: map-get(map-get($themes, theme-dark), panel-border),
    story-border-width:
      map-get(map-get($themes, theme-dark), panel-border-width)
  )
);
$themes: concat($themes, $theme-story);

// Switch
// -------------------------------------------------------------------------------------

$theme-switch: (
  theme-default: (
    switch-disabled-bg: $color-grey-rgba-16,
    switch-default-bg: $color-grey-4,
    switch-thumb-bos-shadow: 0 2px 4px $color-grey-rgba-16
  ),
  theme-dark: (
    switch-disabled-bg: $color-white-rgba-16,
    switch-default-bg: $color-white-rgba-24,
    switch-thumb-bos-shadow: none
  )
);
$themes: concat($themes, $theme-switch);

// Table Panel
// -------------------------------------------------------------------------------------

$theme-table-panel: (
  theme-default: (
    table-panel-striped-link-color: $color-grey-rgba-32
  ),
  theme-dark: (
    table-panel-striped-link-color: $color-white-rgba-32
  )
);
$themes: concat($themes, $theme-table-panel);

// Stepper
// -------------------------------------------------------------------------------------

$stepper-size: ceil($grid-unit-y * 3);
$stepper-title-line-height: $grid-unit-y * 2;
$stepper-line-height: 1px;
$stepper-dot-size: $grid-unit-y;

$theme-stepper: (
  theme-default: (
    stepper-default-border:
      map-get(map-get($themes, theme-default), color-new-border),
    stepper-btn-default-bg:
      map-get(map-get($themes, theme-default), color-new-body-light),
    stepper-btn-default-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    stepper-title-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    stepper-numbered-btn-default-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    stepper-numbered-btn-default-border:
      map-get(map-get($themes, theme-default), color-new-border),
    stepper-numbered-btn-default-color:
      map-get(map-get($themes, theme-default), color-new-body-light),
    stepper-numbered-btn-default-hover-bg:
      map-get(map-get($themes, theme-default), color-new-bg),
    stepper-numbered-btn-default-hover-border:
      map-get(map-get($themes, theme-default), color-new-grey),
    stepper-numbered-btn-active-bg: $brand-primary,
    stepper-numbered-btn-active-color: $color-white,
    stepper-numbered-btn-checked-bg: $brand-success,
    stepper-numbered-btn-checked-color: $color-white
  ),
  theme-dark: (
    stepper-default-border:
      map-get(map-get($themes, theme-dark), color-new-border),
    stepper-btn-default-bg:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    stepper-btn-default-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    stepper-title-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    stepper-numbered-btn-default-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    stepper-numbered-btn-default-border:
      map-get(map-get($themes, theme-dark), color-new-border),
    stepper-numbered-btn-default-color:
      map-get(map-get($themes, theme-dark), color-new-body-light),
    stepper-numbered-btn-default-hover-bg:
      map-get(map-get($themes, theme-dark), color-new-bg),
    stepper-numbered-btn-default-hover-border:
      map-get(map-get($themes, theme-dark), color-new-grey),
    stepper-numbered-btn-active-bg: rgba($brand-primary, 0.16),
    stepper-numbered-btn-active-color: $brand-primary,
    stepper-numbered-btn-checked-bg: rgba($brand-success, 0.16),
    stepper-numbered-btn-checked-color: $brand-success
  )
);
$themes: concat($themes, $theme-stepper);

// Scroll
// -------------------------------------------------------------------------------------

$scroll-width: $grid-unit-y;

$theme-scroll: (
  theme-default: (
    scroll-bg: map-get(map-get($themes, theme-default), color-new-border),
    scroll-thumb: map-get(map-get($themes, theme-default), color-new-grey),
    scroll-bg-alt: $color-grey-rgba-08,
    scroll-thumb-alt: $color-grey-rgba-24
  ),
  theme-dark: (
    scroll-bg: map-get(map-get($themes, theme-dark), color-new-border),
    scroll-thumb: map-get(map-get($themes, theme-dark), color-new-grey),
    scroll-bg-alt: $color-grey-rgba-08,
    scroll-thumb-alt: $color-grey-rgba-24
  )
);
$themes: concat($themes, $theme-scroll);

// Org Chart
// -------------------------------------------------------------------------------------

// Card
// -------------------------------------------------------------------------------------

$theme-org-chart: (
  theme-default: (
    org-chart-border: map-get(map-get($themes, theme-default), panel-border)
  ),
  theme-dark: (
    org-chart-border: map-get(map-get($themes, theme-dark), color-text-default)
  )
);
$themes: concat($themes, $theme-org-chart);