ai tags: add buttons for quickly adding and removing tags on the /ai_tags page.

Add "Add" and "Remove" buttons beneath thumbnails on the /ai_tags page.
These let you add the tag to the post if it's correct, or remove it if
it's wrong.

app/javascript/src/styles/base/040_colors.scss

@@ -142,7 +142,9 @@ html, body[data-current-user-theme="light"] {
   --button-primary-background-color: var(--link-color);
   --button-primary-hover-background-color: var(--link-hover-color);
   --button-primary-disabled-color: var(--grey-5);
+
   --button-outline-primary-color: var(--link-color);
+  --button-outline-danger-color: var(--red-5);
 
   --quick-search-form-background: var(--body-background-color);
 
@@ -360,7 +362,9 @@ html, body[data-current-user-theme="light"] {
   --button-primary-background-color: var(--link-color);
   --button-primary-hover-background-color: var(--link-hover-color);
   --button-primary-disabled-color: var(--grey-4);
+
   --button-outline-primary-color: var(--azure-4);
+  --button-outline-danger-color: var(--red-4);
 
   --quick-search-form-background: var(--grey-9);
 

app/javascript/src/styles/common/buttons.scss

@@ -84,6 +84,27 @@ a, button, input[type="submit"] {
     }
   }
 
+  /* An outlined red button. */
+  &.button-outline-danger {
+    @extend %button;
+
+    color: var(--button-outline-danger-color);
+    background-color: transparent;
+    border: 1px solid var(--button-outline-danger-color);
+
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover:not([disabled]) {
+      color: var(--inverse-text-color);
+      background-color: var(--button-outline-danger-color);
+    }
+
+    &[disabled] {
+      color: var(--button-primary-disabled-color);
+      border: 1px solid var(--button-primary-disabled-color);
+    }
+  }
+
   /* A small button. */
   &.button-sm {
     padding: 0.25em 1em;

app/javascript/src/styles/common/utilities.scss

@@ -152,6 +152,8 @@ $spacer: 0.25rem; /* 4px */
 .h-8    { height: 8  * $spacer; }
 .h-10   { height: 10 * $spacer; }
 .h-12   { height: 12 * $spacer; }
+.h-16   { height: 16 * $spacer; }
+.h-full { height: 100%; }
 .h-150px { height: 150px; }
 .h-180px { height: 180px; }
 .h-225px { height: 225px; }
@@ -194,6 +196,10 @@ $spacer: 0.25rem; /* 4px */
 
 .justify-items-center { justify-items: center; }
 .justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+
+.self-start { align-self: flex-start; }
 
 .float-right { float: right; }