support-for-ie = false
/*
 * components
 */

// button
button-primary-fill = var(--button-primary-fill)
button-primary-fill-disabled = var(--button-primary-fill-disabled)
button-primary-fill-tap = var(--button-primary-fill-tap)
button-primary-width = var(--button-primary-width)
button-primary-height = var(--button-primary-height)
button-primary-font-size = var(--button-primary-font-size)
button-primary-font-weight = var(--button-primary-font-weight)
button-primary-radius = var(--button-primary-radius)

button-ghost-fill = var(--button-ghost-fill)
button-ghost-fill-tap = var(--button-ghost-fill-tap)
button-ghost-primary-fill-tap = var(--button-ghost-primary-fill-tap)
button-ghost-width = var(--button-ghost-width)
button-ghost-height = var(--button-ghost-height)
button-ghost-width-sm = var(--button-ghost-width-sm)
button-ghost-height-sm = var(--button-ghost-height-sm)
button-ghost-font-size = var(--button-ghost-font-size)
button-ghost-color = var(--button-ghost-color)
button-ghost-primary-color = var(--button-ghost-primary-color)
button-ghost-radius = var(--button-ghost-radius)

button-link-fill = var(--button-link-fill)
button-link-fill-tap = var(--button-link-fill-tap)
button-link-width = var(--button-link-width)
button-link-height = var(--button-link-height)
button-link-color = var(--button-link-color)
button-link-border = var(--button-link-border)

button-icon-gap = var(--button-icon-gap)
button-disabled-opacity = var(--button-disabled-opacity)

// icon
icon-size-xs = var(--icon-size-xs)
icon-size-sm = var(--icon-size-sm)
icon-size-md = var(--icon-size-md)
icon-size-lg = var(--icon-size-lg)

// action-bar
action-bar-width = var(--action-bar-width)
action-bar-height = var(--action-bar-height)
action-bar-button-font-size = var(--action-bar-button-font-size)
action-bar-button-font-weight = var(--action-bar-button-font-weight)
action-bar-button-disabled-opacity = var(--action-bar-button-disabled-opacity)
action-bar-button-disabled-bg = var(--action-bar-button-disabled-bg)
action-bar-button-disabled-color = var(--action-bar-button-disabled-color)
action-bar-button-tap-bg = var(--action-bar-button-tap-bg)
action-bar-text-font-size = var(--action-bar-text-font-size)
action-bar-button-color = var(--action-bar-button-color)
action-bar-button-color-highlight = var(--action-bar-button-color-highlight)
action-bar-text-color = var(--action-bar-text-color)
action-bar-text-left = var(--action-bar-text-left)
action-bar-button-fill = var(--action-bar-button-fill)
action-bar-button-fill-highlight = var(--action-bar-button-fill-highlight)
action-bar-shadow = var(--action-bar-shadow)
action-bar-zindex = var(--action-bar-zindex)

// notice-bar
notice-bar-fill = var(--notice-bar-fill)
notice-bar-color = var(--notice-bar-color)
notice-bar-zindex = var(--notice-bar-zindex)

// stepper
stepper-fill = var(--stepper-fill)
stepper-disabled-opacity = var(--stepper-disabled-opacity)
stepper-color = var(--stepper-color)
stepper-font-size = var(--stepper-font-size)
stepper-input-font-size = var(--stepper-input-font-size)
stepper-height = var(--stepper-height)
stepper-width-button = var(--stepper-width-button)
stepper-width-input = var(--stepper-width-input)
stepper-radius-button = var(--stepper-radius-button)
stepper-radius-input = var(--stepper-radius-input)

// steps
steps-color = var(--steps-color)
steps-color-active = var(--steps-color-active)
steps-border = var(--steps-border)
steps-border-active = var(--steps-border-active)
steps-size = var(--steps-size)
steps-size-active = var(--steps-size-active)

// tab
tab-color = var(--tab-color)
tab-font-size = var(--tab-font-size)
tab-text-color = var(--color-text-base)
tab-bg = var(--color-bg-base)
tab-border-color = var(--tab-border-color)
tab-height = var(--tab-height)
tab-ink-bar-height = var(--tab-ink-bar-height)
tab-zindex = var(--tab-zindex)

// tag
tag-color = var(--tag-color)
tag-fillet-radius = var(--tag-fillet-radius)
tag-large-font-size = var(--tag-large-font-size)
tag-small-font-size = var(--tag-small-font-size)
tag-tiny-font-size = var(--tag-tiny-font-size)

// field
field-padding = var(--field-padding)
field-padding-h = var(--field-padding-h)
field-padding-v = var(--field-padding-v)
field-title-font-size = var(--field-title-font-size)
field-title-color = var(--field-title-color)
field-title-font-weight = var(--field-title-font-weight)
field-title-margin = var(--field-title-margin)
field-item-padding-v = var(--field-item-padding-v)
field-item-bg-color = var(--field-item-bg-color)
field-item-bg-tap-color = var(--field-item-bg-tap-color)
field-item-color = var(--field-item-color)
field-item-font-size = var(--field-item-font-size)
field-item-icon-color = var(--field-item-icon-color)
field-item-border-color = var(--field-item-border-color)
field-item-color-disabled = var(--field-item-color-disabled)
field-item-brief-font-size = var(--field-item-brief-font-size)
field-item-brief-color = var(--field-item-brief-color)

// input-item
input-item-height = var(--input-item-height)
input-item-title-width = var(--input-item-title-width)
input-item-title-gap = var(--input-item-title-gap)
input-item-font-size = var(--input-item-font-size)
input-item-title-latent-font-size = var(--input-item-title-latent-font-size)
input-item-font-size-large = var(--input-item-font-size-large)
input-item-font-size-error = var(--input-item-font-size-error)
input-item-font-weight = var(--input-item-font-weight)
input-item-color = var(--input-item-color)
input-item-title-latent-color = var(--input-item-title-latent-color)
input-item-color-disabled = var(--input-item-color-disabled)
input-item-color-error = var(--input-item-color-error)
input-item-placeholder = var(--input-item-placeholder)
input-item-placeholder-highlight = var(--input-item-placeholder-highlight)
input-item-icon = var(--input-item-icon)

// radio
radio-fill = var(--radio-fill)

// switch
switch-fill = var(--switch-fill)
switch-fill-inverse = var(--switch-fill-inverse)
switch-handle-color = var(--switch-handle-color)
switch-item-color-disabled = var(--switch-item-color-disabled)

// agree
agree-fill = var(--agree-fill)
agree-fill-inverse = var(--agree-fill-inverse)
agree-disabled-opacity = var(--agree-disabled-opacity)

// action-sheet
action-sheet-height = var(--action-sheet-height)
action-sheet-color = var(--action-sheet-color)
action-sheet-color-highlight = var(--action-sheet-color-highlight)
action-sheet-color-cancel = var(--action-sheet-color-cancel)
action-sheet-font-size = var(--action-sheet-font-size)
action-sheet-bg = var(--action-sheet-bg)
action-sheet-disabled-opacity = var(--action-sheet-disabled-opacity)
action-sheet-cancel-gap-bg = var(--action-sheet-cancel-gap-bg)
action-sheet-zindex = var(--action-sheet-zindex)

// picker
picker-font-size = var(--picker-font-size)
picker-disabled-opacity = var(--picker-disabled-opacity)
picker-color = var(--picker-color)
picker-zindex = var(--picker-zindex)

// selector
selector-height= var(--selector-height)
selector-disabled-opacity = var(--selector-disabled-opacity)
selector-font-size = var(--selector-font-size)
selector-color = var(--selector-color)
selector-active-color = var(--selector-active-color)
steps-text-color = var(--steps-text-color)
steps-text-font-size = var(--steps-text-font-size)
selector-zindex = var(--selector-zindex)

// dialog
dialog-width = var(--dialog-width)
dialog-radius = var(--dialog-radius)
dialog-title-font-size = var(--dialog-title-font-size)
dialog-title-color = var(--dialog-title-color)
dialog-text-font-size = var(--dialog-text-font-size)
dialog-text-color = var(--dialog-text-color)
dialog-action-height = var(--dialog-action-height)
dialog-action-font-size = var(--dialog-action-font-size)
dialog-action-border-color = var(--dialog-action-border-color)
dialog-close-color = var(--dialog-close-color)
dialog-action-highlight-color = var(--dialog-action-highlight-color)
dialog-icon-size = var(--dialog-icon-size)
dialog-icon-fill = var(--dialog-icon-fill)
dialog-zindex = var(--dialog-zindex)

// toast
toast-fill = var(--toast-fill)
toast-font-size = var(--toast-font-size)
toast-color = var(--toast-color)
toast-radius = var(--toast-radius)
toast-text-left = var(--toast-text-left)
toast-gap = var(--toast-gap)
toast-zindex = var(--toast-zindex)

// tip
tip-fill = var(--tip-fill)
tip-font-size = var(--tip-font-size)
tip-color = var(--tip-color)
tip-radius = var(--tip-radius)
tip-gap = var(--tip-gap)
tip-close-size = var(--tip-close-size)
tip-zindex = var(--tip-zindex)

// captcha
captcha-zindex = var(--captcha-zindex)
captcha-title-color = var(--captcha-title-color)
captcha-title-font-size = var(--captcha-title-font-size)
captcha-error-color = var(--captcha-error-color)
captcha-countbtn-gap = var(--captcha-countbtn-gap)

// codebox
codebox-font-size = var(--codebox-font-size)
codebox-width = var(--codebox-width)
codebox-gutter = var(--codebox-gutter)
codebox-border-color = var(--codebox-border-color)
codebox-border-active-color = var(--codebox-border-active-color)
codebox-blink-color = var(--codebox-blink-color)
codebox-input-height = var(--codebox-input-height)
codebox-input-padding = var(--codebox-input-padding)
codebox-input-font-size = var(--codebox-input-font-size)
codebox-input-border-color = var(--codebox-input-border-color)
codebox-input-radius = var(--codebox-input-radius)
codebox-dot-color = var(--codebox-dot-color)

// chart
chart-line-color = var(--chart-line-color)
chart-path-color = var(--chart-path-color)
chart-text-color = var(--chart-text-color)
chart-label-size = var(--chart-label-size)
chart-value-size = var(--chart-value-size)

// popup
popup-title-bar-bg = var(--popup-title-bar-bg)
popup-title-bar-border-color = var(--popup-title-bar-border-color)
popup-title-bar-height = var(--popup-title-bar-height)
popup-title-bar-font-size-button = var(--popup-title-bar-font-size-button)
popup-title-bar-font-size-title = var(--popup-title-bar-font-size-title)
popup-title-bar-color-title = var(--popup-title-bar-color-title)
popup-title-bar-color-button-left = var(--popup-title-bar-color-button-left)
popup-title-bar-color-button-right = var(--popup-title-bar-color-button-right)
popup-mask-bg = var(--popup-mask-bg)
popup-zindex = var(--popup-zindex)

// drop-menu
drop-menu-height = var(--drop-menu-height)
drop-menu-zindex = var(--drop-menu-zindex)
drop-menu-bar-bg = var(--drop-menu-bar-bg)
drop-menu-bar-border-color = var(--drop-menu-bar-border-color)
drop-menu-color = var(--drop-menu-color)
drop-menu-font-size = var(--drop-menu-font-size)
drop-menu-disabled-opacity = var(--drop-menu-disabled-opacity)

// number-keyboard
number-keyboard-width = var(--number-keyboard-width)
number-keyboard-height = var(--number-keyboard-height)
number-keyboard-key-height = var(--number-keyboard-key-height)
number-keyboard-key-bg = var(--number-keyboard-key-bg)
number-keyboard-key-bg-tap = var(--number-keyboard-key-bg-tap)
number-keyboard-key-confirm-bg = var(--number-keyboard-key-confirm-bg)
number-keyboard-key-confirm-bg-tap = var(--number-keyboard-key-confirm-bg-tap)
number-keyboard-key-font-size = var(--number-keyboard-key-font-size)
number-keyboard-key-color = var(--number-keyboard-key-color)
number-keyboard-key-color-simple = var(--number-keyboard-key-color-simple)
number-keyboard-zindex = var(--number-keyboard-zindex)

//tab-picker
tab-picker-font-size = var(--tab-picker-font-size)
tab-picker-color = var(--tab-picker-color)
tab-picker-highlight-color = var(--tab-picker-highlight-color)
tab-picker-min-height = var(--tab-picker-min-height)

// date-picker
date-picker-font-size = var(--date-picker-font-size)
date-time-picker-font-size = var(--date-time-picker-font-size)

// image-viewer
image-viewer-zindex = var(--image-viewer-zindex)
image-viewer-index-font-size = var(--image-viewer-index-font-size)
image-viewer-index-bottom = var(--image-viewer-index-bottom)

// cashier
cashier-bg = var(--cashier-bg)
cashier-choose-title-font-size = var(--cashier-choose-title-font-size)
cashier-choose-title-color = var(--cashier-choose-title-color)
cashier-choose-amount-font-size = var(--cashier-choose-amount-font-size)
cashier-choose-amount-color = var(--cashier-choose-amount-color)
cashier-choose-describe-font-size = var(--cashier-choose-describe-font-size)
cashier-choose-describe-color = var(--cashier-choose-describe-color)
cashier-choose-channel-font-size = var(--cashier-choose-channel-font-size)
cashier-choose-channel-color = var(--cashier-choose-channel-color)
cashier-choose-channel-icon-color = var(--cashier-choose-channel-icon-color)
cashier-choose-more-font-size = var(--cashier-choose-more-font-size)
cashier-choose-more-color = var(--cashier-choose-more-color)

/*
 * global color
 */

// brand color
color-primary = var(--color-primary) // 1st main color for buttons & highlight text which is not clickable
color-primary-tap = var(--color-primary-tap) // 2nd main color for links and selected element
color-primary-background = var(--color-primary-background) // 3rd main color for background

// text color
color-text-base = var(--color-text-base) // default text color
color-text-base-inverse = var(--color-text-base-inverse) // default inverse text color
color-text-minor = var(--color-text-minor) // auxiliary text color
color-text-caption = var(--color-text-caption) // subtitle and describe text  color
color-text-disabled = var(--color-text-disabled) // input placeholder
color-text-placeholder = var(--color-text-placeholder) // input placeholder
color-text-highlight = var(--color-text-highlight) // hight text color
color-text-link = var(--color-text-link) // link text color

// border color
color-border-base = var(--color-border-base) // defalut gap color of items
color-border-minor = var(--color-border-minor) // gap color of items
color-border-element = var(color-border-element) // border color of element such as button

// background color
color-bg-base = var(--color-bg-base) // default background color
color-bg-disabled = var(--color-bg-disabled) // background color for disabeld element
color-bg-mask = var(--color-bg-mask) // background color for mask layer
color-bg-tap = var(--color-bg-tap) // background color for element click state
color-bg-tap-highlight = var(--color-bg-tap-highlight) // background color for highlight element click state

// opacity
opacity-disabled = var(--opacity-disabled) // opacity of disabled button, switch, agree

/*
 * global size
 */

// text size
font-heading-large  = var(--font-heading-large)
font-heading-medium = var(--font-heading-medium)
font-heading-normal = var(--font-heading-normal)
font-body-large     = var(--font-body-large)
font-body-normal    = var(--font-body-normal)
font-minor-large    = var(--font-minor-large)
font-minor-normal   = var(--font-minor-normal)

font-weight-normal = var(--font-weight-normal)
font-weight-medium = var(--font-weight-medium)
font-weight-bold   = var(--font-weight-bold)

// radius size
radius-normal = var(--radius-normal)
radius-circle = var(--radius-circle)

// border size
border-width-base = var(--border-width-base)

// gap size
h-gap-sm = var(--h-gap-sm)
h-gap-md = var(--h-gap-md)
h-gap-lg = var(--h-gap-lg)
v-gap-sm = var(--v-gap-sm)
v-gap-md = var(--v-gap-md)
v-gap-lg = var(--v-gap-lg)

/*
 * global other
 */

// box shadow
shadow-bottom    = var(--shadow-bottom)
shadow-top = var(--shadow-top)

// animate
ease-in-out-quint = cubic-bezier(.86, 0, .07, 1)

font-family-normal = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif