.mc-radio {
  font-size: 14px;
  position: relative;
  &.is-inline{
    display: inline-block;
    &+&{
      margin-left: 10px;
    }
  }
  input[type="radio"]{
    opacity: 0;
    position: absolute;
    outline: none;
    &:checked + label {
      .mc-radio_circle {
        opacity: 1;
        width: 8px;
        height: 8px;
        top: 4px;
        left: 4px;
        margin: 0;
      }
    }
  }
  &:hover{
    .mc-radio_inner{
      border-color:$blue;
    }
  }
  &.is-disabled{
    // opacity: .6;
    cursor: not-allowed;
    input{
      &:checked + label {
        .mc-radio_circle {
          background-color: $disable-color;
        }
      }
    }
    label{
      cursor: not-allowed;
    }
    .mc-radio_inner{
      border-color:$disable-line;
      background-color: $disable-bg;
    }
  }
  .mc-radio_inner {
    @extend %transition-all;
    position: relative;
    top: 3px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid $line;
    border-radius: 50%;
    padding: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    overflow: hidden;
    .mc-radio_circle {
      position: relative;
      top: 4px;
      left: 4px;
      margin-left: 4px;
      margin-top: 4px;
      display: block;
      width: 0;
      height: 0;
      background: $blue;
      border-radius: 50%;
      opacity: 0;
      transition: width 0.15s ease-in, height 0.15s ease-in, margin 0.15s ease-in;
    }
  }
}