/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';

@import './mixins.less';

@radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';

.@{ant-prefix}-radio-wrapper:not(.sp-null) {
  color: @radio-text-color;
  // disabled 颜色
  .@{ant-prefix}-radio-disabled {
    & + span {
      color: @radio-text-disabled-color;
    }
  }
  // 选中后的样式
  .@{ant-prefix}-radio-checked {
    &::after {
      display: none;
    }
    &.@{ant-prefix}-radio-disabled {
      .@{ant-prefix}-radio-inner {
        background-color: @radio-dot-disabled-outer;
        border: 1px solid @radio-dot-disabled-checked!important;
        opacity: @radio-dot-disabled-checked-opacity;
        &::after {
          background-color: @radio-dot-disabled-checked;
        }
      }
    }

    .@{ant-prefix}-radio-input:focus + .@{ant-prefix}-radio-inner {
      box-shadow: @radio-button-focused-shadow;
    }
  }
}

.@{radio-prefix-cls}-group-outline {
  .@{radio-prefix-cls}-button-wrapper {
    .@{radio-prefix-cls}-button {
      background-color: @radio-button-inner-bg;
      border-radius: @radio-button-inner-border-radius;
    }
    &-checked {
      .@{radio-prefix-cls}-button {
        background-color: @radio-button-inner-checked-bg;
      }
    }
  }
}

.@{radio-group-prefix-cls}:not(.sp-null) {
  &:not(.@{ant-prefix}-radio-group-small):not(.@{ant-prefix}-radio-group-large) .@{radio-prefix-cls}-button-wrapper {
    padding: @spacing-s @padding-md;
    line-height: @Font-Lineheight-1 - 2px;
  }
  .@{radio-prefix-cls}-button-wrapper {
    .@{radio-prefix-cls}-button {
      width: calc(100% - @radio-button-wrapper-padding * 2);
      height: calc(100% - @radio-button-wrapper-padding * 2);
      top: @radio-button-wrapper-padding;
      left: @radio-button-wrapper-padding;
    }

    &:focus-within {
      box-shadow: none;
    }

    &:not(:first-child) {
      &::before {
        background-color: @radio-before-color-bg;
      }
    }

    &-checked:not(&-disabled) {
      border-color: @radio-button-checked-border-color;

      &::before {
        background-color: @radio-button-checked-border-color;
      }
    }

    .@{ant-prefix}-badge {
      color: inherit;
    }

    &-disabled:not(&-checked) {
      background-color: @radio-disabled-button-bg;
    }

    &:not(&-disabled):not(&-checked):hover {
      color: @color-primary-hover;
    }
  }
  &.@{radio-prefix-cls}-button-wrapper-checked:not(.@{radio-prefix-cls}-button-wrapper-disabled) {
    font-weight: @Font-Weight-2;
    color: @color-primary-brand;
    border-color: @border-color-base;

    &::before {
      background: none;
    }
  }

  &.@{radio-group-prefix-cls}-solid {
    .@{radio-prefix-cls}-button-wrapper-checked {
      &:not(.@{radio-prefix-cls}-button-wrapper-disabled) {
        color: @white;
      }
    }
  }
}

.@{ant-prefix}-radio-group.@{ant-prefix}-radio-group-small .@{ant-prefix}-radio-wrapper,
.@{ant-prefix}-radio-wrapper.sp-radio-sm {
  font-size: @font-size-sm;
  line-height: 16px;
  .@{ant-prefix}-radio {
    vertical-align: top;
  }
  .@{ant-prefix}-radio-inner {
    width: 14px;
    height: 14px;
    &::after {
      left: 2px;
      top: 2px;
    }
  }
}