$vender-prefix: amos;

$base-color: black;
$base-color-1: rgba($base-color, 0.65);
$base-color-2: rgba($base-color, 0.35);

$top-height: 3.5rem;
$content-height: calc(100% - 3.5rem);
$background-color: #203957;
$font-family: 'Microsoft YaHei';
$font-size: 12px;
$tab-width: 12rem;

/**  Colors */
// Background color for `<body>`
$body-background: white;
// Base background color for most components
$component-background: white;
$primary-color-light: #cfeeff;
$primary-color: #27b3fe;
$primary-color-deep: #19afff;
$primary-color-deeper: #00a6ff;
$success-color: #4cd964;
$danger-color: #f94242;
$warning-color: #faad14;
$error-color: #f5222d;

$color-grey: #ccc;
$color-white: white;
$color-disable: #f4f4f4;

$active-hover-foucs-bg-color: rgba(222, 222, 222, 0.2);

$primary-1: lighten($primary-color, 1);
$primary-2: lighten($primary-color, 2);
$primary-3: lighten($primary-color, 3);
$primary-4: lighten($primary-color, 4);
$primary-5: lighten($primary-color, 5);
$primary-6: $primary-color;
$primary-7: lighten($primary-color, 7);
$primary-8: lighten($primary-color, 8);
$primary-9: lighten($primary-color, 9);
$primary-10: lighten($primary-color, 10);

$disabled-color: #9e9e9e;
$disabled-border-color: #eaeaea;
$disabled-bg-color: #eceff1;

$minor-color: #ccc;
$minor-bg-color: #f8f8f8;
$minor-bg-color-hover: #f1f1f1;
$minor-bg-color-active: #eaeaea;
$minor-border-color: #c6c6c6;

/** border */

$border-radius-base: 4px;
$border-radius-sm: 2px;

// base
// ---
$base-height-xl: 40px !default;
$base-height-lg: 36px !default;
$base-height: 32px !default;
$base-height-sm: 28px !default;
$base-height-xs: 24px !default;

$base-padding-xl: 14px !default;
$base-padding-lg: 12px !default;
$base-padding: 10px !default;
$base-padding-sm: 8px !default;
$base-padding-xs: 4px !default;

$base-fontSize-xl: 18px !default;
$base-fontSize-lg: 16px !default;
$base-fontSize: 14px !default;
$base-fontSize-sm: 14px !default;
$base-fontSize-xs: 12px !default;

$base-radius-xl: 6px !default;
$base-radius-lg: 5px !default;
$base-radius: 4px !default;
$base-radius-sm: 4px !default;
$base-radius-xs: 4px !default;

/**  font */

$font-size-base: 12px;
$font-size-lg: $font-size-base + 2px;
$font-color: white;

// Border color
$border-color-base: #d8d8d8;
$border-color-split: #e8e8e8;
$border-style-base: solid;

// text color
$text-color: rgba(black, 65%);
$text-color-secondary: rgba(black, 45%);
$heading-color-dark: rgba(white, 100%);
$text-color-dark: rgba(white, 85%);
$text-color-secondary-dark: rgba(white, 65%);
$heading-color: rgba(black, 85%);
$text-shadow-color: #badfff;

// LINK
$link-color: $primary-color;
$link-hover-color: $primary-5;
$link-active-color: $primary-7;
$link-decoration: none;
$link-hover-decoration: none;

/**  nav theme */

/** Animation */

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

// media
// Media queries breakpoints
// Extra small screen / phone
$screen-xs: 480px;
$screen-xs-min: $screen-xs;

// Small screen / tablet
$screen-sm: 576px;
$screen-sm-min: $screen-sm;

// Medium screen / desktop
$screen-md: 768px;
$screen-md-min: $screen-md;

// Large screen / wide desktop
$screen-lg: 992px;
$screen-lg-min: $screen-lg;

// Extra large screen / full hd
$screen-xl: 1200px;
$screen-xl-min: $screen-xl;

// Extra extra large screen / large descktop
$screen-xxl: 1600px;
$screen-xxl-min: $screen-xxl;

// provide a maximum
$screen-xs-max: ($screen-sm-min - 1px);
$screen-sm-max: ($screen-md-min - 1px);
$screen-md-max: ($screen-lg-min - 1px);
$screen-lg-max: ($screen-xl-min - 1px);
$screen-xl-max: ($screen-xxl-min - 1px);

//

$line-height-base: 1.5;
