/*
* @Author: zhongjiahao
* @Date:   2016-09-13 16:07:23
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-11-15 16:15:47
*/

.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;
    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,10);
          @include rem(height,10);
          border-radius: 50%;
          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;
        &:after {
          background-color: $m3;
        }
      }
    }
  }
  .u-radio__icon {
    box-sizing: initial;
    @include rem(margin-right,5);
    @include rem(width,14);
    @include rem(height,14);
    border: .125rem solid $c4;
    border-radius: 50%;
    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 #96d0fa;
        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 {
        background-size: 100%;
        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;
      }
    }
  }
  [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;
    @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);
  }
}