@import '@/uni_modules/lime-ui/style/index.scss';
$name: l-slider;
$fill-3: var(--l-fill-3, rgba(0, 0, 0, 0.04));
$brand-color: var(--l-brand-color, #1677ff);
$brand-color-disabled: var(--l-brand-color-disabled, $primary-color-3);
$border-radius-round: var(--l-border-radius-round, 999px);
$shadow-1: var(
  --l-shadow-1,
  0 1px 10px rgba(0, 0, 0, 5%),
  0 4px 5px rgba(0, 0, 0, 8%),
  0 2px 4px -1px rgba(0, 0, 0, 12%)
);


$slider-rail-size: var(--l-slider-rail-size, 4px);
$slider-rail-color: var(--l-slider-rail-color, $fill-3);
$slider-track-color: var(--l-slider-track-color, $brand-color);
$slider-disabled-color: var(--l-slider-disabled-color, $brand-color-disabled);

$slider-dot-size: var(--l-slider-dot-size, 20px);
$slider-dot-color: var(--l-slider-dot-color, white);
$slider-dot-radius: var(--l-slider-dot-radius, 50%);

.#{$name} {
	font-size: 14px;
	&--horizontal {
		&.#{$name}-with-marks {
			padding-bottom: 20px;
		}
		.#{$name} {
			&--default {
				margin: calc(($slider-dot-size - $slider-rail-size) / 2) calc(($slider-dot-size) / 2);
			}
			&__rail,&__track {
				height: $slider-rail-size;
				top: 0;
			}
			&__dot {
				&--left {
					left: 0;
					transform: translate3d(-50%, -50%, 0);
				}
				&--right {
					right: 0;
					transform: translate3d(50%, -50%, 0);
				}
			}
			&__mark {
				&-item {
					position: absolute;
					height: 8px;
					width: 8px;
					border-radius: 50%;
					top: 50%;
					margin-top: -4px;
					z-index: 1;
					background-color: $slider-rail-color;
					transform: translateX(-50%);
				}
				&-active {
					background-color: $slider-track-color;
				}
				&-text {
					position: absolute;
					left: 50%;
					color: #000000e6;
					transform: translate(-50%);
					top: 16px;
				}
			}
		}
		
	}
	&__inner {
		position: relative;
	}
	&__rail {
		background-color: $slider-rail-color;
		border-radius: $border-radius-round;
	}
	&__track {
		position: absolute;
		
		width: 10%;
		border-radius: $border-radius-round;
		background-color: $slider-track-color;
		z-index: 2;
	}
	
	&__dot {
		position: absolute;
		top: 50%;
		// left: 10%;
		// transform: translate3d(-50%,-50%,0);
		width: $slider-dot-size;
		height: $slider-dot-size;
		background-color: $slider-dot-color;
		border-radius: $slider-dot-radius;
		box-shadow: $shadow-1;
	}
	
	&--disabled {
		.#{$name} {
			&__track, &__mark-active {
				background-color: $slider-disabled-color;
			}
		}
	}
}