@import "../../styles/mixin";
.#{$prefix}-radio {
  // display: inline-block;
  // position: relative;
  // padding-top: 4px;
  // padding-bottom: 4px;
  // padding-left: 22px;
  // height:24px;
  // line-height: 16px;
  // vertical-align: middle;
  // @include selectxt;
  $this: &;
  // //radio之间的间隔距离，因为是inline-block,浏览器默认有3px,所以减去3
  // + #{$this}{
  //     margin-left: $space * 2 - 3;
  // }
  // //hover
  // &:hover{
  //     #{$this}-label{
  //         &:before{
  //             border-color:$c5
  //         }
  //     }
  // }
  // &-o{
  //     display: none;
  //     + #{$this}-label{
  //         cursor: pointer;
  //         padding-right: 8px;
  //         &:before,&:after{
  //             content:'';
  //             position: absolute;
  //         }
  //         &:before{
  //             top:5px;
  //             left:0;
  //             border: 1px solid $c16;
  //             border-radius:50%;
  //             width: 12px;
  //             height: 12px;
  //             background-color: $c21;

  //         }
  //         &:after{
  //             left:3px;
  //             top:8px;
  //             width: 8px;
  //             height: 8px;
  //             background-color:$c4;
  //             border-radius:50%;
  //             opacity: 0;
  //             transition: opacity 300ms
  //         }
  //     }
  //     //checked
  //     &:checked{
  //         + #{$this}-label{
  //             &:before{
  //                 border-color:$c4;
  //                 /* background-color:$c0 */
  //             }
  //             &:after{
  //                 opacity: 1;
  //             }
  //         }
  //     }
  //     //disabled
  //     &:disabled{
  //         + #{$this}-label{
  //             cursor:no-drop;
  //             color:$c16;
  //             &:before{
  //                 border-color:$c18;
  //                 background-color:$c19
  //             }
  //             &:after{
  //                 background-color:$c17
  //             }
  //         }
  //     }
  //     /* &:disabled:checked{
  //         + #{$this}-label{
  //             color:$c13
  //         }
  //     } */
  // }
  // &-label{
  //     color:$c13;
  //     &:empty{
  //         padding-right: 0;
  //     }
  // }

  // 文字选框
  // &-font, &-button.lg-radio-button{
  &-button.lg-radio-button {
    padding: 0;
    overflow: hidden;
    height: 30px;
    line-height: 28px;
    #{$this}-label {
      border: 1px solid $c16;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      padding: 0 16px 4px;
      background-color: $c21;
      @include border-radius;
      transform: translateZ(0);
      &:before {
        // display: none;
        opacity: 0;
        height: 24px;
        width: 24px;
      }
      &:after {
        left: 10px;
        top: 7px;
        width: 8px;
        height: 4px;
        border: solid $c21;
        border-width: 0 0 2px 2px;
        transform: rotate(-45deg) scale(0);
        transition: transform 300ms;
      }
    }
    &:hover {
      #{$this}-label {
        border-color: $c5;
      }
    }
    #{$this}-o {
      &:checked {
        ~ #{$this}-label {
          border-color: $c4;
          &:before,
          &:after {
            opacity: 1;
            left: auto;
            right: 0;
            top: auto;
            bottom: 0;
            border-radius: 0;
          }
          &:before {
            transform: rotate(46deg);
            top: 15px;
            right: -12px;
            height: 24px;
            width: 24px;

            background-color: $c4;
            transition: background-color 300ms;
          }
          &:after {
            top: 17px;
            right: 0;

            width: 8px;
            height: 4px;
            border: solid $c21;
            background-color: transparent;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg) scale(1);
            transition: transform 300ms;
          }
        }
      }
      &:disabled {
        ~ #{$this}-label {
          border-color: $c18;
          background-color: $c19;
          &:before {
            background-color: $c17;
          }
          &:after {
            border-color: $c21;
          }
          &:hover {
            z-index: 0;
          }
        }
      }
    }
  }
  &-button.lg-radio-button {
    //transform-style: preserve-3d;
    margin-right: 0;
    + #{$this}-button {
      margin-left: -1px;
    }
    &:first-child {
      @include border-radius(2px 0 0 2px);
    }
    &:last-child {
      @include border-radius(0 2px 2px 0);
    }
    #{$this}-label {
      font-size: 14px;
      @include border-radius(0);
      transform: translateZ(1px);
      position: relative;
      &:hover {
        z-index: 1;
        color: $c4;
        //transform: translateZ(2px)
      }
    }

    #{$this}-o {
      &:checked {
        ~ #{$this}-label {
          color: $c4;
          z-index: 1;
          &:before,
          &:after {
            display: none;
          }
          //transform: translateZ(2px)
        }
      }
      &:disabled {
        ~ #{$this}-label {
          color: $c16;
          border-color: $c18;
          background-color: $c19;
        }
      }
    }
  }
}

// 内容选框
.#{$prefix}-itemcheck {
  $this: &;
  &-box {
    // @include clearfix;
    display: inline-block;
    + #{$this}-box {
      margin-left: $space;
    }
    #{$this}-item {
      position: relative;
      border: 1px solid $c17;
      background-color: $c21;
      // width: 130px;
      // height: 130px;
      // display: inline-block;
      overflow: hidden;
      cursor: pointer;
      // margin-bottom: $space;

      &:hover {
        border-color: $c5;
      }
    }
    .#{$prefix}-radio-o {
      //checked
      &:checked {
        + #{$this}-item {
          border-color: $c4;
          &:before,
          &:after {
            opacity: 1;

            position: absolute;
            content: "";
            box-sizing: border-box;
          }
          &:before {
            height: 24px;
            width: 24px;
            background-color: $c4;
            transform: rotate(46deg);
            bottom: -12px;
            right: -12px;
          }
          &:after {
            right: 0px;
            bottom: 4px;
            width: 10px;
            height: 6px;
            border: solid $c21;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg) scale(1);
            transition: transform 300ms;
          }
        }
      }
      //disabled
      &:disabled {
        + #{$this}-item {
          background-color: $c19;
          border-color: $c17;
          cursor: no-drop;
          &.is-checked {
            &:before {
              background-color: $c17;
            }
          }
        }
      }
    }
  }
}

.#{$prefix}-radio-new {
  .#{$prefix}-radio-o {
    display: none;
    + .#{$prefix}-radio-label {
      &:before,
      &:after {
        box-sizing: border-box;
      }
      &:before {
        width: 14px;
        height: 14px;
      }
    }
  }
  &.lg-radio-font .lg-radio-o:checked ~ .lg-radio-label:before {
    width: 26px;
    height: 26px;
  }
  &.lg-radio-font .lg-radio-o:checked ~ .lg-radio-label:after {
    width: 10px;
    height: 6px;
  }
}