@import "../core/minxin-variables";
@import "../core/minxin-mixins";
// minxin-variables

$pearls-margin-bottom:$line-height-computed;
$pearl-line-bg: $gray-lightest;
$pearl-line-size: 4px;
$pearl-line-xs-size: 2px;

$pearl-color:$inverse;
$pearl-bg: $gray-light;
$pearl-border-size: 2px;
$pearl-border-color:$pearl-bg;

$pearl-current-scale:1.3;
$pearl-current-color:$brand-primary;
$pearl-current-bg: $inverse;
$pearl-current-line-bg:$brand-primary;
$pearl-current-border-color: $pearl-current-color;

$pearl-done-color:$inverse;
$pearl-done-bg: $brand-primary;
$pearl-done-line-bg: $brand-primary;
$pearl-done-border-color: $pearl-done-bg;

$pearl-error-color: $brand-danger;
$pearl-error-bg: $inverse;
$pearl-error-line-bg: $brand-primary;
$pearl-error-border-color: $pearl-error-color;

$pearl-disabled-color: $pearl-color;
$pearl-disabled-bg: $pearl-bg;
$pearl-disabled-line-bg: $pearl-line-bg;
$pearl-disabled-border-color: $pearl-disabled-bg;

$pearl-title-margin-top: 0.5em;

$pearl-title-font-size: 16px;
$pearl-number-font-size: 18px;
$pearl-icon-font-size: $pearl-number-font-size;
$pearl-size: 36px;


$pearl-lg-title-font-size: 18px;
$pearl-lg-number-font-size: 20px;
$pearl-lg-icon-font-size: $pearl-lg-number-font-size;
$pearl-lg-size: 40px;


$pearl-sm-title-font-size: 14px;
$pearl-sm-icon-font-size: $pearl-sm-title-font-size;
$pearl-sm-number-font-size:16px;
$pearl-sm-size: 32px;

$pearl-xs-title-font-size: 12px;
$pearl-xs-icon-font-size: $pearl-xs-title-font-size;
$pearl-xs-number-font-size: 12px;
$pearl-xs-size: 24px;


// Component: pearls
// ========================================================================
.u-steps {
  &.row {
    display: block;
  }
  margin-bottom: $pearls-margin-bottom;
}

.u-step {
  position: relative;
  padding: 0;
  margin: 0;
  text-align: center;

  &:before,
  &:after {
    position: absolute;
    top: ($pearl-size/2);
    z-index: 0;
    width: 50%;
    height: $pearl-line-size;
    content: "";
    background-color: $pearl-line-bg;
  }

  &:before {
    left: 0;
  }

  &:after {
    right: 0;
  }

  &:first-child:before,
  &:last-child:after {
    display: none !important;
  }
}


.u-step-number, .u-step-icon {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: $pearl-size;
  height: $pearl-size;
  //line-height: ($pearl-size - 2*$pearl-border-size);
  line-height: $pearl-size ;//修改样式版中步骤中数字偏上的情况
  color: $pearl-color;
  text-align: center;
  background: $pearl-bg;
  border-radius: 50%;
  border: $pearl-border-size solid $pearl-border-color;
}

.u-step-number {
  font-size: $pearl-number-font-size;
}

.u-step-icon {
  font-size: $pearl-icon-font-size;
}

.u-step-title {
  margin-top: $pearl-title-margin-top;
  display: block;
  font-size: $pearl-title-font-size;
  color: $subtitle-color;
  margin-bottom: 0;

  //.text-truncate();
}


// State Modifier
// ========================================================================
.u-step {
  &.current {
    &:before,
    &:after {
      background-color: $pearl-current-line-bg;
    }
    .u-step-number, .u-ste-icon {
      color: $pearl-current-color;
      background-color: $pearl-current-bg;
      border-color: $pearl-current-border-color;
      transform: scale($pearl-current-scale);
    }
  }

  &.disabled {
    pointer-events: none;
    cursor: auto;

    &:before,
    &:after {
      background-color: $pearl-disabled-line-bg;
    }

    .u-step-pearl-number, .u-step-pearl-icon {
      color: $pearl-disabled-color;
      background-color: $pearl-disabled-bg;
      border-color: $pearl-disabled-border-color;
    }
  }

  &.error {
    &:before {
      background-color: $pearl-error-line-bg;
    }

    &:after {
      background-color: $pearl-line-bg;
    }

    .u-step-pearl-number, .u-step-pearl-icon {
      color: $pearl-error-color;
      background-color: $pearl-error-bg;
      border-color: $pearl-error-border-color;
    }
  }

  &.done {
    &:before,
    &:after {
      background-color: $pearl-done-line-bg;
    }

    .u-step-pearl-number, .u-step-pearl-icon {
      color: $pearl-done-color;
      background-color: $pearl-done-bg;
      border-color: $pearl-done-border-color;
    }
  }
}

// Size Modifier
// ========================================================================

.u-steps-lg {
  .u-step-pearl {
    &:before,
    &:after {
      top: ($pearl-lg-size/2);
    }

    &-title {
      font-size: $pearl-lg-title-font-size;
    }

    &-number, &-icon {
      width: $pearl-lg-size;
      height: $pearl-lg-size;
      line-height: ($pearl-lg-size - 2*$pearl-border-size);
    }

    &-icon {
      font-size: $pearl-lg-icon-font-size;
    }

    &-number {
      font-size: $pearl-lg-number-font-size;
    }
  }
}

.u-steps-sm {
  .u-step-pearl {
    &:before,
    &:after {
      top: ($pearl-sm-size/2);
    }

    &-title {
      font-size: $pearl-sm-title-font-size;
    }

    &-number, &-icon {
      width: $pearl-sm-size;
      height: $pearl-sm-size;
      line-height: ($pearl-sm-size - 2*$pearl-border-size);
    }

    &-number {
      font-size: $pearl-sm-number-font-size;
    }

    &-icon {
      font-size: $pearl-sm-icon-font-size;
    }
  }
}

.u-steps-xs {
  .u-step-pearl {
    &:before,
    &:after {
      top: ($pearl-xs-size/2);
      height: $pearl-line-xs-size;
    }

    &-title {
      font-size: $pearl-xs-title-font-size;
    }

    &-number, &-icon {
      width: $pearl-xs-size;
      height: $pearl-xs-size;
      line-height: ($pearl-xs-size - 2*$pearl-border-size);
    }

    &-number {
      font-size: $pearl-xs-number-font-size;
    }

    &-icon {
      font-size: $pearl-xs-icon-font-size;
    }
  }
}
.u-steps {
  margin-bottom: 22px;
  &.row {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
}

/*.u-step {
  position: relative;
  padding: 12px 20px;
  margin: 0;
  font-size: inherit;
  color: #a3afb7;
  vertical-align: top;
  background-color: #f3f7f9;
  border-radius: 0;
}*/
.u-step {//公共子类
  position: relative;
  margin: 0;
}
.u-step {//标准step样式
  padding: 12px 20px;
  font-size: inherit;
  color: #a3afb7;
  vertical-align: top;
  background-color: #f3f7f9;
  border-radius: 0;
}
.u-step-icon {
  float: left;
  margin-right: .5em;
  font-size: 20px;
}

.u-step-number{//公共u-step-number样式
  color: #fff;
  text-align: center;
  border-radius: 50%;
}
.u-step-number{//标准u-step-number样式
  position: absolute;
  top: 50%;
  left: 20px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  line-height: 40px;
  background: #e4eaec;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  ~ .u-step-desc {
     min-height: 40px;
     margin-left: 50px;
  }
}

.u-step-title {
  margin-bottom: 0;
  font-size: 20px;
  color: #526069;
}

.u-step-desc {
  text-align: left;
  p {
    margin-bottom: 0;
  }
}

.u-steps-vertical .u-step {
  display: block;
  padding: 18px 20px;
  &[class*=col-] {
    float: none;
    width: 100%;
  }
}

.u-step {
  &.current {
    color: #fff;
    background-color: #3f51b5;
    .u-step-title {
      color: #fff;
    }
    .u-step-number {
      color: #3f51b5;
      background-color: #fff;
    }
  }
  &.disabled {
    color: #ccd5db;
    pointer-events: none;
    cursor: auto;
    .u-step-title {
      color: #ccd5db;
    }
    .u-step-number {
      background-color: #ccd5db;
    }
  }
  &.error {
    color: #fff;
    background-color: #f96868;
    .u-step-title {
      color: #fff;
    }
    .u-step-number {
      color: #f96868;
      background-color: #fff;
    }
  }
  &.done {
    color: #fff;
    background-color: #46be8a;
    .u-step-title {
      color: #fff;
    }
    .u-step-number {
      color: #46be8a;
      background-color: #fff;
    }
  }
}

.u-steps-lg {
  .u-step {
    padding: 20px 20px;
    font-size: 16px;
  }
  .u-step-icon, .u-step-title {
    font-size: 22px;
  }
  .u-step-number {
    width: 46px;
    height: 46px;
    font-size: 28px;
    line-height: 46px;
    ~ .u-step-normal-desc {
      min-height: 46px;
      margin-left: 56px;
    }
  }
}

.u-steps-sm {
  .u-step {
    font-size: 12px;
  }
  .u-step-icon, .u-step-title {
    font-size: 18px;
  }
  .u-step-number {
    width: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    ~ .u-step-normal-desc {
      min-height: 30px;
      margin-left: 40px;
    }
  }
}

.u-steps-xs {
  .u-step {
    font-size: 10px;
  }
  .u-step-icon, .u-step-normal-title {
    font-size: 16px;
  }
  .u-step-number {
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    ~ .u-step-desc {
      min-height: 24px;
      margin-left: 34px;
    }
  }
}