diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
index 9c1f5b17eca..da4f904b25e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss
@@ -127,6 +127,9 @@
 	position: relative;
 	pointer-events: none;
 	outline: none !important;
+	position: absolute;
+	left: 0;
+	top: 0;
 
 	&::-webkit-slider-runnable-track {
 		@include track;
@@ -223,9 +226,6 @@
 	.wc-block-components-price-slider__range-input {
 		height: 24px;
 		pointer-events: auto;
-		position: absolute;
-		left: 0;
-		top: 0;
 
 		&::-ms-track {
 			/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
@@ -285,3 +285,72 @@
 @supports (-ms-ime-align:auto) {
 	@include ie;
 }
+
+.theme-twentytwentyone {
+	$border-width: 3px;
+
+	.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;
+		margin: -$border-width;
+	}
+
+	.wc-block-price-filter__range-input {
+		background: transparent;
+		margin: -$border-width;
+		width: calc(100% + #{$border-width * 2});
+
+		&:hover,
+		&:focus {
+			&::-webkit-slider-thumb {
+				filter: none;
+			}
+			&::-moz-range-thumb {
+				filter: none;
+			}
+			&::-ms-thumb {
+				filter: none;
+			}
+		}
+
+		&::-webkit-slider-thumb {
+			margin-top: -9px;
+		}
+
+		&.wc-block-components-price-slider__range-input--max::-moz-range-thumb {
+			transform: translate(2px, 1px);
+		}
+
+		&.wc-block-components-price-slider__range-input--min::-moz-range-thumb {
+			transform: translate(-2px, 1px);
+		}
+
+		&::-ms-track {
+			border-color: transparent !important;
+		}
+	}
+
+	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+		.wc-block-components-price-slider__range-input-wrapper {
+			border: 0;
+			height: auto;
+			position: relative;
+			height: 50px;
+		}
+
+		.wc-block-components-price-slider__range-input-progress {
+			display: none;
+		}
+
+		.wc-block-price-filter__range-input {
+			height: 100%;
+			margin: 0;
+			width: 100%;
+		}
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss
deleted file mode 100644
index 8a738d8ef0b..00000000000
--- a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@mixin radio-control-styles {
-	.wc-block-components-radio-control__option {
-		@include reset-typography();
-		@include with-translucent-border(0 0 1px);
-		display: block;
-		padding: $gap-small $gap-small 0 #{$gap-larger * 2};
-	}
-
-	.wc-block-components-radio-control__option-layout {
-		@include with-translucent-border(0 0 1px);
-		display: table;
-		width: 100%;
-		padding-bottom: $gap-small;
-	}
-
-	.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout {
-		&::after {
-			display: none;
-		}
-	}
-
-	.wc-block-components-radio-control__input {
-		left: $gap-large;
-		position: absolute;
-		top: $gap-small;
-	}
-
-	.wc-block-components-radio-control__label-group,
-	.wc-block-components-radio-control__description-group {
-		display: table-row;
-
-		> span {
-			display: table-cell;
-		}
-
-		.wc-block-components-radio-control__secondary-label,
-		.wc-block-components-radio-control__secondary-description {
-			text-align: right;
-			min-width: 50%;
-		}
-	}
-
-	.wc-block-components-radio-control__label,
-	.wc-block-components-radio-control__secondary-label {
-		line-height: 20px;
-		// Currently, max() CSS function calls need to be wrapped with unquote.
-		// See: https://github.com/sass/sass/issues/2378#issuecomment-367490840
-		line-height: unquote("max(1rem, 20px)");
-	}
-
-	.wc-block-components-radio-control__description,
-	.wc-block-components-radio-control__secondary-description {
-		@include font-size(small);
-		line-height: 20px;
-	}
-}
-
-@mixin radio-control-input-styles {
-	// Extra class for specificity.
-	.wc-block-components-radio-control {
-		.wc-block-components-radio-control__input {
-			appearance: none;
-			background: transparent;
-			border: 2px solid currentColor;
-			border-radius: 50%;
-			display: inline-block;
-			height: 1.25rem;
-			min-height: 20px;
-			min-width: 20px;
-			width: 1.25rem;
-
-			&:checked::before {
-				background: currentColor;
-				border-radius: 50%;
-				content: "";
-				display: block;
-				height: 0.625em;
-				left: 50%;
-				margin: 0;
-				min-height: 10px;
-				min-width: 10px;
-				position: absolute;
-				top: 50%;
-				transform: translate(-50%, -50%);
-				width: 0.625em;
-			}
-
-			.has-dark-controls & {
-				border-color: $controls-border-dark;
-
-				&:checked::before {
-					background: $input-text-dark;
-				}
-			}
-		}
-
-		@include breakpoint( ">782px" ) {
-			.wc-block-components-radio-control__input {
-				height: 1rem;
-				margin-top: 2px;
-				min-height: 16px;
-				min-width: 16px;
-				width: 1rem;
-
-				&:checked::before {
-					height: 0.5em;
-					min-height: 8px;
-					min-width: 8px;
-					width: 0.5em;
-				}
-			}
-		}
-	}
-}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss
index 6f920fbf8a2..7bc748a78f6 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/style.scss
@@ -1,4 +1,119 @@
-@import "./mixin";
+.wc-block-components-radio-control__option {
+	@include reset-typography();
+	@include with-translucent-border( 0 0 1px );
+	display: block;
+	padding: $gap-small $gap-small 0 #{$gap-larger * 2};
+}
 
-@include radio-control-styles;
-@include radio-control-input-styles;
+.wc-block-components-radio-control__option-layout {
+	@include with-translucent-border( 0 0 1px );
+	display: table;
+	width: 100%;
+	padding-bottom: $gap-small;
+}
+
+.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout {
+	&::after {
+		display: none;
+	}
+}
+
+.wc-block-components-radio-control__label-group,
+.wc-block-components-radio-control__description-group {
+	display: table-row;
+
+	> span {
+		display: table-cell;
+	}
+
+	.wc-block-components-radio-control__secondary-label,
+	.wc-block-components-radio-control__secondary-description {
+		text-align: right;
+		min-width: 50%;
+	}
+}
+
+.wc-block-components-radio-control__label,
+.wc-block-components-radio-control__secondary-label {
+	line-height: 20px;
+	// Currently, max() CSS function calls need to be wrapped with unquote.
+	// See: https://github.com/sass/sass/issues/2378#issuecomment-367490840
+	line-height: unquote("max(1rem, 20px)");
+}
+
+.wc-block-components-radio-control__description,
+.wc-block-components-radio-control__secondary-description {
+	@include font-size( small );
+	line-height: 20px;
+}
+
+// Extra class for specificity.
+.wc-block-components-radio-control {
+	.wc-block-components-radio-control__input {
+		appearance: none;
+		background: transparent;
+		border: 2px solid currentColor;
+		border-radius: 50%;
+		display: inline-block;
+		height: 1.25rem;
+		left: $gap-large;
+		min-height: 20px;
+		min-width: 20px;
+		position: absolute;
+		top: $gap-small;
+		width: 1.25rem;
+
+		&:checked::before {
+			background: currentColor;
+			border-radius: 50%;
+			content: "";
+			display: block;
+			height: 0.625em;
+			left: 50%;
+			margin: 0;
+			min-height: 10px;
+			min-width: 10px;
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			width: 0.625em;
+		}
+
+		.has-dark-controls & {
+			border-color: $controls-border-dark;
+
+			&:checked::before {
+				background: $input-text-dark;
+			}
+		}
+	}
+
+	@include breakpoint( ">782px" ) {
+		.wc-block-components-radio-control__input {
+			height: 1rem;
+			margin-top: 2px;
+			min-height: 16px;
+			min-width: 16px;
+			width: 1rem;
+
+			&:checked::before {
+				height: 0.5em;
+				min-height: 8px;
+				min-width: 8px;
+				width: 0.5em;
+			}
+		}
+	}
+}
+
+.theme-twentytwentyone {
+	.wc-block-components-radio-control .wc-block-components-radio-control__input {
+		&:checked {
+			border-width: 2px;
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
index f39e3d3fd43..b36d1d99b95 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss
@@ -21,6 +21,7 @@
 
 	.wc-block-active-filters__list {
 		margin: 0 0 $gap-smallest;
+		padding: 0;
 		list-style: none outside;
 		clear: both;