@import "../styles/vars.less";

@prefixCls : cuke-radio;
@buttonPrefixCls: cuke-radio-button;
.@{prefixCls} {
  font-size: @font-size;
  color: @font-color;
  outline: none;
  display: inline-block;
  line-height: 1;
  vertical-align: sub;
  white-space: nowrap;

  &-group {
    .@{prefixCls}-wrapper {
      margin-right: @cuke-radio-group-offset-right;
    }

    .@{buttonPrefixCls}-wrapper {
      border: 1px solid @border-color;
      padding: @cuke-checkbox-button-padding;
      border-radius: 0 !important;
      margin: 0;
      &:first-child {
        border-top-left-radius: @border-radius !important;
        border-bottom-left-radius: @border-radius !important;
      }
      &:last-child {
        border-bottom-right-radius: @border-radius !important;
        border-top-right-radius: @border-radius !important;
      }
      & + .@{buttonPrefixCls}-wrapper {
        border-left: 1px solid transparent;
      }
      &.@{prefixCls}-disabled:not(:first-child) {
        border-left: 1px solid transparent !important;
      }
    }
  }

  &-input {
    box-sizing: border-box;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 1;
  }

  &-disabled {
    .@{prefixCls}-inner {
      border-color: @border-color !important;
      background-color: @disabled-color !important;
      &::after {
        background-color: @disabled-font-color;
      }
    }
    .@{prefixCls}-input {
      cursor: not-allowed;
    }

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

  &-checked {
    .@{prefixCls}-inner {
      border-color: @primary-color;

      &::after {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  &-inner {
    display: block;
    width: @cuke-radio-width;
    height: @cuke-radio-height;
    border: 1px solid @border-color;
    border-radius: 50%;
    margin-right: @cuke-radio-offset-right;
    transition: all @default-transition;
    position: relative;

    &::after {
      content: " ";
      position: absolute;
      width: @cuke-radio-width - 6px;
      height: @cuke-radio-height - 6px;
      border-radius: 50%;
      background-color: @primary-color;
      display: table;
      top: 2px;
      left: 2px;
      opacity: 0;
      transition: all @default-transition;
      transform: scale(0);
    }
  }
}

.@{prefixCls}-wrapper {
  color: @font-color;
  font-size: @font-size;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all @default-transition;
  &.@{prefixCls}-disabled {
    cursor: not-allowed;
  }
  &-disabled {
    .@{prefixCls}-inner {
      border-color: @border-color  !important;
      background-color: @disabled-color  !important;
      &::after {
        border-color: @disabled-color;
      }
    }
    .@{prefixCls}-input {
      cursor: not-allowed;
    }
    & +span {
      cursor: not-allowed;
      color: @disabled-font-color;
    }
  }
  &.@{buttonPrefixCls}-wrapper {
    border: 1px solid @border-color;
    padding: @cuke-checkbox-button-padding;
    border-radius: @border-radius;
    margin: 0;
    &.@{prefixCls}-large {
      padding: @cuke-checkbox-button-padding-large;
    }
    &.@{prefixCls}-small {
      padding: @cuke-checkbox-button-padding-small;
    }
    .@{prefixCls} {
      display: none;
      & +.@{prefixCls} {
        margin: 0;
      }
    }
    &.@{prefixCls}-checked {
      background-color: @primary-color;
      border-color: @primary-color;
      color: #fff;
      text-shadow: @default-text-shadow;
      & +.@{prefixCls}-checked {
        border-left: 1px solid fade(@border-color, 70%);
      }
    }
    &.@{prefixCls}-disabled {
      background-color: @disabled-color;
      color: @disabled-font-color;
      border-color: @border-color;
    }
  }
}
