@checkbox-mask-bg-color-bg: @color-transparent;

@checkbox-mask-color-border: rgba(0, 0, 0, 0.3);
@checkbox-mask-color-border_hover: rgba(0, 0, 0, 0.3);

.@{checkbox-prefix-cls} {
  &:hover &-icon {
    background-color: @color-primary-1;
    border-color: @color-primary-6;
  }

  &-checked &-icon {
    background-color: #ffffff;
    border-color: @checkbox-mask-color-border;

    &-check {
      width: 100%;
      color: @color-primary-6;
    }
  }

  &-checked:hover &-icon {
    border-color: @color-primary-6;
  }

  &-disabled:hover &-icon {
    background-color: @checkbox-mask-color-bg_disabled;
    border-color: @checkbox-mask-color-border_disabled;
  }

  &-checked&-disabled &-icon {
    background-color: @checkbox-mask-color-bg_disabled;
    border-color: @checkbox-mask-color-border_disabled;

    &-check {
      color: @checkbox-mask-color-border_disabled;
    }
  }

  &-checked&-disabled:hover &-icon {
    background-color: @checkbox-mask-color-bg_disabled;
    border-color: @checkbox-mask-color-border_disabled;
  }
}