CSS for tags *ough*

components/01_Atoms/button/_button.scss

@@ -1,4 +1,4 @@
-.LP-Button{
+.LP-Button {
     background-color: $-light-brown;
     color: $-grey;
     border: none;
@@ -6,16 +6,18 @@
     border-radius: 2px;
     font-weight: bold;
     cursor: pointer;
+    white-space: nowrap;
 
-    &:active{
+    &:active {
         background-color: $-wine-red;
-        color:$-almost-white;
+        color: $-almost-white;
     }
 
-    &--cancel{
+    &--cancel {
         background-color: $-grey;
         color: $-almost-white;
-        &:active{
+
+        &:active {
             color: $-grey;
             background-color: $-almost-white;
         }

components/01_Atoms/input/_input.scss

@@ -1,26 +1,45 @@
-.LP-Input{
+.LP-Input {
     $-margin-bottom: 30px;
     display: flex;
     flex-direction: column;
     margin-bottom: -$-margin-bottom;
     padding: 10px 0;
 
-    .LP-Input__Field{
+    &--tagging {
+
+        .LP-Button {
+            height: 53px;
+        }
+
+        .LP-Input__Field {
+            min-height: 36px;
+            height: max-content;
+            font-family: $-primary-sans-serif-font;
+            font-size: 1em;
+            padding: 0;
+            padding-left: 8px;
+        }
+    }
+
+    .LP-Input__Field {
         border: none;
         border-bottom: 1px solid $-grey;
-		padding: 8px 0;
-		margin-bottom: $-margin-bottom;
-		width: 100%;
+        padding: 8px 0;
+        margin-bottom: $-margin-bottom;
+        width: 100%;
 
-        &:focus, &:active, &:invalid{
+        &:focus,
+        &:active,
+        &:invalid,
+        &--active {
             margin-bottom: $-margin-bottom - 1px;
             border-bottom: 2px solid $-wine-red;
             background-color: $-almost-white;
             border-radius: 3px 3px 0 0;
             box-shadow: none;
         }
-        
-        &[type=submit]{
+
+        &[type=submit] {
             background-color: $-light-brown;
             color: $-grey;
             border: none;
@@ -29,64 +48,67 @@
             font-weight: bold;
             cursor: pointer;
 
-            &:active{
+            &:active {
                 background-color: $-wine-red;
-                color:$-almost-white;
+                color: $-almost-white;
             }
 
         }
     }
 
-    .LP-Input__Label{
+    .LP-Input__Label {
         font-family: $-primary-sans-serif-font;
-		font-size: 16px;
-		white-space: wrap;
-		overflow: hidden;
+        font-size: 16px;
+        white-space: wrap;
+        overflow: hidden;
     }
 
-    .LP-Input__Message{
+    .LP-Input__Message {
         font-family: $-primary-sans-serif-font;
         font-style: italic;
         font-size: 13px;
         padding: 3px;
         position: relative;
-		top: -$-margin-bottom;
-		overflow: hidden;
+        top: -$-margin-bottom;
+        overflow: hidden;
     }
 
-    &--error{
-        .LP-Input__Field{
+    &--error {
+        .LP-Input__Field {
             margin-bottom: 25px;
             border-bottom: 2px solid $-wine-red;
             margin-bottom: $-margin-bottom - 1px;
         }
 
-        .LP-Input__Message{
+        .LP-Input__Message {
             color: $-wine-red;
         }
     }
-    
-    &--disabled{
-        .LP-Input__Field, .LP-Input__Field:disabled{
+
+    &--disabled {
+
+        .LP-Input__Field,
+        .LP-Input__Field:disabled {
             background-color: transparent;
             border-bottom: 1px dashed $-grey;
             cursor: not-allowed;
-            
-            label + &{
+
+            label+& {
                 color: red;
             }
 
-            &:focus, &:active{
+            &:focus,
+            &:active {
                 margin-bottom: $-margin-bottom;
                 border-radius: 0;
             }
 
-            ~.LP-Input__Message{
+            ~.LP-Input__Message {
                 visibility: hidden;
-            }               
+            }
         }
 
-        .LP-Input__Label{
+        .LP-Input__Label {
             color: $-grey;
         }
     }

components/01_Atoms/tag/_tag.scss

@@ -1,10 +1,14 @@
-.LP-Tag{
+.LP-Tag {
     padding: 8px 14px;
-    background-color: #D7CEC7;
+    background-color: $-beige;
     border-radius: 2px;
     width: max-content;
 
-    .LP-Paragraph{
+    &:hover {
+        background-color: #bdbdbd;
+    }
+
+    .LP-Paragraph {
         padding: 0;
         margin: 0;
         font-family: $-primary-sans-serif-font;