@import './common.scss';
// ===============项目使用建议使用以下变量==================
// 主色调
$color-primary: var(--nutui-color-primary, $color-primary) !default;
$color-primary-stop-1: var(--nutui-color-primary-stop-1, $color-primary) !default;
$color-primary-stop-2: var(--nutui-color-primary-stop-2, $color-primary) !default;
$color-primary-pressed: var(--nutui-color-primary-pressed, $color-primary) !default;
$color-primary-disabled: var(--nutui-color-primary-disabled, $color-primary) !default;
$color-primary-disabled-special: var(--nutui-color-primary-disabled-special, $color-primary) !default;
$color-primary-light: var(--nutui-color-primary-light, $color-primary-background) !default;
$color-primary-light-pressed: var(--nutui-color-primary-light-pressed, $color-primary-background) !default;
$color-primary-background: var(--nutui-color-primary-background, $color-primary-background) !default;
$color-primary-disabled-special: var(--nutui-color-primary-disabled-special, $color-primary-background) !default;

// 信息
$color-info: var(--nutui-color-info, $color-primary) !default;
$color-info-pressed: var(--nutui-color-info-pressed, $color-primary) !default;
$color-info-disabled: var(--nutui-color-info-disabled, $color-primary) !default;
$color-info-light: var(--nutui-color-info-light, $color-primary-background) !default;
$color-info-background: var(--nutui-color-info-background, $color-primary-background) !default;

// 成功
$color-success: var(--nutui-color-success, $color-success) !default;
$color-success-pressed: var(--nutui-color-success-pressed, $color-success) !default;
$color-success-disabled: var(--nutui-color-success-disabled, $color-success) !default;
$color-success-light: var(--nutui-color-success-light, $color-success-background) !default;
$color-success-background: var(--nutui-color-success-background, $color-success-background) !default;

// 警告
$color-warning: var(--nutui-color-warning, $color-warning) !default;
$color-warning-pressed: var(--nutui-color-warning-pressed, $color-warning) !default;
$color-warning-disabled: var(--nutui-color-warning-disabled, $color-warning) !default;
$color-warning-light: var(--nutui-color-warning-light, $color-warning-background) !default;
$color-warning-background: var(--nutui-color-warning-background, $color-warning-background) !default;

// 危险
$color-danger: var(--nutui-color-danger, $color-error) !default;
$color-danger-pressed: var(--nutui-color-danger-pressed, $color-error) !default;
$color-danger-disabled: var(--nutui-color-danger-disabled, $color-error) !default;
$color-danger-light: var(--nutui-color-danger-light, $color-error-background) !default;
$color-danger-background: var(--nutui-color-danger-background, $color-error-background) !default;

$black-1: var(--nutui-black-1, $color-border) !default;
$black-2: var(--nutui-black-2, rgba(0, 0, 0, 0.2)) !default;
$black-3: var(--nutui-black-3, rgba(0, 0, 0, 0.3)) !default;
$black-4: var(--nutui-black-4, $color-text-disabled) !default;
$black-6: var(--nutui-black-6, $color-text) !default;
$black-7: var(--nutui-black-7, rgba(0, 0, 0, 0.7)) !default;
$black-95: var(--nutui-black-95, $color-title) !default;

// 文本颜色
$color-white: var(--nutui-color-white, #fff) !default;
$color-black: var(--nutui-color-black, #000) !default;
$color-title: var(--nutui-color-title, $color-title) !default; // 标题常规文字
$color-text: var(--nutui-color-text, $color-text) !default; // 文本内容
$color-text-disabled: var(--nutui-color-text-disabled, $color-text-disabled) !default; // 特殊禁用色
$color-text-dark: var(--nutui-color-text-dark, $color-white) !default; //	深色背景下的反向文本色
$color-text-help: var(--nutui-color-text-help, $color-text-disabled) !default; // TODO
$color-text-link: var(--nutui-color-text-link, $color-primary) !default; //链接文本色
$color-required: var(--nutui-color-required, $color-error) !default; //必填色
$color-mask: var(--nutui-color-mask, $color-mask) !default; // 蒙层颜色
$color-border: var(--nutui-color-border, $color-border) !default; // 分割信息的颜色
$color-border-secondary: var(--color-border-secondary, $color-border-secondary) !default;
$color-border-disabled: var(--nutui-color-border-disabled, $color-white) !default;

// 背景颜色
$color-background: var(--nutui-color-background, $color-background) !default; // 背景色
$color-background-overlay: var(--nutui-color-background-overlay, $color-white) !default; // 卡片背景色
$color-background-sunken: var(
  --nutui-color-background-sunken,
  $color-background
) !default; // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
$color-disabled-opacity: var(--nutui-color-disabled-opacity, 0.4) !default; // 用户按钮、checkbox选中等禁用透明度。

// Font-weight
$font-weight: var(--nutui-font-weight, 400) !default;
$font-weight-bold: var(--nutui-font-weight-bold, 700) !default;

// Radius
$radius-full: var(--nutui-radius-full, 50%) !default;

// Font
$icon-font-size: var(--nutui-icon-font-size, 16px) !default;
$button-icon-font-size: var(--nutui-button-icon-font-size, 20px) !default;
$button-small-icon-font-size: var(--nutui-button-small-icon-font-size, 16px) !default;
$button-mini-icon-font-size: var(--nutui-button-mini-icon-font-size, 14px) !default;
$dialog-icon-font-size: var(--nutui-dialog-icon-font-size, 20px) !default;

// 间距
$spacing-0: var(--nutui-spacing-0, 4px) !default;
$spacing-1: var(--nutui-spacing-1, 8px) !default;
$spacing-2: var(--nutui-spacing-2, 12px) !default;
$spacing-3: var(--nutui-spacing-3, 16px) !default;
$spacing-4: var(--nutui-spacing-4, 20px) !default;
$spacing-5: var(--nutui-spacing-5, 24px) !default;
// =====================================================

// 圆角 corners
$radius-xxs: $radius-0 !default; // 极小号按钮、标签、多选框等组件的圆角样式
$radius-xs: $radius-1 !default; // 极小、小号的按钮、标签等组件的圆角样式
$radius-s: $radius-2 !default; // 中号、大号按钮、输入框等表单组件的圆角样式
$radius-base: $radius-2 !default; // 常规宫格排列的卡片圆角样式
$radius-l: $radius-2 !default; // 下拉菜单、popup 等组件的默认圆角样式
$radius-xl: $radius-2 !default; // 一级页面模块容器使用的圆角样式

// Font
$font-size-xxxs: $font-size-0 !default;
$font-size-xxs: $font-size-0 !default;
$font-size-xs: $font-size-0 !default;
$font-size-s: $font-size-1 !default;
$font-size-base: $font-size-2 !default;
$font-size-l: $font-size-3 !default;
$font-size-xl: $font-size-4 !default;
$font-size-xxl: $font-size-4 !default;
$font-size-xxxl: $font-size-4 !default;
$font-size-xxxxl: $font-size-4 !default;

// Layout
$row-content-background-color: var(--nutui-row-content-background-color, var(--row-content-bg-color, #ff8881)) !default;
$row-content-light-background-color: var(--row-content-light-bg-color, #ffc7c4) !default;

// button
$button-border-radius: var(--nutui-button-border-radius, $radius-2);
$button-border-width: var(--nutui-button-border-width, 1px) !default;
$button-xlarge-height: var(--nutui-button-xlarge-height, 52px) !default;
$button-xlarge-padding: var(--nutui-button-xlarge-padding, 0 $spacing-3) !default;
$button-xlarge-font-size: var(--nutui-button-xlarge-font-size, $font-size-3) !default;
$button-xlarge-border-radius: var(--nutui-xlarge-button-border-radius, $radius-2) !default;
$button-large-height: var(--nutui-button-large-height, 48px) !default;
$button-large-padding: var(--nutui-button-large-padding, 0px $spacing-3) !default;
$button-large-font-size: var(--nutui-button-large-font-size, $font-size-3) !default;
$button-large-font-weight: var(--nutui-button-large-font-weight, $font-weight-bold) !default;
$button-large-border-radius: var(--nutui-button-large-border-radius, $radius-2) !default;
$button-default-height: var(--nutui-button-default-height, 40px) !default;
$button-default-padding: var(--nutui-button-default-padding, 0px $spacing-3) !default;
$button-default-font-size: var(--nutui-button-default-font-size, $font-size-3) !default;
$button-small-font-size: var(--nutui-button-small-font-size, $font-size-2) !default;
$button-small-padding: var(--nutui-button-small-padding, 0px $spacing-3) !default;
$button-small-height: var(--nutui-button-small-height, 32px) !default;
$button-small-font-weight: var(--nutui-button-small-font-weight, $font-weight-bold) !default;
$button-small-border-radius: var(--nutui-button-small-border-radius, $radius-1) !default;
$button-mini-padding: var(--nutui-button-mini-padding, 0px $spacing-3) !default;
$button-mini-height: var(--nutui-button-mini-height, 24px) !default;
$button-mini-font-size: var(--nutui-button-mini-font-size, $font-size-1) !default;
$button-mini-font-weight: var(--nutui-button-mini-font-weight, $font-weight-bold) !default;
$button-mini-border-radius: var(--nutui-button-mini-border-radius, $radius-1) !default;
$button-default-color: var(--nutui-button-default-color, $color-text) !default;
$button-default-border-color: var(--nutui-button-default-border-color, $color-border-secondary) !default;
$button-default-background-color: var(--nutui-button-default-background-color, $color-white) !default;
$button-default-disabled: var(--nutui-button-default-disabled, $color-border-secondary) !default;
$button-default-disabled-color: var(--nutui-button-default-disabled-color, $color-text) !default;
$button-info-background-color: var(--nutui-button-info-background-color, $color-info) !default;
$button-danger-background-color: var(--nutui-button-danger-background-color, $color-danger) !default;
$button-success-background-color: var(--nutui-button-success-background-color, $color-success) !default;
$button-warning-background-color: var(--nutui-button-warning-background-color, $color-warning) !default;

// Cell
$cell-title-color: var(--nutui-cell-title-color, $color-title) !default;
$cell-title-font-size: var(--nutui-cell-title-font-size, $font-size-2) !default;
$cell-description-font-size: var(--nutui-cell-description-font-size, $font-size-2) !default;
$cell-description-color: var(--nutui-cell-description-color, $color-text) !default;
$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-size-2) !default;
$cell-extra-color: var(--nutui-cell-extra-color, $color-title) !default;
$cell-border-radius: var(--nutui-cell-border-radius, $radius-1) !default;
$cell-padding: var(--nutui-cell-padding, $spacing-3) !default;
$cell-line-height: var(--nutui-cell-line-height, 24px) !default;
$cell-divider-right: var(--nutui-cell-divider-right, $spacing-3) !default;
$cell-divider-left: var(--nutui-cell-divider-left, $spacing-3) !default;
$cell-divider-border-bottom: var(--nutui-cell-divider-border-bottom, 0.5px solid $color-border) !default;
$cell-background-color: var(--nutui-cell-background-color, $color-background-overlay) !default;
$cell-box-shadow: var(--nutui-cell-box-shadow, 0px 1px 7px 0px rgba(237, 238, 241, 1)) !default;

// cell-group
$cell-group-title-padding: var(--nutui-cell-group-title-padding, 0 12px) !default;
$cell-group-title-color: var(--nutui-cell-group-title-color, $color-title) !default;
$cell-group-title-font-size: var(--nutui-cell-group-title-font-size, $font-size-2) !default;
$cell-group-title-line-height: var(--nutui-cell-group-title-line-height, 24px) !default;
$cell-group-description-padding: var(--nutui-cell-group-description-padding, 0 12px) !default;
$cell-group-description-color: var(--nutui-cell-group-description-color, $color-text) !default;
$cell-group-description-font-size: var(--nutui-cell-group-description-font-size, $font-size-1) !default;
$cell-group-description-line-height: var(--nutui-cell-group-description-line-height, 16px) !default;
$cell-group-background-color: var(--nutui-cell-group-background-color, $color-background-overlay) !default;
$cell-group-wrap-margin: var(--nutui-cell-group-wrap-margin, 0) !default;

// Divider
$divider-spacing: var(--nutui-divider-spacing, $spacing-3) !default;
$divider-vertical-margin: var(--nutui-divider-vertical-margin, 0 $spacing-3) !default;
$divider-border-color: var(--nutui-divider-border-color, $color-border);
$divider-vertical-height: var(--nutui-divider-vertical-height, 14px) !default;
$divider-text-color: var(--nutui-divider-text-color, $color-title) !default;

// Spacing
$space-gap: var(--nutui-space-gap, $spacing-2) !default;

// form
$form-item-error-line-color: var(--nutui-form-item-error-line-color, $color-error) !default;
$form-item-required-color: var(--nutui-form-item-required-color, $color-error) !default;
$form-item-error-message-color: var(--nutui-form-item-error-message-color, $color-error) !default;
$form-item-label-font-size: var(--nutui-form-item-label-font-size, $font-size-2) !default;
$form-item-label-width: var(--nutui-form-item-label-width, 90px) !default;
$form-item-label-margin-right: var(--nutui-form-item-label-margin-right, $spacing-3) !default;
$form-item-label-text-align: var(--nutui-form-item-label-text-align, left) !default;
$form-item-required-margin-right: var(--nutui-form-item-required-margin-right, 4px) !default;
$form-item-required-margin-left: var(--nutui-form-item-required-margin-left, $spacing-0) !default;
$form-item-body-font-size: var(--nutui-form-item-body-font-size, $font-size-2) !default;
$form-item-body-slots-text-align: var(--nutui-form-item-body-slots-text-align, left) !default;
$form-item-body-input-text-align: var(--nutui-form-item-body-input-text-align, left) !default;
$form-item-tip-font-size: var(--nutui-form-item-tip-font-size, $font-size-1) !default;
$form-item-tip-text-align: var(--nutui-form-item-tip-text-align, left) !default;
$form-item-vertical-gap: var(--nutui-form-item-vertical-gap, $spacing-1) !default;
$form-item-vertical-padding: var(--nutui-form-item-vertical-padding, $spacing-3) !default;
$form-item-horizontal-padding: var(--nutui-form-item-horizontal-padding, 0) !default;

// Navbar
$navbar-title-font-size: var(--nutui-navbar-title-font-size, $font-size-2) !default;

// badge
$badge-background-color: var(--nutui-badge-background-color, $color-danger) !default;

// Tabbar
$tabbar-text-font-size: var(--nutui-tabbar-text-font-size, $font-size-0) !default;

// Tabs
$tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, $spacing-3) !default;
$tabs-titles-font-size: var(--nutui-tabs-titles-font-size, $font-size-3) !default;
$tabs-titles-item-active-font-size: var(--nutui-tabs-titles-item-active-font-size, $font-size-3) !default;
$tabs-titles-background-color: var(--nutui-tabs-titles-background-color, transparent) !default;
$tabs-titles-item-min-width: var(--nutui-tabs-titles-item-min-width, 34px) !default;
$tabs-titles-icon-font-size: var(--nutui-tabs-titles-icon-font-size, 28px) !default;
$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, 28px) !default;
$tabs-tab-line-height: var(--nutui-tabs-tab-line-height, 4px) !default;
$tabs-tab-line-border-radius: var(--nutui-tabs-line-border-radius, 3px) !default;
$tabs-tab-line-color: var(--nutui-tabs-tab-line-color, $color-primary) !default;
$tabs-tab-line-bottom: var(--nutui-tabs-line-bottom, 2px) !default;
$tabs-titles-height: var(--nutui-tabs-titles-height, 48px) !default;
$tabs-titles-gap: var(--nutui-tabs-titles-gap, $spacing-3) !default;
$tabs-tab-button-height: var(--nutui-tabs-button-border-radius, 32px) !default;
$tabs-tab-button-border-radius: var(--nutui-tabs-button-border-radius, $radius-1) !default;
$tabs-tab-button-font-size: var(--nutui-tabs-tab-button-font-size, $font-size-2) !default;
$tabs-titles-item-active-color: var(--nutui-tabs-titles-item-active-color, $color-primary) !default;
$tabs-tab-button-active-border: var(--nutui-tabs-button-active-border, 1px solid $color-primary) !default;
$tabs-tab-button-active-background-color: var(
  --nutui-tabs-button-active-background-color,
  $color-primary-background
) !default;
$tabs-tab-button-background-color: var(--nutui-tabs-button-active-background-color, $color-background) !default;
// $tabs-vertical-tab-line-color: var(--nutui-tabs-vertical-tab-line-color, $color-primary) !default;
// $tabs-vertical-tab-line-width: var(--nutui-tabs-vertical-tab-line-width, 4px ) !default;
// $tabs-vertical-tab-line-height: var(--nutui-tabs-vertical-tab-line-height, 28px) !default;

// cascader（✅）
$cascader-font-size: var(--nutui-cascader-font-size, $font-size-2) !default;
$cascader-pane-height: var(--nutui-cascader-pane-height, 342px) !default;
$cascader-pane-paddingTop: var(--nutui-cascader-pane-paddingTop, $spacing-1) !default;
$cascader-icon-checklist-marginLeft: var(--nutui-cascader-icon-checklist-marginLeft, $spacing-2) !default;
$cascader-tabs-item-padding: var(--nutui-cascader-tabs-item-padding, 0 10px) !default;
$cascader-item-padding: var(--nutui-cascader-item-padding, $spacing-2 $spacing-3) !default;
$cascader-item-margin: var(--nutui-cascader-item-margin, 0px) !default;
$cascader-item-border-bottom: var(--nutui-cascader-item-border-bottom, 0px solid $color-border) !default;
$cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default;
$cascader-item-font-size: var(--nutui-cascader-item-font-size, $font-size-2) !default;
$cascader-item-active-color: var(--nutui-cascader-item-active-color, $color-primary) !default;

// checkbox
$checkbox-icon-font-size: var(--nutui-checkbox-icon-font-size, $font-size-4) !default;
$checkbox-label-disable-color: var(--nutui-checkbox-label-disable-color, $color-text-disabled) !default;
$checkbox-label-margin-left: var(--nutui-checkbox-label-margin-left, $spacing-0) !default;
$checkbox-label-color: var(--nutui-checkbox-label-color, $color-title) !default;
$checkbox-label-font-size: var(--nutui-checkbox-label-font-size, $font-size-2) !default;
// $checkbox-button-font-size: var(--nutui-checkbox-button-font-size, $font-size-small) !default;
// $checkbox-button-color: $color-text;
// $checkbox-button-background: $color-background;
// $checkbox-button-padding: var(--nutui-checkbox-button-padding, 5px 18px) !default;
// $checkbox-button-border-radius: var(--nutui-checkbox-button-border-radius, 15px) !default;
// $checkbox-button-active-border: var(--nutui-checkbox-button-active-border, 1px solid $color-primary) !default;
// $checkbox-button-disabled-active-color: var(--nutui-checkbox-button-disabled-active-color, $color-white) !default;
// $checkbox-list-background-color: var(--nutui-checkbox-list-background-color,$color-white) !default;
$checkbox-list-item-border: var(--nutui-checkbox-list-item-border, 1px solid $color-border) !default;
$checkbox-list-padding: var(--nutui-checkbox-list-padding, 0 $spacing-3) !default;
$checkbox-list-item-padding: var(--nutui-checkbox-list-item-padding, 0) !default;

// input
$input-padding: var(--nutui-input-padding, $spacing-3) !default;
$input-border-radius: var(--nutui-input-border-radius, $radius-1) !default;
$input-disabled-color: var(--nutui-input-disabled-color, $color-text-disabled) !default;
$input-color: var(--nutui-input-color, $color-title) !default;

// input-number
$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0 $spacing-0) !default;
$inputnumber-input-border-radius: var(--nutui-inputnumber-input-border-radius, $radius-0) !default;

// NumberKeyboard
$numberkeyboard-key-border-radius: var(--nutui-numberkeyboard-key-border-radius, $radius-1) !default;

// picker
// $picker-list-min-height: var(--nutui-picker-list-height, calc(36% - 64px)) !default;

// picker（✅）
$picker-title-cancel-color: var(--nutui-picker-title-cancel-color, $color-text) !default;
$picker-title-cancel-font-size: var(--nutui-picker-title-cancel-font-size, $font-size-2) !default;
$picker-title-ok-color: var(--nutui-picker-title-ok-color, $color-primary) !default;
$picker-title-ok-font-size: var(--nutui-picker-title-ok-font-size, $font-size-2) !default;

// picker-view（✅）
$picker-item-height: var(--nutui-picker-item-height, 48px) !default;
$picker-list-height: calc($picker-item-height * 5) !default;
$picker-item-text-color: var(--nutui-picker-item-text-color, $color-title) !default;
$picker-item-text-font-size: var(--nutui-picker-item-text-font-size, $font-size-base) !default;
$picker-item-active-line-border: var(--nutui-picker-item-active-line-border, 0.5px solid $color-border) !default;
$picker-item-active-font-weight: var(--nutui-picker-item-active-font-weight, $font-weight-bold) !default;

// Radio
$radio-label-font-size: var(--nutui-radio-label-font-size, $font-size-2) !default;
$radio-label-margin-left: var(--nutui-radio-label-margin-left, $spacing-0) !default;
$radio-icon-font-size: var(--nutui-radio-icon-font-size, $font-size-4) !default;
$radio-button-background: var(--nutui-radio-button-background, $color-background) !default;
$radio-button-active-border: var(--nutui-radio-button-active-border, 1px solid $color-primary) !default;
$radio-button-disabled-active-color: var(--nutui-radio-button-disabled-active-color, $color-text-disabled) !default;
$radio-label-font-active-color: var(--nutui-radio-label-font-active-color, $color-primary) !default;
$radiogroup-radio-margin: var(--nutui-radiogroup-radio-margin, $spacing-3) !default;
$radiogroup-radio-margin-bottom: var(--nutui-radiogroup-radio-margin-bottom, $spacing-2) !default;
$radiogroup-radio-label-margin: var(--nutui-radiogroup-radio-label-margin, 0 $spacing-1) !default;

// searchbar（✅）
$searchbar-width: var(--nutui-searchbar-width, 100%) !default;
$searchbar-padding: var(--nutui-searchbar-padding, 0px 0px) !default;
$searchbar-background: var(--nutui-searchbar-background, inherit) !default;
$searchbar-color: var(--nutui-searchbar-color, $color-title) !default;
$searchbar-gap: var(--nutui-searchbar-gap, $spacing-2) !default;
$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, $spacing-1) !default;
$searchbar-font-size: var(--nutui-searchbar-font-size, $font-size-2) !default;
$searchbar-content-background: var(--nutui-searchbar-content-background, $color-background) !default;
$searchbar-content-border-radius: var(--nutui-searchbar-content-border-radius, $radius-1) !default;
$searchbar-content-round-border-radius: var(--nutui-searchbar-content-round-border-radius, $radius-circle) !default;
$searchbar-content-border: var(--nutui-searchbar-content-border, 1px solid $color-border) !default;
$searchbar-right-color: var(--nutui-searchbar-right-color, $color-primary) !default;
$searchbar-icon-size: var(--nutui-searchbar-icon-size, $icon-font-size) !default;
$searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default;
$searchbar-input-text-color: var(--nutui-searchbar-input-text-color, $color-title) !default;
$searchbar-input-curror-color: var(--nutui-searchbar-input-curror-color, $color-text-disabled) !default;
$searchbar-input-text-align: var(--nutui-searchbar-input-text-align, left) !default;

// textarea
$textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
$textarea-padding: var(--nutui-textarea-padding, $spacing-2) !default;
$textarea-height: var(--nutui-textarea-height, 24px) !default;

// TODO Uploader(重写)
$uploader-image-icon-tip-color: var(--nutui-uploader-picture-icon-tip-color, $color-text-disabled) !default;
$uploader-image-width: var(--nutui-uploader-image-width, 101px) !default;
$uploader-image-height: var(--nutui-uploader-image-height, 101px) !default;
$uploader-image-border: var(--nutui-uploader-image-border, 0px) !default;
$uploader-image-border-radius: var(--nutui-uploader-image-border-radius, $radius-1) !default;
$uploader-background: var(--nutui-uploader-background, $color-background) !default;
$uploader-background-disabled: var(--nutui-uploader-background-disabled, $color-background) !default;
// $uploader-image-color: var(--nutui-uploader-image-color, $color-text-help) !default;
// $uploader-image-disabled: var(--nutui-uploader-image-disabled, $color-text-disabled) !default;
$uploader-image-icon-margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, $spacing-0) !default;
$uploader-image-icon-tip-font-size: var(--nutui-uploader-image-icon-tip-font-size, $font-size-1) !default;
$uploader-preview-progress-background: var(
  --nutui-uploader-preview-progress-background,
  $color-mask-secondary
) !default;
$uploader-preview-margin-right: var(--nutui-uploader-preview-margin-right, $spacing-2) !default;
$uploader-preview-margin-bottom: var(--nutui-uploader-preview-margin-bottom, $spacing-2) !default;
$uploader-preview-tips-height: var(--nutui-uploader-preview-tips-height, 24px) !default;
$uploader-preview-tips-background: var(--nutui-uploader-preview-tips-background, $color-mask) !default;
$uploader-preview-tips-padding: var(--nutui-uploader-preview-tips-padding, 0 $spacing-0) !default;
$uploader-preview-close-right: var(--nutui-uploader-preview-close-right, 0px) !default;
$uploader-preview-close-top: var(--nutui-uploader-preview-close-top, 0px) !default;

// Badge
$badge-font-size: var(--nutui-badge-font-size, $font-size-0) !default;

// dialog
$dialog-width: var(--nutui-dialog-width, 295px) !default;
$dialog-padding: var(--nutui-dialog-padding, $spacing-5) !default;
$dialog-min-height: var(--nutui-dialog-min-height, 124px) !default;
$dialog-border-radius: var(--nutui-dialog-border-radius, $radius-3) !default;
$dialog-footer-justify-content: var(--nutui-dialog-footer-justify-content, space-around) !default;
$dialog-content-margin: var(--nutui-dialog-content-margin, $spacing-1 0 $spacing-5 0) !default;
$dialog-content-max-height: var(--nutui-dialog-content-max-height, 268px) !default;
$dialog-content-line-height: var(--nutui-dialog-content-line-height, 20px) !default;
$dialog-content-text-align: var(--nutui-dialog-content-text-align, left) !default;
$dialog-footer-button-min-width: var(--nutui-dialog-footer-button-min-width, 117px) !default;
$dialog-footer-cancel-margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12px) !default;
$dialog-footer-ok-max-width: var(--nutui-dialog-footer-ok-max-width, 128px) !default;
$dialog-header-font-size: var(--nutui-dialog-header-font-size, $font-size-3) !default;
$dialog-header-font-weight: var(--nutui-dialog-header-font-weight, $font-weight-bold) !default;
$dialog-vertical-footer-ok-margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 5px) !default;
$dialog-close-color: var(--nutui-dialog-close-color, $color-title) !default;
$dialog-close-width: var(--nutui-dialog-close-width, $dialog-icon-font-size) !default;
$dialog-close-height: var(--nutui-dialog-close-height, $dialog-icon-font-size) !default;
$dialog-close-top: var(--nutui-dialog-close-top, $spacing-2) !default;
$dialog-close-left: var(--nutui-dialog-close-left, $spacing-2) !default;
$dialog-close-right: var(--nutui-dialog-close-right, $spacing-2) !default;
$dialog-cancel-color: var(--nutui-dialog-cancel-color, $color-text) !default;
$dialog-cancel-font-size: var(--nutui-dialog-cancel-font-size, $font-size-3) !default;

// empty
$empty-title-margin-top: var(--nutui-empty-title-margin-top, $spacing-0) !default;

// loading
$loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default;
$loading-icon-size: var(--nutui-loading-icon-size, $icon-font-size) !default;
$loading-color: var(--nutui-loading-color, $color-text-help) !default;
$loading-font-size: var(--nutui-loading-font-size, $font-size-2) !default;

// NoticeBar
$noticebar-height: var(--nutui-noticebar-height, 40px) !default;
$noticebar-background: var(--nutui-noticebar-background, $color-primary-background) !default;
$noticebar-color: var(--nutui-noticebar-color, $color-primary) !default;
$noticebar-error-background: var(--nutui-noticebar-error-background, $color-danger-background) !default;
$noticebar-error-color: var(--nutui-noticebar-error-color, $color-danger) !default;
$noticebar-success-background: var(--nutui-noticebar-success-background, $color-success-background) !default;
$noticebar-success-color: var(--nutui-noticebar-success-color, $color-success) !default;
$noticebar-warning-background: var(--nutui-noticebar-warning-background, $color-warning-background) !default;
$noticebar-warning-color: var(--nutui-noticebar-warning-color, $color-warning) !default;
$noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-2) !default;
$noticebar-line-height: var(--nutui-noticebar-line-height, 22px) !default;
$noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 $spacing-3) !default;
$noticebar-border-radius: var(--nutui-noticebar-border-radius, 0) !default;
$noticebar-wrap-padding: var(--nutui-noticebar-wrapable-padding, $spacing-2) !default;
$noticebar-icon-gap: var(--nutui-noticebar-icon-gap, $spacing-1) !default;
$noticebar-left-icon-width: var(--nutui-noticebar-left-icon-width, 20px) !default;
$noticebar-right-icon-width: var(--nutui-noticebar-right-icon-width, 20px) !default;

// Popover
$popover-border-radius: var(--nutui-popover-border-radius, $radius-2) !default;
$popover-font-size: var(--nutui-popover-font-size, $font-size-2) !default;

// popup
$popup-border-radius: var(--nutui-popup-border-radius, $radius-3) !default;
$popup-title-horizontal-padding: var(--nutui-popup-title-horizontal-padding, $spacing-3) !default;
$popup-title-vertical-padding: var(--nutui-popup-title-vertical-padding, $spacing-4) !default;
$popup-title-padding: var(
  --nutui-popup-title-padding,
  $popup-title-vertical-padding $popup-title-horizontal-padding
) !default;
$popup-title-font-size: var(--nutui-popup-title-font-size, $font-size-3) !default;
$popup-title-height: var(--nutui-popup-title-height, inherit) !default;
$popup-title-font-weight: var(--nutui-popup-title-font-weight, $font-weight-bold) !default;
$popup-icon-size: var(--nutui-popup-icon-size, $icon-font-size) !default;
$popup-description-font-size: var(--nutui-popup-description-font-size, $font-size-2) !default;
$popup-min-height: var(--nutui-popup-min-height, 36%) !default;
$popup-max-height: var(--nutui-popup-max-height, 80%) !default;

// Toast
$toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
$toast-title-font-size: var(--nutui-toast-title-font-size, $font-size-3) !default;
$toast-text-font-size: var(--nutui-toast-text-font-size, $font-size-3) !default;
$toast-font-color: var(--nutui-toast-font-color, $color-white) !default;
$toast-inner-padding: var(--nutui-toast-inner-padding, 24px) !default;
$toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default;
$toast-inner-border-radius: var(--nutui-toast-inner-border-radius, $radius-3) !default;
$toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;

// CountDown
$countdown-font-size: var(--nutui-countdown-font-size, $font-size-2) !default;

// Tag
$tag-padding: var(--nutui-tag-padding, 0 $spacing-1) !default;
$tag-border-radius: var(--nutui-tag-border-radius, $radius-0) !default;
$tag-font-size: var(--nutui-tag-font-size, $font-size-0) !default;
$tag-height: var(--nutui-tag-height, 20px) !default;

$tag-large-border-radius: var(--nutui-tag-large-border-radius, $radius-1) !default;
$tag-large-height: var(--nutui-tag-large-height, 24px) !default;
$tag-large-font-size: var(--nutui-tag-large-font-size, $font-size-1) !default;

$tag-color: var(--nutui-tag-color, $color-text-disabled) !default;
$tag-background-color: var(--nutui-tag-background-color, $color-border) !default;
$tag-primary-color: var(--nutui-tag-primary-color, $color-primary) !default;
$tag-primary-background-color: var(--nutui-tag-primary-background-color, $color-primary-background) !default;
$tag-success-color: var(--nutui-tag-success-color, $color-success) !default;
$tag-success-background-color: var(--nutui-tag-success-background-color, $color-success-background) !default;
$tag-danger-color: var(--nutui-tag-danger-color, $color-error) !default;
$tag-danger-background-color: var(--nutui-tag-danger-background-color, $color-error-background) !default;
$tag-warning-color: var(--nutui-tag-warning-color, $color-warning) !default;
$tag-warning-background-color: var(--nutui-tag-warning-background-color, $color-warning-background) !default;

// selector
$selector-gap: var(--nutui-selector-gap, $spacing-2) !default;
$selector-item-active-border-color: var(--nutui-selector-item-active-border-color, $color-primary) !default;
$selector-item-active-background-color: var(
  --nutui-selector-item-active-background-color,
  $color-primary-background
) !default;
$selector-item-active-color: var(--nutui-selector-item-active-color, $color-primary) !default;
$selector-item-background-color: var(--nutui-selector-item-background-color, $color-background) !default;
$selector-item-color: var(--nutui-selector-item-color, $color-title) !default;
$selector-item-small-height: var(--nutui-selector-item-small-height, 32px) !default;
$selector-item-default-height: var(--nutui-selector-item-default-height, 36px) !default;
$selector-item-large-height: var(--nutui-selector-item-large-height, 40px) !default;
$selector-item-font-size: var(--nutui-selector-item-font-size, $font-size-2) !default;
$selector-item-radius: var(--nutui-selector-item-radius, $radius-1) !default;
$selector-item-active-icon-size: var(--nutui-selector-item-active-icon-size, $icon-font-size) !default;
$selector-columns: var(--nutui-selector-columns) !default;