diff --git a/src/components.css b/src/components.css
index 2c3fc3d..af14b1b 100644
--- a/src/components.css
+++ b/src/components.css
@@ -108,18 +108,16 @@
       font-size: calc(var(--font-size) * 1.6);
     }
     &:hover:not(:disabled) {
-      color: var(--button-text);
-      background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
+      --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
       box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
     }
     &:active:not(:disabled) {
-      color: var(--button-text);
-      background: color-mix(in oklch, var(--button-surface) 10%, transparent);
+      --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
       box-shadow: var(--elevation-dark-0);
     }
     &:disabled {
-      color: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
-      background-color: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
+      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
+      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
       cursor: not-allowed;
     }
     &.filled:not(:disabled) {
@@ -149,6 +147,15 @@
         --button-text: var(--color-dark-on-info);
         --button-surface: var(--color-dark-info);
       }
+      &:hover {
+        color: var(--button-surface);
+        background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
+        box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
+      }
+      &:active {
+        color: var(--button-surface);
+        background-color: color-mix(in oklch, var(--button-surface) 18%, transparent);
+      }
     }
     &.filled:disabled {
       --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@@ -181,6 +188,15 @@
         --button-text: var(--color-dark-on-info-container);
         --button-surface: var(--color-dark-info-container);
       }
+      &:hover {
+        color: var(--button-surface);
+        background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
+        box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
+      }
+      &:active {
+        color: var(--button-surface);
+        background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
+      }
     }
     &.tonal:disabled {
       --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@@ -190,13 +206,6 @@
       border: 1px solid var(--button-outline);
       --button-text: var(--color-dark-primary);
       --button-surface: transparent;
-      &:hover {
-        background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
-        box-shadow: var(--elevation-dark-0);
-      }
-      &:active {
-        background-color: color-mix(in oklch, var(--button-text) 10%, transparent);
-      }
       &.secondary {
         --button-text: var(--color-dark-secondary);
       }
@@ -215,6 +224,13 @@
       &.info {
         --button-text: var(--color-dark-info);
       }
+      &:hover {
+        background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
+      }
     }
     &.outlined:disabled {
       border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
@@ -223,13 +239,6 @@
     &.text:not(:disabled) {
       --button-text: var(--color-dark-primary);
       --button-surface: transparent;
-      &:hover {
-        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
-        box-shadow: var(--elevation-dark-0);
-      }
-      &:active {
-        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
-      }
       &.secondary {
         --button-text: var(--color-dark-secondary);
       }
@@ -248,6 +257,13 @@
       &.info {
         --button-text: var(--color-dark-info);
       }
+      &:hover {
+        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
+      }
     }
     &.text:disabled {
       --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@@ -256,13 +272,6 @@
     &.icon:not(:disabled) {
       --button-text: var(--color-dark-on-surface-variant);
       --button-surface: transparent;
-      &:hover {
-        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
-        box-shadow: var(--elevation-dark-0);
-      }
-      &:active {
-        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
-      }
       &.selected {
         --button-text: var(--color-dark-primary);
         &.secondary {
@@ -284,6 +293,13 @@
           --button-text: var(--color-dark-info);
         }
       }
+      &:hover {
+        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
+      }
     }
     &.icon:disabled {
       --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@@ -328,13 +344,6 @@
     &.tonal_icon:not(:disabled) {
       --button-text: var(--color-dark-on-primary-container);
       --button-surface: var(--color-dark-primary-container);
-      &:hover {
-        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
-        box-shadow: var(--elevation-dark-0);
-      }
-      &:active {
-        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
-      }
       &.secondary {
         --button-text: var(--color-dark-on-secondary-container);
         --button-surface: var(--color-dark-secondary-container);
@@ -363,6 +372,13 @@
         --button-text: var(--color-dark-on-surface-variant);
         --button-surface: var(--color-dark-surface-container-highest);
       }
+      &:hover {
+        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
+        box-shadow: var(--elevation-dark-0);
+      }
+      &:active {
+        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
+      }
     }
     &.tonal_icon:disabled {
       --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
@@ -372,16 +388,16 @@
       --button-text: var(--color-dark-on-surface-variant);
       --button-surface: transparent;
       border: 1px solid var(--button-outline);
+      &.selected {
+        --button-text: var(--color-dark-inverse-on-surface);
+        --button-surface: var(--color-dark-inverse-surface);
+      }
       &:hover {
         --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
         box-shadow: var(--elevation-dark-0);
       }
       &:active {
-        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
-      }
-      &.selected {
-        --button-text: var(--color-dark-inverse-on-surface);
-        --button-surface: var(--color-dark-inverse-surface);
+        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
       }
     }
     &.outlined_icon:disabled {