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

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
	@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';

	.@{checkbox-prefix-cls} {
		color: red;
	}

	// 一般状态
	.@{checkbox-prefix-cls} {
		.reset-component();

		position: relative;
		// margin-left: ((@checkbox-line-height - 1em) / 2);
		// margin-right: ((@checkbox-line-height - 1em) / 2);
		font-size: inherit;
		white-space: nowrap;
		outline: none;
		cursor: pointer;

		.@{checkbox-prefix-cls}-wrapper:hover &:not(&-checked):not(&-disabled):not(&-indeterminate) &-inner,
		&:hover &:not(&-checked):not(&-disabled):not(&-indeterminate) &-inner {
			border-color: @cloud-gray-50;
			// outline: 4px solid @cloud-gray-10;
			box-shadow: 0 0 0 4px @cloud-gray-10;
		}

		&-checked::after {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			line-height: 1;
			color: @checkbox-check-color;
			font-family: 'iconfont';
			font-size: @checkbox-font-size;
			content: '\e764'; // Checkmark Origin
		}

		&:hover::after,
		.@{checkbox-prefix-cls}-wrapper:hover &::after {
			visibility: visible;
		}

		&-inner {
			position: relative;
			top: 0;
			left: 0;
			display: block;
			width: @checkbox-size;
			height: @checkbox-size;
			direction: ltr;
			background-color: @checkbox-check-bg;
			// border: @checkbox-border-width @border-style-base @border-color-base;
			border: @checkbox-border-width @border-style-base @gray-30;
			border-radius: @checkbox-border-radius;
			// Fix IE checked style
			// https://github.com/ant-design/ant-design/issues/12597
			border-collapse: separate;
			transition: all 0.3s;
		}

		&-input {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
			cursor: pointer;
			opacity: 0;
		}
	}

	// 选中状态
	.@{checkbox-prefix-cls}-checked {
		.@{checkbox-inner-prefix-cls} {
			background-color: @checkbox-color;
			border-color: @checkbox-color;
		}
	}

	.@{checkbox-prefix-cls}-disabled {
		cursor: not-allowed;

		.@{checkbox-prefix-cls}-input {
			cursor: not-allowed;
		}

		.@{checkbox-inner-prefix-cls} {
			background-color: @normal-background; // @input-disabled-bg;
			border-color: @checkbox-border-color-disabled !important; // @border-color-base

			&::after {
				border-color: @checkbox-color-disabled; // @input-disabled-bg;
				border-collapse: separate;
			}
		}

		&.@{checkbox-prefix-cls}-checked {
			&::after {
				color: @checkbox-active-color-disabled;
			}

			.@{checkbox-inner-prefix-cls} {
				background-color: @checkbox-background-active-disbaled;
				border-color: @checkbox-background-active-disbaled!important;
			}
		}

		& + span {
			color: @disabled-color;
			cursor: not-allowed;
		}

		// Not show highlight border of checkbox when disabled
		&:hover::after,
		.@{checkbox-prefix-cls}-wrapper:hover &::after {
			visibility: visible;
		}
	}

	.@{checkbox-prefix-cls}-wrapper {
		.reset-component();
		// position: relative;
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		font-size: @checkbox-size;
		line-height: @checkbox-line-height;
		height: @checkbox-line-height;

		&.@{checkbox-prefix-cls}-wrapper-disabled {
			cursor: not-allowed;

			.@{checkbox-prefix-cls} + span {
				color: @disabled-color;
			}
		}

		& + & {
			margin-left: @margin-md;
		}
	}

	.@{checkbox-prefix-cls} + span {
		padding-right: 0;
		padding-left: @padding-xs;
		.typography-paragraph-2();
		margin-bottom: 0;
	}
	.@{checkbox-prefix-cls}-wrapper-sm .@{checkbox-prefix-cls} + span {
		.typography-paragraph-4();
		margin-bottom: 0;
	}

	.@{checkbox-prefix-cls}-group {
		.reset-component();
		display: inline-block;

		&-item {
			margin-right: @checkbox-group-item-margin-right;

			&:last-child {
				margin-right: 0;
			}
		}

		&-item + &-item {
			margin-left: 0;
		}
	}

	// 半选状态
	.@{checkbox-prefix-cls}-indeterminate {
		.@{checkbox-inner-prefix-cls} {
			background-color: @primary-color;
			border-color: @primary-color;
		}
		.@{checkbox-inner-prefix-cls}::after {
			@indeterminate-width: @checkbox-size - 8px;
			@indeterminate-height: 1px;

			position: absolute;
			top: 50%;
			left: 50%;
			width: @indeterminate-width;
			height: @indeterminate-height;
			background-color: @checkbox-check-color;
			border: 0;
			border-radius: @indeterminate-height;
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
			content: ' ';
		}

		&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls} {
			background-color: @checkbox-background-active-disbaled;
			border-color: @checkbox-background-active-disbaled!important;
		}

		&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
			background-color: @checkbox-active-color-disabled; //  @disabled-color
			border-color: @checkbox-active-color-disabled; // @disabled-color;
		}
	}
}

.checkbox-size(@size, @checkbox-size, @checkbox-line-height, @content-font-size) {
	.@{checkbox-prefix-cls}-wrapper-@{size} {
		font-size: @checkbox-size;
		height: @checkbox-line-height;
		line-height: @checkbox-line-height;

		.@{checkbox-prefix-cls} {
			// margin-left: ((@checkbox-line-height - 1em) / 2);
			// margin-right: ((@checkbox-line-height - 1em) / 2);

			&-inner {
				width: @checkbox-size;
				height: @checkbox-size;
			}

			& + span {
				font-size: @content-font-size;
			}
		}
	}
}