Workflow previews

app/assets/stylesheets/card-columns.css

@@ -133,7 +133,6 @@
 
     .cards__filter {
       --filter-block-padding: 0.5rem;
-      --hover-size: 0;
 
       background-color: var(--color-canvas);
       border-radius: 99rem;

app/assets/stylesheets/workflows.css

@@ -28,16 +28,24 @@
     }
   }
 
+  /* Workflow settings
+  /* ------------------------------------------------------------------------ */
+
   .workflow-preview {
     --border-size: 0.2em;
 
     aspect-ratio: 1;
+    border: 0.2em solid var(--color-ink-lighter);
     flex: 1 1 30%;
     max-inline-size: 30%;
 
-    button {
-      --hover-size: 0;
+    @media (any-hover: hover) {
+      &:hover:not(.workflow-preview--selected) {
+        border-color: var(--color-ink-light);
+      }
+    }
 
+    button {
       appearance: none;
       aspect-ratio: 1;
       background: transparent;
@@ -58,7 +66,7 @@
   }
 
   .workflow-preview--selected {
-    --border-color: var(--color-link);
+    border-color: var(--color-link);
   }
 
   .workflow-preview__swatch {

app/views/collections/edit/_workflows.html.erb

@@ -2,7 +2,7 @@
 <div class="flex justify-center margin-block-end">Use a Workflow to track progress in this Collection.</div>
 <div class="flex flex-wrap gap justify-center">
   <% Workflow.all.each do |workflow| %>
-    <div class="workflow-preview txt-align-start border border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
+    <div class="workflow-preview txt-align-start border-radius <%= 'workflow-preview--selected' if workflow == collection.workflow %>">
       <%= button_to collection_workflow_path(collection), method: :patch do %>
         <%= hidden_field_tag "collection[workflow_id]", workflow.id %>
         <strong class="txt-small overflow-ellipsis flex-item-no-shrink"><%= workflow.name %></strong>