From 0e6aa4bb02a5323a3eadd92715e03e38e80858cb Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 14 Feb 2026 20:44:13 +0100
Subject: [PATCH] feat: Change specific styles for hr

Instead of repeating the element name to the class the declarations are now depended on the element itself.
---
 elements/_grouping.scss | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/elements/_grouping.scss b/elements/_grouping.scss
index e5aab7c..dba0a55 100644
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@@ -68,6 +68,19 @@ hr {
 	border-style: solid;
 	border-color: config.$color_border_basic;
 
+	&.hidden {
+		border-color: transparent;
+	}
+
+	&.dotted {
+		border-style: dotted;
+	}
+
+	&.double {
+		height: 4px;
+		border-width: config.$width_border_basic 0;
+	}
+
 	&.vertical {
 		display: inline;
 		margin: 0 config.$space_double;
@@ -75,22 +88,6 @@ hr {
 	}
 }
 
-.hr_hidden {
-	@extend hr;
-	border-color: transparent;
-}
-
-.hr_dotted {
-	@extend hr;
-	border-style: dotted;
-}
-
-.hr_double {
-	@extend hr;
-	height: 4px;
-	border-width: config.$width_border_basic 0;
-}
-
 // Preformat
 // -----------------------------------------------------------------------------
 pre {