@import '~element-ui/packages/theme-chalk/src/common/var.scss';

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

/* Color
-------------------------- */

$--color-white: #fff;
$--color-gray-100: #f8f9fa;
$--color-gray-200: #e9ecef;
$--color-gray-300: #dee2e6;
$--color-gray-400: #ced4da;
$--color-gray-500: #adb5bd;
$--color-gray-600: #6c757d;
$--color-gray-700: #495057;
$--color-gray-800: #343a40;
$--color-gray-900: #212529;
$--color-black: #000;

$--color-grays: (
  '100': $--color-gray-100,
  '200': $--color-gray-200,
  '300': $--color-gray-300,
  '400': $--color-gray-400,
  '500': $--color-gray-500,
  '600': $--color-gray-600,
  '700': $--color-gray-700,
  '800': $--color-gray-800,
  '900': $--color-gray-900,
);

$--color-blue: #409eff;
$--color-indigo: #6610f2;
$--color-purple: #6f42c1;
$--color-pink: #e83e8c;
$--color-red: #dc3545;
$--color-orange: #f76b1c;
$--color-yellow: #ffc107;
$--color-green: #28a745;
$--color-teal: #20c997;
$--color-cyan: #17a2b8;

/// 主色
// $--color-primary: $--color-blue;
/// 成功
// $--color-success: $--color-green;
/// 警告
// $--color-warning: #ff813c;
/// 危险
// $--color-danger: #fa086d;
/// 主要的
// $--color-text-primary: #333333;
/// 常规的
// $--color-text-regular: #666666;
/// 次要的
// $--color-text-secondary: #999999;
/// 占位文字
// $--color-text-placeholder: #b0b2b6; // #c0c4cc;
$--color-light: $--color-gray-100;
$--color-dark: $--color-gray-800;

$--colors: (
  'blue': $--color-blue,
  'indigo': $--color-indigo,
  'purple': $--color-purple,
  'pink': $--color-pink,
  'red': $--color-red,
  'orange': $--color-orange,
  'yellow': $--color-yellow,
  'green': $--color-green,
  'teal': $--color-teal,
  'cyan': $--color-cyan,
  'white': $--color-white,
  'light': $--color-light,
  'gray': $--color-gray-600,
  'gray-dark': $--color-dark,
  'black': $--color-black,

  'primary': $--color-primary,
  'primary-light-1': $--color-primary-light-1,
  'primary-light-2': $--color-primary-light-2,
  'primary-light-3': $--color-primary-light-3,
  'primary-light-4': $--color-primary-light-4,
  'primary-light-5': $--color-primary-light-5,
  'primary-light-6': $--color-primary-light-6,
  'primary-light-7': $--color-primary-light-7,
  'primary-light-8': $--color-primary-light-8,
  'primary-light-9': $--color-primary-light-9,
);

$--text-colors: (
  'text-primary': $--color-primary,
  'text-success': $--color-success,
  'text-warning': $--color-warning,
  'text-danger': $--color-danger,
  'text-black': $--color-black,
  'text-gray-primary': $--color-text-primary,
  'text-gray-regular': $--color-text-regular,
  'text-gray-secondary': $--color-text-secondary,
  'text-gray-placeholder': $--color-text-placeholder,
  'text-white': $--color-white,
);

$--border-colors: (
  'border-primary': $--color-primary,
  'border-success': $--color-success,
  'border-warning': $--color-warning,
  'border-danger': $--color-danger,
  'border-base': $--border-color-base,
  'border-light': $--border-color-light,
  'border-lighter': $--border-color-lighter,
  'border-extra-light': $--border-color-extra-light,
);

$--background-colors: (
  'bg-primary': $--color-primary,
  'bg-success': $--color-success,
  'bg-warning': $--color-warning,
  'bg-danger': $--color-danger,
  'bg-base': $--background-color-base,
  'bg-white': $--color-white,
  'bg-dark': $--color-dark,
  'bg-transparent': transparent,
);

$--font-family: 'SourceHanSansCN-Medium', 'Helvetica Neue', Helvetica,
  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', sans-serif;

// $--font-family-medium: 'SourceHanSansCN-Medium', $--font-family;
// $--font-family-regular: 'SourceHanSansCN-Regular', $--font-family;

/* Typography
-------------------------- */
/// fontSize|1|Font Size|0
// $--font-size-extra-large: 22px;
/// fontSize|1|Font Size|0
// $--font-size-large: 20px;
/// fontSize|1|Font Size|0
// $--font-size-medium: 18px;
/// fontSize|1|Font Size|0
// $--font-size-base: 16px;
/// fontSize|1|Font Size|0
// $--font-size-small: 14px;

/* Size
-------------------------- */
// $--size-base: 16px;

$--font-sizes: (
  'xl': $--font-size-extra-large,
  'l': $--font-size-large,
  'm': $--font-size-medium,
  'base': $--font-size-base,
  's': $--font-size-small,
  'xs': $--font-size-extra-small,
);

/// 粗的
$--font-weight-bold: 700;

$--font-weights: (
  'primary': $--font-weight-primary,
  'secondary': $--font-weight-secondary,
  'bold': $--font-weight-bold,
);

$--font-size-h1: floor(($--font-size-base * 2.6)); // ~36px
$--font-size-h2: floor(($--font-size-base * 2.15)); // ~30px
$--font-size-h3: ceil(($--font-size-base * 1.7)); // ~24px
$--font-size-h4: ceil(($--font-size-base * 1.25)); // ~18px
$--font-size-h5: $--font-size-base;
$--font-size-h6: ceil(($--font-size-base * 0.85)); // ~12px

$--font-headings: (
  'h1': $--font-size-h1,
  'h2': $--font-size-h2,
  'h3': $--font-size-h3,
  'h4': $--font-size-h4,
  'h5': $--font-size-h5,
  'h6': $--font-size-h6,
);

/* z-index
-------------------------- */
$--zindex-sticky: 100;
$--zindex-absolute: 200;
$--zindex-fixed: 300;

$--displays: none, inline, inline-block, block, table, table-row, table-cell,
  flex, inline-flex;
$--overflows: visible, auto, hidden, scroll, inherit;
$--positions: static, relative, absolute, fixed, sticky;

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

$--spacer: $--font-size-base;

// stylelint-disable-next-line scss/dollar-variable-default
$--spacers: (
  0: 0,
  1: (
    $--spacer * 0.25,
  ),
  2: (
    $--spacer * 0.5,
  ),
  3: $--spacer,
  4: (
    $--spacer * 1.5,
  ),
  5: (
    $--spacer * 3,
  ),
);

/* Scrollbar
--------------------------*/
$--scrollbar-size: 10px;

$--scrollbar-props-map: (
  width: $--scrollbar-size,
  height: $--scrollbar-size,
  radius: 3px,
  // backgroundColor: transparent,
  thumbColor: $--scrollbar-background-color,
  hoverThumbColor: $--scrollbar-hover-background-color,
);

/* Button
-------------------------- */
/// fontSize||Font|1
$--button-font-size: $--font-size-base;
/// padding||Spacing|3
$--button-padding-vertical: 8px;
/// padding||Spacing|3
$--button-padding-horizontal: 16px;

/// color||Color|0
$--button-default-font-color: $--color-text-regular;

/* Dialog
-------------------------- */
/// fontSize||Font|1
$--dialog-title-font-size: $--font-size-large;
/// fontSize||Font|1
$--dialog-content-font-size: $--font-size-base;
/// padding||Spacing|3
$--dialog-padding-primary: 30px;

/* Table
-------------------------- */
$--table-header-background-color: #f5f6fa; // #f9f9f9;