Checking Atoms

components/01_Atoms/checkbox/_checkbox.scss

@@ -1,12 +1,16 @@
 .LP-Form{
     .LP-Form__Checkbox{
-            display: none;
+        display: none;
+		
+		&:checked + .LP-Form__CheckBox__CheckMark {
+			background-color: $-light-brown;
+		}
     }   
 
     .LP-Form__CheckBox__CheckMark{
         height: 1em;
         width: 1em;
-        border: 1px solid black;
+        border: 1px solid $-grey;
         padding: 0 calc(.5em + 2px);
         margin-right: .7em;
     }

components/01_Atoms/checkbox/checkbox.hbs

@@ -1,3 +1,7 @@
 <form class="LP-Form">
-    <label for="wurstwasser" class="LP-Form__Label"><span class="LP-Form__CheckBox__CheckMark"></span><input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>Check me</label>
+    <label for="wurstwasser" class="LP-Form__Label">
+		<input id="wurstwasser" type="checkbox" class="LP-Form__Checkbox"/>
+		<span class="LP-Form__CheckBox__CheckMark"></span>
+		Check me
+	</label>
 </form>

components/01_Atoms/input/input.hbs

@@ -4,7 +4,6 @@
     {{#if disabled}}
         disabled="disabled"
     {{/if}}
-    />
     {{#if message}}
     <span class="LP-Input__Message">{{message}}</span>
     {{/if}}

components/01_Atoms/link/_link.scss

@@ -6,8 +6,4 @@
         color: $-grey;
 		text-decoration: underline;
     }
-}
-
-.LP-Link__IconWrapper{
-    display: inline;
-}
+}

components/01_Atoms/link/link.hbs

@@ -1,3 +1 @@
-<p class="LP-Paragraph">
-	<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>
-</p>
+<a href="{{url}}" class="LP-Link"><span class="LP-Link__Text">{{text}}</span></a>

components/01_Atoms/tag/_tag.scss

@@ -3,10 +3,17 @@
     background-color: $-beige;
     border-radius: 2px;
     width: max-content;
-    @include RV-FlexRow__Container;
+    @include RV-Flex;
     height: min-content;
     gap: 3px;
     transition: background .3s;
+	
+	.LP-Link {
+		color: $-grey;
+		&:hover {
+			text-decoration: none;
+		}
+	}
 
     &__Remove {
         .RV-Iconized__Icon {