@import './token.less';

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

.radioBaseStyle() {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  height: 30px;
  margin: 0 0 0 -1px;
  border: 1px solid var(~'@{arco-cssvars-prefix}-color-border-2');
  font-size: 12px;
  color: var(~'@{arco-cssvars-prefix}-color-text-2');

  &:first-child {
    margin-left: 0;
    border-radius: 2px 0 0 2px;
  }

  &:last-child {
    border-radius: 0 2px 2px 0;
  }
}

.radioCheckedStyle() {
  border-color: rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
  background-color: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.06);
  z-index: 1;
  color: rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
}

// 与 Radio.Group 同节点（arco-radio-group），需提高优先级覆盖其默认 margin / display
.@{outlined-radio-group-prefix-cls}.@{prefix}-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--outlined-radio-group-gap, 0);

  .@{prefix}-radio {
    .radioBaseStyle();
  }

  .@{prefix}-radio-checked {
    .radioCheckedStyle();
  }

  // 使用 render prop 子节点时没有 .arco-radio-text，需单独覆盖禁用态
  .@{prefix}-radio.@{prefix}-radio-disabled {
    color: var(~'@{arco-cssvars-prefix}-color-text-4');
    cursor: not-allowed;
    border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');
  }

  .@{prefix}-radio.@{prefix}-radio-checked.@{prefix}-radio-disabled {
    color: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
    border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');
  }

  &.@{outlined-radio-group-prefix-cls}-icon {
    .@{prefix}-radio:not(.@{prefix}-radio-disabled) {
      color: var(~'@{arco-cssvars-prefix}-color-border-4');
    }

    .@{prefix}-radio-checked:not(.@{prefix}-radio-disabled) {
      .radioCheckedStyle();
    }
  }

  &.@{prefix}-radio-group-rtl {
    .@{prefix}-radio {
      margin-right: 0;
      margin-left: 0;
    }
  }
}

body[arco-theme='dark'] {
  .@{outlined-radio-group-prefix-cls}.@{prefix}-radio-group.@{outlined-radio-group-prefix-cls}-icon {
    .@{prefix}-radio:not(.@{prefix}-radio-disabled) {
      color: var(~'@{arco-cssvars-prefix}-color-text-1');
    }

    .@{prefix}-radio-checked:not(.@{prefix}-radio-disabled) {
      color: rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
    }
  }
}