$font-family-base: "Effra", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto,Oxygen, Ubuntu,Cantarell,
    "Open Sans","Helvetica Neue",sans-serif !default;

$font-size-base: 16px !default;
$font-size-small: 14px !default;

$color-gray--000: hsl(189, 23%, 96%) !default;
$color-gray--005: hsl(189, 23%, 94%) !default;
$color-gray--010: hsl(189, 23%, 92%) !default;
$color-gray--015: hsl(189, 23%, 85%) !default;
$color-gray--020: hsl(189, 23%, 80%) !default;
$color-gray--030: hsl(189, 23%, 70%) !default;
$color-gray--040: hsl(189, 23%, 60%) !default;
$color-gray--050: hsl(189, 23%, 50%) !default;
$color-gray--060: hsl(189, 23%, 32%) !default; // Lightest color for text.
$color-gray--070: hsl(189, 23%, 27%) !default;
$color-gray--080: hsl(189, 23%, 22%) !default;
$color-gray--090: hsl(189, 23%, 17%) !default;
$color-gray--100: hsl(189, 23%, 12%) !default;

$color-brand--005: hsl(189, 50%, 98%) !default;
$color-brand--010: hsl(189, 50%, 96%) !default;
$color-brand--015: hsl(189, 50%, 93%) !default;
$color-brand--020: hsl(189, 50%, 87%) !default;
$color-brand--030: hsl(189, 50%, 82%) !default;
$color-brand--040: hsl(189, 50%, 74%) !default;
$color-brand--050: hsl(189, 90%, 37%) !default;
$color-brand--055: hsl(189, 90%, 32%) !default;
$color-brand--060: hsl(189, 90%, 30%) !default;
$color-brand--070: hsl(189, 90%, 20%) !default;
$color-brand--100: hsl(189, 90%, 11%) !default;

$space1:    .25rem !default;
$space2:    .5rem !default;
$space3:    .75rem !default;
$space4:    1rem !default;
$space5:    1.5rem !default;
$space6:    2rem !default;
$space7:    3rem !default;
$space8:    4rem !default;
$space9:    6rem !default;
$space10:    8rem !default;

$color-secondary: hsl(185, 26%, 94%) !default;
$color-secondary-light: hsl(185, 26%, 97%) !default;
$color-secondary-medium: hsl(185, 20%, 75%) !default;
$color-secondary-dark: hsl(185, 30%, 31%) !default;

$color-highlight: hsl(54, 95%, 43%) !default;
$color-highlight-light: hsl(56, 100%, 97%) !default;

// Validation colors
$color-success-light: hsl(144, 43%, 94%) !default;
$color-success: hsl(144, 43%, 65%) !default;
$color-success-dark: hsl(144, 43%, 31%) !default;

$color-info-light: hsl(209, 50%, 95%) !default;
$color-info: hsl(209, 50%, 79%) !default;
$color-info-dark: hsl(209, 50%, 38%) !default;

$color-warning-light: hsl(22, 74%, 95%) !default;
$color-warning: hsl(22, 75%, 75%) !default;
$color-warning-dark: hsl(22, 75%, 40%) !default;

$color-danger-light: hsl(0, 57%, 95%) !default;
$color-danger: hsl(0, 57%, 75%) !default;
$color-danger-dark: hsl(0, 57%, 45%) !default;

$color-white: #fefefe !default;
$color-black: $color-gray--100 !default;

$color-base-black: $color-gray--100 !default;
$color-light-black: $color-gray--090 !default;
$color-extra-light-black: $color-gray--080 !default;

$color-base-silver: $color-gray--030 !default;
$color-light-silver: $color-gray--020 !default;
$color-extra-light-silver: $color-gray--015 !default;

$color-base-gray: $color-gray--050 !default;
$color-light-gray: $color-gray--030 !default;
$color-extra-light-gray: $color-gray--005 !default;

$font-color-base: $color-base-black !default;

// Z Index Layers
$z-index-fixed: 1000 !default;
$z-index-doc-nav: 1999 !default;

// Size Breakpoints
$screen-xs:              320px !default;
$screen-sm:              528px !default;
$screen-md:              768px !default;
$screen-lg:              1000px  !default;

$screen-xs-min:          $screen-xs !default;
$screen-sm-min:          $screen-sm !default;
$screen-md-min:          $screen-md !default;
$screen-lg-min:          $screen-lg  !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;

/* Element Chalk Variables */

/* Transition
-------------------------- */
$--all-transition: all .3s cubic-bezier(.645, .045, .355, 1) !default;
$--fade-transition: opacity 300ms cubic-bezier(.23, 1, .32, 1) !default;
$--fade-linear-transition: opacity 200ms linear !default;
$--md-fade-transition: transform 300ms cubic-bezier(.23, 1, .32, 1) 100ms, opacity 300ms cubic-bezier(.23, 1, .32, 1) 100ms !default;
$--border-transition-base: border-color .2s cubic-bezier(.645, .045, .355, 1) !default;
$--color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1) !default;

/* Colors
-------------------------- */
$--color-white: $color-white !default;
$--color-black: $color-black !default;

$--color-primary: $color-brand--055 !default;
$--color-primary--darker: $color-brand--060 !default;

$--color-primary-1: $color-brand--005 !default;
$--color-primary-2: $color-brand--010 !default;
$--color-primary-3: $color-brand--015 !default;
$--color-primary-4: $color-brand--020 !default;
$--color-primary-5: $color-brand--030 !default;
$--color-primary-6: $color-brand--040 !default;
$--color-primary-7: $color-brand--050 !default;
$--color-primary-8: $color-brand--060 !default;
$--color-primary-9: $color-brand--070 !default;
$--color-primary-10: $color-brand--100 !default;

$--color-text-primary: $color-gray--100 !default;
$--color-text-regular: $color-gray--080 !default;
$--color-text-secondary: $color-gray--060 !default;
$--color-text-placeholder: $color-gray--040 !default;

/* Link
-------------------------- */
$--link-color: $--color-primary !default;
$--link-hover-color: $--color-primary--darker !default;

/* Background
-------------------------- */
$--background-color-base: $color-gray--005 !default;

/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-base: $color-gray--030 !default;
$--border-color-light: $color-gray--020 !default;
$--border-color-lighter: $color-gray--015 !default;
$--border-color-extra-light: $color-gray--010 !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
$--border-radius-base: 4px !default;
$--border-radius-small: 2px !default;
$--border-radius-circle: 100% !default;

/* Box-shadow
-------------------------- */
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, .1) !default;

/* Fill
-------------------------- */
$--fill-base: $--color-white !default;

/* Font
-------------------------- */
$--font-path: "fonts" !default;
$--font-size-base: $font-size-base !default;
$--font-size-small: 14px !default;
$--font-size-large: 18px !default;
$--font-color-disabled-base: $color-gray--060 !default;
$--font-weight-primary: 400 !default;
$--font-line-height-primary: 24px !default;

/* Size
-------------------------- */
$--size-base: 16px !default;

/* z-index
-------------------------- */
$--index-normal: 1 !default;
$--index-top: 1000 !default;
$--index-popper: 2000 !default;

/* Disable base
-------------------------- */
$--disabled-fill-base: $--background-color-base !default;
$--disabled-color-base: $--color-text-placeholder !default;
$--disabled-border-base: $--border-color-light !default;

/* ReadOnly base
-------------------------- */
$--read-only-color-base: $color-base-gray !default;

/* Icon
-------------------------- */
$--icon-color: $color-gray--070 !default;
$--icon-color-base: $color-info-dark !default;

/* Checkbox
-------------------------- */
$--checkbox-font-size: 16px !default;
$--checkbox-font-weight: $--font-weight-primary !default;
$--checkbox-color: $--color-text-regular !default;
$--checkbox-input-height: 14px !default;
$--checkbox-input-width: 14px !default;
$--checkbox-input-border-radius: $--border-radius-small !default;
$--checkbox-input-fill: $--color-white !default;
$--checkbox-input-border: $--border-base !default;
$--checkbox-input-border-color: $--border-color-base !default;
$--checkbox-icon-color: $--color-white !default;

$--checkbox-disabled-input-border-color: $--border-color-base !default;
$--checkbox-disabled-input-fill: $color-gray--010 !default;
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;

$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;

$--checkbox-checked-text-color: $--color-primary !default;
$--checkbox-checked-input-border-color: $--color-primary !default;
$--checkbox-checked-input-fill: $--color-primary !default;
$--checkbox-checked-icon-color: $--fill-base !default;

$--checkbox-input-border-color-hover: $--color-primary !default;

$--checkbox-bordered-height: 40px !default;
$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
$--checkbox-bordered-small-padding: 3px 15px 7px 10px !default;
$--checkbox-bordered-mini-padding: 1px 15px 5px 10px !default;
$--checkbox-bordered-medium-input-height: 14px !default;
$--checkbox-bordered-medium-input-width: 14px !default;
$--checkbox-bordered-medium-height: 36px !default;
$--checkbox-bordered-small-input-height: 12px !default;
$--checkbox-bordered-small-input-width: 12px !default;
$--checkbox-bordered-small-height: 32px !default;
$--checkbox-bordered-mini-input-height: 12px !default;
$--checkbox-bordered-mini-input-width: 12px !default;
$--checkbox-bordered-mini-height: 28px !default;

$--checkbox-button-font-size: $--font-size-base !default;
$--checkbox-button-checked-fill: $--color-primary !default;
$--checkbox-button-checked-color: $--color-white !default;
$--checkbox-button-checked-border-color: $--color-primary !default;



/* Radio
-------------------------- */
$--radio-font-size: 16px !default;
$--radio-font-weight: $--font-weight-primary !default;
$--radio-color: $--color-text-regular !default;
$--radio-input-height: 14px !default;
$--radio-input-width: 14px !default;
$--radio-input-border-radius: $--border-radius-circle !default;
$--radio-input-fill: $--color-white !default;
$--radio-input-border: $--border-base !default;
$--radio-input-border-color: $--border-color-base !default;
$--radio-icon-color: $--color-white !default;

$--radio-disabled-input-border-color: $--disabled-border-base !default;
$--radio-disabled-input-fill: $--disabled-fill-base !default;
$--radio-disabled-icon-color: $--disabled-fill-base !default;

$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;

$--radio-checked-text-color: $--color-primary !default;
$--radio-checked-input-border-color: $--color-primary !default;
$--radio-checked-input-fill: $--color-white !default;
$--radio-checked-icon-color: $--color-primary !default;

$--radio-input-border-color-hover: $--color-primary !default;

$--radio-bordered-height: 40px !default;
$--radio-bordered-padding: 10px 20px 10px 10px !default;
$--radio-bordered-medium-padding: 8px 20px 8px 10px !default;
$--radio-bordered-small-padding: 6px 15px 6px 10px !default;
$--radio-bordered-mini-padding: 4px 15px 4px 10px !default;
$--radio-bordered-medium-input-height: 14px !default;
$--radio-bordered-medium-input-width: 14px !default;
$--radio-bordered-medium-height: 36px !default;
$--radio-bordered-small-input-height: 12px !default;
$--radio-bordered-small-input-width: 12px !default;
$--radio-bordered-small-height: 32px !default;
$--radio-bordered-mini-input-height: 12px !default;
$--radio-bordered-mini-input-width: 12px !default;
$--radio-bordered-mini-height: 28px !default;

$--radio-button-font-size: $--font-size-base !default;
$--radio-button-checked-fill: $--color-primary !default;
$--radio-button-checked-color: $--color-white !default;
$--radio-button-checked-border-color: $--color-primary !default;
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;

/* Select
-------------------------- */
$--select-border-color-hover: $--border-color-hover !default;
$--select-disabled-border: $--disabled-border-base !default;
$--select-font-size: $--font-size-base !default;
$--select-close-hover-color: $--color-text-secondary !default;

$--select-input-color: $--color-text-placeholder !default;
$--select-multiple-input-color: #666 !default;
$--select-input-focus-background: $--color-primary !default;
$--select-input-font-size: 16px !default;

$--select-tag-height: 24px !default;
$--select-tag-color: $--color-white !default;
$--select-tag-background: $--color-primary !default;

$--select-option-color: $--color-text-regular !default;
$--select-option-disabled-color: $--color-text-placeholder !default;
$--select-option-disabled-background: $--color-white !default;
$--select-option-height: 34px !default;
$--select-option-hover-background: $--background-color-base !default;
$--select-option-selected: $--color-white !default;
$--select-option-selected-hover: $--background-color-base !default;

$--select-group-color: $color-info-dark !default;
$--select-group-height: 30px !default;
$--select-group-font-size: 12px !default;

$--select-dropdown-background: $--color-white !default;
$--select-dropdown-shadow: $--box-shadow-light !default;
$--select-dropdown-empty-color: #999 !default;
$--select-dropdown-max-height: 274px !default;
$--select-dropdown-padding: 6px 0 !default;
$--select-dropdown-empty-padding: 10px 0 !default;
$--select-dropdown-border: solid 1px $--border-color-light !default;

/* Alert
-------------------------- */
$--alert-padding: .8em 1em !default;
$--alert-border-radius: $--border-radius-base !default;
$--alert-title-font-size: .85em !default;
$--alert-description-font-size: .85em !default;

$--alert-icon-size: 1.25em !default;

/* Message Box
-------------------------- */
$--msgbox-width: 420px !default;
$--msgbox-border-radius: 4px !default;
$--msgbox-font-size: $--font-size-large !default;
$--msgbox-content-font-size: $--font-size-base !default;
$--msgbox-content-color: $--color-text-regular !default;
$--msgbox-error-font-size: 12px !default;
$--msgbox-padding-primary: 15px !default;

$--msgbox-success-color: $color-success-dark !default;
$--msgbox-info-color: $color-info-dark !default;
$--msgbox-warning-color: $color-warning-dark !default;
$--msgbox-danger-color: $color-danger-dark !default;

/* Message
-------------------------- */
$--message-shadow: $--box-shadow-base !default;
$--message-min-width: 570px !default;
$--message-background-color: #edf2fc !default;
$--message-padding: 15px 15px 15px 20px !default;
$--message-content-color: $--color-text-regular !default;
$--message-close-color: $--color-text-placeholder !default;
$--message-close-size: 16px !default;
$--message-close-hover-color: $--color-text-secondary !default;

$--message-success-color: $color-success-dark !default;
$--message-info-color: $color-info-dark !default;
$--message-warning-color: $color-warning-dark !default;
$--message-danger-color: $color-danger-dark !default;

/* Notification
-------------------------- */
$--notification-width: 330px !default;
$--notification-padding: 14px 26px 14px 13px !default;
$--notification-radius: 8px !default;
$--notification-shadow: $--box-shadow-light !default;
$--notification-border-color: $--border-color-lighter !default;
$--notification-icon-size: 24px !default;
$--notification-close-font-size: $--message-close-size !default;
$--notification-group-margin: 13px !default;
$--notification-font-size: $--font-size-base !default;
$--notification-color: $--color-text-regular !default;
$--notification-title-font-size: 16px !default;
$--notification-title-color: $--color-text-primary !default;

$--notification-close-color: $--color-text-secondary !default;
$--notification-close-hover-color: $--color-text-regular !default;

$--notification-success-color: $color-success-dark !default;
$--notification-info-color: $color-info-dark !default;
$--notification-warning-color: $color-warning-dark !default;
$--notification-danger-color: $color-danger-dark !default;

/* Input
-------------------------- */
$--input-font-size: $--font-size-base !default;
$--input-color: $--color-text-regular !default;
$--input-width: 140px !default;
$--input-height: 40px !default;
$--input-border: $--border-base !default;
$--input-border-color: $--border-color-base !default;
$--input-border-radius: $--border-radius-base !default;
$--input-border-color-hover: $--border-color-hover !default;
$--input-fill: $--color-white !default;
$--input-fill-disabled: $--disabled-fill-base !default;
$--input-color-disabled: $--font-color-disabled-base !default;
$--input-icon-color: $--color-text-placeholder !default;
$--input-placeholder-color: $--color-text-placeholder !default;
$--input-max-width: 314px !default;

$--input-hover-border: $--border-color-hover !default;
$--input-clear-hover-color: $--color-text-secondary !default;

$--input-focus-border: $--color-primary !default;
$--input-focus-fill: $--color-white !default;

$--input-disabled-fill: $--disabled-fill-base !default;
$--input-disabled-border: $--disabled-border-base !default;
$--input-disabled-color: $--disabled-color-base !default;
$--input-disabled-placeholder-color: $--color-text-placeholder !default;

$--input-read-only-color: $--read-only-color-base !default;

$--input-medium-font-size: 14px !default;
$--input-medium-height: 36px !default;

$--input-small-font-size: 13px !default;
$--input-small-height: 32px !default;

$--input-mini-font-size: 12px !default;
$--input-mini-height: 28px !default;

/* Cascader
-------------------------- */
/// color||Color|0
$--cascader-menu-font-color: $--color-text-regular !default;
/// color||Color|0
$--cascader-menu-selected-font-color: $--color-primary !default;
$--cascader-menu-fill: $--fill-base !default;
$--cascader-menu-font-size: $--font-size-base !default;
$--cascader-menu-radius: $--border-radius-base !default;
$--cascader-menu-border: $--border-base !default;
$--cascader-menu-border-color: $--border-color-base !default;
$--cascader-menu-border-width: $--border-width-base !default;
$--cascader-menu-color: $--color-text-regular !default;
$--cascader-menu-option-color-active: $--color-text-secondary !default;
$--cascader-menu-option-fill-active: rgba($--color-text-secondary, .12) !default;
$--cascader-menu-option-color-hover: $--color-text-regular !default;
$--cascader-menu-option-fill-hover: rgba($--color-text-primary, .06) !default;
$--cascader-menu-option-color-disabled: #999 !default;
$--cascader-menu-option-fill-disabled: rgba($--color-black, .06) !default;
$--cascader-menu-option-empty-color: #666 !default;
$--cascader-menu-group-color: #999 !default;
$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, .14), 0 0 3px rgba($--color-black, .14) !default;
$--cascader-menu-option-pinyin-color: #999 !default;
$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, .14), 1px 0 2px rgba($--color-black, .14) !default;
$--cascader-node-background-hover: $--background-color-base !default;
$--cascader-node-color-disabled:$--color-text-placeholder !default;
$--cascader-color-empty:$--color-text-placeholder !default;

/* Group
-------------------------- */
$--group-option-flex: 0 0 20% !default;
$--group-option-offset-bottom: 12px !default;
$--group-option-fill-hover: rgba($--color-black, .06) !default;
$--group-title-color: $--color-black !default;
$--group-title-font-size: $--font-size-base !default;
$--group-title-width: 66px !default;

/* Tab
-------------------------- */
$--tab-font-size: $--font-size-base !default;
$--tab-border-line: 1px solid #e4e4e4 !default;
$--tab-header-color-active: $--color-text-secondary !default;
$--tab-header-color-hover: $--color-text-regular !default;
$--tab-header-color: $--color-text-regular !default;
$--tab-header-fill-active: rgba($--color-black, .06) !default;
$--tab-header-fill-hover: rgba($--color-black, .06) !default;
$--tab-vertical-header-width: 90px !default;
$--tab-vertical-header-count-color: $--color-white !default;
$--tab-vertical-header-count-fill: $--color-text-secondary !default;

/* Button
-------------------------- */
$--button-font-size: 16px !default;
$--button-font-weight: $--font-weight-primary !default;
$--button-border-radius: $--border-radius-base !default;
$--button-padding-vertical: 12px !default;
$--button-padding-horizontal: 20px !default;

$--button-medium-font-size: 14px !default;
$--button-medium-border-radius: $--border-radius-base !default;
$--button-medium-padding-vertical: 10px !default;
$--button-medium-padding-horizontal: 20px !default;

$--button-small-font-size: 14px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
$--button-small-padding-vertical: 9px !default;
$--button-small-padding-horizontal: 15px !default;

$--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
$--button-mini-padding-vertical: 7px !default;
$--button-mini-padding-horizontal: 15px !default;

$--button-default-color: $--color-text-regular !default;
$--button-default-fill: $--color-white !default;
$--button-default-border: $--border-color-base !default;

$--button-disabled-color: $--color-text-placeholder !default;
$--button-disabled-fill: $--color-white !default;
$--button-disabled-border: $--border-color-lighter !default;

$--button-primary-border: $color-brand--060 !default;
$--button-primary-color: $--color-white !default;
$--button-primary-fill: $--color-primary !default;

$--button-success-border: $color-success-dark !default;
$--button-success-color: $--color-white !default;
$--button-success-fill: $color-success-dark !default;

$--button-warning-border: $color-warning-dark !default;
$--button-warning-color: $--color-white !default;
$--button-warning-fill: $color-warning-dark !default;

$--button-danger-border: $color-danger-dark !default;
$--button-danger-color: $--color-white !default;
$--button-danger-fill: $color-danger-dark !default;

$--button-info-border: $color-info-dark !default;
$--button-info-color: $--color-white !default;
$--button-info-fill: $color-info-dark !default;

$--button-hover-tint-percent: 20% !default;
$--button-active-shade-percent: 10% !default;


/* cascader
-------------------------- */
$--cascader-height: 200px !default;

/* Switch
-------------------------- */
$--switch-on-color: $--color-primary !default;
$--switch-off-color: $--border-color-base !default;
$--switch-disabled-color: $--border-color-lighter !default;
$--switch-disabled-text-color: $--color-text-placeholder !default;

$--switch-font-size: $--font-size-base !default;
$--switch-core-border-radius: 10px !default;
$--switch-width: 40px !default;
$--switch-height: 20px !default;
$--switch-button-size: 16px !default;

/* Timeline
--------------------------*/
$--timeline-node-size-normal: 12px !default;
$--timeline-node-size-large: 14px !default;
$--timeline-node-color: $--border-color-light !default;

/* Dialog
-------------------------- */
$--dialog-background-color: $--color-primary-3 !default;
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !default;
$--dialog-close-hover-color: $--color-primary !default;
$--dialog-title-font-size: 1.3em !default;
$--dialog-font-size: 16px !default;
$--dialog-line-height: $--font-line-height-primary !default;
$--dialog-padding-primary: 15px !default;
$--dialog-padding-full: $--dialog-padding-primary $--dialog-padding-primary + 5px !default;

/* Table
-------------------------- */
$--table-border-color: $--border-color-lighter !default;
$--table-border:  1px solid $--border-color-lighter !default;
$--table-text-color: $--color-text-regular !default;
$--table-header-color: $--color-text-secondary !default;
$--table-row-hover-background: $color-gray--000 !default;
$--table--tree-row-0-background: $color-brand--005 !default;
$--table-current-row-background: $color-brand--010 !default;
$--table-header-background: transparent !default;
$--table-footer-background: $--color-text-placeholder !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;

/* Pagination
-------------------------- */
$--pagination-font-size: 14px !default;
$--pagination-fill: $--color-white !default;
$--pagination-color: $--color-text-primary !default;
$--pagination-border-radius: 3px !default;
$--pagination-button-color: $--color-text-primary !default;
$--pagination-button-width: 35.5px !default;
$--pagination-button-height: 28px !default;
$--pagination-button-disabled-color: $--color-text-placeholder !default;
$--pagination-button-disabled-fill: $--color-white !default;
$--pagination-hover-fill: $--color-primary !default;
$--pagination-hover-color: $--color-white !default;

/* Popover
-------------------------- */
$--popover-fill: $--color-white !default;
$--popover-font-size: $--font-size-base !default;
$--popover-border-color: $--border-color-lighter !default;
$--popover-arrow-size: 6px !default;
$--popover-padding: 12px !default;
$--popover-padding-large: 18px 20px !default;
$--popover-title-font-size: 16px !default;
$--popover-title-color: $--color-text-primary !default;

/* Tooltip
-------------------------- */
$--tooltip-fill: $--color-text-primary !default;
$--tooltip-color: $--color-white !default;
$--tooltip-font-size: 12px !default;
$--tooltip-border-color: $--color-text-primary !default;
$--tooltip-arrow-size: 6px !default;
$--tooltip-padding: 10px !default;

/* Tag
-------------------------- */
$--tag-padding: .1rem .7rem !default;
$--tag-fill: $color-brand--015 !default;
$--tag-color: $color-brand--100 !default;
$--tag-border: none !default;
$--tag-font-size: 1rem !default;
$--tag-border-radius: 1rem !default;

$--tag-info-fill: rgba($color-info-dark, .1) !default;
$--tag-info-border: rgba($color-info-dark, .2) !default;
$--tag-info-color: $color-info-dark !default;

$--tag-primary-fill: rgba($--color-primary, .1) !default;
$--tag-primary-border: rgba($--color-primary, .2) !default;
$--tag-primary-color: $--color-primary !default;

$--tag-success-fill: rgba($color-success-dark, .1) !default;
$--tag-success-border: rgba($color-success-dark, .2) !default;
$--tag-success-color: $color-success-dark !default;

$--tag-warning-fill: rgba($color-warning-dark, .1) !default;
$--tag-warning-border: rgba($color-warning-dark, .2) !default;
$--tag-warning-color: $color-warning-dark !default;

$--tag-danger-fill: rgba($color-danger-dark, .1) !default;
$--tag-danger-border: rgba($color-danger-dark, .2) !default;
$--tag-danger-color: $color-danger-dark !default;

/* Tree
-------------------------- */
$--tree-node-hover-color: $--background-color-base !default;
$--tree-text-color: $--color-text-regular !default;
$--tree-expand-icon-color: $--color-text-placeholder !default;

/* Dropdown
-------------------------- */
$--dropdown-menu-box-shadow: $--box-shadow-dark !default;
$--dropdown-menuItem-hover-fill: $--color-primary !default;
$--dropdown-menuItem-hover-color: $--color-white !default;

/* Badge
-------------------------- */
$--badge-fill: $color-danger-dark !default;
$--badge-radius: 10px !default;
$--badge-font-size: 12px !default;
$--badge-padding: 6px !default;
$--badge-size: 18px !default;

/* Card
--------------------------*/
$--card-border-color: $--border-color-lighter !default;
$--card-border-radius: 4px !default;
$--card-padding: 20px !default;

/* Slider
--------------------------*/
$--slider-main-background-color: $--color-primary !default;
$--slider-runway-background-color: $--border-color-light !default;
$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
$--slider-stop-background-color: $--color-white !default;
$--slider-disable-color: $--color-text-placeholder !default;

$--slider-margin: 16px 0 !default;
$--slider-border-radius: 3px !default;
$--slider-height: 6px !default;
$--slider-button-size: 16px !default;
$--slider-button-wrapper-size: 36px !default;
$--slider-button-wrapper-offset: -15px !default;

/* Steps
--------------------------*/
$--steps-border-color: $--disabled-border-base !default;
$--steps-border-radius: 4px !default;
$--steps-padding: 20px !default;

/* DatePicker
--------------------------*/
$--datepicker-color: $--color-text-regular !default;
$--datepicker-off-color: $--color-text-placeholder !default;
$--datepicker-header-color: $--color-text-regular !default;
$--datepicker-icon-color: $--color-text-primary !default;
$--datepicker-border-color: $--disabled-border-base !default;
$--datepicker-inner-border-color: #e4e4e4 !default;
$--datepicker-inrange-color: $--border-color-extra-light !default;
$--datepicker-inrange-hover-color: $--border-color-extra-light !default;
$--datepicker-active-color: $--color-primary !default;
$--datepicker-text-hover-color: $--color-primary !default;
$--datepicker-cell-hover-color: #fff !default;

/* Loading
--------------------------*/
$--loading-spinner-size: 42px !default;
$--loading-fullscreen-spinner-size: 50px !default;

/* Scrollbar
--------------------------*/
$--scrollbar-background-color: $color-gray--030 !default;
$--scrollbar-hover-background-color: $color-gray--040 !default;

/* Collapse
--------------------------*/
$--collapse-border-color: $--border-color-lighter !default;
$--collapse-header-height: 48px !default;
$--collapse-header-padding: 20px !default;
$--collapse-header-fill: $--color-white !default;
$--collapse-header-color: $--color-text-primary !default;
$--collapse-header-size: 13px !default;
$--collapse-content-fill: $--color-white !default;
$--collapse-content-size: 13px !default;
$--collapse-content-color: $--color-text-primary !default;

/* Transfer
--------------------------*/
$--transfer-border-color: $--border-color-lighter !default;
$--transfer-border-radius: $--border-radius-base !default;
$--transfer-panel-width: 200px !default;
$--transfer-panel-header-height: 40px !default;
$--transfer-panel-header-background: $--background-color-base !default;
$--transfer-panel-footer-height: 40px !default;
$--transfer-panel-body-height: 246px !default;
$--transfer-item-height: 30px !default;
$--transfer-item-hover-background: $--color-text-secondary !default;
$--transfer-filter-height: 32px !default;

/* Header (Used in docs)
  --------------------------*/
$--header-height: 65px !default;

/* Break-point
--------------------------*/
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
    "xs" : (max-width: $--sm),
    "sm" : (min-width: $--sm),
    "md" : (min-width: $--md),
    "lg" : (min-width: $--lg),
    "xl" : (min-width: $--xl)
);

$--breakpoints-spec: (
    "xs-only" : (max-width: $--sm - 1),
    "small-and-up" : (min-width: $--sm),
    "sm-only": (min-width: $--sm) "and" (max-width: $--md - 1),
    "sm-and-down": (max-width: $--md - 1),
    "md-and-up" : (min-width: $--md),
    "md-only": (min-width: $--md) "and" (max-width: $--lg - 1),
    "md-and-down": (max-width: $--lg - 1),
    "lg-and-up" : (min-width: $--lg),
    "lg-only": (min-width: $--lg) "and" (max-width: $--xl - 1),
    "lg-and-down": (max-width: $--xl - 1),
    "xl-only" : (min-width: $--xl),
);

/* Strings for JS matchMedia; must stay aligned with $--breakpoints-spec */
:export {
    xsOnly: "(max-width: #{$--sm - 1})";

    smOnly: "(min-width: #{$--sm}) and (max-width: #{$--md - 1})";
    smAndDown: "(max-width: #{$--md - 1})";
    smAndUp: "(min-width: #{$--sm})";

    mdOnly: "(min-width: #{$--md}) and (max-width: #{$--lg - 1})";
    mdAndDown: "(max-width: #{$--lg - 1})";
    mdAndUp: "(min-width: #{$--md})";

    lgOnly: "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})";
    lgAndDown: "(max-width: #{$--xl - 1})";
    lgAndUp: "(min-width: #{$--lg})";

    xlOnly: "(min-width: #{$--xl})";
}