.antRadioFn(@radio-prefix-cls: ~'@{clinia-prefix}-radio', @color: @radio-dot-color) {
  @radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
  @radio-duration: 0.3s;

  .@{radio-prefix-cls}-wrapper {
    .reset-component;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    margin-right: 8px;
    cursor: pointer;
  }

  .@{radio-prefix-cls} {
    .reset-component;
    white-space: nowrap;
    outline: none;
    display: inline-block;
    position: relative;
    line-height: 1;
    vertical-align: sub;
    cursor: pointer;
    .@{radio-prefix-cls}-wrapper:hover &,
    &:hover,
    &-focused {
      .@{radio-inner-prefix-cls} {
        border-color: @color;
      }
    }
    &-checked:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1px solid @color;
      content: '';
      animation: antRadioEffect 0.36s ease-in-out;
      animation-fill-mode: both;
      visibility: hidden;
    }
    &:hover:after,
    .@{radio-prefix-cls}-wrapper:hover &:after {
      visibility: visible;
    }
    &-inner {
      &:after {
        @radio-dot-size: @radio-size - 8px;
        position: absolute;
        width: @radio-dot-size;
        height: @radio-dot-size;
        left: (@radio-size - @radio-dot-size) / 2 - 1px;
        top: (@radio-size - @radio-dot-size) / 2 - 1px;
        border-radius: @radio-dot-size;
        display: table;
        border-top: 0;
        border-left: 0;
        content: ' ';
        background-color: @color;
        opacity: 0;
        transform: scale(0);
        transition: all @radio-duration @ease-in-out-circ;
      }

      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @radio-size;
      height: @radio-size;
      border-width: 1px;
      border-style: solid;
      border-radius: 100px;
      border-color: @border-color-base;
      background-color: @radio-button-bg;
      transition: all @radio-duration;
    }

    &-input {
      position: absolute;
      left: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
  }

  .@{radio-prefix-cls}-checked {
    .@{radio-inner-prefix-cls} {
      border-color: @color;
      &:after {
        transform: scale(0.875);
        opacity: 1;
        transition: all @radio-duration @ease-in-out-circ;
      }
    }
  }

  .@{radio-prefix-cls}-disabled {
    .@{radio-inner-prefix-cls} {
      border-color: @border-color-base !important;
      background-color: @input-disabled-bg;
      cursor: not-allowed;
      &:after {
        background-color: #ccc;
      }
    }

    .@{radio-prefix-cls}-input {
      cursor: not-allowed;
    }

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  span.@{radio-prefix-cls} + * {
    padding-left: 8px;
    padding-right: 8px;
  }

  @keyframes antRadioEffect {
    0% {
      transform: scale(1);
      opacity: 0.5;
    }
    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }

  // Firefox hack
  @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
    .@{radio-prefix-cls} {
      vertical-align: text-bottom;
    }
  }
}

.antRadioButtonFn(
  @radio-prefix-cls: ~'@{clinia-prefix}-radio-button',
  @color: @radio-button-color,
  @hover-color: @radio-button-hover-color,
  @active-color: @radio-button-active-color) {

  .@{radio-prefix-cls}-wrapper {
    margin: 0;
    height: @btn-height-base;
    line-height: @btn-height-base - 2px;
    color: @radio-button-color;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    border: @border-width-base @border-style-base @border-color-base;
    border-left: 0;
    // strange align fix for chrome but works
    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
    border-top-width: @border-width-base + 0.02px;
    background: @radio-button-bg;
    padding: 0 @padding-md - 1px;
    position: relative;

    a {
      color: @radio-button-color;
    }

    > .@{radio-prefix-cls}-button {
      margin-left: 0;
      display: block;
      width: 0;
      height: 0;
    }

    .@{radio-group-prefix-cls}-large & {
      height: @input-height-lg;
      line-height: @input-height-lg - 2px;
      font-size: @font-size-lg;
    }

    .@{radio-group-prefix-cls}-small & {
      height: @input-height-sm;
      line-height: @input-height-sm - 2px;
      padding: 0 @control-padding-horizontal-sm - 1px;
    }

    &:not(:first-child) {
      &::before {
        content: '';
        display: block;
        top: 0;
        left: -1px;
        width: 1px;
        height: 100%;
        position: absolute;
        background-color: @border-color-base;
      }
    }
    &:first-child {
      border-radius: @border-radius-base 0 0 @border-radius-base;
      border-left: @border-width-base @border-style-base @border-color-base;
    }

    &:last-child {
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }

    &:first-child:last-child {
      border-radius: @border-radius-base;
    }

    &:hover,
    &-focused {
      color: @color;
      position: relative;
    }

    .@{radio-prefix-cls}-inner,
    input[type='checkbox'],
    input[type='radio'] {
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    &-checked {
      background: @radio-button-bg;
      border-color: @hover-color;
      color: @color;
      box-shadow: -1px 0 0 0 @color;
      z-index: 1;
      &::before {
        background-color: @color !important;
        opacity: 0.1;
      }
      &:first-child {
        border-color: @color;
        box-shadow: none !important;
      }

      &:hover {
        border-color: @hover-color;
        box-shadow: -1px 0 0 0 @hover-color;
        color: @hover-color;
      }

      &:active {
        border-color: @active-color;
        box-shadow: -1px 0 0 0 @active-color;
        color: @active-color;
      }
    }

    .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
      background: @color;
      border-color: @color;
      color: @white;
      &:hover {
        border-color: @hover-color;
        background: @hover-color;
        color: @white;
      }
      &:active {
        border-color: @active-color;
        background: @active-color;
        color: @white;
      }
    }

    &-disabled {
      border-color: @border-color-base;
      background-color: @input-disabled-bg;
      cursor: not-allowed;
      color: @disabled-color;

      &:first-child,
      &:hover {
        border-color: @border-color-base;
        background-color: @input-disabled-bg;
        color: @disabled-color;
      }
      &:first-child {
        border-left-color: @border-color-base;
      }
    }

    &-disabled&-checked {
      color: @white;
      background-color: #e6e6e6;
      border-color: @border-color-base;
      box-shadow: none;
    }
  }
}
