@import '../color/colors.less';

// base prefix
@le-prefix: le;

// base color
@primary-color: @blue;
@info-color: @blue;
@success-color: @green;
@processing-color: @blue;
@error-color: @red;
@highlight-color: @red;
@warning-color: @gold;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;

// base component color
@body-background: #fff;
@component-background: #fff;
@text-color: fade(@black, 65%);
@line-height-base: 1.5;

// font
@font-size-base: 14px;
@font-size-lg: 16px;
@font-size-sm: 12px;

// padding
@padding-lg: 24px; // containers
@padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items

//bg
@background-color-light: hsv(0, 0, 98%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%);

// animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// disable
@disabled-color: fade(#000, 25%);
@disabled-bg: @background-color-base;
@disabled-color-dark: fade(#fff, 35%);

//border
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid;
@border-radius-base: 4px;
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component
@border-color-inverse: @white;

// button
@btn-height-base: 32px;
@btn-height-lg: 40px;
@btn-height-sm: 24px;

@btn-circle-size: @btn-height-base;
@btn-circle-size-lg: @btn-height-lg;
@btn-circle-size-sm: @btn-height-sm;

@btn-square-size: @btn-height-base;
@btn-square-size-lg: @btn-height-lg;
@btn-square-size-sm: @btn-height-sm;

@btn-font-weight: 400;
@btn-border-width: @border-width-base;
@btn-border-style: @border-style-base;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-base;
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@btn-default-color: @text-color;
@btn-default-bg: @component-background;
@btn-default-border: @border-color-base;

@btn-primary-color: #fff;
@btn-primary-bg: @primary-color;
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);

@btn-danger-color: #fff;
@btn-danger-bg: tint(@error-color, 20%);
@btn-danger-border: tint(@error-color, 20%);;

@btn-disable-color: @disabled-color;
@btn-disable-bg: @disabled-bg;
@btn-disable-border: @border-color-base;

@btn-padding-base: 0 @padding-md - 1px;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-base;
@btn-padding-lg: @btn-padding-base;
@btn-padding-sm: 0 @padding-xs - 1px;

@btn-group-border: @primary-color;