Supercharged tags input

assets/styles/configuration.scss

@@ -6,6 +6,8 @@
 
 /* stylelint-disable custom-property-pattern */
 
+@use "sass:color";
+
 /*
   Here we are getting some Peertube variables (see _variables.scss in Peertube source code):
   We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings.
@@ -211,6 +213,9 @@ $small-view: 800px;
 }
 
 livechat-dynamic-table-form {
+  // We need this variable to be known at that time
+  $bs-green: #39cc0b;
+
   table {
     table-layout: fixed;
     text-align: center;
@@ -242,6 +247,30 @@ livechat-dynamic-table-form {
 
   .dynamic-table-add-row {
     background-color: var(--bs-green);
+
+    &,
+    &:active,
+    &:focus {
+      color: #fff;
+      background-color: color.adjust($bs-green, $lightness: 5%);
+    }
+
+    &:focus,
+    &.focus-visible {
+      box-shadow: 0 0 0 0.2rem color.adjust($bs-green, $lightness: 20%);
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: color.adjust($bs-green, $lightness: 10%);
+    }
+
+    &[disabled],
+    &.disabled {
+      cursor: default;
+      color: #fff;
+      background-color: var(--inputBorderColor);
+    }
   }
 
   .dynamic-table-remove-row {
@@ -261,7 +290,7 @@ livechat-tags-input {
   input {
     flex: 1;
     border: none;
-    padding: var(--tag-padding-vertical) 0 0;
+    padding: 0;
     color: inherit;
     background-color: inherit;
     width: 100%;
@@ -271,16 +300,38 @@ livechat-tags-input {
     }
   }
 
-  #tags {
+  #tags,
+  #tags-searched {
     display: flex;
     flex-wrap: wrap;
     padding: 0;
-    margin: var(--tag-padding-vertical) 0 0;
+    margin: var(--tag-padding-vertical) 0;
     max-height: 150px;
     overflow-y: scroll;
+    border-bottom: 1px dashed var(--greyForegroundColor);
+    transition: 0.3s height;
+
+    &.empty {
+      visibility: hidden;
+    }
   }
 
-  .tag {
+  #tags-searched {
+    &::after {
+      content: "\1F50D";
+      flex-grow: 1;
+      text-align: right;
+    }
+
+    &.empty {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .tag,
+  .tag-searched {
     width: auto;
     height: 24px;
     display: flex;
@@ -292,18 +343,44 @@ livechat-tags-input {
     list-style: none;
     border-radius: 3px;
     margin: 0 3px 3px 0;
-    background: var(--bs-orange);
+    transition: 0.3s filter;
+
+    .tag-close {
+      display: block;
+      width: 12px;
+      height: 12px;
+      line-height: 12px;
+      text-align: center;
+      font-size: 10px;
+      margin-left: var(--tag-padding-horizontal);
+      color: var(--mainColor);
+      border-radius: 50%;
+      background: #fff;
+      cursor: pointer;
+
+      &::before {
+        content: "\2715";
+      }
+    }
 
     &,
     &:active,
     &:focus {
       color: #fff;
       background-color: var(--mainColor);
+
+      .tag-close {
+        color: var(--mainColor);
+      }
     }
 
     &:hover {
       color: #fff;
       background-color: var(--mainHoverColor);
+
+      .tag-close {
+        color: var(--mainHoverColor);
+      }
     }
 
     &[disabled],
@@ -311,24 +388,18 @@ livechat-tags-input {
       cursor: default;
       color: #fff;
       background-color: var(--inputBorderColor);
+
+      .tag-close {
+        color: var(--inputBorderColor);
+      }
     }
 
     .tag-name {
       margin-top: 3px;
     }
+  }
 
-    .tag-close {
-      display: block;
-      width: 12px;
-      height: 12px;
-      line-height: 10px;
-      text-align: center;
-      font-size: 14px;
-      margin-left: var(--tag-padding-horizontal);
-      color: var(--bs-orange);
-      border-radius: 50%;
-      background: #fff;
-      cursor: pointer;
-    }
+  #tags.unfocused .tag {
+    filter: opacity(50%) grayscale(80%);
   }
 }