@use 'sass:map';

@use '../mixins/mixins.scss' as *;
@use '../var/size.scss' as *;

$radio-sizes: () !default;
$radio-sizes: map.merge(
  (
    'sm': (
      'padding': 8rpx 14rpx,
      'font-size': 24rpx,
      'dot': 24rpx,
    ),
    '': (
      'padding': 10rpx 20rpx,
      'font-size': 28rpx,
      'dot': 30rpx,
    ),
    'lg': (
      'padding': 12rpx 24rpx,
      'font-size': 32rpx,
      'dot': 36rpx,
    ),
  ),
  $radio-sizes
);

@include b(radio) {
  flex-grow: 0;
  flex-shrink: 0;

  display: flex;
  align-items: center;

  padding: map-get(map-get($radio-sizes, ''), 'padding');
  font-size: map-get(map-get($radio-sizes, ''), 'font-size');
  border-radius: 10rpx;

  transition: all 0.3s ease-in-out;

  /* 单选框组中的单选框之间有10rpx的边距 */
  @include m(group) {
    margin: 10rpx;
  }

  /* 选中框点 start */
  @include e(dot) {
    flex-shrink: 0;

    position: relative;
    width: map-get(map-get($radio-sizes, ''), 'dot');
    height: map-get(map-get($radio-sizes, ''), 'dot');
    border-radius: 50%;
    transition: all 0.3s ease-in-out;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(map-get(map-get($radio-sizes, ''), 'dot') / 2);
      height: calc(map-get(map-get($radio-sizes, ''), 'dot') / 2);
      border-radius: 50%;
      background-color: #fff;
      transition: all 0.3s ease-in-out;
      transform: translate(-50%, -50%) scale(0);
      transform-origin: center center;
    }
  }
  /* 选中框点 end */

  /* 内容 start */
  @include e(content) {
    @include m(left) {
      margin-right: 14rpx;
    }
    @include m(right) {
      margin-left: 14rpx;
    }
  }
  /* 内容 end */

  /* 尺寸 start */
  @each $size in $tn-form-sizes {
    @include m(#{$size}) {
      padding: map-get(map-get($radio-sizes, $size), 'padding');
      font-size: map-get(map-get($radio-sizes, $size), 'font-size');

      @include e(dot) {
        width: map-get(map-get($radio-sizes, $size), 'dot');
        height: map-get(map-get($radio-sizes, $size), 'dot');
        &::after {
          width: calc(map-get(map-get($radio-sizes, $size), 'dot') / 2);
          height: calc(map-get(map-get($radio-sizes, $size), 'dot') / 2);
        }
      }
    }
  }
  /* 尺寸 end */

  /* 选中效果 start */
  @include m(selected) {
    @include e(dot) {
      &::after {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }
  /* 选中效果 end */

  /* 禁止效果 start */
  @include m(disabled) {
    opacity: 0.4;
  }
  /* 禁止效果 end */

  /* 没有边框 start */
  @include m(no-border) {
    // 如果没有border则不设置内边距
    padding: 0;
  }
  /* 没有边框 end */
}