@import '@/uni_modules/lime-style/index.scss';
$slider: l-slider;
// $primary-color-disabled: create-var(primary-color-disabled, $primary-color-3);

$slider-rail-size: create-var(slider-rail-size, 20px);
$slider-rail-color: create-var(slider-rail-color, $fill-2);
$slider-rail-radius: create-var(slider-rail-color, 99px);
$slider-track-color: create-var(slider-track-color, $primary-color);
// $slider-disabled-color: create-var(slider-disabled-color, $primary-color-disabled);

$slider-thumb-size: create-var(slider-thumb-size, 12px);
$slider-thumb-color: create-var(slider-thumb-color, white);
$slider-thumb-radius: create-var(slider-thumb-radius, 99px);
$slider-thumb-border-color: create-var(slider-thumb-border-color, $gray-1);

.#{$slider} {
	/* #ifndef UNI-APP-X */
	display: flex;
	flex-direction: column;
	/* #endif */
	position: relative;
	overflow: visible;
	justify-content: center;
	// min-height: 100px;
	// background-color: aquamarine;
	&--disabled {
		opacity: 0.6;
	}
	&--vertical {
		height: 100%;
		/* #ifndef UNI-APP-X */
		display: inline-flex;
		/* #endif */
	}
	&__rail {
		position: relative;
		background-color: $slider-rail-color;
		border-radius: $slider-rail-radius;
		&--horizontal {
			height: $slider-rail-size;
		}
		&--vertical {
			width: $slider-rail-size;
			height: 100%;
		}
	}
	&__track {
		position: absolute;
		left: 0%;
		transition-duration: 100ms;
		transition-property: opacity;
		background-color: $slider-track-color;
		overflow: visible;
		border-radius: $slider-rail-radius;
		
		&--horizontal {
			width: 0%;
			height: 100%;
		}
		&--vertical {
			width: 100%;
			height: 0%;
		}
	}
	// &__thumbs {
	// 	position: absolute;
	// 	height: 100%;
	// 	overflow: visible;
	// 	left: calc($slider-rail-size / 2);
	// 	right: calc($slider-rail-size / 2);
	// 	pointer-events: none;
	// }
	&__thumb-wrapper {
		position: absolute;
		overflow: visible;
		transform: translate(-50%, -50%);
		&--horizontal {
			top: 50%;
			left: 0%;
		}
		&--vertical {
			top: 0%;
			left: 50%;
		}
	}
	&__thumb {
		width: $slider-thumb-size;
		height: $slider-thumb-size;
		background-color: $slider-thumb-color;
		border-radius: $slider-thumb-radius;
		border-style: solid;
		border-color: $slider-thumb-border-color;
		border-width: 1px;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);//0 1px 10px rgba(0, 0, 0, 0.05);
		// box-shadow: $shadow-1;
	}
}