@import '../color/colors';

// The prefix to use on all css classes from onestop.
@onestop-prefix: onestop;

@html-selector: html;

@font-bold: 'Sharp-Bold';
@font-medium: 'Sharp-Medium';
@medium-weight: 500;
@bold-weight: 700;

// -------- Colors -----------
@white: #fff;
@black: #000;
@text-color-default: @black-0;
@text-color-secondary: @black-1;
@text-color-disabled: @black-3;
@text-color-link: @green-0; 

// Base Variables
// ---
@body-background: #fff;
@component-background: #fff;
@mark-default-background: #FFB546;

// font-size
// -------------------------------------------
@font-size-sm: 12px;
@font-size-base: 14px;
@font-size-lg-0: @font-size-base + 2px;
@font-size-lg-1: @font-size-base + 4px;
@font-size-lg-2: @font-size-base + 6px;
@font-size-lg-3: @font-size-base + 10px;
@font-size-lg-4: @font-size-base + 24px;
@line-height-sm: 16px;
@line-height-base: 18px;
@line-height-lg-0: 22px;
@line-height-lg-1: 24px;
@line-height-lg-2: 26px;
@line-height-lg-3: 32px;
@line-height-lg-4: 50px;

// font-weight
@font-weight-sm01: 400;
@font-weight-sm: 500;
@font-weight-base: 700;

// border
// --------------------------------------------
@border-radius-xxs: 2px;
@border-radius-xs: 4px;
@border-radius-sm: 6px;
@border-radius-base: 8px;
@border-radius-large: 20px;
@border-radius-xl: 30px;

// Border color
// --------------------------------------------
@border-width-base: 1px;
@border-style-base: solid;
@border-color-base: @white;
@border-color-lighter: #EBEEF5;

// Shadow
// --------------------------------------------
@shadow-color: rgba(163, 171, 185, 0.24);
@focus-shados-color:rgba(0, 0, 0, 0.1);
@box-shadow-base: 0px 4px 90px @shadow-color;
@box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@box-shadow-focus:0px 0px 0px 4px @focus-shados-color;
// padding
// --------------------------------------------
@padding-lg: 24px;
@padding-md: 16px;
@padding-sm: 12px;
@padding-xs: 8px;
@padding-smallest: 2px;
@padding-smaller: 4px;
@padding-horizontal: @padding-sm;
@padding-horizontal-sm: @padding-xs;

// Buttons
//----------------------------------------------------
@button-font-weight: @font-weight-base;
@button-border-width: @border-width-base;
@button-border-style: @border-style-base;
@button-padding-base: @padding-xs @padding-md;
@button-padding-lg: @padding-lg @padding-md;
@button-padding-sm: @padding-sm @padding-md;
@button-border-radius-base: @border-radius-base;
@button-border-radius-sm: @border-radius-sm;
@button-border-radius-xl: @border-radius-xl;
@button-shadow: 0px 0px 10px rgba(24, 152, 152, 0.6);
// default
@button-default-color: @black-1;
@button-default-bg: @black-4;
@button-default-hover-font: @font-size-base;
@button-default-hover-bg: @black-5;
@button-default-active-font: @font-size-base;
@button-default-active-bg: @black-3;
// primary
@button-primary-color: @white;
@button-primary-bg: @green-0;
@button-primary-hover-bg: @green-1;
@button-primary-active-bg: @green-4;
@button-primary-plain-color: @green-0;
@button-primary-plain-hover-color: @green-1;
@button-primary-plain-active-color: @green-4;
@button-primary-text-color: @green-0;
@button-primary-text-hover-color: @green-1;
@button-primary-text-active-color: @green-4;
@button-primary-light-bg: @green-3;
// danger
@button-danger-color: @white;
@button-danger-bg: @red-1;
@button-danger-hover-bg: @red-2;
@button-danger-active-bg: @red-0;
@button-danger-plain-color: @red-1;
@button-danger-plain-border: @red-1;
@button-danger-plain-hover-color: @red-2;
@button-danger-plain-hover-border: @red-1;
@button-danger-plain-active-color: @red-0;
@button-danger-plain-active-border: @red-0;
@button-danger-text-color: @red-1;
@button-danger-text-hover-color: @red-2;
@button-danger-text-active-color: @red-0;
@button-danger-light-bg: @red-4;
@button-danger-light-hover-bg: @red-5;
@button-danger-light-active-bg: @red-3;
// new-button-->fill-primary
@button-fill-primary-bg:@green-1;
@button-fill-primary-hover-bg:@green-4;
@button-fill-secondary-hover-bg: linear-gradient(0deg, rgba(48, 176, 67, 0.1), rgba(48, 176, 67, 0.1)), @green-3;
@button-stroke-bg: @bg-transparent;
@button-stroke-border-color:  @black-2;
@button-stroke-hover-bg: @black-4;
@button-alert-hover-bg:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), @red-1;
@button-alert-focus-bg:linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), @red-0;
// Empty
@empty-font-size: @font-size-base;

// Media queries breakpoints
@screen-sm: 840px;
@screen-sm-min: @screen-sm;

@screen-lg: 1400px;
@screen-lg-min: @screen-lg;

// 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);

@iconfont-css-prefix: onestopicon;

// Dialog
//----------------------------------------------------
@dialog-background-color: @white;
@dialog-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
@dialog-padding-primary: 24px;
@dialog-padding-primary01: 10px;
@message-close-size: @line-height-sm;
@dialog-font-line-height: @line-height-lg-1;
@dialog-title-font-size: @font-size-lg-1;
@dialog-content-font-size: @font-size-base;
@dialog-button-default-bg-color: #F2F3F5;

// Loading
//----------------------------------------------------
@loading-fullscreen-spinner-size: 50px;
@loading-spinner-size: 42px;

// Message-box
//----------------------------------------------------
@msgbox-width: 420px;
@msgbox-border-radius: 4px;
@messagebox-font-size: @font-size-lg-1;
@msgbox-padding-primary: 15px;
@messagebox-title-color: @color-text-primary;

// Modal
//----------------------------------------------------
@modal-button-padding: 6px 8px;

// Tag
//----------------------------------------------------
@tag-padding-normal: @padding-xs;
@tag-padding-big: @padding-md;
@tag-border-radius: @border-radius-large;
@tag-border-radius-rectangle: @border-radius-xs;

@tag-bg-color-default: @tag-color-default;
@tag-bg-color-success: @tag-color-success;
@tag-bg-color-info: @tag-color-info;
@tag-bg-color-warning: @tag-color-warning;
@tag-bg-color-danger: @tag-color-danger;

@tag-bg-color-dark-default: @tag-color-dark-default;
@tag-bg-color-dark-success: @tag-color-dark-success;
@tag-bg-color-dark-info: @tag-color-dark-info;
@tag-bg-color-dark-warning: @tag-color-dark-warning01;
@tag-bg-color-dark-danger: @tag-color-dark-danger;

@tag-font-color-default: @tag-color-dark-default;
@tag-font-color-success: @tag-color-dark-success;
@tag-font-color-info: @tag-color-dark-info;
@tag-font-color-warning: @tag-color-dark-warning;
@tag-font-color-danger: @tag-color-dark-danger;