Refactor CSS to BEM

Update dependencies
Improve focus and hover states

css/menu.css

@@ -1,7 +1,5 @@
-/** @define Menu */
-
-.Menu {
-  background-color: var(--colorDarkBlue);
+.menu {
+  background-color: var(--color-dark-blue);
   border-radius: 999px;
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
   cursor: pointer;
@@ -12,15 +10,15 @@
   top: 5px;
   transform: translateX(-100px);
   transition:
-    filter var(--transitionMd) ease-out,
-    opacity var(--transitionMd) ease-out,
-    transform var(--transitionMd) ease-out;
+    filter var(--transition-md) ease-out,
+    opacity var(--transition-md) ease-out,
+    transform var(--transition-md) ease-out;
   width: 64px;
   will-change: opacity, transition;
   z-index: 5;
 }
 
-.Menu-line {
+.menu__line {
   background-color: #fff;
   border-radius: 2px;
   height: 4px;
@@ -30,46 +28,41 @@
   transform: translateY(-50%);
 }
 
-.Menu-line:nth-of-type(1) {
+.menu__line:nth-of-type(1) {
   top: 33%;
 }
 
-.Menu-line:nth-of-type(2) {
+.menu__line:nth-of-type(2) {
   top: 50%;
 }
 
-.Menu-line:nth-of-type(3) {
+.menu__line:nth-of-type(3) {
   top: 66%;
 }
 
-.Menu-text {
+.menu__text {
   left: -10000px;
   position: absolute;
   top: -10000px;
 }
 
-.Menu.is-visible {
+.menu.is-visible {
   transform: translateX(0);
 }
 
-.Menu.is-minimized {
+.menu.is-minimized {
   opacity: 0.5;
   transform: translateX(-20px) translateY(-20px);
 }
 
 /**
- * Focus state
+ * Hover and focus states
  */
 
-.Menu:focus {
+.menu:focus,
+.menu:hover {
   outline: none;
-}
-
-/**
- * Hover state
- */
-
-.Menu:hover {
   opacity: 1;
-  filter: brightness(125%);
+  filter: saturate(1.5) contrast(1.5);
+  transform: scale(1.1);
 }