@radio-prefix-cls: ~'@{icecream-prefix}-radio';
@radio-btn-prefix-cls: ~'@{radio-prefix-cls}-btn';

@radio-size: 16px;
@radio-inner-circle-size: 6px;
@radio-inner-circle-offset: (@radio-size - @radio-inner-circle-size - 2px) / 2;
@radio-border-color: @icecream-color-grey-7;

.@{radio-prefix-cls} {
  .extendBase();
  display: inline-block;
  color: @icecream-bold-color;
  .setFontSize(@icecream-font-size-md);
  cursor: pointer;

  & + & {
    margin-left: @icecream-gap-lg;
  }

  &-input {
    position: relative;
    top: -0.09em;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    outline: none;

    &-origin {
      position: absolute;
      margin: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      cursor: pointer;
      opacity: 0;
    }

    &-simulated {
      position: relative;
      display: block;
      box-sizing: border-box;
      width: @radio-size;
      height: @radio-size;
      background-color: @icecream-white;
      border: 1px solid @radio-border-color;
      border-radius: 50%;
      // Fix IE checked style
      border-collapse: separate;
      transition: @icecream-transitions;
    }
  }

  &:hover &-input-simulated {
    border-color: @icecream-primary-color;
  }

  &-label {
    display: inline-block;
    padding-left: @icecream-gap-xs;
  }

  &-size-small {
    .setFontSize(@icecream-font-size-sm);
  }
}

.@{radio-prefix-cls}-checked {
  .@{radio-prefix-cls}-input-simulated {
    background-color: @icecream-primary-color;
    border-color: @icecream-primary-color;

    &::after {
      position: absolute;
      display: table;
      top: @radio-inner-circle-offset;
      left: @radio-inner-circle-offset;
      width: @radio-inner-circle-size;
      height: @radio-inner-circle-size;
      background: @icecream-white;
      border-radius: 50%;
      opacity: 1;
      content: '';
    }
  }
}

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

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

    &-simulated {
      background-color: @icecream-color-grey-3;
      border-color: @radio-border-color !important;
    }
  }

  &.@{radio-prefix-cls}-checked {
    .@{radio-prefix-cls}-input-simulated {
      background-color: @radio-border-color;
    }
  }
}

.setBtnSize(@line-height, @font-size) {
  .setFontSize(@font-size);
  @content-line-height: getIcecreamLineHeightByPx(@font-size);
  @padding-y: (@line-height - @content-line-height) / 2 - 1px;
  @padding-x: @icecream-gap-md - 1px;
  padding: @padding-y @padding-x;
}

.@{radio-btn-prefix-cls} {
  .extendBase();
  display: inline-block;
  color: @icecream-bold-color;
  background-color: @icecream-white;
  border: 1px solid @radio-border-color;
  cursor: pointer;
  position: relative;

  &:first-child {
    border-radius: @icecream-border-radius 0 0 @icecream-border-radius;
  }

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

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

  &-size {
    &-small {
      .setBtnSize(@icecream-form-input-height-sm, @icecream-font-size-sm);
    }
    &-default {
      .setBtnSize(@icecream-form-input-height-md, @icecream-font-size-md);
    }
    &-large {
      .setBtnSize(@icecream-form-input-height-lg, @icecream-font-size-md);
    }
  }

  &-input {
    display: none;
  }

  &-label {
    display: inline-block;
  }

  & + & {
    margin-left: -1px;
  }

  &:hover {
    color: @icecream-primary-color;
  }

  &-checked {
    z-index: 1;
    color: @icecream-primary-color;
    border-color: @icecream-primary-color;
  }

  &-disabled {
    color: @icecream-color-grey-8 !important;
    background-color: @icecream-color-grey-3;
    border-color: @radio-border-color !important;
    cursor: not-allowed;

    &.@{radio-btn-prefix-cls}-checked {
      background-color: @icecream-color-grey-5;
    }
  }
}