@import '../../button/style/mixins';

@include b(radio) {
  @include define(icon-size, 22px);
  @include define(icon-background, transparent);
  @include define(icon-border-radius, 22px);
  @include define(icon-border-width, 1px);
  @include define(icon-border-color, rgb(199, 199, 204));
  @include define(tick-font-size, 16px);
  @include define(tick-color, var(--za-theme-primary));
  @include define(tick-transition, all 0.2s cubic-bezier(0.71, -0.46, 0.88, 0.6));
  @include define(text-margin-horizontal, 8px);
  @include define(active-opacity, 0.6);
  @include define(checked-icon-background, transparent);
  @include define(checked-icon-border-color, var(--za-theme-primary));
  @include define(checked-tick-color, var(--za-theme-primary));
  @include define(disabled-icon-background, #f2f2f2);
  @include define(disabled-icon-border-color, rgba(199, 199, 204, 0.7));
  @include define(disabled-text-color, rgba(0, 0, 0, 0.3));
  @include define(disabled-tick-color, #bcbcbc);

  display: inline-flex;
  vertical-align: text-bottom;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;

  &:not(&--disabled):active {
    opacity: var(--active-opacity);
  }

  @include e(icon) {
    display: inline-block;
    vertical-align: middle;
  }

  @include e(input) {
    display: none;
  }

  @include e(text) {
    vertical-align: middle;
    margin: 0 var(--text-margin-horizontal);
  }

  @include e(tick) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border: var(--icon-border-width) solid var(--icon-border-color);
    border-radius: var(--icon-border-radius);
    background: var(--icon-background);

    @include b(icon) {
      font-size: var(--tick-font-size);
      color: var(--tick-color);
      transform: scale(0);
      transition: var(--tick-transition);
    }
  }

  // 选中/半选状态
  @include m(checked, indeterminate) {
    @include e(tick) {
      border-color: var(--checked-icon-border-color);
      background: var(--checked-icon-background);

      @include b(icon) {
        color: var(--checked-tick-color);
        transform: scale(1);
      }
    }
  }

  // 禁用状态
  @include m(disabled) {
    @include e(input) {
      cursor: not-allowed;
    }

    @include e(text) {
      color: var(--disabled-text-color);
    }

    @include e(tick) {
      border-color: var(--disabled-icon-border-color);
      background: var(--disabled-icon-background);
    }

    @include m(checked) {
      @include e(tick) {
        border-color: var(--disabled-icon-border-color);
        background: var(--disabled-icon-background);

        @include b(icon) {
          color: var(--disabled-tick-color);
        }
      }
    }
  }
}

@include b(radio-group) {
  @include define(group-spacing-vertical, 8px);
  @include define(group-spacing-horizontal, 24px);

  display: inline-block;
  vertical-align: middle;
  overflow: hidden;

  @include e(inner) {
    margin-right: calc(var(--group-spacing-horizontal) * -1);
    margin-bottom: calc(var(--group-spacing-vertical) * -1);
    line-height: 1;
  }

  @include b(radio) {
    margin-right: var(--group-spacing-horizontal);
    margin-bottom: var(--group-spacing-vertical);
  }

  // 通栏样式
  @include m(block) {
    width: 100%;

    @include e(inner) {
      display: flex;
      flex-wrap: wrap;
    }

    @include b(radio) {
      flex: 1;
    }
  }

  // 按钮样式
  @include m(button) {
    @include define(group-spacing-vertical, var(--za-padding-v-xs));
    @include define(group-spacing-horizontal, var(--za-padding-h-xs));

    // button compact
    @include m(button-compact) {
      @include b(radio) {
        &:not(:last-child) {
          /* prettier-ignore */
          margin-right: -1PX;
        }

        &:first-child {
          @include b(button) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }

        &:last-child {
          @include b(button) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }

        &:not(:first-child):not(:last-child) {
          @include b(button) {
            border-radius: 0;
          }
        }

        @include m(checked) {
          @include b(button) {
            z-index: 1;
          }
        }
      }
    }
  }

  @include m(list) {
    display: block;
    overflow: visible;

    @include e(inner) {
      margin-right: 0;
      margin-bottom: 0;
    }

    @include b(radio) {
      display: flex;
      margin-right: 0;
      margin-bottom: 0;

      @include e(text) {
        margin-left: 0;
      }

      @include e(tick) {
        @include define(icon-border-width, 0);

        background: transparent;

        @include b(icon) {
          font-size: var(--icon-size);
        }
      }
    }
  }
}