From 3d0ffdf9f684b0d99040f7f9255d77dd3c0c1e3f Mon Sep 17 00:00:00 2001
From: Jason Basuil <basuilj@gmail.com>
Date: Tue, 5 Dec 2023 10:31:54 -0800
Subject: [PATCH] use Sythesized class

---
 src/Dropdown/DropdownItem.module.scss | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/Dropdown/DropdownItem.module.scss b/src/Dropdown/DropdownItem.module.scss
index 246f5dca..5a22df42 100644
--- a/src/Dropdown/DropdownItem.module.scss
+++ b/src/Dropdown/DropdownItem.module.scss
@@ -1,5 +1,28 @@
 @import '../../scss/theme';
 
+.Synthesized {
+  .DropdownItem {
+    @include synth-font-type-30;
+    color: $ux-gray-900;
+  
+    i, svg {
+      &.icon-left {
+        margin-right: $ux-spacing-20;
+      }
+    }
+  
+    &:hover {
+      background-color: $synth-hover-state;
+      text-decoration: none;
+    }
+  
+    &:focus {
+      background-color: $synth-selected-state-green;
+      color: $ux-gray-900;
+    }
+  }
+}
+
 .DropdownItem {
   @include synth-font-type-30;
   color: $ux-gray-900;
@@ -11,12 +34,12 @@
   }
 
   &:hover {
-    background-color: $synth-hover-state;
+    background-color: $ux-blue-100;
     text-decoration: none;
   }
 
   &:focus {
-    background-color: $synth-selected-state-green;
+    background-color: $ux-blue-200;
     color: $ux-gray-900;
   }
 }