//gray color mixed with three colors

@function gray-color($primary, $b-opacity, $g-opacity) {
  $gray-color: #17191b;
  $white-color: #fff;
  $mx1: mix($gray-color, $white-color, $g-opacity);
  $mx2: mix($primary, $mx1, $b-opacity);
  @return $mx2;
}

//primary color mixed with two colors

@function primary-color($primary, $b-opacity, $pattern) {
  $gray-color: #17191b;
  $white-color: #fff;
  $mx: if(
    $pattern == 'dk',
    mix($primary, $gray-color, $b-opacity),
    mix($primary, $white-color, $b-opacity)
  );
  @return $mx;
}

//
//--------- colors -----------
//

$white: #fff;
$black: #000;

//series of primary
$brand-primary: #0B82FF !default;
$primary-dark-80: primary-color($brand-primary, 80%, 'dk');
$primary-light-80: primary-color($brand-primary, 80%, 'lt');
$primary-light-50: primary-color($brand-primary, 50%, 'lt');
$primary-light-10: primary-color($brand-primary, 10%, 'lt');

//series of gray
$gray-3: gray-color($brand-primary, 3%, 3%);
$gray-4: gray-color($brand-primary, 3%, 6%);
$gray-5: gray-color($brand-primary, 5%, 10%);
$gray-6: gray-color($brand-primary, 6%, 15%);
$gray-7: gray-color($brand-primary, 8%, 20%);
$gray-8: gray-color($brand-primary, 10%, 30%);
$gray-9: #333; // 文本深色色
$gray-10: #666; // 文本色
$gray-11: #999; // 文本浅色 placeholder
$gray-12: rgba(0, 0, 0, 0.15); // 边框色
$gray-c: #ccc; // 输入框内提示文本

// Reassign color vars to semantic color scheme
$brand-success: #79C95B !default;
$brand-info: #0B82FF !default;
$brand-warning: #FFB717 !default;
$brand-danger: #FF3F3B !default;
$brand-assist: #7880f1 !default;
$brand-inverse: $gray-9 !default;

// bg-color
$bg-color: #F5F5F5;
$black-50: rgba(0, 0, 0, 0.5);
$black-80: rgba(0, 0, 0, 0.8); // 用于页面浮层背景
$gray-seg: #E5E5E5; // 分割线


//color status
$color-status: (
  primary: $brand-primary,
  success: $brand-success,
  info: $brand-info,
  warning: $brand-warning,
  danger: $brand-danger,
  assist: $brand-assist
);