Adjust facet style

facets/index.html

@@ -18,6 +18,10 @@
 
     <style>
       /* provide by Blacklight */
+      .sidenav {
+        --bl-facet-remove-color: var(--bs-secondary-color);
+        --bl-facet-remove-hover-color: var(--bs-danger);
+      }
       @media (min-width: 992px) {
         .facets-toggleable-md {
           .facets-collapse {
@@ -41,11 +45,17 @@
         display: table-row;
       }
       .facet-values .remove {
-        color: var(--bs-secondary-color);
+        color: var(--bl-facet-remove-color);
         font-weight: bold;
         padding-left: 0.5rem;
         text-decoration: none;
       }
+
+      .facet-values .remove:hover {
+        color: var(--bl-facet-remove-hover-color);
+        text-decoration: none;
+      }
+
       .facet-values .facet-count {
         display: table-cell;
         vertical-align: top;
@@ -195,9 +205,22 @@ <h2 class="facets-heading">Limit your search</h2>
                     <li>
                       <span class="facet-label"
                         ><span class="selected">book</span
-                        ><a class="remove" rel="nofollow" href="/report"
-                          ><span class="remove-icon" aria-hidden="true">✖</span
-                          ><span class="sr-only visually-hidden"
+                        ><a class="remove" rel="nofollow" href="/report">
+                          <span class="blacklight-icons blacklight-icons-remove"
+                            ><svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="16"
+                              height="16"
+                              fill="currentColor"
+                              class="bi bi-x fs-4"
+                              viewBox="0 0 16 16"
+                            >
+                              <path
+                                d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
+                              ></path>
+                            </svg>
+                          </span>
+                          <span class="sr-only visually-hidden"
                             >[remove]</span
                           ></a
                         ></span

styles/facets.css

@@ -1,55 +1,79 @@
 .facets {
-  background-color: var(--stanford-fog-light);
-  border-radius: 4px;
-  padding-block-end: 4px;
+  padding-block-end: 0.5rem;
 
   .facets-heading {
     font-size: 1.75rem;
-    padding-top: 0.5rem;
-    padding-inline-start: 0.5rem;
+    padding: 0.5rem;
   }
+
   .card {
-    /* --bs-card-border-radius: 0; */
     --bs-border-radius: 0;
     --bs-card-bg: transparent;
     --bs-card-cap-bg: transparent;
+    --bs-card-spacer-y: 0.5rem;
+    --bs-card-spacer-x: 0.5rem;
+
     border-inline: none;
     border-block-end: none;
-
     margin-bottom: 0; /* this is necessary to override Blacklight */
 
     .facet-select {
       color: var(--bs-body-color);
+      display: inline-block;
+      width: 100%;
+    }
+
+    .card-header {
+      --bs-card-border-width: 0;
+
+      .btn {
+        --bs-btn-font-size: 1.125rem;
+      }
+    }
+
+    .facet-values {
+      border-spacing: 0.25rem;
     }
 
     &.facet-limit-active {
-      --bs-card-cap-bg: color-mix(
-        in srgb,
-        var(--stanford-70-black) 10%,
-        transparent
-      );
+      --bs-card-cap-bg: var(--stanford-fog-light);
 
       /* these rules are to override blacklights style of the element, which uses !important */
+
       /* https://github.com/projectblacklight/blacklight/blob/f0b6afec6ec69f0ffe9c1a376164c50e001ce821/app/assets/stylesheets/blacklight/_facets.scss#L114-L115 */
 
       /* .card top border  */
       border-color: var(--bs-card-border-color) !important;
 
       .card-header {
         background-color: var(--bs-card-cap-bg) !important;
+
         .btn {
+          --bs-btn-font-weight: 600;
+
           color: var(--bs-body-color);
         }
       }
 
+      .remove {
+        text-decoration: none;
+
+        .bi {
+          width: 1em;
+          height: 1em;
+        }
+
+        &:hover {
+          color: var(--stanford-digital-red);
+        }
+      }
+
       .selected {
         /* override blacklight 8.3 */
         --bs-success-rgb: var(--bs-body-color);
+
         font-weight: bold;
       }
     }
-    .card-header {
-      --bs-card-border-width: 0;
-    }
   }
 }