@import "./globals";

/*BEM*/
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

/*mask*/
$clr-mask: rgba($clr-mask-color, 0.7);

/*shadow*/
$clr-projection: box-shadow 0 2px 8px rgba($clr-projection-color, 0.1);

/*font*/
$font-family: "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans TC","WenQuanYi Micro Hei", "sans-serif";
$font-12: 12px;
$font-14: 14px;
$font-16: 16px;
$font-18: 18px;
$font-20: 20px;
$font-24: 24px;
$font-32: 32px;

$font-20-lineheight: 30px;
$font-18-lineheight: 28px;
$font-16-lineheight: 24px;
$font-14-lineheight: 22px;
$font-12-lineheight: 20px;

$font-weight-regular: 400;
$font-weight-medium: 600;

/*radius*/
$border-radius: 4px;

/*gap*/
$page-gap: .1px;

$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;

$breakpoints: (
  'xs' : (max-width: $sm - 1),
  'sm' : (min-width: $sm),
  'md' : (min-width: $md),
  'lg' : (min-width: $lg),
  'xl' : (min-width: $xl)
);
$gap: 24px;
$gap-secondary: 20px;
$gap-third: 16px;
$gap-fourth: 12px;
$gap-fifth: 4px;

:export {
  appPrefix: $prefix;
  fontFamily: $font-family;
  mainClor: {
    clr_main01: $clr-main01-color;
    clr_main02: $clr-main02-color;
    clr_main03: $clr-main03-color;
    clr_main04: $clr-main04-color;
  }
  subColor: {
    clr_sub_color: $clr-sub-color;
    clr_success: $clr-success-color;
    clr_warning: $clr-warning-color;
    clr_error: $main-color-16;
  }
  normalColor: {
    clr_btn_main_left: $clr-btn-main-left-color;
    clr_btn_main_right: $clr-btn-main-right-color;
    clr_font_title: $clr-font-title-color;
    clr_font_text: $clr-font-text-color;
    clr_font_describe: $clr-font-describe-color;
    clr_font_tips: $clr-font-tips-color;
    clr_font_btn01: $clr-font-btn01-color;
    clr_font_btn2: $clr-font-btn2-color;
    clr_divider: $clr-divider-color;
    clr_border: $clr-border-color;
    clr_icon: $clr-icon-color;
    clr_uneditable: $clr-uneditable-color;
    clr_bg_page: $clr-bg-page-color;
    clr_bg_content: $clr-bg-content-color;
    clr_mask: $clr-mask-color;
    clr_projection: $clr-projection-color;
  }
  colorPanel: {
    main_color_01: $main-color-01;
    main_color_18: $main-color-18;
    main_color_02: $main-color-02;
    main_color_03: $main-color-03;
    main_color_04: $main-color-04;
    main_color_05: $main-color-05;
    main_color_06: $main-color-06;
    main_color_07: $main-color-07;
    main_color_08: $main-color-08;
    main_color_09: $main-color-09;
    main_color_10: $main-color-10;
    main_color_11: $main-color-11;
    main_color_12: $main-color-12;
    main_color_13: $main-color-13;
    main_color_14: $main-color-14;
    main_color_15: $main-color-15;
    main_color_16: $main-color-16;
  }
}