.Checkbox,
.Radio {
  position: relative;
  display: inline-block;
  margin: var(--radio-gap) var(--radio-gap) 0 0;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--color-fill-2);
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.CheckboxGroup,
.RadioGroup {
  --radio-gap: 8px;

  margin-top: calc(var(--radio-gap) * -1);

  &[data-align='left'] {
    text-align: left;
  }
  &[data-align='right'] {
    text-align: right;
  }
  &[data-layout] {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--radio-gap) * -1);
  }
}

.CheckboxGroup--block,
.RadioGroup--block {
  margin-top: 0;
}

.CheckboxGroup--block .Checkbox,
.RadioGroup--block .Radio {
  display: block;
  margin-right: 0;
}

.CheckboxGroup[data-layout] .Checkbox,
.RadioGroup[data-layout] .Radio {
  // 使用 CSS 变量 --max-per-row 动态计算宽度，避免重复代码
  // 当 data-layout 为数字时，使用 calc(100% / var(--max-per-row) - var(--radio-gap))
  // 当 data-layout 为 'flex' 时，flex: 1
  flex: 0 0 calc(100% / var(--max-per-row) - var(--radio-gap));
  min-width: 0;
}

// 等分布局：data-layout='flex' 时，每个项目平均分配空间
.CheckboxGroup[data-layout='flex'] .Checkbox,
.RadioGroup[data-layout='flex'] .Radio {
  flex: 1;
}

.Checkbox--disabled,
.Radio--disabled {
  opacity: 0.5;
  cursor: initial;
}

.Checkbox--checked,
.Radio--checked {
  background: var(--brand-4);
  color: var(--brand-1);
  font-weight: 600;
}

.Checkbox-input,
.Radio-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
}