/**
 * Entry of basic styles
 */

@import './var';
@import './normalize';
@import './ellipsis';
@import './clearfix';
@import './hairline';
@import './animation';

@qz-color-primary: #0189f9;
@qz-color-white: #ffffff;
@qz-color-black: #000000;
@qz-color-background: #f2f2f4;
@qz-border-color: #e5e5e5;

@qz-color-text-primary: #333333;
@qz-color-text-regular: #666666;
@qz-color-text-secondary: #999999;
@qz-color-text-placeholder: #b2b2b2;

@qz-color-success: #41b29c;
@qz-color-danger: #f85352;
@qz-color-warning: #ffa400;
@qz-color-link: #646566;

@typeMap: {
  primary: @qz-color-primary;
  danger: @qz-color-danger;
  success: @qz-color-success;
  warning: @qz-color-warning;
};

:root {
  --color-black: @qz-color-black;
  --color-white: @qz-color-white;
  // 主色
  --color-primary: @qz-color-primary;

  // 背景色
  --color-background: @qz-color-background;
  // 边框色
  --border-color: @qz-border-color;
  // 文字色
  --text-color-primary: @qz-color-text-primary;
  --text-color-regular: @qz-color-text-regular;
  --text-color-secondary: @qz-color-text-secondary;
  --text-color-placeholder: @qz-color-text-placeholder;

  // 衍生色
  each(@typeMap, {
    --color-@{key}: @value;
    // --color-@{key}-light: lighten(@value, 10%);
    --color-@{key}-light: rgba(@value,.8);
    --color-@{key}-dark: darken(@value, 10%);
    --gradient-@{key}: linear-gradient(to bottom,rgba(@value, 0.6), @value);
  });

  // 其他色
  --toas-background-color: fade(@qz-color-black, 70%);
  --calendar-month-mark-color: fade(@qz-color-background, 80%);
  --dropdown-menu-box-shadow: fade(@qz-color-text-regular, 12);
  --uploader-mask-background-color: fade(@qz-color-text-primary, 88%);
  --number-keyboard-button-background-color-darken: darken(
    @qz-color-primary,
    10%
  );
}