// Layout Gutter
@layout-gutter: 8px;

@sm:    @layout-gutter;
@md:    @layout-gutter * 2;
@lg:    @layout-gutter * 3;

@grid-breakpoints:
    xs @screen-xs,
    sm @screen-sm,
    md @screen-md,
    lg @screen-lg,
    xl @screen-xl,
;

// spaceing
@spacings:
    0  0,
    sm @sm,
    md @md,
    lg @lg
;

// type
@ul-ol-margin:      18px;

// position
@zindex-base:       @zindex-back-top - 1;
@zindex-fixed:      @zindex-base;

// 文本
@text-sm:       @font-size-base + 0; // 12px
@text-md:       @font-size-base + 2; // 14px
@text-lg:       @font-size-base + 4; // 16px

// icon
@icon-sm:       @font-size-base * 2; // 24px
@icon-md:       @font-size-base * 4; // 48px
@icon-lg:       @font-size-base * 6; // 72px

// 宽度
@widths:
    sm @layout-gutter * 20, // 160px
    md @layout-gutter * 30, // 240px
    lg @layout-gutter * 40  // 320px
;

// 圆角
@border-radius-md:       @border-radius-base; // 4px
@border-radius-lg:       @border-radius-base + 2px; // 6px

@muted-color:  @grey-7;

// Colors
@white:     #fff;
@black:     #000;
// teal
@teal-1:  color(~`colorPalette("@{teal-6}", 1)`);
@teal-2:  color(~`colorPalette("@{teal-6}", 2)`);
@teal-3:  color(~`colorPalette("@{teal-6}", 3)`);
@teal-4:  color(~`colorPalette("@{teal-6}", 4)`);
@teal-5:  color(~`colorPalette("@{teal-6}", 5)`);
@teal-6:  #20C997;
@teal-7:  color(~`colorPalette("@{teal-6}", 7)`);
@teal-8:  color(~`colorPalette("@{teal-6}", 8)`);
@teal-9:  color(~`colorPalette("@{teal-6}", 9)`);
@teal-10: color(~`colorPalette("@{teal-6}", 10)`);
// grey
@grey-1:  color(~`colorPalette("@{grey-6}", 1)`);
@grey-2:  color(~`colorPalette("@{grey-6}", 2)`);
@grey-3:  color(~`colorPalette("@{grey-6}", 3)`);
@grey-4:  color(~`colorPalette("@{grey-6}", 4)`);
@grey-5:  color(~`colorPalette("@{grey-6}", 5)`);
@grey-6:  #bfbfbf;
@grey-7:  color(~`colorPalette("@{grey-6}", 7)`);
@grey-8:  color(~`colorPalette("@{grey-6}", 8)`);
@grey-9:  color(~`colorPalette("@{grey-6}", 9)`);
@grey-10: color(~`colorPalette("@{grey-6}", 10)`);

@color-light-position:      2;
@color-basic-position:      3;
@color-dark-position:       4;
@color-no-list:             1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

@colors:
    red      @red-5      @red-6     @red-7,
    green    @green-5    @green-6   @green-7,
    blue     @blue-5     @blue-6    @blue-7,
    pink     @pink-5     @pink-6    @pink-7,
    orange   @orange-5   @orange-6  @orange-7,
    purple   @purple-5   @purple-6  @purple-7,
    yellow   @yellow-5   @yellow-6  @yellow-7,
    cyan     @cyan-5     @cyan-6    @cyan-7,
    teal     @teal-5     @teal-6    @teal-7,
    grey     @grey-5     @grey-6    @grey-7;

// Grey patch
@greyColorer:
    lighter @grey-3,
    darker  @grey-9
;

// Alias
@aliasColors:
    primary    blue,
    success    green,
    error      red,
    warning    yellow
;

// masonry
@masonry-column-gap:  @layout-gutter * 2;

// type
// ==========

// font-size
// https://ant.design/docs/spec/font-cn#字号
@font-size-large:         @font-size-base + 8;  // 20px
@font-size-small:         @font-size-base;      // 12px

@h1-font-size:            @font-size-base + 20; // 32px
@h2-font-size:            @font-size-base + 12; // 24px
@h3-font-size:            @font-size-base + 8;  // 20px
@h4-font-size:            @font-size-base + 4;  // 16px
@h5-font-size:            @font-size-base + 2;  // 14px
@h6-font-size:            @font-size-base;      // 12px

// Code
@enable-all-colors:           true;
@code-border-color:           #eee;
@code-bg:                     #f7f7f7;

// Modal
@modal-lg:                    900px;
@modal-md:                    500px;
@modal-sm:                    300px;

// Badges
@badge-color:                 @white;
@badge-font-size:             @font-size-base;
@badge-padding:               0 8px;

// List group
@list-group-bg:                  @white;
@list-group-border-color:        @border-color-split;
@list-group-border-width:        1px;
@list-group-border-radius:       @border-radius-md;

@list-group-item-padding-y:      @layout-gutter;
@list-group-item-padding-x:      @layout-gutter * 2;

@list-group-hover-bg:            @grey-1;
@list-group-active-color:        @white;
@list-group-active-bg:           @primary-color;
@list-group-active-border-color: @list-group-active-bg;

@list-group-action-color:        @grey-7;
@list-group-action-hover-color:  @list-group-action-color;

@list-group-disabled-color:      @grey-6;
@list-group-disabled-bg:         @list-group-bg;

@list-group-action-active-color: @grey-9;
@list-group-action-active-bg:    @grey-2;

// Alain
// =========LAYOUTS=========
@zindex:                    @zindex-base;
@layout-ease:               cubic-bezier(.25, 0, .15, 1);
@header-hg:                 64px;
@header-bg:                 @primary-color;
@header-padding:            @layout-gutter * 2;
@header-search-enabled:     true;
@header-search-height:      34px;

@aside-wd:                  200px;
@aside-bg:                  #fff;

@aside-nav-fs:                              14px;
@aside-nav-padding-top-bottom:              @layout-gutter;
@aside-nav-text-color:                      @text-color;
@aside-nav-text-hover-color:                @primary-color;
@aside-nav-group-text-color:                @text-color-secondary;
@aside-nav-selected-text-color:             @primary-color;
@aside-nav-selected-bg:                     #fcfcfc;
@aside-nav-item-height:                     38px;
@aside-collapsed-wd:                        @layout-gutter * 8;
@aside-collapsed-nav-fs:                    24px;

@content-heading-bg:                        #fafbfc;
@content-heading-border:                    #DFE3E5;
@content-padding:                           @layout-gutter * 3;
@content-bg:                                #f5f7fa;

// =========COMPONENTS=========
// quick menu
@quick-menu-width:          200px;
@quick-menu-bg:             #fff;
@quick-menu-border-width:   1px;
@quick-menu-border-color:   #ddd;
@quick-menu-top:            120px;
@quick-menu-ctrl-hw:        50px;
// placeholder
@placeholder-margin-vertical:                   15px;
@placeholder-padding:                           20px;
@placeholder-border:                            #ddd;
@placeholder-background:                        #fafafa;
@placeholder-color:                             #444;
@placeholder-large-padding-vertical:            80px;

// track control state of visual feedback
@form-state-visual-feedback-enabled: false;
// search-form
@search-form-bg:        #fbfbfb;
@search-form-radius:    4px;
// table
@nz-table-img-radius:          4px;
@nz-table-img-margin-right:    4px;
@nz-table-img-max-height:      32px;
@nz-table-img-max-width:       32px;
@simple-table-bc:              #fff;
@simple-table-pagination-jc:   flex-end;
// fullscreen
@fullscreen-bg:                #333;

// =========Experimental=========
// =========Experimental=========
// =========Experimental=========
// --preserveWhitespaces: false
@preserve-white-spaces-enabled:     true;
// --focusing ng-zorro-antd COMPONENTS
@focusing-enabled:                  false;
@nz-font-size:                      14px;
@nz-patch-line-height:              1.6;

@focusing-full-color-enabled:       false;

@focusing-a-color-enabled:          false;
@focusing-btn-color-enabled:        false;
@focusing-radio-color-enabled:      false;
@focusing-checkbox-color-enabled:   false;
@focusing-switch-color-enabled:     false;
@focusing-dropdown-color-enabled:   false;
@focusing-tag-color-enabled:        false;
@focusing-input-color-enabled:      false;
@focusing-select-color-enabled:     false;
@focusing-picker-color-enabled:     false;
@focusing-page-color-enabled:       false;
@focusing-slider-color-enabled:     false;
@focusing-spin-color-enabled:       false;
@focusing-tabs-color-enabled:       false;