@hd: 1px; // 基本单位

// 色彩
// ---
// 文字色
@color-text-base: #262626; // 基本
@color-text-base-inverse: #fff; // 基本 - 反色
@color-text-secondary: #8c8c8c; // 辅助色
@color-text-placeholder: #8c8c8c; // 文本框提示
@color-text-disabled: #bbb; // 失效
@color-text-caption: #ebebeb; // 辅助描述
@color-text-paragraph: #8c8c8c; // 段落
@color-link: @brand-primary; // 链接

// 背景色
@fill-base: #fff; // 组件默认背景
@fill-body: #f5f5f5; // 页面背景
@fill-tap: #ddd; // 组件默认背景 - 按下
@fill-disabled: #ddd; // 通用失效背景
@fill-mask: rgba(0, 0, 0, 0.4); // 遮罩背景
@color-icon-base: #ccc; // 许多小图标的背景，比如一些小圆点，加减号
@fill-grey: #f7f7f7;

// 透明度
@opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度

// 全局/品牌色
@brand-primary:  #FF1659;
@brand-primary-tap: var(--theme-color, #FF1659);
@brand-success: #00bb66;
@brand-warning: #ff8800;
@brand-error: #ee2200;
@brand-important: var(--theme-color, #FF1659); // 用于小红点
@brand-wait: var(--theme-color, #FF1659);
@brand-btn-primary: linear-gradient(90deg, #ff5252 1%, #ff3434 100%);
@brand-btn-primary-hover: linear-gradient(90deg, #ff9696 1%, #ff8585 100%);
@brand-btn-primary-active: linear-gradient(90deg, #993131 1%, #991f1f 100%);

// 边框色
@border-color-base: #ebebeb;

// 阴影
@box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04);

// 字号
// ---
@font-size-icontext: 10 * @hd;
@font-size-caption-sm: 12 * @hd;
@font-size-base: 14 * @hd;
@font-size-subhead: 14 * @hd;
@font-size-caption: 16 * @hd;
@font-size-heading: 18 * @hd;

// 圆角
// ---
@radius-xs: 2 * @hd;
@radius-sm: 3 * @hd;
@radius-md: 8 * @hd;
@radius-lg: 12 * @hd;
@radius-circle: 50%;

// 边框尺寸
// ---
@border-width-sm: 1px;
@border-width-md: 1px;
@border-width-lg: 1 * @hd;

// 间距
// ---
// 水平间距
@h-spacing-sm: 5 * @hd;
@h-spacing-md: 8 * @hd;
@h-spacing-end: 12 * @hd;
@h-spacing-lg: 24 * @hd;

// 垂直间距
@v-spacing-xs: 3 * @hd;
@v-spacing-sm: 6 * @hd;
@v-spacing-md: 8 * @hd;
@v-spacing-lg: 24 * @hd;
@v-spacing-xl: 24 * @hd;

// 高度
// ---
@line-height-base: 1; // 单行行高
@line-height-paragraph: 1.5; // 多行行高

// 图标尺寸
// ---
@icon-size-xxs: 15 * @hd;
@icon-size-xs: 18 * @hd;
@icon-size-sm: 21 * @hd;
@icon-size-md: 22 * @hd; // 导航条上的图标、grid的图标大小
@icon-size-lg: 36 * @hd;

// 动画缓动
// ---
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// 组件变量
// ---

//actionsheet
@actionsheet-item-height: 50 * @hd;
@actionsheet-item-font-size: 18 * @hd;

// button
@button-height: 47 * @hd;
@button-font-size: 18 * @hd;
@button-height-sm: 30 * @hd;
@button-font-size-sm: 13 * @hd;
@primary-button-fill: @brand-primary;
@primary-button-fill-tap: @brand-primary-tap;
@ghost-button-color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@ghost-button-fill-tap: fade(@brand-primary, 60%);
@warning-button-fill: #e94f4f;
@warning-button-fill-tap: #d24747;
@link-button-fill-tap: #ddd;
@link-button-font-size: 16 * @hd;

// menu
@menu-multi-select-btns-height: @button-height;

// modal
@modal-font-size-heading: 18 * @hd;
@modal-button-font-size: 18 * @hd; // 按钮字号
@modal-button-height: 50 * @hd; // 按钮高度

// list
@list-title-height: 30 * @hd;
@list-item-height-sm: 35 * @hd;
@list-item-height: 44 * @hd;

// input
@input-label-width: 17 * @hd; // InputItem、TextareaItem 文字长度基础值
@input-font-size: 17 * @hd;
@input-color-icon: #ccc; // input clear icon 的背景色
@input-color-icon-tap: @brand-primary;

// tabs
@tabs-color: @brand-primary;
@tabs-height: 43.5 * @hd;
@tabs-font-size-heading: 15 * @hd;
@tabs-ink-bar-height: @border-width-lg;

// segmented-control
@segmented-control-color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@segmented-control-height: 27 * @hd;
@segmented-control-fill-tap: fade(@brand-primary, 0.1);

// tab-bar
@tab-bar-fill: #ebeeef;
@tab-bar-height: 50 * @hd;

// toast
@toast-fill: rgba(58, 58, 58, 0.9); // toast, activity-indicator 的背景颜色

// search-bar
@search-bar-fill: #efeff4;
@search-bar-height: 44 * @hd;
@search-bar-input-height: 28 * @hd;
@search-bar-font-size: 15 * @hd;
@search-color-icon: #bbb; // input search icon 的背景色

// notice-bar
@notice-bar-fill: #fefcec;
@notice-bar-height: 36 * @hd;
@notice-bar-color: #f76a24;

// switch
@switch-fill: #4dd865;
@switch-fill-android: @brand-primary;

// tag
@tag-height: 25 * @hd;
@tag-height-sm: 15 * @hd;
@tag-color: @brand-primary;

// keyboard
@keyboard-confirm-color: @brand-primary;
@keyboard-confirm-tap-color: @brand-primary-tap;

// picker
@option-height: 42 * @hd; // picker 标题的高度

// z-index
@progress-zindex: 2000;
@popover-zindex: 1999;
@toast-zindex: 1999;
@action-sheet-zindex: 1000; // actonsheet 会放到 popup / modal 中
@picker-zindex: 1000;
@popup-zindex: 999;
@modal-zindex: 999; // modal.alert 应该最大，其他应该较小
@tabs-pagination-zindex: 999;

//Rate
@rate-star-color: #f5a623;
@font-size-base: 13px;

// coupon-tag
@coupon-tag-padding: 6 * @hd;
@coupon-tag-lineheight: 18 * @hd;
@coupon-tag-font: 12 * @hd;
@coupon-tag-radius: 3 * @hd;
@coupon-tag-square: 6 * @hd;
@coupon-tag-oy: 6 * @hd;
@coupon-tag-ox: -3 * @hd;

// coupon-item
@coupon-item-padding: 16 * @hd;
@coupon-item-bottom-padding: 16 * @hd;
@coupon-item-box-bottom-padding: 10 * @hd;
@coupon-item-font: 12 * @hd;
@coupon-item-radius: 6 * @hd;
@coupon-item-square: 10 * @hd;
@coupon-item-square-half: 5 * @hd;
@coupon-item-oy: 94 * @hd;
@coupon-item-top-padding: 8 * @hd;
@coupon-item-padding-left: 4 * @hd;
@coupon-collected-img-width: 46 * @hd;
@coupon-item-price-font: 18 * @hd;
@coupon-item-price-height: 42 * @hd;
@coupon-item-price-span-font: 32 * @hd;
@coupon-item-store-font: 14 * @hd;
@coupon-item-condition-height: 20 * @hd;
@coupon-item-condition-font: 14 * @hd;
@coupon-item-store-margin: 16 * @hd;
@coupon-item-store-span-padding: 4 * @hd;
@coupon-item-store-span-height: 16 * @hd;
@coupon-item-store-span-font: 10 * @hd;
@coupon-item-store-radius: 2 * @hd;
@coupon-item-btn-radius: 12 * @hd;
@coupon-item-btn-height: 24 * @hd;
@coupon-item-btn-padding: 12 * @hd;
@coupon-item-img-width: 68 * @hd;
@coupon-item-cut-margin: 5 * @hd;
@coupon-item-down-icon-width: 16 * @hd;
@coupon-item-down-store-margin: 4 * @hd;
@coupon-item-down-store-width: 24 * @hd;
@coupon-item-detail-radius: 8 * @hd;
@coupon-item-detail-font: 12 * @hd;
@coupon-item-detail-padding-top: 8 * @hd;
@coupon-item-detail-padding-left: 12 * @hd;

// coupon-dialog
@dialog-content-radius: 12 * @hd;
@dialog-content-padding: 16 * @hd;
@dialog-content-padding-bottom: 22 * @hd;
@dialog-head-font: 18 * @hd;
@dialog-head-height: 24 * @hd;
@dialog-head-margin: 32 * @hd;
@dialog-coupon-item-margin: 12 * @hd;
@dialog-coupon-body-height: 500 * @hd;

//stepsEcom
@steps-ecom-cot-padding-4: 4 * @hd;
@steps-ecom-cot-padding-top: 16 * @hd;
@steps-ecom-cot-padding-left: 12 * @hd;
@steps-ecom-header-height: 30 * @hd;
@steps-ecom-header-fontsize: 12 * @hd;
@steps-ecom-cot-fontsize: 14 * @hd;
@steps-ecom-border-radius: 12 * @hd;
@steps-ecom-fontweight-l: 400;
@steps-ecom-fontweight-b: 500;

// Rate-Item
@rate-font-size: 12 * @hd;
@rate-font-color: rgba(0, 0, 0, 0.45);
@rate-margin-left: 60 * @hd;

//productItem
@product-item-border-radius: 8 * @hd;
@product-item-padding-12: 12 * @hd;
@product-item-padding-10: 10 * @hd;
@product-item-padding-8: 8 * @hd;
@product-item-padding-6: 6 * @hd;
@product-item-padding-4: 4 * @hd;
@product-item-padding-2: 2 * @hd;
@product-item-padding-3: 3 * @hd;
@product-item-margin-12: 12 * @hd;
@product-item-line-height: 20 * @hd;
@product-item-font-12: 12 * @hd;
@product-item-font-14: 14 * @hd;
@product-item-font-10: 10 * @hd;
@product-item-market-26: 26 * @hd;
@product-item-cot-33: 33 * @hd;
@product-item-line-height-16: 16 * @hd;
@product-item-cot-29: 29 * @hd;
@product-item-line-height-14: 14 * @hd;

@product-item-sold-out-radius-32: 32 * @hd;
@product-item-sold-out-height-64: 64 * @hd;
@product-item-sold-out-font-size: 10 * @hd;

@product-item-progress-padding-bottom-1: 1 * @hd;
@product-item-progress-height-12: 12 * @hd;
@product-item-progress-margin-top-9: 9 * @hd;
@product-item-progress-margin-left-12: 12 * @hd;
@product-item-progress-txt-size-10: 10 * @hd;
@product-item-btn-cart-size-24: 24 * @hd;
@product-item-btn-cart-border-radius-50: 50 * @hd;

// sku-input-number
@sku-input-number-size: 16 * @hd;
@sku-input-number-margin: 8 * @hd;
@sku-input-number-input-width: 40 * @hd;
@sku-input-number-input-height: 20 * @hd;
@sku-input-number-input-radius: 2 * @hd;
@sku-input-number-input-font-size: 12 * @hd;
@sku-input-number-input-font-weight: 500 * @hd;

//productListStore
@product-list-store-item-padding: 16 * @hd 12 * @hd;
@product-list-store-item-width: 351 * @hd;
@product-list-store-item-margin-bottom: 12 * @hd;
@product-list-store-item-header-margin-right: 8 * @hd;

//sku-detail
@sku-detail-banner-margin: 6 * @hd;
@sku-detail-banner-margin-16: 16 * @hd;
@sku-detail-banner-margin-32: 32 * @hd;
@sku-detail-banner-margin-2: 2 * @hd;
@sku-detail-banner-margin-4: 4 * @hd;
@sku-detail-banner-margin-18: 18 * @hd;
@sku-detail-banner-margin-53: 53 * @hd;
@sku-detail-banner-margin-24: 24 * @hd;
@sku-detail-banner-margin-12: 12 * @hd;
@sku-detail-banner-margin-10: 10 * @hd;
@sku-detail-title-line-21: 21 * @hd;
@sku-detail-banner-margin-8: 8 * @hd;
@sku-detail-banner-font-14: 14 * @hd;
@sku-detail-banner-font-18: 18 * @hd;

// banner
@banner-margin: 12 * @hd;
@banner-height: 160 * @hd;
@banner-border-radius: 24 * @hd;

// cart-item
@cart-item-store-name-with:180 *@hd;
@cart-item-margin: 12 * @hd;
@cart-item-border-radius: 12 * @hd;
@cart-item-padding: 10 * @hd 0 * @hd 12 * @hd 0 * @hd;
@cart-item-store-icon-size: 16 * @hd;
@cart-item-store-icon-margin: 0 4 * @hd 0 8 * @hd;
@cart-item-store-name-font-size: 14 * @hd;
@cart-item-btn-coupons-width: 110 * @hd;
@cart-item-btn-coupons-height: 24 * @hd;
@cart-item-btn-coupons-border-radius: 12 * @hd;
@cart-item-btn-coupons-font-size: 12 * @hd;
@cart-item-salewrap-mt: 13 * @hd;
@cart-item-salewrap-pl: 40 * @hd;
@cart-item-salewrap-pr: 12 * @hd;
@cart-item-salewrap-tag-width: 29 * @hd;
@cart-item-salewrap-tag-height: 16 * @hd;
@cart-item-salewrap-tag-border-radius: 2 * @hd;
@cart-item-salewrap-tag-font-size: 10 * @hd;
@cart-item-salewrap-sale-font-size: 12 * @hd;
@cart-item-salewrap-sale-ml: 4 * @hd;
@cart-item-salewrap-btn-sat-font-size: 12 * @hd;
@cart-item-salewrap-btn-sat-icon-size: 16 * @hd;
@cart-item-commodity-mt: 17 * @hd;
@cart-item-commodity-img-size: 88 * @hd;
@cart-item-commodity-img-ml: 8 * @hd;
@cart-item-commodity-img-border-radius: 4 * @hd;
@cart-item-commodity-info-ml: 12 * @hd;
@cart-item-commodity-info-name-font-size: 14 * @hd;
@cart-item-commodity-info-name-width: 199 * @hd;
@cart-item-commodity-info-select-width: 171 * @hd;
@cart-item-commodity-info-select-height: 20 * @hd;
@cart-item-commodity-info-select-border-radius: 2 * @hd;
@cart-item-commodity-info-select-pl: 6 * @hd;
@cart-item-commodity-info-select-margin: 8 * @hd 0 7 * @hd 0;
@cart-item-commodity-info-select-attr-width: 143 * @hd;
@cart-item-commodity-info-select-attr-font-size: 10 * @hd;
@cart-item-commodity-info-select-icon-size: 12 * @hd;
@cart-item-commodity-info-select-icon-ml: 4 * @hd;
@cart-item-commodity-info-outstock-font-size: 12 * @hd;
@cart-item-checkbox-size: 20 * @hd;
@cart-item-promotion-mt: 10 * @hd;
@cart-item-promotion-font-size: 12 * @hd;
@cart-item-promotion-tip-width: 150 * @hd;
@cart-item-promotion-tip-ml: 100 * @hd;

// orderItem
@order-item-img-size: 88 * @hd;
@order-item-margin: 22 * @hd;
@order-item-margin-top: 16 * @hd;
@order-item-img-margin: 12 * @hd;
@order-item-h2-padding: 2 * @hd;
@order-item-sku-padding: 4 * @hd 6 * @hd;
@order-item-border-radius: 2 * @hd;
@order-item-sku-margin: 8 * @hd 0;
@order-item-font-10: 10 * @hd;
@order-item-font-12: 12 * @hd;
@order-item-font-14: 14 * @hd;
@order-item-font-20: 20 * @hd;

// orderList
@order-list-card-margin: 12 * @hd;
@order-list-h2-padding: 2 * @hd;
@order-list-font-12: 12 * @hd;
@order-list-font-14: 14 * @hd;
@order-list-font-20: 20 * @hd;
@order-list-img-size: 16 * @hd;
@order-list-img-margin: 8 * @hd;
@order-list-button-padding: 8 * @hd 8 * @hd;
@order-list-basic: 1 * @hd;
// comment-item
@comment-item-header-img: 36 * @hd;
@comment-item-margin-12: 12 * @hd;
@comment-item-margin-8: 12 * @hd;
@comment-item-header-font: 14 * @hd;
@comment-item-header-font-12: 12 * @hd;
@comment-item-cot-height: 84 * @hd;
@comment-item-img-height: 82 * @hd;

// bottomDialog
@bottom-dialog-title-size: 18 * @hd;
@bottom-dialog-title-weight: 500;
@bottom-dialog-icon-size: 24 * @hd;
@bottom-dialog-icon-right: 16 * @hd;

// count-down 倒计时组件相关
@count-down-width: 18 * @hd;
@count-down-height: 18 * @hd;
@count-down-border-radius: 4 * @hd;
@count-down-font-size: 12 * @hd;
@count-down-background: linear-gradient(90deg, #ff6b6b 0%, #ff4b4b 100%);

// homeTitleComponent 电商 title布局
@home-title-font-size: 16 * @hd;
@home-title-font-color: rgba(0, 0, 0, 0.85);
@home-title-font-weight: 600;
@home-title-font-family: var(--regular-font, SFProText-Medium, SFProText);
@home-end-title-font-size: 14 * @hd;
@home-end-title-font-color: rgba(0, 0, 0, 0.45);

//HomeTop
@home-top-height: 50 * @hd;
@home-top-margin-top: 44 * @hd;
@home-top-padding-left: 12 * @hd;
@home-top-padding-right: 12 * @hd;
@home-top-margin-bottom: 14 * @hd;
@home-top-search-box-height: 32 * @hd;
@home-top-search-border-radius: 16 * @hd;
@home-top-search-box-height: 32 * @hd;
@home-top-search-box-margin-left: 12 * @hd;
@home-top-search-box-margin-right: 12 * @hd;
@home-top-placeholder-font-size: 14 * @hd;
@home-top-placeholder-margin-left: 12 * @hd;
@home-top-placeholder-color: rgba(0, 0, 0, 0.65);
@home-top-icon-width: 24 * @hd;
@home-top-icon-height: 24 * @hd;
@home-logo-icon-width: 128 * @hd;
@home-logo-icon-height: 28 * @hd;
@top-padding-left: 12 * @hd;
@top-padding-right: 12 * @hd;

// homeDeal module
@home-deal-margin: 12 * @hd;
@home-deal-padding: 12 * @hd;
@home-deal-border-radius: 12 * @hd;
@home-deal-h-list-margin-top: 16 * @hd;

// home deal-item
@home-deal-item-width: 144 * @hd;
@home-deal-item-image-width: 144 * @hd;
@home-deal-item-image-height: 166 * @hd;
@home-deal-item-border-radius: 12 * @hd;
@home-deal-item-title-width: 120 * @hd;
@home-deal-item-title-height: 32 * @hd;
@home-deal-item-title-font-size: 14 * @hd;
@home-deal-item-title-margin-top: 12 * @hd;
@home-deal-item-title-line-height: 16 * @hd;
@home-deal-item-title-font-family: var(--light-font, SFProText-Medium, SFProText);

// home-label
@home-label-margin-left: 12 * @hd;
@home-label-margin-top: 8 * @hd;
@home-label-margin-right: 12 * @hd;
@home-label-item-height: 72 * @hd;
@home-label-item-margin-top: -14 * @hd;
@home-label-item-img-width: 44 * @hd;
@home-label-item-img-height: 44 * @hd;
@home-label-item-img-border-radius: 22 * @hd;
@home-label-item-title-margin-top: 12 * @hd;
@home-label-item-title-margin-bottom: 12 * @hd;
@home-label-item-title-font-size: 12 * @hd;
@home-label-item-title-color: rgba(0, 0, 0, 0.85);
@home-label-item-title-font-family: var(--light-font, SFProText-Medium, SFProText);

// cascader-select
@cascader-select-border-radius: 12 * @hd;
@cascader-select-padding: 16 * @hd;
@cascader-select-active-border: 3 * @hd solid var(--theme-color, #FF1659);
@cascader-select-img: 20 * @hd;

// price
@fxm-price-margin-left: 12 * @hd;
@price-margin-top: 8 * @hd;
@price-icon-font-size: 12 * @hd;
@price-icon-margin-left: 12 * @hd;
@price-icon-line-height: 14 * @hd;
@price-icon-font-size: 12 * @hd;
@price-dollar-font-size: 18 * @hd;
@price-dollar-margin-right: 12 * @hd;
@price-dollar-margin-left: 2 * @hd;
@price-dollar-line-height: 25 * @hd;
@price-dollar-point-font-size: 12 * @hd;
@price-dollar-point-line-height: 14 * @hd;
@price-dollar-unused-font-size: 12 * @hd;
@price-dollar-unused-margin-left: 12 * @hd;
@price-dollar-unused-font-line-height: 14 * @hd;

// flash-service
@flash-service-padding: 12 * @hd;
@flash-service-border-radius: 12 * @hd;
@flash-service-margin-left: 12 * @hd;
@flash-service-margin-right: 12 * @hd;
@flash-service-mg-box-margin-top: 12 * @hd;
@flash-service-img-one-margin-right: 8 * @hd;

// cascader-select
@cascader-select-basic: @hd;

// favorite-item
@favorite-item-basic: 1 * @hd;

@steps-service-basic: 1 * @hd;

// point-dialog
@point-dialog-head-color: rgba(0, 0, 0, 0.85);
@point-dialog-subtitle-padding: 16 * @hd;
@point-dialog-name-font-size: 14 * @hd;
@point-dialog-name-margin-right: 6 * @hd;
@point-item-content-margin-left: 12 * @hd;
@point-item-box-margin-bottom: 24 * @hd;
@point-dialog-subtitle-margin-bottom: 25 * @hd;

@image-picker-bg-width: 40 * @hd;
@image-picker-bg-height: 12 * @hd;
@image-picker-label1-font-size: 14 * @hd;
@image-picker-12: 12 * @hd;
@image-picker-16: 16 * @hd;