From a3dc7f299c9953cf31e8857f60e8da97ac1e3c08 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 26 Sep 2023 15:58:56 -0400
Subject: [PATCH] Minor updates to the toggle component

To better match the current designs on Figma
---
 src/components/Toggle/Toggle.module.css | 50 +++++++++++++------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/Toggle/Toggle.module.css b/src/components/Toggle/Toggle.module.css
index f44fad2f..92b4c8a3 100644
--- a/src/components/Toggle/Toggle.module.css
+++ b/src/components/Toggle/Toggle.module.css
@@ -16,8 +16,8 @@ limitations under the License.
 
 .toggle {
   display: grid;
-  width: 2.75rem;
-  height: 1.5rem;
+  width: 2.25rem;
+  height: 1.25rem;
   box-sizing: border-box;
 }
 
@@ -53,28 +53,6 @@ limitations under the License.
   border-color: var(--cpd-color-bg-action-primary-rest);
 }
 
-@media (hover) {
-  [type="checkbox"]:hover + .toggle-ui {
-    border-color: var(--cpd-color-border-interactive-hovered);
-  }
-}
-
-[type="checkbox"]:active + .toggle-ui {
-  border-color: var(--cpd-color-border-interactive-hovered);
-}
-
-@media (hover) {
-  :checked:hover + .toggle-ui {
-    background: var(--cpd-color-bg-action-primary-hovered);
-    border-color: var(--cpd-color-bg-action-primary-hovered);
-  }
-}
-
-:checked:active + .toggle-ui {
-  background: var(--cpd-color-bg-action-primary-hovered);
-  border-color: var(--cpd-color-bg-action-primary-hovered);
-}
-
 .toggle-ui::after {
   content: "";
   display: block;
@@ -96,6 +74,18 @@ limitations under the License.
   background: var(--cpd-color-icon-on-solid-primary);
 }
 
+@media (hover) {
+  :checked:not([disabled]):hover + .toggle-ui {
+    background: var(--cpd-color-bg-action-primary-hovered);
+    border-color: var(--cpd-color-bg-action-primary-hovered);
+  }
+}
+
+:checked:active + .toggle-ui {
+  background: var(--cpd-color-bg-action-primary-hovered);
+  border-color: var(--cpd-color-bg-action-primary-hovered);
+}
+
 [type="checkbox"][disabled] + .toggle-ui {
   border-color: var(--cpd-color-border-disabled);
   background: var(--cpd-color-bg-canvas-disabled);
@@ -113,3 +103,15 @@ limitations under the License.
 [type="checkbox"][disabled]:checked + .toggle-ui::after {
   background: var(--cpd-color-icon-on-solid-primary);
 }
+
+@media (hover) {
+  [type="checkbox"]:not(:checked, [disabled]):hover + .toggle-ui {
+    border-color: var(--cpd-color-border-interactive-hovered);
+    box-shadow: 0 1.2px 2.4px 0 rgba(0 0 0 / 15%);
+  }
+}
+
+[type="checkbox"]:not(:checked, [disabled]):active + .toggle-ui {
+  border-color: var(--cpd-color-border-interactive-hovered);
+  box-shadow: 0 1.2px 2.4px 0 rgba(0 0 0 / 15%);
+}