// Color Palette
@black: #000;
@black-2: #323233;
@white: #fff;
@gray-1: #f5f5f5;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #6f6455;
@red: #ee0a24;
@blue-1: #a9ecff;
@blue-2: #46aef7;
@blue-3: #1dd5e6;
@orange-1: #ffc873;
@orange-2: #ff976a;
@orange-3: #ff7111;
@orange-4: #fe7a0c;
@orange-5: #fe7111;
@orange-6: #fa9222;
@orange-7: #fb852f;
@orange-8: #f85700;
@orange-9: #ed6a0c;
@orange-10: #E1610A;
@paper-1: #fef4e5;
@paper-2: #fdefd9;
@green-1: #a0ea5d;
@green-2: #9ce55d;
@green-3: #82cf3a;
@green-4: #7bd72c;
@green-5: #7acf2f;
@green-6: #79b92c;
@green-7: #6fc128;
@green-8: #6eb929;
@green-9: #61b611;

// Component Colors
@text-color: @gray-7;
@active-color: @white;
@background-color: @white;
@background-color-dark: @gray-1;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;

// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-regular: 300;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-semi: 600;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  sans-serif;

// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

// button component
@button-border-width: @border-width-base;
@button-padding: 0 @padding-sm;
// button default
@button-default-color: @green-3;
@button-default-color-active: @green-7;
@button-default-bg-color: transparent;
@button-default-bg-color-active: transparent;
@button-default-border-color: @green-3;
@button-default-border-color-active: @green-7;
// button success
@button-success-color: @white;
@button-success-color-active: @white;
@button-success-bg-color: @green-3;
@button-success-bg-color-active: @green-7;
@button-success-border-color: @green-3;
@button-success-border-color-active: @green-7;
// button orange
@button-orange-color: @white;
@button-orange-color-active: @white;
@button-orange-bg-color: linear-gradient(0deg, @orange-8, @orange-6);
@button-orange-bg-color-active: @orange-8;
// button blue
@button-blue-color: @white;
@button-blue-color-active: @white;
@button-blue-bg-color: linear-gradient(0deg, @blue-3, @blue-2);
@button-blue-bg-color-active: @blue-2;
// button medium
@button-medium-height: 32px;
@button-medium-border-radius: @button-medium-height;
@button-medium-font-size: @font-size-md;
@button-medium-padding: 0 @padding-sm;
// button small
@button-small-height: 24px;
@button-small-border-radius: @button-small-height;
@button-small-font-size: @font-size-xs;
@button-small-padding: 0 @padding-xs;
// button large
@button-large-height: 55px;
@button-large-border-radius: @button-large-height;
@button-large-font-size: 17px;
@button-large-padding: 0 32px;
// button block
@button-block-height: 50px;
@button-block-border-radius: @button-block-height;
@button-block-font-size: 16px;
// button default shadow
@button-shadow-default-box-shadow: 0 5px 10px 3px fade(@green-5, 30);
@button-shadow-default-box-shadow-active: 0 5px 10px 3px fade(@green-7, 30);
// button success shadow
@button-shadow-success-box-shadow: 0 5px 10px 3px fade(@green-5, 30);
@button-shadow-success-box-shadow-active: 0 5px 10px 3px fade(@green-7, 30);
// button disabled
@button-disabled-opacity: 0.5;

// nav-bar component
@nav-bar-z-index: 1;
@nav-bar-height: 44px;
@nav-bar-left-font-size: @font-size-lg;
@nav-bar-right-font-size: @font-size-lg;
@nav-bar-title-font-size: 18px;
@nav-bar-left-padding: 12px;
@nav-bar-right-padding: 12px;
// nav-bar default
@nav-bar-default-color: @black-2;
@nav-bar-default-bg-color: @white;
@nav-bar-default-icon-color: @orange-6;
// nav-bar paper
@nav-bar-paper-color: @gray-7;
@nav-bar-paper-bg-color: @paper-1;
@nav-bar-paper-icon-color: @gray-7;
// nav-bar orange
@nav-bar-orange-color: @white;
@nav-bar-orange-bg-color: @orange-3;
@nav-bar-orange-icon-color: @white;

// icon component
@icon-size-xxs: 15px;
@icon-size-xs: 18px;
@icon-size-sm: 21px;
@icon-size-md: 22px;
@icon-size-lg: 36px;

// overlay
@overlay-z-index: 99;
@overlay-bg-color: rgba(0,0,0,0.7);

// popup component
@popup-bg-color: @white;
@popup-transition: transform @animation-duration-base;
@popup-z-index: 100;
@popup-round-border-radius: 16px;

// popover component
@popover-border-radius: 16px;
@popover-arrow-size: 6px;
@popover-start-left: 24px;
@popover-end-right: 18px;
@popover-start-top: 24px;
// popover light
@popover-light-color: @gray-7;
@popover-light-bg-color: @white;
@popover-light-box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
// popover dark
@popover-dark-color: @white;
@popover-dark-bg-color: #4a4a4a;
@popover-dark-box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);