bug in safari 17!

dutchcelt · Jan 10, 2024 · fd31b82 · fd31b82
1 parent ea4799b
commit fd31b82
Showing 1 changed file with 73 additions and 75 deletions.
diff --git a/src/system-forms.css b/src/system-forms.css
@@ -1,91 +1,89 @@
 @layer --system {
-	:root {
-		fieldset {
-			display: flex;
-			flex-direction: column;
-			position: relative;
-			border: 0;
-			padding: 0;
-			margin: 0;
+	fieldset {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		border: 0;
+		padding: 0;
+		margin: 0;
 
-			&:has(legend) {
-				margin-block-start: calc(1ex - 0.5lh);
-				margin-block-end: 1ex;
-				padding-block-start: 0.5lh;
-			}
+		&:has(legend) {
+			margin-block-start: calc(1ex - 0.5lh);
+			margin-block-end: 1ex;
+			padding-block-start: 0.5lh;
 		}
+	}
 
-		form > div:has(button) {
-			margin-block-start: var(--system-spacing-main);
-		}
+	form > div:has(button) {
+		margin-block-start: var(--system-spacing-main);
+	}
 
-		legend {
-			position: relative;
-			inset: 0.5lh 0;
-		}
+	legend {
+		position: relative;
+		inset: 0.5lh 0;
+	}
 
-		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);
+	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-page-inline) * -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(input) {
+			border-color: var(--system-invalid-color);
+		}
+		&:is(fieldset) {
+			outline: 0;
 			&::before {
-				position: absolute;
-				margin-inline-start: max(
-					calc(var(--system-spacing-page-inline) * -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(input) {
-				border-color: var(--system-invalid-color);
+				border-inline-end-width: var(--system-stroke-thick);
 			}
-			&:is(fieldset) {
-				outline: 0;
-				&::before {
-					border-inline-end-width: var(--system-stroke-thick);
-				}
-			}
-			&:is(form) {
-				outline: 0;
-				&::before {
-					border-inline-end-width: var(--system-stroke-thin);
-				}
+		}
+		&:is(form) {
+			outline: 0;
+			&::before {
+				border-inline-end-width: var(--system-stroke-thin);
 			}
 		}
+	}
 
-		fieldset > :is(p, div, fieldset) {
-			display: flex;
-			flex-direction: column;
-			align-items: start;
-			justify-items: start;
-			margin-block: calc((1lh - 1em) / 2);
-			gap: calc((1lh - 1em) / 2);
-			border: 0;
-			padding: 0;
+	fieldset > :is(p, div, fieldset) {
+		display: flex;
+		flex-direction: column;
+		align-items: start;
+		justify-items: start;
+		margin-block: calc((1lh - 1em) / 2);
+		gap: calc((1lh - 1em) / 2);
+		border: 0;
+		padding: 0;
 
-			&:has([type='checkbox'], [type='radio']) {
-				display: grid;
-				grid-template-columns: min-content 1fr;
-				row-gap: calc(1em - 1ex);
-				column-gap: 1ch;
-				padding-block: calc(1em - 1ex);
-				font-family: var(--system-font-family-data);
-				font-size: var(--system-font-size-m);
-				line-height: var(--system-line-height-compact);
-			}
+		&:has([type='checkbox'], [type='radio']) {
+			display: grid;
+			grid-template-columns: min-content 1fr;
+			row-gap: calc(1em - 1ex);
+			column-gap: 1ch;
+			padding-block: calc(1em - 1ex);
+			font-family: var(--system-font-family-data);
+			font-size: var(--system-font-size-m);
+			line-height: var(--system-line-height-compact);
+		}
 
-			&:is(fieldset):has(:user-valid) {
-				& input {
-					accent-color: initial;
-					outline: 0;
-				}
+		&:is(fieldset):has(:user-valid) {
+			& input {
+				accent-color: initial;
+				outline: 0;
 			}
 		}
 	}