From 77ff55353c36ebd55fc033bf38d101749246aa1d Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Tue, 3 Sep 2024 17:54:56 -0700
Subject: [PATCH] Copy selected/focus face picker styles from Impress 2020

---
 app/assets/stylesheets/items/_show.sass | 40 +++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 75745722..b0bd73da 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -165,9 +165,41 @@ body.items-show
     display: block
     position: relative
 
+    species-face-picker-options
+      display: flex
+      flex-wrap: wrap
+
     img
       width: 50px
       height: 50px
+      transition: all 0.2s
+
+      // Calm down the default color, just a smidge! There's a lot of color
+      // on this page already, y'know?
+      opacity: .9
+      filter: saturate(90%)
+
+    label
+      display: flex
+      overflow: hidden
+      transition: all 0.2s
+      position: relative
+      line-height: 1
+
+      // NOTE: The box-shadows here were copy-pasted from Impress 2020, which uses
+      //       Chakra UI's styling system to generate them! (The colors are from their
+      //       color palette, too.)
+      &:has(input:checked)
+        border-radius: 6px
+        z-index: 1
+        background: #9AE6B4
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #2F855A 0 0 2px 2px
+        transform: scale(1.1)
+
+      &:has(input:focus)
+        background: #BEE3F8
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #4299e1 0 0 0 3px
+        transform: scale(1.2)
 
     input[type=radio]
       position: absolute
@@ -177,11 +209,13 @@ body.items-show
       height: 1px
       overflow: hidden
 
-      &:not(:checked) + img
-        opacity: .5
+      &:checked + img
+        opacity: 1
+        filter: saturate(110%)
 
       &:disabled + img
-        filter: grayscale(1)
+        opacity: .6
+        filter: saturate(0%)
 
     label:has(input[type=radio]:disabled)
       cursor: not-allowed