From 33b73b82d737757644e72bd8e4a52de08c2ec61b Mon Sep 17 00:00:00 2001
From: dutchcelt <studio@dutchcelt.com>
Date: Sat, 6 Jan 2024 15:57:43 +0100
Subject: [PATCH] pseudo-element instead of masked box-shadow

---
 src/system-selectors.css | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/system-selectors.css b/src/system-selectors.css
index 461d442..a01a0a1 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -349,17 +349,34 @@
 	fieldset:has(:user-invalid),
 	form:has(:user-invalid),
 	form :user-invalid:not(:focus-visible) {
+		position: relative;
 		outline: var(--system-stroke-thin) solid var(--system-invalid-color);
+		&::before{
+			position: absolute;
+			margin-inline-start: max(calc(var(--system-spacing-layout) * -1), calc(var(--system-spacing-double) * -1));
+			content: '';
+			width: 0px;
+			height: 100%;
+			display: block;
+			border-inline-end-width: 0;
+			border-inline-end-style: solid;
+			border-inline-end-color: var(--system-invalid-color);
+		}
 
 		&:is(fieldset) {
 			outline: 0;
-			box-shadow: -15px 0 0 var(--system-canvas), -18px 0 0 var(--system-invalid-color);
+			&::before{
+				border-inline-end-width: var(--system-stroke-thick);
+			}
+
 		}
 
 		&:is(form) {
 			outline: 0;
-			box-shadow: -16px 0 0 var(--system-canvas),
-			-17px 0 0 color-mix(in oklab, var(--system-invalid-color) 50%, var(--system-canvas));
+			&::before{
+				border-inline-end-width: var(--system-stroke-thin);
+			}
+
 		}
 	}