Improve button styles (#1427)

* Update variable names

* Update standard button styles

* Update styles

* Update button styles

* Update styles

* Add current styles

* Update button styles

* Update styles

* Update outline item styles

* Update styles

* Update styles

* Update notification button styles

* Update button styles

4 files changed, 322 insertions, 313 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index b016a231..b4a7983e 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -477,65 +477,57 @@ a {
 
 /* Sidebar buttons */
 button.sidebar-button {
+    --button-content-color: var(--sidebar-button-icon-color);
+    --button-border-color: transparent;
+    --button-background-color: var(--sidebar-button-background-color);
+    --button-shadow: none;
+
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: var(--sidebar-button-background-color-hover);
+    --button-hover-shadow: none;
+
+    --button-active-border-color: transparent;
+    --button-active-background-color: var(--sidebar-button-background-color-active);
+    --button-active-shadow: none;
+
+    --button-disabled-content-color: var(--sidebar-button-disabled-icon-color);
+    --button-disabled-border-color: transparent;
+    --button-disabled-background-color: var(--sidebar-button-background-color);
+    --button-disabled-shadow: none;
+
     width: 100%;
     height: var(--sidebar-button-height);
-    background-color: var(--sidebar-button-background-color);
     margin: 0;
     padding: 0;
-    border: 0;
+    border-style: none;
+    border-width: 0;
     cursor: pointer;
     display: block;
     transition: background-color 0.125s ease-in-out;
     outline: none;
     font-size: inherit;
     border-radius: 0;
-    box-shadow: none;
 }
 :root[data-popup-action-bar-location=top] button.sidebar-button,
 :root[data-popup-action-bar-location=bottom] button.sidebar-button {
     width: var(--sidebar-width);
     height: 100%;
 }
-button.sidebar-button:disabled {
-    cursor: default;
-}
-button.sidebar-button:hover,
-button.sidebar-button:active,
-button.sidebar-button:focus {
-    box-shadow: none;
-}
-button.sidebar-button:hover,
-button.sidebar-button:focus {
-    background-color: var(--sidebar-button-background-color-hover);
-}
-button.sidebar-button:focus:not(:focus-visible):not(:hover) {
-    background-color: var(--sidebar-button-background-color);
-}
-button.sidebar-button:focus-visible {
-    background-color: var(--sidebar-button-background-color-hover);
-}
-button.sidebar-button:active {
-    background-color: var(--sidebar-button-background-color-active);
-}
 button.sidebar-button.danger {
-    background-color: var(--sidebar-button-danger-background-color);
-}
-button.sidebar-button.danger:hover,
-button.sidebar-button.danger:focus {
-    background-color: var(--sidebar-button-danger-background-color-hover);
-}
-button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) {
-    background-color: var(--sidebar-button-danger-background-color);
-}
-button.sidebar-button.danger:focus-visible {
-    background-color: var(--sidebar-button-danger-background-color-hover);
-}
-button.sidebar-button.danger:active {
-    background-color: var(--sidebar-button-danger-background-color-active);
-}
-button.sidebar-button:disabled,
-button.sidebar-button.danger:disabled {
-    background-color: var(--sidebar-button-background-color);
+    --button-content-color: var(--sidebar-button-icon-color);
+    --button-border-color: transparent;
+    --button-background-color: var(--sidebar-button-danger-background-color);
+    --button-shadow: none;
+
+    --button-hover-content-color: var(--sidebar-button-danger-icon-color);
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: var(--sidebar-button-danger-background-color-hover);
+    --button-hover-shadow: none;
+
+    --button-active-content-color: var(--sidebar-button-danger-icon-color);
+    --button-active-border-color: transparent;
+    --button-active-background-color: var(--sidebar-button-danger-background-color-active);
+    --button-active-shadow: none;
 }
 .sidebar-button-icon {
     --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size);
@@ -543,25 +535,13 @@ button.sidebar-button.danger:disabled {
     display: block;
     width: 100%;
     height: 100%;
-    background-color: var(--sidebar-button-icon-color);
+    background-color: var(--button-current-content-color);
     transition: background-color 0.125s ease-in-out;
 }
-button.sidebar-button:disabled .sidebar-button-icon,
-button.sidebar-button.danger:disabled .sidebar-button-icon {
-    background-color: var(--sidebar-button-disabled-icon-color);
-}
-button.sidebar-button.danger:hover .sidebar-button-icon,
-button.sidebar-button.danger:focus .sidebar-button-icon {
-    background-color: var(--sidebar-button-danger-icon-color);
-}
-button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) .sidebar-button-icon {
-    background-color: var(--sidebar-button-icon-color);
-}
-button.sidebar-button.danger:focus-visible .sidebar-button-icon {
-    background-color: var(--sidebar-button-danger-icon-color);
-}
-button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
-    background-color: var(--accent-color);
+button.sidebar-button.sidebar-button-highlight {
+    --button-content-color: var(--accent-color);
+    --button-hover-content-color: var(--accent-color);
+    --button-active-content-color: var(--accent-color);
 }
 
 
@@ -1593,31 +1573,37 @@ button.action-button[data-icon=source-term]::before {
     top: 0;
     right: 0;
 }
-button.footer-notification-close-button,
-button.footer-notification-close-button:focus,
-button.footer-notification-close-button:hover,
-button.footer-notification-close-button:active {
+button.footer-notification-close-button {
+    --button-content-color: var(--notification-text-color);
+    --button-border-color: transparent;
+    --button-background-color: transparent;
+    --button-shadow: none;
+
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: transparent;
+    --button-hover-shadow: none;
+
+    --button-active-border-color: transparent;
+    --button-active-background-color: transparent;
+    --button-active-shadow: none;
+
+    --button-focus-visible-border-color: transparent;
+    --button-focus-visible-background-color: var(--notification-background-color-light);
+    --button-focus-visible-shadow: none;
+
     flex: 0 0 auto;
-    background-color: transparent;
     margin: -0.25em;
     padding: 0.5em;
-    border: none;
-    outline: none;
+    border-style: none;
+    border-width: 0;
     cursor: pointer;
     font-size: inherit;
-    box-shadow: none;
-}
-button.footer-notification-close-button:focus-visible {
-    background-color: var(--notification-background-color-light);
-}
-button.footer-notification-close-button:focus-visible:active {
-    background-color: var(--notification-background-color-lighter);
 }
 .footer-notification-close-button-icon {
     display: block;
     width: calc(16em / var(--font-size-no-units));
     height: calc(16em / var(--font-size-no-units));
-    background-color: var(--notification-text-color);
+    background-color: var(--button-content-color);
 }
 
 
diff --git a/ext/css/material.css b/ext/css/material.css
index 9cde17f3..71f930fc 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -44,7 +44,7 @@
     --material-arrow-dimension1: calc(5em / var(--font-size-no-units));
     --material-arrow-dimension2: calc(10em / var(--font-size-no-units));
 
-    --button-shadow-params: 0 0.0625em 0.125em 0;
+    --button-default-shadow-params: 0 0.0625em 0.125em 0;
 
     --thin-border-size: calc(1em / var(--font-size-no-units));
 
@@ -102,10 +102,10 @@
     --input-background-color-darker: #cccccc;
     --input-outline-color: var(--text-color);
 
-    --button-text-color: #ffffff;
-    --button-border-color: #cccccc;
-    --button-icon-color: #333333;
-    --button-icon-color-light: #666666;
+    --button-default-text-color: #ffffff;
+    --button-default-border-color: #cccccc;
+    --button-default-icon-color: #333333;
+    --button-default-icon-color-light: #666666;
 
     --checkbox-checked-color: var(--accent-color);
     --checkbox-unchecked-color: #666666;
@@ -160,10 +160,10 @@
     --input-background-color-darker: #484848;
     --input-outline-color: var(--text-color);
 
-    --button-text-color: #000000;
-    --button-border-color: #333333;
-    --button-icon-color: #cccccc;
-    --button-icon-color-light: #999999;
+    --button-default-text-color: #000000;
+    --button-default-border-color: #333333;
+    --button-default-icon-color: #cccccc;
+    --button-default-icon-color-light: #999999;
 
     --checkbox-unchecked-color: #999999;
 
@@ -761,207 +761,250 @@ input[type=number].code {
 
 
 /* Material design button */
-button {
-    border: var(--thin-border-size) solid transparent;
+button,
+.button {
+    --button-content-color: var(--button-default-text-color);
+    --button-border-color: var(--accent-color);
+    --button-background-color: var(--accent-color);
+    --button-shadow: none;
+
+    --button-hover-content-color: var(--button-content-color);
+    --button-hover-border-color: var(--button-hover-background-color);
+    --button-hover-background-color: var(--accent-color-light);
+    --button-hover-shadow: var(--button-default-shadow-params) var(--shadow-color-light);
+
+    --button-focus-content-color: var(--button-hover-content-color);
+    --button-focus-border-color: var(--button-hover-border-color);
+    --button-focus-background-color: var(--button-hover-background-color);
+    --button-focus-shadow: var(--button-hover-shadow);
+
+    --button-focus-visible-content-color: var(--button-focus-content-color);
+    --button-focus-visible-border-color: var(--button-focus-border-color);
+    --button-focus-visible-background-color: var(--button-focus-background-color);
+    --button-focus-visible-shadow: var(--button-focus-shadow);
+
+    --button-active-content-color: var(--button-content-color);
+    --button-active-border-color: var(--button-active-background-color);
+    --button-active-background-color: var(--accent-color-lighter);
+    --button-active-shadow: var(--button-default-shadow-params) var(--shadow-color);
+
+    --button-disabled-content-color: var(--button-default-text-color);
+    --button-disabled-border-color: var(--disabled-color);
+    --button-disabled-background-color: var(--disabled-color);
+    --button-disabled-shadow: none;
+
+    --button-current-content-color: var(--button-content-color);
+    --button-current-border-color: var(--button-border-color);
+    --button-current-background-color: var(--button-background-color);
+    --button-current-shadow: var(--button-shadow);
+
+    border-width: var(--thin-border-size);
+    border-style: solid;
     border-radius: 0.3em;
     padding: 0.5em 1em;
     font-weight: bold;
     font-size: inherit;
     font-family: inherit;
     cursor: pointer;
-    background-color: transparent;
-    box-shadow: var(--button-shadow-params) var(--shadow-color-off);
     transition:
-        background-color var(--animation-duration) ease-in,
-        box-shadow var(--animation-duration) ease-in,
-        border-color var(--animation-duration) ease-in;
+        background-color var(--animation-duration) ease-in-out,
+        box-shadow var(--animation-duration) ease-in-out,
+        border-color var(--animation-duration) ease-in-out;
     -webkit-tap-highlight-color: transparent;
-}
-button:focus {
-    outline: none;
-}
-button:hover {
-    transition:
-        background-color var(--animation-duration) ease-out,
-        box-shadow var(--animation-duration) ease-out,
-        border-color var(--animation-duration) ease-out;
-}
-button:hover {
-    box-shadow: var(--button-shadow-params) var(--shadow-color-light);
-}
-button:active {
-    box-shadow: var(--button-shadow-params) var(--shadow-color);
-}
 
-/* Standard button */
-button {
-    color: var(--button-text-color);
-    border-color: var(--accent-color);
-    background-color: var(--accent-color);
+    color: var(--button-current-content-color);
+    border-color: var(--button-current-border-color);
+    background-color: var(--button-current-background-color);
+    box-shadow: var(--button-current-shadow);
 }
 button:hover,
-button:focus {
-    background-color: var(--accent-color-light);
-    border-color: var(--accent-color-light);
+.button:hover {
+    --button-current-content-color: var(--button-hover-content-color);
+    --button-current-border-color: var(--button-hover-border-color);
+    --button-current-background-color: var(--button-hover-background-color);
+    --button-current-shadow: var(--button-hover-shadow);
+}
+button:focus,
+.button:focus {
+    --button-current-content-color: var(--button-focus-content-color);
+    --button-current-border-color: var(--button-focus-border-color);
+    --button-current-background-color: var(--button-focus-background-color);
+    --button-current-shadow: var(--button-focus-shadow);
+
+    outline: none;
 }
-button:focus:not(:focus-visible):not(:hover):not(:active) {
-    background-color: var(--accent-color);
-    border-color: var(--accent-color);
+button:active,
+.button:active {
+    --button-current-content-color: var(--button-active-content-color);
+    --button-current-border-color: var(--button-active-border-color);
+    --button-current-background-color: var(--button-active-background-color);
+    --button-current-shadow: var(--button-active-shadow);
+}
+button:focus:not(:focus-visible),
+.button:focus:not(:focus-visible) {
+    --button-current-content-color: var(--button-content-color);
+    --button-current-border-color: var(--button-border-color);
+    --button-current-background-color: var(--button-background-color);
+    --button-current-shadow: var(--button-shadow);
+}
+button:focus-visible,
+.button:focus-visible {
+    --button-current-content-color: var(--button-focus-visible-content-color);
+    --button-current-border-color: var(--button-focus-visible-border-color);
+    --button-current-background-color: var(--button-focus-visible-background-color);
+    --button-current-shadow: var(--button-focus-visible-shadow);
+}
+button:hover:focus-visible,
+button:hover:not(:focus-visible),
+.button:hover:focus-visible,
+.button:hover:not(:focus-visible) {
+    --button-current-content-color: var(--button-hover-content-color);
+    --button-current-border-color: var(--button-hover-border-color);
+    --button-current-background-color: var(--button-hover-background-color);
+    --button-current-shadow: var(--button-hover-shadow);
+}
+button:focus:focus-visible,
+.button:focus:focus-visible {
+    --button-current-content-color: var(--button-focus-visible-content-color);
+    --button-current-border-color: var(--button-focus-visible-border-color);
+    --button-current-background-color: var(--button-focus-visible-background-color);
+    --button-current-shadow: var(--button-focus-visible-shadow);
+}
+button:active:focus-visible,
+button:active:not(:focus-visible),
+.button:active:focus-visible,
+.button:active:not(:focus-visible) {
+    --button-current-content-color: var(--button-active-content-color);
+    --button-current-border-color: var(--button-active-border-color);
+    --button-current-background-color: var(--button-active-background-color);
+    --button-current-shadow: var(--button-active-shadow);
 }
-button:focus-visible {
-    background-color: var(--accent-color-light);
-    border-color: var(--accent-color-light);
+button:disabled,
+.button:disabled {
+    cursor: default;
 }
-button:active,
-button:active:focus {
-    border-color: var(--accent-color-lighter);
-    background-color: var(--accent-color-lighter);
+button:disabled,
+button:disabled:focus,
+button:disabled:hover,
+button:disabled:active,
+.button:disabled,
+.button:disabled:focus,
+.button:disabled:hover,
+.button:disabled:active {
+    --button-current-content-color: var(--button-disabled-content-color);
+    --button-current-border-color: var(--button-disabled-border-color);
+    --button-current-background-color: var(--button-disabled-background-color);
+    --button-current-shadow: var(--button-disabled-shadow);
+}
+button:disabled:focus-visible,
+.button:disabled:focus-visible {
+    --button-current-content-color: var(--button-disabled-content-color);
+    --button-current-border-color: var(--button-disabled-border-color);
+    --button-current-background-color: var(--button-disabled-background-color);
+    --button-current-shadow: var(--button-disabled-shadow);
 }
 
 /* Standard danger button */
 button.danger {
-    color: var(--button-text-color);
-    border-color: var(--danger-color);
-    background-color: var(--danger-color);
-}
-button.danger:hover,
-button.danger:focus {
-    background-color: var(--danger-color-light);
-    border-color: var(--danger-color-light);
-}
-button.danger:focus:not(:focus-visible):not(:hover):not(:active) {
-    background-color: var(--danger-color);
-    border-color: var(--danger-color);
-}
-button.danger:focus-visible {
-    background-color: var(--danger-color-light);
-    border-color: var(--danger-color-light);
-}
-button.danger:active,
-button.danger:active:focus {
-    border-color: var(--danger-color-lighter);
-    background-color: var(--danger-color-lighter);
+    --button-border-color: var(--danger-color);
+    --button-background-color: var(--danger-color);
+    --button-hover-background-color: var(--danger-color-light);
+    --button-active-background-color: var(--danger-color-lighter);
 }
 
 /* Low emphasis button */
 button.low-emphasis {
-    color: var(--accent-color);
-    border-color: var(--button-border-color);
-    background-color: var(--accent-color-transparent0);
-}
-button.low-emphasis:hover,
-button.low-emphasis:focus {
-    border-color: var(--accent-color);
-    background-color: var(--accent-color-transparent5);
-}
-button.low-emphasis:focus:not(:focus-visible):not(:hover):not(:active) {
-    border-color: var(--button-border-color);
-    background-color: var(--accent-color-transparent0);
-}
-button.low-emphasis:focus-visible {
-    border-color: var(--accent-color);
-    background-color: var(--accent-color-transparent5);
-}
-button.low-emphasis:active,
-button.low-emphasis:active:focus {
-    border-color: var(--accent-color);
-    background-color: var(--accent-color-transparent25);
+    --button-content-color: var(--accent-color);
+    --button-border-color: var(--button-default-border-color);
+    --button-background-color: var(--accent-color-transparent0);
+    --button-hover-border-color: var(--accent-color);
+    --button-hover-background-color: var(--accent-color-transparent5);
+    --button-active-border-color: var(--accent-color);
+    --button-active-background-color: var(--accent-color-transparent25);
+    --button-disabled-content-color: var(--disabled-color);
+    --button-disabled-border-color: var(--disabled-color);
+    --button-disabled-background-color: var(--accent-color-transparent0);
 }
 
 /* Low emphasis danger button */
 button.low-emphasis.danger {
-    color: var(--danger-color);
-    border-color: var(--button-border-color);
-    background-color: var(--danger-color-transparent0);
-}
-button.low-emphasis.danger:hover,
-button.low-emphasis.danger:focus {
-    border-color: var(--danger-color);
-    background-color: var(--danger-color-transparent5);
-}
-button.low-emphasis.danger:focus:not(:focus-visible):not(:hover):not(:active) {
-    border-color: var(--button-border-color);
-    background-color: var(--danger-color-transparent0);
-}
-button.low-emphasis.danger:focus-visible {
-    border-color: var(--danger-color);
-    background-color: var(--danger-color-transparent5);
-}
-button.low-emphasis.danger:active,
-button.low-emphasis.danger:active:focus {
-    border-color: var(--danger-color);
-    background-color: var(--danger-color-transparent25);
-}
-
-/* Disabled buttons */
-button:disabled,
-button:disabled:focus,
-button:disabled:hover,
-button:disabled:active {
-    color: var(--button-text-color);
-    border-color: var(--disabled-color);
-    background-color: var(--disabled-color);
-    cursor: default;
-}
-button.low-emphasis:disabled,
-button.low-emphasis:disabled:focus,
-button.low-emphasis:disabled:hover,
-button.low-emphasis:disabled:active {
-    color: var(--disabled-color);
-    border-color: var(--disabled-color);
-    background-color: transparent;
+    --button-content-color: var(--danger-color);
+    --button-border-color: var(--button-default-border-color);
+    --button-background-color: var(--danger-color-transparent0);
+    --button-hover-border-color: var(--danger-color);
+    --button-hover-background-color: var(--danger-color-transparent5);
+    --button-active-border-color: var(--danger-color);
+    --button-active-background-color: var(--danger-color-transparent25);
+    --button-disabled-content-color: var(--disabled-color);
+    --button-disabled-border-color: var(--disabled-color);
+    --button-disabled-background-color: var(--danger-color-transparent0);
 }
 
 /* Input suffix button */
 button.input-suffix-button {
+    --button-content-color: var(--button-default-icon-color);
+    --button-border-color: var(--input-background-color);
+    --button-background-color: var(--input-background-color);
+    --button-hover-background-color: var(--input-background-color-dark);
+    --button-active-background-color: var(--input-background-color-darker);
+
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border: none;
+    border-style: none;
+    border-width: 0;
     height: var(--input-height);
     line-height: var(--input-height);
-    background-color: var(--input-background-color);
     box-sizing: border-box;
     padding: 0 0.5em;
-    border-color: transparent;
-    transition:
-        background-color var(--animation-duration) ease-in,
-        box-shadow var(--animation-duration) ease-in;
-}
-button.input-suffix-button.input-suffix-icon-button {
-    width: 2.125em;
     position: relative;
 }
-button.input-suffix-button.input-suffix-icon-button:hover,
-button.input-suffix-button.input-suffix-icon-button:focus {
-    background-color: var(--input-background-color-dark);
-}
-button.input-suffix-button.input-suffix-icon-button:focus:not(:focus-visible):not(:hover):not(:active) {
-    background-color: var(--input-background-color);
-}
-button.input-suffix-button.input-suffix-icon-button:focus-visible {
-    background-color: var(--input-background-color-dark);
+button.input-suffix-button.light-icon {
+    --button-content-color: var(--button-default-icon-color-light);
 }
-button.input-suffix-button.input-suffix-icon-button:active,
-button.input-suffix-button.input-suffix-icon-button:active:focus {
-    background-color: var(--input-background-color-darker);
+button.input-suffix-button.input-suffix-icon-button {
+    width: 2.125em;
 }
 button.input-suffix-button.input-suffix-icon-button>.icon {
     display: block;
     width: 100%;
     height: 100%;
-    background-color: var(--button-icon-color);
+    background-color: var(--button-current-content-color);
 }
 input[type=text]:invalid+button.input-suffix-button,
 input[type=number]:invalid+button.input-suffix-button,
 input[type=text][data-invalid=true]+button.input-suffix-button,
 input[type=number][data-invalid=true]+button.input-suffix-button {
-    border: var(--thin-border-size) solid var(--danger-color);
+    --button-border-color: var(--danger-color);
+    --button-hover-border-color: var(--danger-color);
+    --button-active-border-color: var(--danger-color);
+    --button-disabled-border-color: var(--danger-color);
+
+    border-width: var(--thin-border-size);
+    border-style: solid;
     border-left-style: none;
 }
 
 
 /* Material design icon button */
 button.icon-button {
+    --button-content-color: var(--button-default-icon-color);
+    --button-border-color: transparent;
+    --button-background-color: transparent;
+    --button-shadow: none;
+
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: transparent;
+    --button-hover-shadow: none;
+
+    --button-active-border-color: transparent;
+    --button-active-background-color: transparent;
+    --button-active-shadow: none;
+
+    --button-disabled-content-color: var(--button-default-icon-color);
+    --button-disabled-border-color: transparent;
+    --button-disabled-background-color: transparent;
+    --button-disabled-shadow: none;
+
     vertical-align: middle;
     border: none;
     margin: 0;
@@ -969,7 +1012,10 @@ button.icon-button {
     box-sizing: content-box;
     font-size: inherit;
     cursor: pointer;
-    background-color: transparent;
+}
+button.icon-button.light-icon {
+    --button-content-color: var(--button-default-icon-color-light);
+    --button-disabled-content-color: var(--button-default-icon-color-light);
 }
 button.icon-button:not([hidden]) {
     display: inline-block;
@@ -980,22 +1026,6 @@ button.icon-button>.icon-button-inner {
     height: var(--icon-button-size);
     position: relative;
 }
-button.icon-button:focus {
-    outline: none;
-}
-button.icon-button,
-button.icon-button:hover,
-button.icon-button:focus,
-button.icon-button:active {
-    background-color: transparent;
-    box-shadow: none;
-}
-button.icon-button:focus:not(:focus-visible),
-button.icon-button:focus:hover:not(:focus-visible),
-button.icon-button:focus:active:not(:focus-visible) {
-    background-color: transparent;
-    box-shadow: none;
-}
 .icon-button>.icon-button-inner::after {
     position: absolute;
     display: block;
@@ -1041,12 +1071,9 @@ button.icon-button:focus:active:not(:focus-visible) {
     top: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--button-icon-color);
+    background-color: var(--button-current-content-color);
     --icon-size: calc(16em / var(--font-size-no-units)) calc(16em / var(--font-size-no-units));
 }
-.icon-button>.icon-button-inner>.icon.icon-button-icon-light {
-    background-color: var(--button-icon-color-light);
-}
 .icon-button>.icon-button-inner>.icon[data-icon=material-right-arrow] { --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); }
 .icon-button>.icon-button-inner>.icon[data-icon=material-down-arrow] { --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); }
 
@@ -1095,12 +1122,29 @@ button.icon-button:focus:active:not(:focus-visible) {
     white-space: nowrap;
 }
 button.popup-menu-item {
+    --button-content-color: var(--text-color);
+    --button-border-color: transparent;
+    --button-background-color: transparent;
+    --button-shadow: none;
+
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: var(--menu-item-hover-color);
+    --button-hover-shadow: none;
+
+    --button-active-border-color: transparent;
+    --button-active-background-color: var(--menu-item-active-color);
+    --button-active-shadow: none;
+
+    --button-disabled-content-color: var(--text-color-light2);
+    --button-disabled-border-color: transparent;
+    --button-disabled-background-color: transparent;
+    --button-disabled-shadow: none;
+
     padding: 0.625em 1.5em;
     flex: 1 1 auto;
     border-radius: 0;
-    background-color: transparent;
-    color: var(--text-color);
-    border: none;
+    border-style: none;
+    border-width: 0;
     text-align: left;
     font-size: 1em;
     font-weight: normal;
@@ -1110,30 +1154,10 @@ button.popup-menu-item {
 button.popup-menu-item:not([hidden]) {
     display: flex;
 }
-button.popup-menu-item:hover,
-button.popup-menu-item:focus {
-    background-color: var(--menu-item-hover-color);
-    box-shadow: none;
-}
-button.popup-menu-item:focus:not(:focus-visible):not(:hover):not(:disabled) {
-    background-color: transparent;
-}
-button.popup-menu-item:focus-visible:not(:disabled) {
-    background-color: var(--menu-item-hover-color);
-}
-button.popup-menu-item:active:not(:disabled) {
-    background-color: var(--menu-item-active-color);
-    box-shadow: none;
-}
-button.popup-menu-item:disabled {
-    color: var(--text-color-light2);
-    background-color: transparent;
-    box-shadow: none;
-}
 .popup-menu-item-icon {
     width: calc(16em / 14);
     height: calc(16em / 14);
-    background-color: var(--text-color);
+    background-color: var(--button-current-content-color);
     flex: 0 0 auto;
 }
 .popup-menu-item-icon:not([hidden]) {
diff --git a/ext/css/search.css b/ext/css/search.css
index 72df8a67..b5643ebb 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -121,7 +121,7 @@ h1 {
     top: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--button-icon-color);
+    background-color: var(--button-default-icon-color);
     --icon-size: 16px 16px;
 }
 
diff --git a/ext/css/settings.css b/ext/css/settings.css
index 8255d0b8..8ecaf73c 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -213,7 +213,7 @@ h3 {
 }
 .heading-container-icon>.icon {
     display: block;
-    background-color: var(--button-icon-color);
+    background-color: var(--button-default-icon-color);
     width: var(--outline-item-icon-size);
     height: var(--outline-item-icon-size);
 }
@@ -392,6 +392,22 @@ a.heading-link-light {
     padding-bottom: 2em;
 }
 .outline-item {
+    --button-content-color: var(--text-color);
+    --button-border-color: transparent;
+    --button-background-color: var(--outline-item-background-color);
+    --button-shadow: none;
+
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: var(--outline-item-background-color-hover);
+    --button-hover-shadow: none;
+
+    --button-active-border-color: transparent;
+    --button-active-background-color: var(--outline-item-background-color-hover);
+    --button-active-shadow: none;
+
+    font-weight: normal;
+    border-style: none;
+    border-width: 0;
     display: flex;
     align-items: center;
     width: 100%;
@@ -399,24 +415,11 @@ a.heading-link-light {
     line-height: var(--outline-item-height);
     padding: 0 1.5em;
     cursor: pointer;
-    background-color: var(--outline-item-background-color);
     transition: background-color var(--animation-duration) ease-in-out;
 }
 .outline-item,
 .outline-item:hover {
     text-decoration: none;
-    color: var(--text-color);
-}
-.outline-item:hover,
-.outline-item:focus {
-    outline: none;
-    background-color: var(--outline-item-background-color-hover);
-}
-.outline-item:focus:not(:focus-visible) {
-    background-color: var(--outline-item-background-color);
-}
-.outline-item:focus-visible {
-    background-color: var(--outline-item-background-color-hover);
 }
 .outline-item-left {
     display: inline-block;
@@ -440,7 +443,7 @@ a.heading-link-light {
 }
 .outline-item-icon {
     display: block;
-    background-color: var(--button-icon-color);
+    background-color: var(--button-default-icon-color);
     width: 100%;
     height: 100%;
 }
@@ -890,14 +893,14 @@ select.short-height {
     right: 0;
     bottom: 0;
 }
+button.icon-button.modal-header-button {
+    --button-content-color: var(--button-default-icon-color-light);
+    --button-hover-content-color: var(--button-default-icon-color);
+    --button-active-content-color: var(--button-default-icon-color);
+}
 button.icon-button.modal-header-button>.icon-button-inner>.icon {
-    background-color: var(--button-icon-color-light);
     transition: background-color var(--animation-duration) ease-in-out;
 }
-button.icon-button.modal-header-button:hover>.icon-button-inner>.icon,
-button.icon-button.modal-header-button:active>.icon-button-inner>.icon {
-    background-color: var(--button-icon-color);
-}
 .modal-header-button[data-modal-action=expand],
 .modal-header-button[data-modal-action=collapse] {
     visibility: visible;
@@ -1064,6 +1067,19 @@ button.icon-button.modal-header-button:active>.icon-button-inner>.icon {
     padding-bottom: var(--fab-button-padding);
 }
 button.fab-button {
+    --button-content-color: var(--button-default-text-color);
+    --button-border-color: transparent;
+    --button-background-color: transparent;
+    --button-shadow: none;
+
+    --button-hover-border-color: transparent;
+    --button-hover-background-color: transparent;
+    --button-hover-shadow: none;
+
+    --button-active-border-color: transparent;
+    --button-active-background-color: transparent;
+    --button-active-shadow: none;
+
     display: block;
     padding: 0;
     margin: 0;
@@ -1073,13 +1089,6 @@ button.fab-button>.icon-button-inner {
     width: var(--fab-button-size);
     height: var(--fab-button-size);
 }
-button.fab-button,
-button.fab-button:hover,
-button.fab-button:focus,
-button.fab-button:active {
-    background-color: transparent;
-    box-shadow: none;
-}
 .fab-button-background {
     position: absolute;
     display: block;
@@ -1093,7 +1102,7 @@ button.fab-button:active {
     box-shadow: var(--shadow-vertical);
 }
 button.fab-button>.icon-button-inner>.icon {
-    background-color: #ffffff;
+    background-color: var(--button-content-color);
 }
 .fab-container-item.fab-container-item-popup-preview {
     display: none;
@@ -1451,16 +1460,6 @@ input.anki-card-field-value {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
-button.anki-card-field-value-menu-button {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border: none;
-    height: var(--input-height);
-    line-height: var(--input-height);
-    background-color: var(--input-background-color);
-    box-sizing: border-box;
-    padding: 0 0.5em;
-}
 #anki-error-message-details {
     margin-top: 0.25em;
     font-family: 'Courier New', Courier, monospace;