$dark-bg-color-base: rgb(29, 59, 93) !default; // #1D3B5D
$dark-bg-color-light-1: lighten($dark-bg-color-base, 5%);
$dark-bg-color-light-2: lighten($dark-bg-color-base, 10%);
$dark-bg-color-light-3: lighten($dark-bg-color-base, 15%);
$dark-bg-color-dark: darken($dark-bg-color-base, 5%);
$dark-bg-color-base-alpha: transparentize($dark-bg-color-base, 0.1);

$dark-mixed-color: #ffffff !default;

$dark-text-color-primary: mix($dark-bg-color-base, $dark-mixed-color, 2%);
$dark-text-color-regular: mix($dark-bg-color-base, $dark-mixed-color, 5%);
$dark-text-color-secondary: mix($dark-bg-color-base, $dark-mixed-color, 10%);
$dark-text-color-placeholder: mix($dark-bg-color-base, $dark-mixed-color, 15%);
$dark-text-color-disabled-base: mix($dark-bg-color-base, $dark-mixed-color, 20%);

$dark-border-color-base: mix($dark-bg-color-base, $dark-mixed-color, 50%);
$dark-border-color-light: mix($dark-bg-color-base, $dark-mixed-color, 55%);
$dark-border-color-lighter: mix($dark-bg-color-base, $dark-mixed-color, 60%);
$dark-border-color-extra-light: mix($dark-bg-color-base, $dark-mixed-color, 65%);

.bg-transparent {
  background-color: transparent !important;
}

.element-plus-dark {
  --dark-bg-color-base: #{$dark-bg-color-base};
  --dark-bg-color-light-1: #{$dark-bg-color-light-1};
  --dark-bg-color-light-2: #{$dark-bg-color-light-2};
  --dark-bg-color-light-3: #{$dark-bg-color-light-3};
  --dark-bg-color-base-alpha: #{$dark-bg-color-base-alpha};

  --el-bg-color: #{$dark-bg-color-light-2};

  --el-border-color-hover: var(--el-text-color-placeholder);
  --el-border-base: var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base);

  --el-fill-base: var(--dark-bg-color-light-1);
  --el-fill-color-light: var(--dark-bg-color-light-2);
  --el-text-color-disabled-base: #{$dark-text-color-disabled-base};

  --el-text-color-primary: #{$dark-text-color-primary};
  --el-text-color-regular: #{$dark-text-color-regular};
  --el-text-color-secondary: #{$dark-text-color-secondary};
  --el-text-color-placeholder: #{$dark-text-color-placeholder};

  --el-border-color-base: #{$dark-border-color-base};
  --el-border-color-light: #{$dark-border-color-light};
  --el-border-color-lighter: #{$dark-border-color-lighter};
  --el-border-color-extra-light: #{$dark-border-color-extra-light};

  --el-disabled-bg-color: #{$dark-bg-color-dark};

  color: var(--el-text-color-regular);
}