From 696e147c790b7ddfc2c21616bda8c7ef3945e973 Mon Sep 17 00:00:00 2001
From: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:39:13 +0200
Subject: [PATCH 1/4] Fix UI misalignment of Filter by Price in TT1 theme

---
 assets/js/base/components/price-slider/style.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 714d23c9fa6..651158026a8 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -331,7 +331,6 @@
 	}
 	.wc-block-components-price-slider__range-input-progress {
 		--range-color: currentColor;
-		margin: -$border-width;
 	}
 	.wc-block-price-filter__range-input {
 		background: transparent;
@@ -350,7 +349,10 @@
 			}
 		}
 		&::-webkit-slider-thumb {
-			margin-top: -9px;
+			margin-top: -6px;
+			// These values have to be repeated to increase the specificity of the theme styles
+			width: 12px;
+			height: 12px;
 		}
 		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
 			transform: translate(2px, 1px);

From a445e16f02bc14ae1cec46256fa28f08b97af390 Mon Sep 17 00:00:00 2001
From: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri, 25 Aug 2023 15:04:40 +0200
Subject: [PATCH 2/4] Fix frontend Firefox styles

---
 assets/js/base/components/price-slider/style.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 651158026a8..02267ca4f13 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -350,15 +350,18 @@
 		}
 		&::-webkit-slider-thumb {
 			margin-top: -6px;
-			// These values have to be repeated to increase the specificity of the theme styles
 			width: 12px;
 			height: 12px;
 		}
 		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
-			transform: translate(2px, 1px);
+			transform: translate(2px, 2px);
+			width: 12px;
+			height: 12px;
 		}
 		&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
-			transform: translate(-2px, 1px);
+			transform: translate(-2px, 2px);
+			width: 12px;
+			height: 12px;
 		}
 		&::-ms-track {
 			border-color: transparent !important;

From 1851bf0886e44536e0c348b3c2dd39682666c51b Mon Sep 17 00:00:00 2001
From: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri, 25 Aug 2023 15:29:25 +0200
Subject: [PATCH 3/4] Simplify the styles and fix them in Editor
 (Firefox/Safari)

---
 assets/js/base/components/price-slider/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 02267ca4f13..9c38d5ebf61 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -327,14 +327,13 @@
 	.wc-block-components-price-slider__range-input-wrapper {
 		background: transparent;
 		border: $border-width solid currentColor;
-		box-sizing: border-box;
 	}
 	.wc-block-components-price-slider__range-input-progress {
 		--range-color: currentColor;
 	}
 	.wc-block-price-filter__range-input {
 		background: transparent;
-		margin: -$border-width;
+		height: 0;
 		width: calc(100% + #{$border-width * 2});
 		&:hover,
 		&:focus {

From 87fef4800dd22f816946a7f882ee43b36d4bb433 Mon Sep 17 00:00:00 2001
From: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Fri, 25 Aug 2023 15:48:41 +0200
Subject: [PATCH 4/4] Align the background color and sizing in Firefox

---
 assets/js/base/components/price-slider/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 9c38d5ebf61..feb3a2e8514 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -327,6 +327,7 @@
 	.wc-block-components-price-slider__range-input-wrapper {
 		background: transparent;
 		border: $border-width solid currentColor;
+		box-sizing: border-box;
 	}
 	.wc-block-components-price-slider__range-input-progress {
 		--range-color: currentColor;
@@ -348,19 +349,24 @@
 			}
 		}
 		&::-webkit-slider-thumb {
+			background: $white;
 			margin-top: -6px;
 			width: 12px;
 			height: 12px;
 		}
 		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
+			background: $white;
 			transform: translate(2px, 2px);
 			width: 12px;
 			height: 12px;
+			box-sizing: content-box;
 		}
 		&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
+			background: $white;
 			transform: translate(-2px, 2px);
 			width: 12px;
 			height: 12px;
+			box-sizing: content-box;
 		}
 		&::-ms-track {
 			border-color: transparent !important;