@import url(~antd/lib/switch/style/index-pure.less);
@import '../../style/themes/index';

.@{switch-prefix-cls} {
	background-color: @cloud-gray-20;

	&:focus {
		box-shadow: none;
	}

	&:hover,
	&:focus:hover {
		background-color: @gray-30;
		.@{switch-prefix-cls}-handle {
			&::before {
				box-shadow: @shadow-2;
			}
		}
	}

	&-checked {
		background-color: @switch-color;
		&:hover,
		&:focus:hover {
			background-color: @blue-70;
		}
	}

	&&-disabled,
	&&-disabled:hover {
		background-color: @switch-disabled-bg;
		box-shadow: none;

		.@{switch-prefix-cls}-handle::before {
			background-color: @switch-disabled-handle-bg;
			box-shadow: none;
		}
	}

	&&-checked&-disabled,
	&&-checked&-disabled:hover {
		background-color: @switch-checked-disabled-bg;
		box-shadow: none;

		.@{switch-prefix-cls}-handle::before {
			background-color: @switch-checked-disabled-handle-bg;
		}
	}

	&&-disabled {
		opacity: unset;
	}

	// ======================== Loading =========================
	&-loading-icon {
		@switch-loading-icon-size: @switch-pin-size * 0.75;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
		font-size: @switch-loading-icon-size;
	}

	&:not(&-checked) .@{switch-prefix-cls}-loading-icon {
		color: @white;
	}

	// ========================= Handle =========================
	&-handle {
		&::before {
			// border-radius: 100%;
			box-shadow: @shadow-2;
		}
	}

	&&-disabled {
		.@{switch-prefix-cls}-handle {
			&,
			&:hover {
				&::before {
					box-shadow: none;
				}
			}
		}
	}

	// ======================== Loading =========================
	&:not(&-checked) .@{switch-prefix-cls}-loading-icon {
		color: @white;
	}
}

// Line
.@{switch-prefix-cls} {
	&-line {
		background: transparent !important;

		// line element
		&::before {
			content: '';
			position: absolute;
			display: block;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			right: 0;
			transition: background-color @animation-duration-slow @ease-in-out;
			background-color: @cloud-gray-20;
		}

		&:hover,
		&:focus:hover {
			box-shadow: none;
			&::before {
				background-color: @gray-30;
			}
		}
	}

	&-line&-checked {
		&:before {
			background-color: @switch-color;
		}
		&:hover,
		&:focus:hover {
			&::before {
				background-color: @blue-70;
			}
		}
	}

	&-line &-handle {
		top: 0;
		left: 0;

		&::before {
			box-shadow: @shadow-2;
		}
	}

	&-line&-checked &-handle {
		left: calc(100% - (@switch-height + 2 * @switch-padding) + @switch-padding);
	}

	&-line&-disabled {
		&,
		&:hover {
			background-color: transparent !important;
		}

		&::before {
			background-color: @switch-disabled-bg;
		}
	}
	&-line&-checked&-disabled {
		&::before {
			background-color: @switch-checked-disabled-bg;
		}
	}
}

// Square
.@{switch-prefix-cls} {
	&-square {
		border-radius: @border-radius-container;
	}

	&-square &-handle {
		&::before {
			border-radius: calc(@border-radius-container - 1px);
		}
	}
}

.switch-size(@height,@minWidth,@spin-size,@inner-margin-max,@inner-margin-min) {
	@switch-loading-icon-size: @spin-size * 0.75;
	height: @height;
	min-width: @minWidth;
	.@{switch-prefix-cls} {
		&-handle {
			width: @spin-size;
			height: @spin-size;
			&:before {
				border-radius: calc(@height / 2);
			}

			.@{switch-prefix-cls}-loading-icon {
				font-size: @switch-loading-icon-size;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%);
				left: 50%;
			}
		}

		&-inner {
			margin: 0 @inner-margin-min 0 @inner-margin-max;
		}
	}

	&.@{switch-prefix-cls}-checked {
		.@{switch-prefix-cls}-inner {
			margin: 0 @inner-margin-max 0 @inner-margin-min;
		}

		.@{switch-prefix-cls}-handle {
			left: calc(100% - @spin-size - @switch-padding);
		}
	}
}

.switch-line(@spin-size) {
	.@{switch-prefix-cls}-handle {
		width: @spin-size;
		height: @spin-size;
	}
}

// ========================== Size ==========================
.@{switch-prefix-cls} {
	&-large {
		.switch-size(@switch-lg-height, @switch-lg-min-width, @switch-lg-pin-size, @switch-lg-inner-margin-max, @switch-lg-inner-margin-min);
	}
	&-small {
		.switch-size(@switch-sm-height, @switch-sm-min-width, @switch-sm-pin-size, @switch-sm-inner-margin-max, @switch-sm-inner-margin-min);
	}

	&-xs {
		.switch-size(@switch-xs-height, @switch-xs-min-width, @switch-xs-pin-size, @switch-xs-inner-margin-max, @switch-xs-inner-margin-min);
	}

	&-line {
		.switch-size(@switch-height, @switch-min-width, @switch-height, @switch-inner-margin-max, @switch-inner-margin-min);

		&::before {
			height: 6px;
			border-radius: 3px;
		}

		&.@{switch-prefix-cls}-checked {
			.@{switch-prefix-cls}-handle {
				left: calc(100% - @switch-height);
			}
		}
	}

	&-line&-large {
		.switch-size(@switch-lg-height, @switch-lg-min-width, @switch-lg-height, @switch-lg-inner-margin-max, @switch-lg-inner-margin-min);

		&::before {
			height: 8.4px;
			border-radius: calc(8.4px / 2);
		}

		&.@{switch-prefix-cls}-checked {
			.@{switch-prefix-cls}-handle {
				left: calc(100% - @switch-lg-height);
			}
		}
	}

	&-line&-small {
		.switch-size(@switch-sm-height, @switch-sm-min-width, @switch-sm-height, @switch-sm-inner-margin-max, @switch-sm-inner-margin-min);

		&::before {
			height: 3.43px; // 6px * @switch-sm-height / @switch-height
			border-radius: calc(3.43px / 2);
		}

		&.@{switch-prefix-cls}-checked {
			.@{switch-prefix-cls}-handle {
				left: calc(100% - @switch-sm-height);
			}
		}
	}

	&-line&-xs {
		.switch-size(@switch-xs-height, @switch-xs-min-width, @switch-xs-height, @switch-xs-inner-margin-max, @switch-xs-inner-margin-min);

		&::before {
			height: 2.57px;
			border-radius: calc(2.57px / 2);
		}

		&.@{switch-prefix-cls}-checked {
			.@{switch-prefix-cls}-handle {
				left: calc(100% - @switch-xs-height);
			}
		}
	}

	&-square&-small {
		border-radius: 3px;

		.@{switch-prefix-cls}-handle::before {
			border-radius: 2px;
		}
	}

	&-square&-xs {
		border-radius: 2px;

		.@{switch-prefix-cls}-handle::before {
			border-radius: 1px;
		}
	}
	&-square&-large {
		border-radius: 4px;

		.@{switch-prefix-cls}-handle::before {
			border-radius: 3px;
		}
	}
}