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

.@{slider-prefix-cls} {
	&:not(&-disabled):hover &-track,
	&:not(&-disabled) &-track {
		background: @gradient-primary-2;
	}

	&:not(&-disabled) &-handle {
		border: 0px;
		background: @range-handle-color;

		&:hover {
			transform: translateX(-50%) scale(1.2, 1.2) !important;
		}

		&:focus {
			background: @range-handle-color;
			box-shadow: none;
			transform: translateX(-50%) scale(1.2, 1.2) !important;
		}
	}

	// Hide the dot for v3.0 design.
	&-dot {
		display: none;
		width: 2px;
		height: 10px;
		border-radius: 2px;
		border: 0px;
		background-color: @range-rail-bg-color;
		top: -3px;
		margin-left: -1px;

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

		&:last-child {
			margin-left: -2px;
		}
	}

	&-dot-active {
		background: @gradient-primary-2;
	}

	&-mark {
		top: -13px;
	}

	&-mark-text {
		font-size: 12px;
		line-height: 12px;
		transform: translateX(-50%) scale(calc(8 / 12)) !important;
		color: @range-disabled-bg-color;
	}

	&-mark-text-active {
		color: @range-marks-text-color;
	}

	//彩色样式
	.make-color-classes(@i: length(@bdesign-preset-colors)) when (@i > 0) {
		.make-color-classes(@i - 1);
		@color: extract(@bdesign-preset-colors, @i);
		@lightColor: '@{color}-40';
		@darkColor: '@{color}-60';

		&&-@{color}:hover &-track,
		&&-@{color} &-track {
			background: linear-gradient(90deg, @@lightColor, @@darkColor);
		}

		&&-@{color}:not(&-disabled) &-handle {
			background: linear-gradient(90deg, @@darkColor, @@lightColor);

			&:focus {
				background: linear-gradient(90deg, @@darkColor, @@lightColor);
			}
		}

		&&-@{color}:not(&-disabled) &-dot-active {
			background: linear-gradient(90deg, @@lightColor, @@darkColor);
		}
	}

	.make-color-classes();

	.make-status-classes(@name,@lightColor,@darkColor) {
		&&-@{name}:hover &-track,
		&&-@{name} &-track {
			background: linear-gradient(90deg, @lightColor, @darkColor);
		}

		&&-@{name}:not(&-disabled) &-handle {
			background: linear-gradient(90deg, @darkColor, @lightColor);

			&:focus {
				background: linear-gradient(90deg, @darkColor, @lightColor);
			}
		}

		&&-@{name}:not(&-disabled) &-dot-active {
			background: linear-gradient(90deg, @lightColor, @darkColor);
		}
	}

	.make-status-classes(error,@danger-color-hover,@danger-color);
	.make-status-classes(success,@success-color-hover,@success-color);
	.make-status-classes(warning,@warning2-color-hover,@warning2-color);

	//disabled 样式
	&-disabled &-rail {
		background: @gray-05 !important;
	}

	&-disabled &-track {
		background: @disabled-color;
	}

	&-disabled &-handle {
		border: 0px;
		background: @disabled-color;
	}

	&-disabled &-dot {
		background: @gray-05;
	}

	&-disabled &-dot-active {
		background: @gray-05;
	}

	&-disabled &-mark-text {
		color: @range-disabled-bg-color;
	}

	// 不同size
	&-sm {
		height: 10px;
	}

	&-sm &-rail,
	&-sm &-track,
	&-sm &-step {
		height: 2px;
	}

	&-sm &-handle {
		width: @slider-handle-size-sm;
		height: @slider-handle-size-sm;
		margin-top: -3px;
	}
	&-sm &-dot {
		top: -4px;
	}

	&-lg &-rail,
	&-lg &-track,
	&-lg &-step {
		height: 6px;
	}

	&-lg &-handle {
		width: 16px;
		height: @layout-height-1;
		margin-top: -5px;
	}

	&-lg &-dot {
		top: -2px;
	}

	// 竖直样式
	&-vertical {
		&.@{slider-prefix-cls}:not(&-disabled) {
			.@{slider-prefix-cls}-handle {
				margin-left: -4px;

				&:hover {
					transform-origin: 50% 50%;
					transform: translateY(50%) scale(1.2, 1.2) !important;
				}
			}
		}
	}
}

// Square shape
.@{slider-prefix-cls} {
	&-square &-handle {
		border-radius: @border-radius-base;
	}
}