Delete button for tags

components/01_Atoms/tag/_tag.scss

@@ -3,6 +3,19 @@
     background-color: $-beige;
     border-radius: 2px;
     width: max-content;
+    @include RV-FlexRow__Container;
+    height: min-content;
+    gap: 3px;
+
+    &__Remove {
+        .RV-Iconized__Icon {
+            fill: $-wine-red;
+
+            &:hover {
+                fill: $-grey;
+            }
+        }
+    }
 
     &:hover {
         background-color: #bdbdbd;

components/01_Atoms/tag/tag.hbs

@@ -1,3 +1,13 @@
 <div class="LP-Tag">
-    {{> @paragraph text=text}}
+    {{> @link text=text url="#"}}
+    <a href="#" class="LP-Link">
+        <span class="LP-Tag__Remove RV-Iconized__Container RV-Iconized__Container--extraSmall">
+            <svg class="RV-Iconized__Icon" height="24" viewBox="0 0 24 24" width="24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z">
+                </path>
+            </svg>
+        </span>
+    </a>
 </div>

components/_tagify.scss

@@ -43,12 +43,13 @@
     position: relative;
     white-space: pre-wrap;
     margin-left: 15px;
+    height: 1em;
 }
 
 .tagify__tag__removeBtn {
     order: 5;
     cursor: pointer;
-    font: 1em/1 Arial;
+    font: 1.5em/1 Arial;
     transition: .2s ease-out;
     color: $-wine-red;
 }

public/main.css

@@ -692,7 +692,21 @@ body {
   padding: 8px 14px;
   background-color: #D7CEC7;
   border-radius: 2px;
-  width: max-content; }
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  height: min-content;
+  gap: 3px; }
+  .LP-Tag--multiRow {
+    flex-wrap: wrap; }
+  .LP-Tag--column {
+    display: flex;
+    flex-direction: column; }
+  .LP-Tag__Remove .RV-Iconized__Icon {
+    fill: #76323F; }
+    .LP-Tag__Remove .RV-Iconized__Icon:hover {
+      fill: #565656; }
   .LP-Tag:hover, .tagify__tag:hover {
     background-color: #bdbdbd; }
   .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph {
@@ -1472,12 +1486,13 @@ body {
   line-height: inherit;
   position: relative;
   white-space: pre-wrap;
-  margin-left: 15px; }
+  margin-left: 15px;
+  height: 1em; }
 
 .tagify__tag__removeBtn {
   order: 5;
   cursor: pointer;
-  font: 1em/1 Arial;
+  font: 1.5em/1 Arial;
   transition: .2s ease-out;
   color: #76323F; }