refactor: input counter styles

Author: mfranzke

source/_patterns/01-elements/_form-elements.scss

@@ -115,12 +115,22 @@
 %form-element-counter {
 	&:has(+ .description) {
 		float: right;
+
+		@supports (inset-area: block-end span-inline-start) {
+			&:not(:has(+ .description)) {
+				position: absolute;
+				// stylelint-disable-next-line property-no-unknown
+				inset-area: block-end span-inline-start;
+			}
+		}
 	}
 
-	&:not(:has(+ .description)) {
-		position: absolute;
-		// stylelint-disable-next-line property-no-unknown
-		inset-area: block-end span-inline-start;
+	@supports (inset-area: block-end span-inline-start) {
+		&:not(:has(+ .description)) {
+			position: absolute;
+			// stylelint-disable-next-line property-no-unknown
+			inset-area: block-end span-inline-start;
+		}
 	}
 
 	// Description styles

source/_patterns/01-elements/input/input.scss

@@ -146,19 +146,19 @@
 		@extend %form-element-validation;
 		@extend %form-element-validation-programmatic;
 		/* stylelint-enable order/order */
+	}
 
-		&:is(
-				[type="email"],
-				[type="password"],
-				[type="search"],
-				[type="tel"],
-				[type="text"],
-				[type="url"]
-			)
-			+ label
-			+ output {
-			@extend %form-element-counter;
-		}
+	&:is(
+			[type="email"],
+			[type="password"],
+			[type="search"],
+			[type="tel"],
+			[type="text"],
+			[type="url"]
+		)
+		+ label
+		+ output {
+		@extend %form-element-counter;
 	}
 
 	&[type="search"] {

source/_patterns/01-elements/textarea/textarea.scss

@@ -63,8 +63,6 @@
 
 	& + output {
 		@extend %form-element-counter;
-
-		float: right;
 	}
 
 	// ### Style variations