Redesign video player styling

src/components/controls/ControlButton.css

@@ -1,30 +1,26 @@
-/* ============================================
-   CONTROL BUTTON
-   Clean & Modern Design
-   ============================================ */
-
 .control-button {
-  background: none;
+  appearance: none;
+  background: transparent;
   border: none;
   color: var(--player-text);
-  cursor: pointer;
-  padding: var(--player-spacing-sm);
+  padding: var(--player-spacing-xs);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--player-radius-sm);
-  transition: all var(--player-transition-fast) ease;
-  position: relative;
-  outline: none;
+  transition: color var(--player-transition-fast) ease,
+    background-color var(--player-transition-fast) ease,
+    opacity var(--player-transition-fast) ease;
+  cursor: pointer;
 }
 
-.control-button:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  transform: scale(1.05);
+.control-button:hover:not(:disabled) {
+  color: var(--player-primary);
+  background-color: rgba(255, 255, 255, 0.08);
 }
 
-.control-button:active {
-  transform: scale(0.95);
+.control-button:active:not(:disabled) {
+  color: var(--player-primary-active);
 }
 
 .control-button:focus-visible {
@@ -33,15 +29,10 @@
 }
 
 .control-button:disabled {
-  opacity: 0.4;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
-.control-button:disabled:hover {
-  background-color: transparent;
-  transform: none;
-}
-
 .control-button svg {
   width: var(--player-icon-md);
   height: var(--player-icon-md);