// Variable format should follow the `$component-modifier-state-property` order.



// Body
//
// Settings for the `<body>` element.

$body-bg:       $white !default;
$body-color:    $gray-10;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.
//图标字体路径
$icon-font-path:           "../fonts" !default;
$font-size-base:          .32rem; // Assumes the browser default, typically `16px`
$font-size-xs:            .24rem;
$font-size-sm:            .28rem;
$font-size-lg:            .36rem;



// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:          12;
$grid-gutter-width:     30px;

$gray-light-15:                 rgba($black, .15); // 边框色


// Components
//
//

// Prefix
$css-prefix             :"";

// border
$border-width:           .04rem;
$border-width-sm:        .02rem;
$border-radius:          .08rem;

// transition
$transition-time:       .2s;
$transition-time:       .2s;

// z-index
$progress-zindex: 2000;
$popover-zindex: 1999;
$toast-zindex: 1999;

$picker-zindex: 1000;
$popup-zindex: 1000;
$modal-zindex: 1000;

$fixed-zindex:999;
$menu-zindex: 999;
$tabs-pagination-zindex: 999;

// line-height
$line-height-paragraph:      1.5;

$mask-bg:                    rgba($gray-9,.8);

// 以8px为基数
$spacers: (
        0: 0,
        8: .08rem,
        16: .16rem,
        24: .24rem,
        32: .32rem,
        40: .4rem,
        48: .48rem,
        56: .56rem,
        64: .64rem,
        72: .72rem,
        80: .8rem
);


// Buttons
//
// define text, background and border color.
$button-prefix-cls:              $css-prefix + "btn";
$button-height:                  .8rem;
$button-padding-x:               .4rem;
$button-font-size:               $font-size-lg;

$button-icon-spacer-x:           .08rem;
$button-icon-font-size:          .4rem;

$button-sm-height:               .6rem;
$button-sm-padding-x:            .32rem;
$button-sm-font-size:            $font-size-base;

$button-sm-icon-font-size:       $font-size-base;



// Segment
//
//
$segment-prefix-cls:              $css-prefix + "segment";
$segment-font-size:               $font-size-base;
$segment-item-height:             .68rem;


// tab-bar
//
//
$tab-bar-prefix-cls:                $css-prefix + "tab-bar";
$tab-bar-height:                    1rem;
$tab-bar-tab-title-font-size:       .24rem;
$tab-bar-tab-title-margin-top:      .1rem;
$tab-bar-tab-icon-font-size:        .48rem;



// tabs
//
//
$tabs-prefix-cls:                   $css-prefix + "tabs";
$tabs-tab-font-size:                $font-size-base;
$tabs-tab-height:                   .8rem;



// nav-bar
//
//
$nav-bar-prefix-cls:                   $css-prefix + "nav-bar";
$nav-bar-height:                       1.28rem;
$nav-bar-padding-x:                    .4rem;
$nav-bar-font-size:                    $font-size-base;
$nav-bar-icon-font-size:               .6rem;
$nav-bar-title-font-size:              $font-size-lg;



// search-bar
//
//
$search-bar-prefix-cls:                   $css-prefix + "search-bar";
$search-bar-height:                       .88rem;
$search-bar-padding-x:                    .14rem;

$search-bar-input-height:                 .56rem;
$search-bar-input-font-size:              $font-size-base;
$search-bar-input-padding-x:              .1rem .2rem;
$search-bar-input-icon-margin-x:          .16rem;
$search-bar-input-icon-font-size:         $font-size-lg;
$search-bar-input-placeholder-font-size:  $font-size-sm;

$search-bar-cancel-margin-x:              .2rem;



// radio
//
//
$radio-prefix-cls:                   $css-prefix + "radio";
$radio-size:                         .4rem;
$radio-font-size:                    $font-size-base;
$radio-margin-x:                     .2rem;
$radio-item-font-size:               .48rem;



// checkbox
//
//
$checkbox-prefix-cls:                   $css-prefix + "checkbox";



// switch
//
//
$switch-prefix-cls:                   $css-prefix + "switch";
$switch-width:                        1.02rem;
$switch-height:                       .62rem;
$switch-trigger-spacer:               .05rem;



// input
//
//
$input-prefix-cls:                         $css-prefix + "input";
$input-font-size:                          $font-size-base;
$input-height:                             .96rem;
$input-padding-x:                          .32rem;

$input-clear-icon-font-size:               .48rem;

$input-label-font-size:                    $font-size-sm;
$input-label-margin-bottom:                .1rem;
$input-label-top-margin-bottom:            .4rem;

$textarea-line-height:                     .5rem;
$textarea-count-position:                  .2rem;

$input-modal-height:                       .64rem;
$input-modal-padding-x:                    .2rem;
$input-modal-font-size:                    .26rem;
$input-modal-margin-top:                   .16rem;


// picker
//
//
$picker-prefix-cls:                         $css-prefix + "picker";
$picker-mask-bg-color:                      rgba(0,0,0,.4);
$picker-header-height:                      .88rem;
$picker-header-item-font-size:              $font-size-sm;
$picker-header-item-padding-x:              .3rem;
$picker-header-title-font-size:             $font-size-lg;

$picker-col-item-height:                        .6rem;
$picker-col-item-font-size:                     $font-size-sm;
$picker-col-item-selected-font-size:            $font-size-lg;

// // picker
// //
// //
// $picker-header-height:                      44px;
// $picker-header-item-padding-x:              15px;
// $picker-col-item-height:                        24px;



// list
//
//
$list-prefix-cls:                   $css-prefix + "list";

$list-body-padding-y:               .15rem;
$list-body-font-size:               $font-size-sm;

$list-item-height:                  .88rem;
$list-item-padding-x:               .3rem;
$list-item-padding-y:               .2rem;

$list-thumb-size:                   .52rem;
$list-thumb-icon-font-size:         .36rem;
$list-thumb-margin-right:           .32rem;

$list-content-margin-right:         .08rem;
$list-brief-margin-top:             .08rem;
$list-arrow-font-size:              .6rem;



// alerts
//
// Define colors for form feedback states and, by default, alerts.
$alert-prefix-cls:            $css-prefix + "alert";

$alert-bg:                    $gray-3;
$alert-success-bg:            rgba($brand-success,.1);
$alert-info-bg:               rgba($brand-info,.1);
$alert-warning-bg:            rgba($brand-warning,.1);
$alert-danger-bg:             rgba($brand-danger,.1);

$alert-height:                .88rem;
$alert-padding-x:             .2rem;
$alert-margin-bottom:         .2rem;
$alert-font-size:             $font-size-base;

$alert-icon-font-size:        .4rem;

$alert-content-padding-x:     .1rem;

$alert-close-font-size:        $font-size-sm;

$alert-close-icon-font-size:  .48rem;



// toast
//
//
$toast-prefix-cls:            $css-prefix + "toast";
$toast-text-font-size:        $font-size-sm;
$toast-padding:               .2rem .28rem;
$toast-box-shadow:            0 .04rem .06rem 0 rgba(0,0,0,0.04), 0 .01rem .02rem 0 rgba(0,0,0,0.08);
$toast-border-radius:         .08rem;

$toast-icon-font-size:        .6rem;
$toast-icon-text-font-size:   .24rem;
$toast-icon-padding:          .32rem .4rem;
$toast-icon-margin-bottom:    .1rem;

$toast-inverse-bg:             $mask-bg;



// modal
//
//
$modal-prefix-cls:            $css-prefix + "modal";
$modal-box-shadow:            0 .02rem .1rem 0 rgba(0,0,0,0.08);
$modal-header-padding:        .3rem .4rem;
$modal-header-font-size:      $font-size-base;

$modal-body-padding:          .4rem;

$modal-button-height:         .8rem;
$modal-button-font-size:      $font-size-base;



// image-picker
//
//
$image-picker-prefix-cls:            $css-prefix + "image-picker";
$image-picker-item-padding-x:        .28rem;
$image-picker-remove-size:           .4rem;
$image-picker-remove-icon-font-size: .28rem;
$image-picker-remove-padding:        .06rem;
$image-picker-upload-btn-font-size:  .6rem;


// badge
//
//
$badge-prefix-cls:            $css-prefix + "badge";
$badge-height:                .36rem;
$badge-padding-x:             .12rem;
$badge-font-size:             .24rem;

$badge-dot-size:              .16rem;
$badge-dot-lg-size:           .2rem;



// slider
//
//
$slider-prefix-cls:            $css-prefix + "slider";

$slider-rail-height:           .08rem;

$slider-handle-size:           .48rem;
$slider-handle-box-shadow:     0 .08rem .08rem 0 rgba(0,0,0,0.04), 0 .04rem .14rem 0 rgba(0,0,0,0.10), 0 .01rem .1rem 0 rgba(0,0,0,0.06);

$slider-step-height:           .2rem;
$slider-step-top:              .5rem;
$slider-icon-font-size:        .6rem;
$slider-icon-padding-x:        .1rem;



// menu
//
//
$menu-prefix-cls:            $css-prefix + "menu";

$menu-item-height:           .96rem;
$menu-item-font-size:        $font-size-lg;
$menu-item-padding-x:        .4rem;



// accordion
//
//
$accordion-prefix-cls:            $css-prefix + "accordion";
$accordion-header-icon-font-size: .48rem;



// drawer
//
//
$drawer-prefix-cls:            $css-prefix + "drawer";



// stepper
//
//
$stepper-prefix-cls:            $css-prefix + "stepper";
$stepper-width:                 2.15rem;
$stepper-handler-size:          .6rem;
$stepper-handler-font-size:     .4rem;
$stepper-input-font-size:       $font-size-base;



// progress
//
//
$progress-prefix-cls:            $css-prefix + "progress";
$progress-height:                .08rem;
$progress-text-margin-x:         .08rem;
$progress-text-font-size:        $font-size-sm;
$progress-text-icon-font-size:   .32rem;



// Steps
//
//
$steps-prefix-cls:             $css-prefix + "steps";

$steps-head-size:              .36rem;
$steps-head-font-size:         $font-size-base;
$steps-head-margin-x:          .3rem;

$steps-main-title-font-size:       $font-size-base;
$steps-main-title-margin-y:        .08rem .04rem;
$steps-main-description-font-size: 0.28rem;
$steps-main-description-width:     1.5rem;



// carousel
//
//
$carousel-prefix-cls:             $css-prefix + "carousel";
$carousel-height:                 4.16rem;
$carousel-indicators-size:        .08rem;
$carousel-indicators-margin-y:    .2rem;
$carousel-indicators-margin-x:    .12rem;



// cell
//
//
$cell-prefix-cls:             $css-prefix + "cell";
$cell-icon-font-size:         .4rem;
$cell-icon-margin-y:          .14rem;
$cell-text-font-size:         $font-size-sm;



// timeline
//
//
$timeline-prefix-cls:             $css-prefix + "timeline";
$timeline-item-margin-left:       .6rem;
$timeline-item-margin-bottom:     .48rem;
$timeline-item-time-font-size:    .24rem;
$timeline-item-time-margin-bottom:.12rem;
$timeline-item-detail-font-size:  $font-size-sm;
$timeline-item-dot-size:          .16rem;



// table
//
//
$table-prefix-cls:             $css-prefix + "table";
$table-td-padding:             .3rem;


// loading
//
//
$loading-prefix-cls:                 $css-prefix + "loading";

$loading-spinner-width:             .64rem;
$loading-spinner-cell-width:        .064rem;
$loading-spinner-width-sm:          .48rem;
$loading-spinner-cell-width-sm:     .048rem;
$loading-spinner-width-lg:          .8rem;
$loading-spinner-cell-width-lg:     .08rem;

$loading-dot-size:                  .16rem;

$loading-text-margin:               .16rem;



// card
//
//
$card-prefix-cls:                 $css-prefix + "card";
$card-header-padding:             .3rem .2rem;
$card-header-title-font-size:     $font-size-lg;
$card-footer-content-font-size:   $font-size-sm;



// load-and-refresh
//
//
$load-and-refresh-prefix-cls:                 $css-prefix + "load-and-refresh";

$load-and-refresh-indicator-height:           1.6rem;
$load-and-load-indicator-height:              .6rem;
$load-and-refresh-indicator-text-font-size:   $font-size-sm;
$load-and-refresh-indicator-icon-margin-x:    .08rem;

$refresh-icon-size:                .6rem;



// swipe
//
//
$swipe-prefix-cls:                 $css-prefix + "swipe";

// swiper-page
$swiper-page-prefix-cls:           $css-prefix + "swipe-page";

$notice-bar-prefix-cls: 						$css-prefix + "notice-bar";

$upload-prefix-cls: 							$css-prefix + "upload";


// Animation
$animation-time: .3s;
$animation-time-lg: .6s;
$transition-time: .2s;

// Popovers
$zindex-popover: 1060;
$popover-prefix-cls: $css-prefix+"popper";

$popover-bg: $white;
$popover-color: $body-color;
$popover-min-width: 1.5rem;
$popover-max-width: 3rem;
$popover-border-width: $border-width;
$popover-border-color: $body-color;
$popover-box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .12);

$popover-arrow-width: .1rem;
$popover-arrow-color: $popover-bg;
$popover-arrow-outer-width: $popover-arrow-width;
$popover-arrow-outer-color: $popover-border-color;

$popover-content-padding-x: .14rem;
$popover-content-padding-y: .14rem;

$popover-title-bg: $white;
$popover-title-font-size: $font-size-sm;
$popover-title-padding-x: 0;
$popover-title-padding-y: .08rem;

$popover-body-font-size: $font-size-xs;

// t-cell
// 用于cell组件, 因为已经存在 cell 的class
$t-cell-prefix-cls: $css-prefix + "t-cell";

// t-cell-swipe
$cell-swipe-prefix-cls: $css-prefix + "cell-swipe";

// field
$field-prefix-cls: $css-prefix + "field";
