.widget_price_filter {

	.ui-slider {
		position: relative;
		z-index: 1;
		height: 3px;
		margin-bottom: 30px;
		background-color: var(--form-field-border-initial-color);

		.ui-slider-range {
			position: absolute;
			z-index: 1;
			display: block;
			height: 100%;
			background-color: var(--paletteColor1);
		}

		.ui-slider-handle {
			position: absolute;
			z-index: 2;
			top: calc(50% - 9px);
			width: 18px;
			height: 18px;
			cursor: pointer;
			background: #fff;
			border-radius: 100%;
			box-shadow: inset 0px 0px 0px 18px var(--paletteColor1);
			transition: box-shadow 0.2s ease-in-out,
						transform 0.2s ease-in-out;

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

			&:focus {
				outline: none;
			}

			&:hover,
			&.ui-state-active {
				transform: scale(1.2);
				box-shadow: inset 0px 0px 0px 2.5px var(--paletteColor1);
			}
		}
	}

	.price_slider_amount {
		display: flex;
		align-items: center;

		#min_price, #max_price, .clear {
			display: none;
		}

		.button {
			--buttonMinHeight: 35px;
			--button-padding: 0 20px;
			--buttonFontSize: 14px;
			order: 10;
			margin-inline-start: auto;
		}
	}
}


// new price filter block
.wc-block-price-filter {

	.wc-block-price-filter__range-input-wrapper:before {
		opacity: initial;
		background: var(--form-field-border-initial-color);
	}

	.wc-block-components-price-slider__range-input-progress {
		--range-color: var(--paletteColor1);
	}

	.wc-block-price-filter__range-input {

		// chrome
		&::-webkit-slider-thumb {
			border-color: var(--paletteColor1);
		}

		&:hover::-webkit-slider-thumb,
		&:focus::-webkit-slider-thumb {
			background: #fff;
			border-color: var(--paletteColor1);
		}

		// moz
		&::-moz-range-thumb {
			border-color: var(--paletteColor1);	
		}

		&:hover::-moz-range-thumb,
		&:focus::-moz-range-thumb {
			background: #fff;
			border-color: var(--paletteColor1);
		}
	}

	.wc-block-form-text-input {
		font-size: 13px;
		text-align: center;
		max-width: 70px !important;
		border-radius: var(--has-classic-forms, var(--form-field-border-radius, 3px)) !important;
		border: var(--form-field-border-width, 1px) solid var(--form-field-border-initial-color) !important;

		&:focus {
			border-color: var(--form-field-border-focus-color) !important;
		}
	}
}