// Prefix
@css-prefix: we-;
@css-prefix-icon-font: we-icon;

/* Layout */
@page-content-width: 1140px;
@page-content-height: 100%;
@page-header-width: @page-content-width;
@page-header-height: 80px;
@page-header-opacity: 50%;
@page-header-color: @color-white;
@page-logo-font-size: 26px;
@page-logo-text-color: #458bca;

/* Font */
@font-path: './src/fonts';
@font-size-default: 14px;
@font-size-small: 16px;
@font-size-large: 18px;
@font-size-mini: 13px;
@font-weight-primary: 500;

/* Line Height */
@line-height-default: 24px;
@line-height-small: 18px;
@line-height-large: 32px;
@line-height-mini: 16px;

/* Colors */
@color-white: #ffffff;
@color-black: #000000;

@color-text-1: #333333;
@color-text-2: #666666;
@color-text-3: #999999;
@color-text-4: #aaaaaa;
@color-text-5: #bbbbbb;
@color-text-6: #cccccc;
@color-text-7: #dddddd;

@color-default: #F3F3F3;
@color-disable: #f0f0f0;
@color-text-disable: #bbbbbb;
@color-primary: #3498DB;
@color-info: #777777;
@color-success: #27AE60;
@color-warning: #F39C12;
@color-danger: #E74C3C;

@color-primary-light-1: tint(@color-primary, 10%);
@color-primary-light-2: tint(@color-primary, 20%);
@color-primary-light-3: tint(@color-primary, 30%);
@color-primary-light-4: tint(@color-primary, 40%);
@color-primary-light-5: tint(@color-primary, 50%);
@color-primary-light-6: tint(@color-primary, 60%);
@color-primary-light-7: tint(@color-primary, 70%);
@color-primary-light-8: tint(@color-primary, 80%);
@color-primary-light-9: tint(@color-primary, 90%);

@color-default-light: tint(@color-default, 80%);
@color-info-light: tint(@color-primary, 80%);
@color-success-light: tint(@color-success, 80%);
@color-warning-light: tint(@color-warning, 80%);
@color-danger-light: tint(@color-danger, 80%);

/* Link */
@color-link: @color-text-2;
@color-link-hover: @color-primary;
@color-link-active: tint(@color-primary, 30%);
@color-link-selected: tint(@color-primary, 10%);

@selected-color: fade(@color-primary, 90%);
@tooltip-color: #fff;
@subsidiary-color: #80848f;
@rate-star-color: #f5a623;
@border-color: #e5e5e5e;

/* Background color */
@background-color-base: #f7f7f7; // base
@background-color-white: #ffffff;

/* Border color */
@border-color-base: #e5e5e5; // outside
@border-color-split: #dddddd; // inside

/* Scrollbar */
@scrollbar-width: 8px;
@scrollbar-height: 8px;
@scrollbar-radius: 4px;
@scrollbar-track-color: #f7f7f7;
@scrollbar-color: #e0e0e0;
@scrollbar-hover-color: tint(@scrollbar-color, 30%);
@scrollbar-active-color: tint(@scrollbar-color, 10%);

/* Animation */
@animation-time: .3s;
@transition-time: .2s;
@ease-in-out: ease-in-out;

/* Border Radius */
@border-radius-default: 4px;
@border-radius-small: 10px;
@border-radius-large: 20px;
@border-radius-mini: 2px;
@border-radius-all: 100%;

/* Button */
@button-font-weight: normal;
@button-spacing: 8px;

@button-default-border-radius: 4px;
@button-default-font-size: 14px;
@button-default-padding: 10px 15px;

@button-large-border-radius: 4px;
@button-large-font-size: 16px;
@button-large-padding: 12px 15px;

@button-small-border-radius: 3px;
@button-small-font-size: 14px;
@button-small-padding: 8px 12px;

@button-mini-border-radius: 3px;
@button-mini-font-size: 12px;
@button-mini-padding: 7px 10px;

@button-text-default-font-size: 14px;
@button-text-default-padding: 10px 0;

@button-text-large-font-size: 16px;
@button-text-large-padding: 12px 0;

@button-text-small-font-size: 14px;
@button-text-small-padding: 7px 0;

@button-text-mini-font-size: 12px;
@button-text-mini-padding: 5px 0;

@button-disable-color: @color-text-3;
@button-disable-fill: @color-disable;
@button-disable-border: @border-color-base;

@button-default-color: @color-text-2;
@button-default-fill: @color-white;
@button-default-border: @border-color-split;
@button-default-hover-border: @color-primary;

@button-primary-color: @color-white;
@button-primary-fill: @color-primary;
@button-primary-border: @color-primary;

@button-success-color: @color-white;
@button-success-fill: @color-success;
@button-success-border: @color-success;

@button-info-color: @color-white;
@button-info-fill: @color-info;
@button-info-border: @color-info;

@button-warning-color: @color-white;
@button-warning-fill: @color-warning;
@button-warning-border: @color-warning;

@button-danger-color: @color-white;
@button-danger-fill: @color-danger;
@button-danger-border: @color-danger;

@button-text-color: @color-primary;
@button-text-fill: transparent;
@button-text-border: transparent;
@button-text-disabled: #999999;

@button-hover-tint-percent: 20%;
@button-active-shade-percent: 10%;

/* text */
@text-font-weight: normal;

@text-default-border-radius: 4px;
@text-default-font-size: 14px;
@text-default-height: 36px;
@text-default-icon-padding: 10px;

@text-large-border-radius: 4px;
@text-large-font-size: 14px;
@text-large-height: 40px;

@text-small-border-radius: 3px;
@text-small-font-size: 12px;
@text-small-height: 32px;

@text-mini-border-radius: 3px;
@text-mini-font-size: 12px;
@text-mini-height: 28px;

@text-default-color: @color-text-2;
@text-default-fill: @color-white;
@text-default-border: @border-color-base;
@text-default-focus-border: @color-primary;

@text-disable-color: @color-text-3;
@text-disable-fill: @color-disable;
@text-disable-border: @border-color-base;

@text-primary-color: @color-success;
@text-primary-fill: @color-primary;
@text-primary-border: @color-primary;

@text-success-color: @color-success;
@text-success-fill: @color-success;
@text-success-border: @color-success;

@text-error-color: @color-white;
@text-error-fill: @color-danger;
@text-error-border: @color-danger;

@text-hover-tint-percent: 20%;
@text-active-shade-percent: 10%;

@text-multi-min-height: 26px;
@text-multi-width: 400px;

/*global*/
@global-mask-black: #000000;
@global-mask-white: #ffffff;
@global-mask-shade-percent: 50%;

/*layer*/
@layer-mask-bg: @global-mask-black;
@layer-bg: @global-mask-white;
@layer-mask-shade-percent: @global-mask-shade-percent;
@layer-prompt-width: 320px;
@layer-prompt-height: 200px;

/* Message */
@message-default-bg: @color-black;
@message-default-fade: 65%;
@message-default-color: @color-white;
@message-default-border-radius: @border-radius-default;
@message-bg-1: @color-white;
@message-border-color: @border-color-base;
@message-icon-size: 28px;
@message-line-height: @line-height-default;
@message-button-bg: tint(@color-black, 30%);
@message-button-border-color: @color-white;
@message-button-shadow: tint(@color-black, 50%);

/*icon*/
@icon-default-color: @color-text-2;
@icon-primary-color: @color-primary;
@icon-success-color: @color-success;
@icon-info-color: @color-text-3;
@icon-warning-color: @color-warning;
@icon-danger-color: @color-danger;
@icon-size-default: 14px;
@icon-size-small: 22px;
@icon-size-large: 28px;
@icon-size-mini: 12px;
@icon-loading-duration: 1s;

/*Loading*/
@loading-mask-bg: @global-mask-white;
@loading-mask-shade-percent: 80%;
@loading-font-size: 12px;
@loading-font-weight: @font-weight-primary;
@loading-text-color: @color-primary;

@loading-spinner-font-size: 12px;
@loading-spinner-text-color: @color-primary;

@loading-spinner-default-size: 42px;
@loading-spinner-large-size: 58px;
@loading-spinner-small-size: 32px;
@loading-spinner-mini-size: 24px;

/*Layer*/
@layer-title-bg: #fafafa;
@layer-border-color: #EEEEEE;
@layer-bottom-bg: #ffffff;
@layer-mask-z-index: 19910405;
@layer-z-index: 19910406;

/*Animation*/
@bounce-duration: .3s;
@fade-duration: .5s;
@menu-fade-duration: .2s;

/*Radio*/
@radio-bg-color: @color-white;
@radio-border-color: @border-color-base;
@radio-checked-color: @color-primary;
@radio-disabled-color: tint(@color-disable, 55%);
@radio-disabled-font-color: tint(@color-text-3, 60%);
@radio-font-size-default: @font-size-default;
@radio-font-weight: normal;

@radio-default-border-radius: 4px;
@radio-default-font-size: 14px;
@radio-default-padding: 12px 15px 9px;

@radio-large-border-radius: 4px;
@radio-large-font-size: 14px;
@radio-large-padding: 13px 15px 11px;

@radio-small-border-radius: 3px;
@radio-small-font-size: 12px;
@radio-small-padding: 11px 12px 7px;

@radio-mini-border-radius: 3px;
@radio-mini-font-size: 12px;
@radio-mini-padding: 8px 10px 6px;

@radio-default-border-radius: 4px;
@radio-button-default-font-size: 14px;
@radio-button-default-padding: 10px 15px;

@radio-button-large-border-radius: 4px;
@radio-button-large-font-size: 14px;
@radio-button-large-padding: 12px 15px;

@radio-button-small-border-radius: 3px;
@radio-button-small-font-size: 12px;
@radio-button-small-padding: 9px 12px;

@radio-button-mini-border-radius: 3px;
@radio-button-mini-font-size: 12px;
@radio-button-mini-padding: 7px 10px;

@radio-disable-color: @color-text-3;
@radio-disable-fill: @color-disable;
@radio-disable-border: @border-color-base;

@radio-default-color: @color-text-2;
@radio-default-fill: @color-white;
@radio-default-border: @border-color-split;
@radio-default-hover-border: @color-primary;

@radio-primary-color: @color-white;
@radio-primary-fill: @color-primary;
@radio-primary-border: @color-primary;

@radio-success-color: @color-white;
@radio-success-fill: @color-success;
@radio-success-border: @color-success;

@radio-info-color: @color-white;
@radio-info-fill: @color-info;
@radio-info-border: @color-info;

@radio-warning-color: @color-white;
@radio-warning-fill: @color-warning;
@radio-warning-border: @color-warning;

@radio-danger-color: @color-white;
@radio-danger-fill: @color-danger;
@radio-danger-border: @color-danger;

@radio-hover-tint-percent: 20%;
@radio-active-shade-percent: 10%;

/*checkbox*/
@checkbox-bg-color: @color-white;
@checkbox-border-color: @border-color-base;
@checkbox-checked-color: @color-primary;
@checkbox-checked-border-color: @color-white;
@checkbox-hover-border-color: @color-primary;
@checkbox-disabled-color: tint(@color-disable, 55%);
@checkbox-disabled-border-color: #cccccc;
@checkbox-disabled-font-color: tint(@color-text-3, 60%);
@checkbox-font-size-default: @font-size-default;
@checkbox-font-weight: normal;

@checkbox-default-border-radius: 2px;
@checkbox-default-font-size: 14px;
@checkbox-default-padding: 12px 15px 9px;

@checkbox-large-border-radius: 3px;
@checkbox-large-font-size: 14px;
@checkbox-large-padding: 13px 15px 11px;

@checkbox-small-border-radius: 3px;
@checkbox-small-font-size: 12px;
@checkbox-small-padding: 11px 12px 7px;

@checkbox-mini-border-radius: 2px;
@checkbox-mini-font-size: 12px;
@checkbox-mini-padding: 8px 10px 6px;

@checkbox-default-border-radius: 4px;
@checkbox-button-default-font-size: 14px;
@checkbox-button-default-padding: 10px 15px;

@checkbox-button-large-border-radius: 4px;
@checkbox-button-large-font-size: 14px;
@checkbox-button-large-padding: 12px 15px;

@checkbox-button-small-border-radius: 3px;
@checkbox-button-small-font-size: 12px;
@checkbox-button-small-padding: 9px 12px;

@checkbox-button-mini-border-radius: 3px;
@checkbox-button-mini-font-size: 12px;
@checkbox-button-mini-padding: 7px 10px;

@checkbox-disable-color: @color-text-3;
@checkbox-disable-fill: @color-disable;
@checkbox-disable-border: @border-color-base;

@checkbox-default-color: @color-text-2;
@checkbox-default-fill: @color-white;
@checkbox-default-border: @border-color-split;
@checkbox-default-hover-border: @color-primary;

@checkbox-primary-color: @color-white;
@checkbox-primary-fill: @color-primary;
@checkbox-primary-border: @color-primary;

@checkbox-success-color: @color-white;
@checkbox-success-fill: @color-success;
@checkbox-success-border: @color-success;

@checkbox-info-color: @color-white;
@checkbox-info-fill: @color-info;
@checkbox-info-border: @color-info;

@checkbox-warning-color: @color-white;
@checkbox-warning-fill: @color-warning;
@checkbox-warning-border: @color-warning;

@checkbox-danger-color: @color-white;
@checkbox-danger-fill: @color-danger;
@checkbox-danger-border: @color-danger;

@checkbox-hover-tint-percent: 20%;
@checkbox-active-shade-percent: 10%;

/*Table*/
@table-title-color: @color-text-1;
@table-content-color: @color-text-2;
@table-th-row-height: 40px;
@table-content-bg: @color-white;
@table-row-height: 40px;
@table-header-bg: #F6F6F6;
@table-split-color: #dddddd;
@table-border-color: #ECECEC;
@table-stripe-bg: #F8F8F8;

/*Menu*/
@menu-item-font-size: 14px;
@menu-bg: @background-color-white;
@menu-vertical-line: #37a3ef;
@menu-item-hover-bg: tint(#37a3ef, 90%);
@menu-text-color: @color-text-2;
@menu-active-text-color: #37a3ef;
@menu-active-text-bg: tint(#37a3ef, 90%);
@menu-item-arrow-color: #999999;
@menu-item-group-title-color: #999999;
@menu-item-fc-disabled-color: #cccccc;
@menu-border-color: #e5e5e5;
@menu-border-color-split: #eeeeee;
@menu-item-quick-color: #999999;
@menu-title-selected-bg: #37a3ef;
@menu-title-selected-color: #ffffff;

@menu-size-large-width: 60px;
@menu-size-large-height: 60px;
@menu-size-large-line-height: 60px;
@menu-size-large-font-size: 16px;
@menu-size-group-title-large-height: 40px;
@menu-size-group-title-large-line-height: 40px;
@menu-size-group-title-large-padding-top: 12px;
@menu-size-group-title-large-font-size: 14px;

@menu-size-small-width: 40px;
@menu-size-small-height: 40px;
@menu-size-small-line-height: 40px;
@menu-size-small-font-size: 14px;
@menu-size-group-title-small-height: 32px;
@menu-size-group-title-small-line-height: 32px;
@menu-size-group-title-small-padding-top: 12px;
@menu-size-group-title-small-font-size: 12px;

@menu-size-mini-width: 32px;
@menu-size-mini-height: 32px;
@menu-size-mini-line-height: 32px;
@menu-size-mini-font-size: 12px;
@menu-size-group-title-mini-height: 26px;
@menu-size-group-title-mini-line-height: 26px;
@menu-size-group-title-mini-padding-top: 10px;
@menu-size-group-title-mini-font-size: 10px;

/*ScrollBar*/
@scroll-bar-padding-right: 6px;
@scroll-bar-border-radius: 3px;
@scroll-bar-size: 6px;
@scroll-bar-background-color: rgba(150, 150, 150, .4);
@scroll-bar-hover-background-color: rgba(150, 150, 150, .6);

/*PagePrompts*/
@page-prompts-text-color: @color-text-3;
@page-prompts-text-margin-top: 10px;
@page-prompts-button-margin-top: 10px;

/* Skeleton */
@skeleton-bg: #F5F5F5;
@skeleton-gradient-bg: #eaeaea;
@skeleton-title-height: 16px;
@skeleton-title-spacing: 14px;
@skeleton-paragraph-height: 16px;
@skeleton-paragraph-spacing: 25px;
@skeleton-paragraph-li-spacing: 14px;
@skeleton-default-picture-width: 64px;
@skeleton-default-picture-height: 64px;
@skeleton-large-picture-width: 128px;
@skeleton-large-picture-height: 128px;
@skeleton-small-picture-width: 40px;
@skeleton-small-picture-height: 40px;
@skeleton-mini-picture-width: 30px;
@skeleton-mini-picture-height: 30px;
@skeleton-fail-prompt-link: @color-primary;
@skeleton-fail-prompt-link-hover: #ff6600;

/* Tooltip */
@tooltip-dark-bg: #333333;
@tooltip-dark-border-bg: #333333;
@tooltip-dark-color: @color-white;
@tooltip-dark-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
@tooltip-dark-border-color: #333333;
@tooltip-light-bg: @color-white;
@tooltip-light-border-bg: @color-white;
@tooltip-light-color: @color-text-2;
@tooltip-light-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
@tooltip-light-border-color: #e5e5e5;
@tooltip-radius: 4px;
@tooltip-default-size: 8px 10px;

/* Popover */
@popover-default-title-font-size: 16px;
@popover-default-size: 0 15px;
@popover-default-title-size: 10px 0;
@popover-default-content-size: 13px 0;
@popover-default-button-size: 15px 0;