//
// Variables
// --------------------------------------------------


// Scaffolding

@root-font-size:          20px;
@rem:                     (1/20rem);
@text-color:              @color-fore;
@page-background-color:   @color-gray-pale;
@link-color:              inherit;


// Font

@font-family-sans-serif:  'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
@font-family-headings:    inherit;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          (14*@rem);
@font-size-title:         (16*@rem);
@font-size-large:         (18*@rem);
@font-size-small:         (12*@rem);

@font-size-h1:            (24*@rem);
@font-size-h2:            (20*@rem);
@font-size-h3:            (18*@rem);
@font-size-h4:            (16*@rem);
@font-size-h5:            (14*@rem);
@font-size-h6:            (12*@rem);

@line-height-base:        1.428571429; // 2/1.4
@line-height-computed:    (20*@rem);
@line-height-large:       1.3333333; // 24px
@line-height-small:       1.5;       // 18px

@headings-font-family:    @font-family-headings;
@headings-font-weight:    bold;
@headings-line-height:    1.1;
@headings-color:          inherit;

@small-font-size:         85.71428571%;


// Dividers

@divider-color:             rgba(0,0,0,.1);
@divider-width:             (1*@rem);


// Borders

@border-color:              @divider-color;
@border-color-solid:        @color-gray-light;
@border-width:              @divider-width;

@border-radius-base:        (3*@rem);
@border-radius-large:       (6*@rem);
@border-radius-small:       (2*@rem);


// Spaces
//
// Include margins and paddings

@space:                     (20*@rem);      // 20px default
@space-sm:                  (@space / 2);   // 10px default
@space-xs:                  (@space / 4);   // 5px  default
@space-lg:                  (@space * 1.5); // 30px default
@space-xl:                  (@space * 2);   // 40px default

@padding-base-vertical:     @space-sm;
@padding-base-horizontal:   @space-sm;

@padding-large-vertical:    @space;
@padding-large-horizontal:  @space;

@padding-small-vertical:    @space-xs;
@padding-small-horizontal:  @space-xs;

@padding-xs-vertical:       (@space/10); // 2px
@padding-xs-horizontal:     (@space/5);  // 4px


// Media queries breakpoints

@screen-phone:              (480*@rem);
@screen-tablet:             (768*@rem);
@screen-desktop:            (992*@rem);
@screen-wide-desktop:       (1200*@rem);


// Z-index

@zindex-navbar:             1000;
@zindex-dropdown:           1000;
@zindex-popover:            1060;
@zindex-tooltip:            1070;
@zindex-affix:              1030;
@zindex-display-backdrop:   1040;
@zindex-display-layer:      1050;
@zindex-navbar-fixed:       1030;
@zindex-modal-background:   1040;
@zindex-page:               1050;
@zindex-modal:              1050;


// Skins

@muted-opacity:             .5;
@muted-dark-opacity:        .25;
@muted-light-opacity:       .75;

@blur-value:                (10*@rem);
@blur-value-sm:             (@blur-value / 2);
@blur-value-lg:             (@blur-value * 2);

@shadow-divider:            inset 0 (-(1*@rem)) 0 @divider-color;
@shadow-divider-top:        inset 0 (1*@rem) 0 @divider-color;
@shadow-divider-outside:    0 (1*@rem) 0 @divider-color;
@shadow-0:                  none;
@shadow-1:                  rgba(0, 0, 0, .05) 0 (1*@rem) (4*@rem), rgba(0, 0, 0, .12) 0 (1*@rem) (2*@rem);
@shadow-2:                  rgba(0, 0, 0, .12) 0 (1*@rem) (6*@rem), rgba(0, 0, 0, .15) 0 (1*@rem) (4*@rem);
@shadow-3:                  rgba(0, 0, 0, .15) 0 (3*@rem) (10*@rem), rgba(0, 0, 0, .25) 0 (3*@rem) (10*@rem);
@shadow-4:                  rgba(0, 0, 0, .188235) 0 (10*@rem) (30*@rem), rgba(0, 0, 0, .227451) 0 (6*@rem) (10*@rem);
@shadow-1-top:              rgba(0, 0, 0, .05) 0 -(1*@rem) (4*@rem), rgba(0, 0, 0, .12) 0 -(1*@rem) (2*@rem);
@shadow-2-top:              rgba(0, 0, 0, .12) 0 -(1*@rem) (6*@rem), rgba(0, 0, 0, .15) 0 -(1*@rem) (4*@rem);
@shadow-3-top:              rgba(0, 0, 0, .15) 0 -(3*@rem) (10*@rem), rgba(0, 0, 0, .25) 0 -(3*@rem) (10*@rem);
@shadow-4-top:              rgba(0, 0, 0, .188235) 0 -(10*@rem) (30*@rem), rgba(0, 0, 0, .227451) 0 -(6*@rem) (10*@rem);

@state-disabled-opacity:     .5;
@state-cover-hover-color:    rgba(0,0,0,.07);
@state-cover-active-color:   rgba(0,0,0,.09);
@state-cover-focus-color:    rgba(0,0,0,.07);
@state-cover-hover-opacity:  1;
@state-cover-active-opacity: 1;
@state-cover-focus-opacity:  1;
@state-scale-from:           .6; // default 0.6
@state-active-scale:         .95; // default 0.6

@arrow-size:                (8*@rem);


// Icon

@icon-font-path:            "../fonts";
@icon-font-size:            14*@rem;
@icon-border-color:         @color-gray-light;
@icon-muted-color:          @color-gray-light;
@icon-light-color:          @color-light;
@icon-dark-color:           @color-dark;
@icon-font-file-name:       zenicon;
@icon-font-name:            ZenIcon;
@icon-font-version:         "1.3.0";


// Buttons

@btn-font-weight:           normal;
@btn-size:                  (30*@rem);
@btn-size-lg:               (40*@rem);
@btn-size-sm:               (24*@rem);
@btn-size-xs:               (20*@rem);


// Avatar

@avatar-size:               (30*@rem);
@avatar-size-lg:            (40*@rem);
@avatar-size-sm:            (20*@rem);
@avatar-size-xl:            (70*@rem);


// List

@list-background-color:     @color-back;
@list-group-space:          @space;
@list-nested-group-margin:  @space-xl;


// Animation

@animation-speed-normal:    0.4s;
@animation-speed-fast:      0.2s;
@animation-speed-slow:      0.8s;
@animation-type:            cubic-bezier(0.175,.885,.32,1);


// Forms

@input-border-color:        #ccc;