/*
* @Author: zhongjiahao
* @Date:   2016-10-31 14:04:46
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-11-01 10:53:08
*/

a {
  text-decoration: none;
}

@mixin f-to {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin f-hover {
  &:hover {
    @content
  }
}

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';
  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value}px;
    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }
  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value/16}rem;
    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }
  #{$property}: $pxValues;
  // #{$property}: $remValues;
}

$font-family-h: 'Helvetica Neue',
Tahoma,
'PingFang SC',
'Hiragino Sans GB',
'Microsoft YaHei',
STHeitiSC,
sans-serif;
$font-family-a: 'Helvetica Neue',
Tahoma,
'PingFang SC',
'Hiragino Sans GB',
SimSun,
STHeitiSC,
sans-serif;
@mixin font-h5 {
  @include rem(font-size, 14);
  @include rem(line-height, 24);
  font-family: $font-family-h;
}

@mixin font-h6 {
  @include rem(font-size, 12);
  @include rem(line-height, 20);
  font-family: $font-family-h;
}

@mixin font-a2 {
  @include rem(font-size, 12);
  @include rem(line-height, 20);
  font-family: $font-family-h;
}

@mixin font-h3 {
  @include rem(font-size, 20);
  @include rem(line-height, 36);
  font-family: $font-family-h;
}

@mixin font-h4 {
  @include rem(font-size, 16);
  @include rem(line-height, 30);
  font-family: $font-family-h;
}


/*
  主色
*/

$c1: #004170;
$c2: #005999;
$c3: #1687d9;
$c4: #96d0fa;

/*
  中性色
*/

$m1: #36434d;
$m2: #667580;
$m3: #acb7bf;
$m4: #e4ebf0;
$m5: #f5f8fa;

body {
  margin: 0;
  padding: 0;
  @include font-h5();
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.area-select {
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-animation-duration: 0.2s;
      animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
  -webkit-animation-play-state: paused;
      animation-play-state: paused;
      -webkit-animation-name: antSlideUpIn;
      animation-name: antSlideUpIn;
  -webkit-animation-play-state: running;
      animation-play-state: running;
  position: absolute;
  @include rem(padding, 0, 15);
  @include rem(width, 680);
  @include rem(height, 422);
  @include rem(border-radius, 2);
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  .area-select__container {
    height: calc(100% - 56px);
    width: 100%;
  }
  .area-select__content_left {
    float: left;
    @include rem(width, 400);
    height: 100%;
    .area-select__breadcrumb {
      @include rem(margin-top, 20);
      @include rem(margin-bottom, -5);
      padding: 0;
      height: auto;
      background: #fff;
    }
  }
  .area-select__content_right {
    float: right;
    @include rem(margin-top, 10);
    @include rem(padding-left, 15);
    @include rem(width, 234);
    height: calc(100% - 10px);
    border-left: 1px solid $m4;
    border-left-width: 1px;
    border-left-style: solid;
    .area-select__results-tip {
      display: inline-block;
      @include rem(margin, 10, 0);
      width: 100%;
      .area-select__text {
        color: $m1;
        &:first-child {
          // @include rem(margin-right, 5);
          width: 0px;
          display: inline-block;
        }
        &:last-child {
          float: right;
        }
      }
      .area-select__text_is-disabled {
        color: $m3;
        cursor: not-allowed;
      }
      .area-select__text_is-active {
        color: $c2;
      }
    }
    .area-select__results-content {
      @include rem(margin-top, 10);
      @include rem(height, 300);
      overflow-y: auto;
      .area-select__item {
        float: left;
        @include rem(margin-right, 20);
        @include rem(margin-bottom, 10);
        @include font-h6();
        font-size: 0;
        cursor: pointer;
        .area-select__text {
          vertical-align: middle;
        }
        .sys-icon-close {
          @include rem(margin-left, 5);
          @include rem(font-size, 14);
          vertical-align: middle;
        }
      }
    }
  }
  .area-select__footer {
    display: block;
    @include rem(margin, 5, 0);
    text-align: right;
  }
  .area-select__select-container {
    @include rem(height, 277);
    overflow-y: auto;
  }
  .area-select__radio-content,
  .area-select__checkbox-content {
    max-width: 390px;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    -moz-transform:translateZ(0);
    -ms-transform:translateZ(0);
    -o-transform:translateZ(0);
    .u-checkbox,
    .u-radio {
      width: 32.3333333%;
      max-width: 32.3333333%;
      &:hover {
        .area-select__text {
          color: $c2;
          &.area-select__text_is-nomore {
            color: $m1;
          }
        }
      }
    }
    .u-checkbox__label,
    .u-radio__label {
      vertical-align: middle;
    }
    .area-select__label {
      display: inline-block;
      @include rem(margin-top, 15);
      font-size: 0;
      vertical-align: middle;
      .area-select__text {
        display: inline-block;
        vertical-align: middle;
        color: $m1;
        cursor: pointer;
        max-width: 72px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        &.area-select__text_is-nomore {
          cursor: default;
        }
      }
      &:hover {
        .pc-sys-arrowright-active-svg {
          display: inline-block;
        }
      }
    }
  }
  .pc-sys-arrowright-active-svg {
    display: none;
    @include rem(margin-left, 5);
    vertical-align: middle;
  }
  .area-select__text {
    @include font-h6();
  }
}

@-webkit-keyframes antSlideUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    -webkit-transform: scaleY(0.8);
        transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
        transform: scaleY(1);
  }
}
@keyframes antSlideUpIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    -webkit-transform: scaleY(0.8);
        transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    -webkit-transform: scaleY(1);
        transform: scaleY(1);
  }
}

.u-radio,
.u-checkbox {
  display: inline-block;
  & + .form-item__explain {
    @include rem(bottom, -25);
  }
  [type="radio"],
  [type="checkbox"] {
    position: absolute;
    @include rem(margin, -1);
    padding: 0;
    border: 0;
    @include rem(width, 1);
    @include rem(height, 1);
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  .u-radio__label,
  .u-checkbox__label {
    display: inline-block;
    @include rem(margin-top, 15);
    font-size: 0;
  }
  .form-item__label {
    display: inline-block;
    margin-bottom: 0;
    padding: 0;
    @include font-h5();
    vertical-align: middle;
  }
}

.u-radio {
  [type="radio"]:checked {
    & + .u-radio__label {
      .u-radio__icon {
        border-color: $c3;
        &:after {
          content: "";
          display: inline-block;
          @include rem(margin, 2);
          @include rem(width, 8);
          @include rem(height, 8);
          border-radius: 100%;
          background-color: $c3;
          vertical-align: top;
          transition: width .2s ease, height .2s ease, margin .2s ease;
        }
      }
    }
  }
  [type="radio"]:disabled {
    & + .u-radio__label {
      .u-radio__icon {
        border-color: $m3;
        cursor: no-drop;
        &:after {
          background-color: $m3;
        }
      }
    }
  }
  .u-radio__icon {
    cursor: pointer;
    box-sizing: initial;
    @include rem(margin-right, 5);
    @include rem(width, 12);
    @include rem(height, 12);
    border: 1px solid $c4;
    border-radius: 100%;
    vertical-align: middle;
    &:after {
      content: "";
      display: inline-block;
      @include rem(margin, 8);
      width: 0;
      height: 0;
      border-radius: 50%;
      background-color: $c3;
      vertical-align: top;
      transition: width .2s ease, height .2s ease, margin .2s ease;
    }
    &:hover {
      border-color: $c3;
    }
  }
}

.u-checkbox {
  [type="checkbox"] {
    & + .u-checkbox__label {
      .pc-sys-Checkbox-nomal-svg {
        @include rem(width, 14);
        @include rem(height, 14);
        border: 1px solid $c4;
        box-sizing: border-box;
        background: none;
        opacity: 0.8;
        border-radius: 2px;
        animation: checkToDft 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        &:hover {
          border-color: $c3;
        }
      }
      .pc-sys-Checkbox-active-svg {
        display: none;
        opacity: 0;
      }
      .pc-sys-Checkbox-active-disabled-svg {
        display: none;
      }
    }
  }
  [type="checkbox"]:checked {
    & + .u-checkbox__label {
      .pc-sys-Checkbox-nomal-svg {
        display: none;
        opacity: 0;
      }
      .pc-sys-Checkbox-active-svg {
        display: inline-block;
        opacity: 1;
        /*animation: dftToCheck 0.2s cubic-bezier(0.66, 1.65, 0.23, 0.87) forwards;*/
      }
    }
  }
  [type="checkbox"]:disabled:checked,
  [type="checkbox"]:checked:disabled {
    & + .u-checkbox__label {
      [class*="pc-sys-Checkbox"] {
        display: none;
      }
      .pc-sys-Checkbox-active-disabled-svg {
        display: inline-block;
        cursor: no-drop;
      }
    }
  }
  [type="checkbox"]:disabled {
    & + .u-checkbox__label {
      [class*="pc-sys-Checkbox"] {
        display: none;
      }
      .pc-sys-Checkbox-nomal-svg {
        display: inline-block;
        border-color: $m3;
      }
    }
  }
  .u-checkbox__icon {
    display: inline-block;
    cursor: pointer;
    @include rem(margin-right, 5);
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
  }
}

@keyframes dftToCheck {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes checkToDft {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  .btn,
  .btn-icon {
    @include rem(margin-left, 10);
    &:first-child {
      margin-left: 0;
    }
  }
  &.btn-group_is-stick {
    .btn {
      margin-left: -1px;
    }
  }
}

.btn {
  position: relative;
  z-index: 6;
  display: inline-block;
  outline: transparent;
  border: 1px solid transparent;
  @include rem(margin, 10, 0);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: 0 0;
  background-clip: border-box;
  @include f-to();
  .ripple {
    display: block;
    position: absolute;
    border: 0 solid rgba(0, 0, 0, 0.2);
    border-radius: 50%!important;
    opacity: .3;
    pointer-events: none;
    opacity: 1;
  }
  &.btn_has-icon {
    font-size: 0;
    .btn__text {
      vertical-align: middle;
      @include font-h5();
    }
    .u-icon {
      vertical-align: middle;
    }
    .btn__text + .u-icon {
      @include rem(margin-left, 5);
    }
    .u-icon + .btn__text {
      @include rem(margin-left, 5);
    }
  }
  &.btn_default {
    @include rem(min-width, 60);
    @include rem(padding, 4, 15);
    @include font-h5();
    background-color: $c3;
    color: #fff;
    @include rem(border-radius, 2);
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .3);
    @include f-hover {
      box-shadow: 0 .1875rem .3125rem rgba(0, 0, 0, .3);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    .btn__text {
      @include font-h5();
    }
    &.btn_is-active {
      background-color: $c2;
      box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .3);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    &:disabled,
    &.btn_is-disabled {
      box-shadow: none;
      background-color: $c3;
      opacity: .6;
      cursor: not-allowed;
    }
  }
  &.btn_weaken {
    @include rem(min-width, 60);
    @include rem(padding, 4, 15);
    @include font-h5();
    background-color: $m5;
    color: $m1;
    @include rem(border-radius, 2);
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .3);
    @include f-hover {
      box-shadow: 0 .1875rem .3125rem rgba(0, 0, 0, .3);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    .btn__text {
      @include font-h5();
    }
    &.btn_is-active {
      background-color: $m5;
      box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .5);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    &:disabled,
    &.btn_is-disabled {
      box-shadow: none;
      background-color: $m5;
      color: $m1;
      cursor: not-allowed;
    }
  }
  &.btn_sm {
    @include rem(min-width, 50);
    @include rem(padding, 2, 10);
    @include font-h6();
    .btn__text {
      @include font-h6();
    }
  }
  &.btn_block {
    display: block;
    width: 100%;
    @include font-h3();
  }
  &.btn-icon {
    display: inline-block;
    padding: 0;
    min-width: auto;
    @include rem(width, 34);
    @include rem(height, 34);
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-rendering: auto;
  }
}

.u-icon {
  display: inline-block;
  &[class*="pc-sys-Checkbox"] {
    width: 12px;
    height: 10px;
  }
  &[class*="pc-sys-arrowleft"],
  &[class*="pc-sys-arrowleftM7"],
  &[class*="pc-sys-arrowright"] {
    width: 5px;
    height: 10px;
  }
  &.sys-icon-close {
    cursor: pointer;
    &:before {
      color: #acb7bf;
    }
    &:hover {
      &:before {
        color: #cc2929;
      }
    }
  }
}

.breadcrumb {
  display: block;
  @include rem(padding, 10, 20);
  @include rem(padding-bottom, 5);
  width: 100%;
  max-width: 100%;
  @include rem(height, 34);
  background-color: $m5;
  .breadcrumb__list {
    display: flex;
    margin: 0;
    padding: 0;
  }
  .breadcrumb__item {
    position: relative;
    @include rem(padding, 0, 10);
    @include rem(margin-right, 10);
    @include rem(height, 20);
    @include rem(line-height, 20);
    &:before {
      content: ">";
      position: absolute;
      @include rem(left, -10);
      color: $m2;
      font-family: sys-icon !important;
    }
    &:first-child {
      padding-left: 0;
      &:before {
        content: " ";
      }
    }
    &:last-child {
      margin-right: 0;
      padding-right: 0;
    }
  }
  .breadcrumb__text {
    display: inline-block;
    color: $m2;
    @include font-h6();
    text-decoration: none;
    &:hover {
      color: $c2;
    }
  }
}

.area-select .tab {
  position: relative;
  @include rem(margin, 20, 0, 10, 0);
  @include rem(height, 33);
  border-bottom: .125rem solid $m4;
  .tab__list {
    display: inline-block;
    .tab__item {
      float: left;
      @include rem(margin-bottom, 5);
      @include rem(padding, 0, 15);
      @include rem(min-width, 110);
      @include rem(max-width, 130);
      color: $m2;
      text-align: center;
      @include font-h4();
      cursor: pointer;
      @include f-to();
      &:hover {
        color: $m1;
      }
      &.tab__item_is-active {
        color: #005999;
      }
    }
  }
  .tab__line {
    position: absolute;
    @include rem(top, 29);
    @include rem(width, 68);
    @include rem(height, 4);
    left: 0;
    background-color: $c3;
    transition: left cubic-bezier(0.51, 1.74, 0, 0.78) 0.3s, width cubic-bezier(0.51, 1.74, 0, 0.78) 0.3s;
  }
  .tab__dropdown {
    @include rem(margin-left, 15);
  }
  .tab__drop-trigger {
    &:hover {
      box-shadow: 0 .0625rem .125rem 0 rgba(0, 0, 0, 0.3);
      background-color: #FFF;
    }
  }
  &.tab_sm {
    @include rem(margin, 10, 0);
    @include rem(height, 30);
    position: relative;
    border-bottom: .0625rem solid $m4;
    .tab__list {
      .tab__item {
        @include font-h6();
        cursor: pointer;
        float: left;
        @include rem(padding, 5, 10);
        @include rem( max-width, 110);
        min-width: 0;
        color: $m2;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-top: .0625rem solid transparent;
        border-right: .0625rem solid transparent;
        border-left: .0625rem solid transparent;
        &:hover {
          color: $m1;
        }
        &.tab__item_is-active {
          color: #005999;
          border-top: .0625rem solid $m4;
          border-left: .0625rem solid $m4;
          border-right: .0625rem solid $m4;
          background-color: #FFF;
        }
      }
    }
    .tab__dropdown {
      @include rem(margin-left, 10);
    }
  }
}

.tab__dropdown {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  .dropdown {
    &.tab_position-l {
      left: 0;
    }
    &.tab_position-r {
      right: 0;
    }
  }
  .tab__base-label {
    display: inline-block;
    @include rem(width, 28);
    @include rem(height, 34);
    @include rem(border-radius, 2);
    font-family: $font-family-h;
    text-align: center;
    @include rem(font-size, 14);
    color: #667580;
    @include rem(line-height, 24);
    position: relative;
  }
  .tab__drop-trigger-is_disabled {
    @extend .tab__base-label;
    background-color: #f0f0f0;
    cursor: no-drop;
  }
  .tab__drop-trigger {
    @extend .tab__base-label;
    cursor: pointer;
    &.tab__drop-trigger_is-active {
      background-color: #f5f8fa !important;
      box-shadow: none !important;
    }
  }
}