// Color Palette
$black: #333333;
$white: #fff;
$gray-1: #f7f8fa;
$gray-2: #dcdcdc;
$gray-3: #c8c9cc;
$gray-4: #999999;
$gray-5: #666666;
$gray-6: #D8D8D8;
$red: #ec1500;
$red-light: #ec3333;
$red-dark: #ee0a24;
$orange: #faab0c;
$pink: #FFECE6;

$grey-border: #f2f3f5;
// Gradient Colors
$gradient-red: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
$gradient-red-reverse: linear-gradient(270deg, #FF4B00 0%, #FF7705 100%);;
$gradient-pink: linear-gradient(180deg, #fff7f0 0%, #ffe4dc 100%);

// Component Colors
$text-color: $black;
$text-grey: $gray-4;
$active-opacity: 0.8;
$disabled-opacity: 0.7;
$background-color: $gray-1;

$line-height-sm: 32rpx;
$line-height-md: 44rpx;
$line-height-lg: 48rpx;

// Border
$border-width-base: 1rpx;
$border-radius-sm: 12rpx;
$border-radius-md: 16rpx;
$border-radius-lg: 32rpx;
$border-radius-lx: 40rpx;
$border-radius-max: 999rpx;

// Padding
$padding-unit: 8rpx;
$padding-xs: $padding-unit * 2;
$padding-sm: $padding-unit * 3;
$padding-md: $padding-unit * 4;
$padding-lg: $padding-unit * 5;
$padding-xl: $padding-unit * 8;

// Font
$font-size-list: 10, 11, 12, 13, 14, 16, 17, 18, 20, 26, 28, 30, 52;

@mixin text-size($f) {
  $font: $f;
  font-size: #{$font}rpx;
  line-height: #{($font + 12)}rpx;
};

$font-weight-bold: 600;
$font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;

// 页面内边距
$page-padding: $padding-sm;
$page-padding-lg: $padding-lg;

// ios底部防遮挡高度
$ios-bottom-height: 120rpx;

// 页面顶部header高度
$nav-bar-height: 96rpx;

// 多行...
@mixin mx_multline_overwrite($line: 2) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
