diff --git a/src/components/Dropdown/Item.tsx b/src/components/Dropdown/Item.tsx
index d94ba2084..1044f1875 100644
--- a/src/components/Dropdown/Item.tsx
+++ b/src/components/Dropdown/Item.tsx
@@ -33,7 +33,7 @@ const SecondaryDropdownItem = styled(RsuiteDropdown.Item as any)<{
   padding: 4px;
   width: 30px;
   height: 30px;
-  :hover {
+  &:hover {
     background-color: ${p => p.theme.color.cultured};
     border: 1px solid ${p => p.theme.color.lightGray};
     color: ${p => p.theme.color.blueYonder};
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index b522bab75..c629d324c 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -74,19 +74,19 @@ const PrimaryDropdown = styled(RsuiteDropdown as any)<{
     font-size: 13px;
     padding: 3px ${p => (p.$hasTitle ? 12 : 6)}px ${p => (p.$hasIcon ? '4px' : '5px')};
 
-    :hover {
+    &:hover {
       background-color: ${p => p.theme.color.blueYonder};
       border: 1px solid ${p => p.theme.color.blueYonder};
       color: ${p => p.theme.color.white};
     }
 
-    :active {
+    &:active {
       background-color: ${p => p.theme.color.blueGray};
       border: 1px solid ${p => p.theme.color.blueGray};
       color: ${p => p.theme.color.white};
     }
 
-    :disabled {
+    &:disabled {
       background-color: ${p => p.theme.color.lightGray};
       border: 1px solid ${p => p.theme.color.lightGray};
       color: ${p => p.theme.color.cultured};
diff --git a/src/components/SideMenu/Button.tsx b/src/components/SideMenu/Button.tsx
index 8ea284b73..ee03f4921 100644
--- a/src/components/SideMenu/Button.tsx
+++ b/src/components/SideMenu/Button.tsx
@@ -20,24 +20,23 @@ const MenuButton = styled(IconButton as any)<{
 }>`
   animation: none;
   background: ${p => (p.$isActive ? p.theme.color.blueGray : 'none')};
-  border: 0;
+  border: none;
   border-bottom: solid 0.5px ${p => p.theme.color.slateGray};
   color: ${p => (p.$isActive ? p.theme.color.white : p.theme.color.gainsboro)};
   padding: 18px;
   height: 64px;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.$isActive ? p.theme.color.blueGray : 'rgba(255, 255, 255, 0.125)')};
-    border: 0;
     border: none;
     color: ${p => p.theme.color.white};
   }
 
-  :first-child {
+  &:first-child {
     border-top: solid 0.5px ${p => p.theme.color.slateGray};
 
-    :hover {
+    &:hover {
       border: none;
     }
   }
diff --git a/src/elements/SingleTag.tsx b/src/elements/SingleTag.tsx
index 0e1a88948..b9185edc2 100644
--- a/src/elements/SingleTag.tsx
+++ b/src/elements/SingleTag.tsx
@@ -77,21 +77,21 @@ const PrimaryIconButton = styled(BaseIconButton)`
   border-color: ${p => p.theme.color.lightGray};
   color: ${p => p.theme.color.charcoal};
 
-  :hover,
+  &:hover,
   &._hover {
     background-color: ${p => p.theme.color.lightGray};
     border-color: ${p => p.theme.color.lightGray};
     color: ${p => p.theme.color.blueYonder};
   }
 
-  :active,
+  &:active,
   &._active {
     background-color: ${p => p.theme.color.lightGray};
     border-color: ${p => p.theme.color.lightGray};
     color: ${p => p.theme.color.blueGray};
   }
 
-  :disabled,
+  &:disabled,
   &._disabled {
     background-color: ${p => p.theme.color.lightGray};
     border-color: ${p => p.theme.color.lightGray};
@@ -109,21 +109,21 @@ const SecondaryIconButton = styled(BaseIconButton)`
   border-color: ${p => p.theme.color.blueYonder};
   color: ${p => p.theme.color.white};
 
-  :hover,
+  &:hover,
   &._hover {
     background-color: ${p => p.theme.color.blueYonder};
     border-color: ${p => p.theme.color.blueYonder};
     color: ${p => p.theme.color.blueYonder25};
   }
 
-  :active,
+  &:active,
   &._active {
     background-color: ${p => p.theme.color.blueYonder};
     border-color: ${p => p.theme.color.blueYonder};
     color: ${p => p.theme.color.blueYonder25};
   }
 
-  :disabled,
+  &:disabled,
   &._disabled {
     background-color: ${p => p.theme.color.blueYonder};
     border-color: ${p => p.theme.color.blueYonder};
diff --git a/src/fields/DateRangePicker/TimeInput.tsx b/src/fields/DateRangePicker/TimeInput.tsx
index 66cea374b..49ce50a96 100644
--- a/src/fields/DateRangePicker/TimeInput.tsx
+++ b/src/fields/DateRangePicker/TimeInput.tsx
@@ -281,7 +281,7 @@ const Box = styled.div<
   position: relative;
   user-select: none;
 
-  :hover {
+  &:hover {
     border: solid 1px
       ${p =>
         p.$isFocused ? getFieldBorderColorFactoryForState('focus')(p) : getFieldBorderColorFactoryForState('hover')(p)};
diff --git a/yarn.lock b/yarn.lock
index 6abe7091b..91efc7213 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17389,7 +17389,7 @@ __metadata:
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729
+  checksum: 10c0/c8fd3ed88fd49b7dfa8ea408e8beea5ce038114199d7321e39215e7f45659c03eda3025da96ee3c651a9b00eba406ad3e4e61972e9b960c9cf59edb68b83f781
   languageName: node
   linkType: hard
 
@@ -17402,7 +17402,7 @@ __metadata:
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/78ad6edb8309a2bfb720c2c1898f7907a37f858866ce11a5974643af1203a6a6e05b2fa9c53d8064a673a447b83d42569260c306d43628bff5bb101969708355
+  checksum: 10c0/cc8024f1e55ae4710f1874c85bebb32965002c98670b381dc307cb7ea246fe9d9b3c8bbaed4f4090beb5e1c41eb70bac87e5b7a47e096cd0b8effeae210ce577
   languageName: node
   linkType: hard
 
@@ -19532,7 +19532,7 @@ __metadata:
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/c891ccf04008bc1305ba34053db951f8a4584b4a1bf2f68fd972c4a354df3dc5e62c8bfed4f6ac2d12e5b3b1c49af312c83a651048f818cd5b4949d17baacd79
+  checksum: 10c0/1cfd5d81579cb7c3496ad6087787ba23b334dba105982aab3c9fe44de4575f2c9f02277497bdd78c16d3dc284641f480228f169e4e6b3cbdce28578a40539117
   languageName: node
   linkType: hard