/* -------------------------------------------
	No UiSlider
---------------------------------------------- */

@if use(price-slider) {
	
	.widget_price_filter form {
		position: relative;
	}

	.price_slider_wrapper {
		width: 100%;
	}

	.price_slider_amount {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 1.5rem;
		padding-#{$left}: 2px;

		.clear, input {
			display: none;
		}
	}

	.ui-slider-horizontal {
		height: 23px;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 10px;
			bottom: 11px;
			background: $border-color-light;
		}
		.ui-slider-range {
			top: 10px;
			height: 2px;
		}
		.wolmart-slider-price-before,
		.wolmart-slider-price-after {
			position: absolute;
			bottom: 11px;
			transition: width 0.4s;
		}
		.wolmart-slider-price-before {
			left: 0;
		}
		.wolmart-slider-price-after {
			right: 0;
		}
		.wolmart-slider-price-before:before,
		.wolmart-slider-price-before:after,
		.wolmart-slider-price-after:before,
		.wolmart-slider-price-after:after {
			position: absolute;
			content: '';
			bottom: 2px;
			width: 100%;
			height: 100px;
		}
		.wolmart-slider-price-before:before,
		.wolmart-slider-price-after:before {
			backdrop-filter: grayscale(1);
		}
		.wolmart-slider-price-before:after,
		.wolmart-slider-price-after:after {
			opacity: 0.8;
			background-color: #fff;
		}
	}
	.wolmart_price_filter_chart {
		display: none;
		margin: side-values(0 7px 0 9px);
		opacity: 0.75;
	}
	.wolmart_price_filter_chart.show-chart {
		display: block;
		margin-top: 15px;
	}
	.price_slider:not(.ui-slider) + .price_slider_amount {
		padding-top: 30px;
	}
	.ui-slider {
		position: relative;
		margin: side-values(35px 7px 17px 9px);

		.wolmart_price_filter_chart.show-chart + & {
			margin-top: -10px;
			.ui-slider-range:after {
				position: absolute;
				content: "";
				bottom: 0;
				height: 100px;
				width: 100%;
			}
		}
		.ui-slider-range {
			display: block;
			position: absolute;
			z-index: 1;
			font-size: .7em;
			border: 0;
			border-radius: 1em;
			background: var(--wolmart-primary-color, $primary-color);
		}
		.ui-slider-handle {
			position: absolute;
			z-index: 2;
			width: 1.2rem;
			height: 1.2rem;
			background: var(--wolmart-primary-color, $primary-color);
			border-radius: 0.6rem;
			cursor: pointer;
			outline: 0;
			top: 6px;
			margin-#{$left}: -.55rem;
		}
	}
}