@include b(radio) {
  font-size: $size-small;
  color: $text-color;
  margin-right: 20px;
  cursor: pointer;
  @include when(disabled) {
    cursor: not-allowed;
  }

  @include e(input) {
    white-space: nowrap;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;

  }

  @include e(inner) {
    //border: $input-border-color;
    border-color: $radio-inner-border-color;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    &:hover:not([class~=is-disabled]) {
      border-color: $main-color;
    }

    &::after {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border-width: 2px;
      border-color: #0000fe;
      background-color: $main-color;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform .15s cubic-bezier(.71, -.46, .88, .6);
    }
    @include when(disabled) {
      cursor: not-allowed;
      background-color: $radio-inner-bg-color-disabled;
      border-color: $radio-inner-border-color-disabled;
    }
    @include when(checked) {
      border-color: $main-color;
      &.is-disabled {
        cursor: not-allowed;
        border-color: transparentize($main-color, .7);
        &::after {
          background-color: transparentize($main-color, .7);
        }
      }
      &::after {
        transform: translate(-50%, -50%) scale(1);
      }
    }

  }
  @include e(original) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
  @include e(label) {
    cursor: pointer;
    @include when(disabled) {
      cursor: not-allowed;
    }
  }
}