// 主题
$--theme-default: #e6e6e6;
$--theme-primary: #12c287;
$--theme-info: #347af6;
$--theme-success: #12c287;
$--theme-warning: #ec9131;
$--theme-error: #ff5050;

$--theme-default-light: rgba($--theme-default, 0.5);
$--theme-primary-light: rgba($--theme-primary, 0.1);
$--theme-info-light: rgba($--theme-info, 0.1);
$--theme-success-light: rgba($--theme-success, 0.1);
$--theme-warning-light: rgba($--theme-warning, 0.1);
$--theme-error-light: rgba($--theme-error, 0.1);
$--theme-danger-light: rgba($--theme-error, 0.1);

$--theme-default-dark: darken($--theme-default, 10%);
$--theme-primary-dark: darken($--theme-primary, 10%);
$--theme-info-dark: darken($--theme-info, 10%);
$--theme-success-dark: darken($--theme-success, 10%);
$--theme-warning-dark: darken($--theme-warning, 10%);
$--theme-error-dark: darken($--theme-error, 10%);
$--theme-danger-dark: darken($--theme-error, 10%);


// 图标字体
$icon-url: '//at.alicdn.com/t/font_126288_147h8m0m5se5ewmi';

:root {
  // 基础
  --base-fontSize: 14;
  --placeholder-color: #a9a9a9;

  // 背景色
  --background-body: #fff;
  --background-inner: #fff;
  --background-active: #e6e6e6;
  --background-disabled: #bcbcbc;

  // 边框色
  --border-color: #e6e6e6;
  --border-disabled: #bcbcbc;

  // 透明度
  --opacity-disabled: 0.6;
  --opacity-mask: 0.5;
  --opacity-toast: 0.8;
  --opacity-tooltip: 0.8;

  // 禁用
  --disabled-opacity: 0.5;
  --disabled-background: #ddd;
  --disabled-color: #999;

  // 主题
  --theme-default: #{$--theme-default};
  --theme-primary: #{$--theme-primary};
  --theme-info: #{$--theme-info};
  --theme-success: #{$--theme-success};
  --theme-warning: #{$--theme-warning};
  --theme-error: #{$--theme-error};
  --theme-danger: #{$--theme-error};

  // 主题色状态-lighten
  --theme-default-light: #{$--theme-default-light};
  --theme-primary-light: #{$--theme-primary-light};
  --theme-info-light: #{$--theme-info-light};
  --theme-success-light: #{$--theme-success-light};
  --theme-warning-light: #{$--theme-warning-light};
  --theme-error-light: #{$--theme-error-light};
  --theme-danger-light: #{$--theme-danger-light};

  // 主题色状态-darken
  --theme-default-dark: #{$--theme-default-dark};
  --theme-primary-dark: #{$--theme-primary-dark};
  --theme-info-dark: #{$--theme-info-dark};
  --theme-success-dark: #{$--theme-success-dark};
  --theme-warning-dark: #{$--theme-warning-dark};
  --theme-error-dark: #{$--theme-error-dark};
  --theme-danger-dark: #{$--theme-danger-dark};

  // 字体色
  --color-text: #464646; // 基本
  --color-text-inverse: #fff; // 反色
  --color-text-placeholder: #a9a9a9; // 文本框提示
  --color-text-disabled: #bcbcbc; // 失效
  --color-text-caption: #909090; // 辅助描述
  --color-link: var(--theme-primary); // 链接
  --color-shadow: rgba(56, 56, 56, 0.15); // 阴影色

  // 字体大小
  --fontSize-xl: 18px;
  --fontSize-lg: 15px;
  --fontSize-md: 14px;
  --fontSize-sm: 12px;
  --fontSize-xs: 10px;

  // 圆角
  --radius-xl: 4px;
  --radius-lg: 4px;
  --radius-md: 4px;
  --radius-sm: 4px;
  --radius-xs: 4px;
  --radius-round: 1000px;
  --radius-circle: 50%;

  // 高度
  --height-xl: 52px;
  --height-lg: 48px;
  --height-md: 44px;
  --height-sm: 34px;
  --height-xs: 27px;

  // 间距
  --padding-xl: 25px;
  --padding-lg: 20px;
  --padding-md: 16px;
  --padding-sm: 15px;
  --padding-xs: 10px;

  // 水平间距
  --padding-h-sm: 5px;
  --padding-h-md: 8px;
  --padding-h-lg: 16px;
  --padding-h-xl: 20px;

  // 垂直间距
  --padding-v-sm: 2px;
  --padding-v-md: 6px;
  --padding-v-lg: 9px;
  --padding-v-xl: 12px;

  // 堆叠顺序
  --zIndex-mask: 1000;
  --zIndex-popup: 1300;
  --zIndex-modal: 1400;
  --zIndex-toast: 1500;
  --zIndex-loading: 1500;

  // ActionSheet
  --actionsheet-background: var(--background-body);
  --actionsheet-margin: 0;
  --actionsheet-item-height: 50px;
  --actionsheet-item-font-size: 16px;

  /* ActivityIndicator */
  --activityIndicator-theme-color: var(--theme-primary);
  --activityIndicator-stroke-color: var(--border-color);
  --activityIndicator-diameter-md: 20px;
  --activityIndicator-diameter-lg: 31px;

  // Badge
  --badge-height: 14px;
  --badge-font-size: 10px;
  --badge-padding-h: 4px;
  --badge-dot-diameter: 8px;
  --badge-radius-radius: 2px;
  --badge-round-radius: 8px;
  --badge-text-color: #fff;

  /* Button */
  --button-height-xs: 28px;
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;

  --button-default-color: var(--color-text);
  --button-default-bg: #fff;
  --button-default-border: var(--border-color);
  --button-default-activebg: rgba(var(--border-color), 0.5);

  --button-primary-color: #fff;
  --button-primary-bg: var(--theme-primary);
  --button-primary-border: var(--theme-primary);
  --button-primary-activebg: var(--theme-primary-light);

  --button-info-color: #fff;
  --button-info-bg: var(--theme-info);
  --button-info-border: var(--theme-info);
  --button-info-activebg: var(--theme-info-light);

  --button-success-color: #fff;
  --button-success-bg: var(--theme-success);
  --button-success-border: var(--theme-success);
  --button-success-activebg: var(--theme-success-light);

  --button-warning-color: #fff;
  --button-warning-bg: var(--theme-warning);
  --button-warning-border: var(--theme-warning);
  --button-warning-activebg: var(--theme-warning-light);

  --button-error-color: #fff;
  --button-error-bg: var(--theme-error);
  --button-error-border: var(--theme-error);
  --button-error-activebg: var(--theme-error-light);

  --button-danger-color: #fff;
  --button-danger-bg: var(--theme-danger);
  --button-danger-border: var(--theme-danger);
  --button-danger-activebg: var(--theme-danger-light);

  /* Calendar */
  --calendar-height: 45px; // 最小高度
  --calendar-background: #fff; // 背景色
  --calendar-week-bar-fontsize: 14px; // 星期条文字大小
  --calendar-week-bar-background: #f2f2f2; // 星期条文字背景色
  --calendar-week-bar-color: var(--color-text-caption); // 星期条文字颜色
  --calendar-section-padding: 15px; // 两边留白间距
  --calendar-day-fontsize: 16px; // 月份文字大小
  --calendar-day-title-fontsize: 17px; // 月份title文字大小
  --calendar-day-background: #fff; // 月份文字背景颜色
  --calendar-day-color: var(--color-text); // 月份文字颜色
  --calendar-day-today-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); // 日期今天选中背景颜色
  --calendar-day-today-color: rgba(var(--theme-primary), 0.2); // 日期今天选中颜色
  --calendar-day-selected-background: var(--theme-primary); // 日期文字选中背景颜色
  --calendar-day-selected-color: #fff; // 日期文字选中颜色
  --calendar-day-range-background: #d1f3e7; // 日期文字范围内背景颜色
  --calendar-day-range-color: var(--theme-primary); // 日期文字范围内颜色
  --calendar-day-width: 14.28571%; // 日期宽度
  --calendar-day-height: 40px; // 日期高度

  /* Cell */
  --cell-background: #fff; // 背景色
  --cell-height: 52px; // 最小高度
  --cell-padding-h: 16px; // 水平边内距
  --cell-padding-v: 15px; // 纵向边内距
  --cell-line-padding-left: 16px; // 分隔线左边距
  --cell-label-width: 100px; // 表单label宽度
  --cell-title-color: var(--color-text); // 标题文字颜色
  --cell-title-font-size: 15px; // 标题文字大小
  --cell-title-line-height: 22px; // 标题文字行高
  --cell-description-color: var(--color-text-caption); // 描述文字颜色
  --cell-description-font-size: 15px; // 描述文字大小
  --cell-arrow-length: 10px; // 箭头长度
  --cell-arrow-border-width: 1px; // 箭头粗细
  --cell-arrow-color: #bcbcbc; // 箭头颜色
  --cell-arrow-length: 10px; // 箭头长度
  --cell-active-background: var(--background-active); // 点击时高亮背景色

  // Collapse
  --collapse-height: 52px;
  --collapse-padding: 15px;
  --collapse-arrow-color: #bcbcbc;
  --collapse-arrow-disabled-color: #eee;
  --collapse-arrow-border-width: 1px; // 箭头粗细

  // Input
  --input-content-height: 20px;
  --input-padding-v: var(--cell-padding-v);
  --input-clearicon-color: #bcbcbc;
  --input-number-content-height: 30px;
  --input-number-line-height: 30px;
  --input-number-border-focus-width: 3px;
  --input-number-border-focus-color: #108ee9;

  // Keyboard
  --keyboard-item-height: 54px;
  --keyboard-item-font-size: 30px;
  --keyboard-icon-font-size: 21px;
  --keyboard-disabled-background: #fff;

  // Message
  --message-min-height-md: 29px;
  --message-min-height-lg: 40px;
  --message-font-size-md: 12px;
  --message-font-size-lg: 14px;
  --message-padding-v-md: 6px;
  --message-padding-h-md: 8px;
  --message-padding-v-lg: 8px;
  --message-padding-h-lg: 12px;

  // Modal
  --modal-background: #fff;
  --modal-title-fontsize: 17px;
  --modal-title-color: #333;
  --modal-close-fontsize: 20px;
  --modal-close-color: #999;
  --modal-close-color-hover: #666;
  --modal-body-fontsize: 15px;
  --modal-body-color: #999;
  --modal-footer-link-height: 50px;
  --modal-footer-link-fontsize: 17px;
  --modal-footer-link-bg: #f1f1f1;

  // NavBar
  --nav-bar-background: var(--background-body);
  --nav-bar-color: #fdfdfd;
  --nav-bar-height: 44px;
  --nav-bar-icon-size: 24px;
  --nav-bar-fontsize: 18px;

  // Panel
  --panel-body-background: var(--background-body);
  --panel-header-fontsize: 14px;
  --panel-footer-fontsize: 12px;

  // Picker
  --picker-background: #fff;
  --picker-header-height: 45px;
  --picker-header-line-height: 45px;
  --picker-header-font-size: 16px;
  --picker-padding-v: var(--cell-padding-v);
  --picker-padding-h: 20px;
  --picker-panel-background: var(--background-body);
  --picker-panel-start: rgba(255, 255, 255, 0.4);
  --picker-panel-end: rgba(255, 255, 255, 0.8);

  // SearchBar
  --searchbar-form-height: 44px;
  --searchbar-content-height: 28px;
  --searchbar-content-bg: #eee;
  --searchbar-input-padding-v: 10px;
  --searchbar-fontsize: 14px;
  --searchbar-input-line-height: 20px;
  --searchbar-cancel-fontsize: 14px;
  --searchbar-cancel-color: #333;
  --searchbar-mock-icon-fontsize: 17px;
  --searchbar-mock-color: #7e7e7e;

  // Slider
  --slider-line-background: #e6e6e6;
  --slider-line-height: 2px;
  --slider-handle-size: 28px;
  --slider-handle-background: #fff;
  --slider-handle-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  // Switch
  --switch-width: 53px;
  --switch-height: 32px;
  --switch-border-color: var(--border-color);
  --switch-background: #fff;
  --switch-background-handle: #fff;
  --switch-box-shadow-start: rgba(0, 0, 0, 0.1);
  --switch-box-shadow-center: rgba(0, 0, 0, 0.08);
  --switch-box-shadow-end: rgba(0, 0, 0, 0.2);
  --switch-box-checked-shadow: rgba(0, 0, 0, 0.2);

  // Stepper
  --stepper-background: #fff;
  --stepper-height-sm: 28px;
  --stepper-height-md: 36px;
  --stepper-fontsize-sm: 12px;
  --stepper-fontsize-md: 14px;

  // StackPicker
  --stackpicker-item-height: 30px;
  --stackpicker-stackitem-height: 35px;
  --stackpicker-crumbs-line-height: 24px;
  --stackpicker-crumbs-font-size: 14px;

  // SwipeAction
  --swipeaction-item-width: 80px;
  --swipeaction-item-fontSize: 14px;

  // Tabs
  --tabs-header-item-height: 45px;
  --tabs-header-line-height: 2px;
  --tabs-header-item-fontSize: 15px;
  --tabs-header-item-color: #000;
  --tabs-item-fontSize: 14px;

  // Toast
  --toast-text-fontsize: 14px;
  --toast-text-color: #fff;
  --toast-background-color: rgba(0, 0, 0, 0.7);

  // Tooltip
  --tooltip-text-color: #fff;
  --tooltip-background-color: rgba(0, 0, 0, .7);

  // Wheel
  --wheel-item-height: 34px;
  --wheel-item-rows: 5;
  --wheel-item-text-color: #000;
  --wheel-item-fontsize: 16px;

  // Tabbar
  --tabbar-height: 50px;
  --tabbar-hidden-bottom: -50px;
  --tabbar-background: #fff;
  --tabbar-item-font-size: 12px;
  --tabbar-item-active-color: var(--theme-primary);

}