From 62b2606d7e1645ddd152e026c2e1b4e0e7c3e983 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Wed, 20 Jan 2021 05:49:28 +0000
Subject: [PATCH] Twenty Twenty-One: Clean up Button styles.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change restructures the Button element styles for better a11y and expected color behaviors. Here what has changed:

- The `button-style()` mixin is now the ''single source or truth'' for how Button should look site-wide.
  - Button Block, File Block, and Search form Blocks all rely on this one mixin.
  - The same styles is also applied to the `<button>` element which appears in widgets, the 404 search form and comments form.
- Improves expected button styles for various conditions and contexts as follows:
  - User color palette selections for Buttons are retained regardless of a parent block’s color settings or dark-mode.
  - Supports both Default/Filled styles and Outline styles.
  - More consistent `:hover` and `:active` styles.
  - `:focus` styles are now always visible and legible.
- Adds a `--local-color` color variable to scope color relationships to nested blocks.
- Reduces selectors in `style.css` output.
- 1:1 experience between editor and front end button styles.
- Properly supports Dark-mode.

Props allancole, poena, scruffian, megphillips91.
Fixes #51927.

git-svn-id: https://develop.svn.wordpress.org/trunk@49987 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../twentytwentyone/assets/css/ie-editor.css  | 780 +++++++---------
 .../themes/twentytwentyone/assets/css/ie.css  | 856 ++++++++----------
 .../assets/css/style-editor.css               | 576 +++++++-----
 .../assets/sass/02-tools/mixins.scss          |  54 +-
 .../assets/sass/05-blocks/button/_editor.scss | 133 +--
 .../assets/sass/05-blocks/button/_style.scss  | 151 ++-
 .../assets/sass/05-blocks/file/_editor.scss   |   9 +-
 .../assets/sass/05-blocks/file/_style.scss    |  13 +-
 .../assets/sass/05-blocks/search/_editor.scss | 133 +--
 .../assets/sass/05-blocks/search/_style.scss  | 108 +--
 .../assets/sass/06-components/widgets.scss    |   7 -
 .../sass/07-utilities/color-palette.scss      | 139 ++-
 .../themes/twentytwentyone/style-rtl.css      | 578 ++++++------
 .../themes/twentytwentyone/style.css          | 578 ++++++------
 14 files changed, 2045 insertions(+), 2070 deletions(-)

diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
index e77216365f..92a5a2bd01 100644
--- a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
+++ b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css
@@ -384,33 +384,50 @@ a:hover {
 }
 
 .wp-block-button__link {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
+}
+
+.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-button__link:hover,
+.wp-block-button__link:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
 }
 
 .wp-block-button__link:focus {
-	background: transparent;
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .wp-block-button__link:focus {
-	color: #39414d;
-}
-
-.wp-block-button__link:focus:not(.has-background) {
-	color: #39414d;
-}
-
 .wp-block-button__link:disabled {
 	background-color: rgba(255, 255, 255, 0.5);
 	border-color: rgba(255, 255, 255, 0.5);
@@ -433,105 +450,93 @@ a:hover {
 	margin-bottom: 30px;
 }
 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
-	color: #39414d !important;
-	background: transparent !important;
-	border-color: #39414d;
+	border-color: currentColor !important;
+	background-color: transparent !important;
+	color: inherit !important;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-	color: #39414d !important;
-	background: transparent !important;
-	border-color: #39414d;
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link {
-	color: #39414d;
-	background: transparent;
-	border: 3px solid currentColor;
-	padding: 15px 30px;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:active {
-	background-color: #39414d;
-	color: #d1e4dd;
-	border-color: #39414d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
-	background-color: #39414d;
-	color: #d1e4dd;
-	border-color: #39414d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background {
-	border-color: #39414d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
-	background-color: #39414d !important;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
-	background-color: #39414d !important;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
-	color: #28303d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
-	color: #fff;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
-	color: #fff;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
-	color: #fff;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color {
-	color: #28303d;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color {
-	color: #28303d;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color {
-	color: #28303d;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color {
-	color: #28303d;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color {
-	color: #28303d;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color {
-	color: #28303d;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
-	color: #28303d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
 	border-color: currentColor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
-	color: #d1e4dd !important;
-	border-color: #39414d;
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+	color: inherit;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: transparent;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:hover {
+	background-color: #28303d !important;
+	border-color: transparent !important;
 	color: #d1e4dd !important;
-	border-color: #39414d;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: #28303d !important;
+	border-color: transparent !important;
+	color: #d1e4dd !important;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
+	background-color: #28303d !important;
+	color: #d1e4dd !important;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: #28303d !important;
+	color: #d1e4dd !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
+	color: #d1e4dd !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: #d1e4dd !important;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
 .wp-block-button.is-style-squared {
@@ -878,43 +883,60 @@ a:hover {
 }
 
 .wp-block-file .wp-block-file__button {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
 	display: inline-block;
 }
 
+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-file .wp-block-file__button:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
+}
+
 .wp-block-file .wp-block-file__button:focus {
-	background: transparent;
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
-	color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
-	color: #39414d;
-}
-
 .wp-block-file .wp-block-file__button:disabled {
 	background-color: rgba(255, 255, 255, 0.5);
 	border-color: rgba(255, 255, 255, 0.5);
 	color: #39414d;
 }
 
-.wp-block-file .wp-block-file__button:hover {
-	color: #39414d;
-	background: transparent;
+.wp-block-file .wp-block-file__button:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
 .wp-block-gallery figcaption {
@@ -2245,6 +2267,17 @@ pre.wp-block-preformatted {
 	margin-bottom: 10px;
 }
 
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border: 3px solid #39414d;
+	border-radius: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 1.125rem;
+	line-height: 1.7;
+	max-width: inherit;
+	margin-right: -3px;
+	padding: 10px;
+}
+
 .wp-block-search .wp-block-search__input {
 	border: 3px solid #39414d;
 	border-radius: 0;
@@ -2256,95 +2289,78 @@ pre.wp-block-preformatted {
 	padding: 10px;
 }
 
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	background: rgba(255, 255, 255, 0.9);
+}
+
 .is-dark-theme .wp-block-search .wp-block-search__input {
 	background: rgba(255, 255, 255, 0.9);
 }
 
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-color: #28303d !important;
 }
 
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
-}
-
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
-}
-
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
-}
-
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
-	border-color: #28303d;
-}
-
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
-	border-color: #fff;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
-	border-color: #fff;
-}
-
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
-	border-color: #fff;
+.has-background .wp-block-search .wp-block-search__input {
+	border-color: #28303d !important;
 }
 
 .wp-block-search .wp-block-search__button {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
 	box-shadow: none;
 	margin-left: 0;
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active {
 	background-color: transparent;
-	color: #39414d;
+	border-color: currentColor;
+	color: inherit;
 }
 
 .wp-block-search .wp-block-search__button:focus {
-	background: transparent;
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .wp-block-search .wp-block-search__button:focus {
-	color: #39414d;
-}
-
-.wp-block-search .wp-block-search__button:focus:not(.has-background) {
-	color: #39414d;
-}
-
 .wp-block-search .wp-block-search__button:disabled {
 	background-color: rgba(255, 255, 255, 0.5);
 	border-color: rgba(255, 255, 255, 0.5);
 	color: #39414d;
 }
 
-.wp-block-search .wp-block-search__button:hover {
-	color: #d1e4dd;
-	background-color: #39414d;
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	padding: 30px 15px;
+	display: inherit;
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {
@@ -2352,265 +2368,67 @@ pre.wp-block-preformatted {
 	height: 40px;
 }
 
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button {
-	color: #fff;
-	border-color: currentColor;
+.has-background .wp-block-search .wp-block-search__button:hover {
+	background-color: #d1e4dd !important;
+	color: #28303d !important;
 }
 
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button {
-	color: #fff;
-	border-color: currentColor;
+.has-background .wp-block-search .wp-block-search__button:active {
+	background-color: #d1e4dd !important;
+	color: #28303d !important;
 }
 
-.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
-	color: #fff;
-	border-color: currentColor;
+.has-text-color .wp-block-search .wp-block-search__button:hover {
+	color: #28303d !important;
 }
 
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #fff;
+.has-text-color .wp-block-search .wp-block-search__button:active {
+	color: #28303d !important;
 }
 
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #fff;
+.wp-block-search .wp-block-search__button:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
-.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #fff;
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: 3px;
 }
 
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #d1e4dd;
-	background-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #d1e4dd;
-	background-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #d1e4dd;
-	background-color: #39414d;
-}
-
-.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
-	color: #28303d;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
 	border: none;
 }
 
+.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover {
+	color: #28303d;
+}
+
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+	color: #28303d;
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
+	color: #28303d;
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
+	color: #28303d;
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover {
+	background-color: #28303d;
+	color: #fff;
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+	background-color: #28303d;
+	color: #fff;
+}
+
 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
 	padding: 15px 30px;
 }
 
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #d1e4dd;
-	border-color: currentColor;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #39414d;
-	border-color: currentColor;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #39414d;
-	border-color: currentColor;
-}
-
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #39414d;
-	border-color: currentColor;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #39414d;
-	border-color: #39414d;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #d1e4dd;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #d1e4dd;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: #d1e4dd;
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: #fff;
-	background-color: #d1e4dd;
-	border-color: #d1e4dd;
-}
-
 .wp-block[data-align=center] > * {
 	text-align: center;
 }
@@ -3260,42 +3078,82 @@ a {
 	color: #000;
 }
 
+.has-black-color[class] [class*=__inner-container] {
+	color: #000;
+}
+
 .has-gray-color[class] {
 	color: #39414d;
 }
 
+.has-gray-color[class] [class*=__inner-container] {
+	color: #39414d;
+}
+
 .has-dark-gray-color[class] {
 	color: #28303d;
 }
 
+.has-dark-gray-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
 .has-green-color[class] {
 	color: #d1e4dd;
 }
 
+.has-green-color[class] [class*=__inner-container] {
+	color: #d1e4dd;
+}
+
 .has-blue-color[class] {
 	color: #d1dfe4;
 }
 
+.has-blue-color[class] [class*=__inner-container] {
+	color: #d1dfe4;
+}
+
 .has-purple-color[class] {
 	color: #d1d1e4;
 }
 
+.has-purple-color[class] [class*=__inner-container] {
+	color: #d1d1e4;
+}
+
 .has-red-color[class] {
 	color: #e4d1d1;
 }
 
+.has-red-color[class] [class*=__inner-container] {
+	color: #e4d1d1;
+}
+
 .has-orange-color[class] {
 	color: #e4dad1;
 }
 
+.has-orange-color[class] [class*=__inner-container] {
+	color: #e4dad1;
+}
+
 .has-yellow-color[class] {
 	color: #eeeadd;
 }
 
+.has-yellow-color[class] [class*=__inner-container] {
+	color: #eeeadd;
+}
+
 .has-white-color[class] {
 	color: #fff;
 }
 
+.has-white-color[class] [class*=__inner-container] {
+	color: #fff;
+}
+
 .has-background a,
 .has-background p,
 .has-background h1,
@@ -3311,79 +3169,127 @@ a {
 	background-color: #000;
 }
 
-.has-gray-background-color[class] {
-	background-color: #39414d;
+.has-black-background-color[class] [class*=__inner-container] {
+	background-color: #000;
 }
 
 .has-dark-gray-background-color[class] {
 	background-color: #28303d;
 }
 
+.has-dark-gray-background-color[class] [class*=__inner-container] {
+	background-color: #28303d;
+}
+
+.has-gray-background-color[class] {
+	background-color: #39414d;
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+	background-color: #39414d;
+}
+
+.has-light-gray-background-color[class] {
+	background-color: #f0f0f0;
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+	background-color: #f0f0f0;
+}
+
 .has-green-background-color[class] {
 	background-color: #d1e4dd;
 }
 
+.has-green-background-color[class] [class*=__inner-container] {
+	background-color: #d1e4dd;
+}
+
 .has-blue-background-color[class] {
 	background-color: #d1dfe4;
 }
 
+.has-blue-background-color[class] [class*=__inner-container] {
+	background-color: #d1dfe4;
+}
+
 .has-purple-background-color[class] {
 	background-color: #d1d1e4;
 }
 
+.has-purple-background-color[class] [class*=__inner-container] {
+	background-color: #d1d1e4;
+}
+
 .has-red-background-color[class] {
 	background-color: #e4d1d1;
 }
 
+.has-red-background-color[class] [class*=__inner-container] {
+	background-color: #e4d1d1;
+}
+
 .has-orange-background-color[class] {
 	background-color: #e4dad1;
 }
 
+.has-orange-background-color[class] [class*=__inner-container] {
+	background-color: #e4dad1;
+}
+
 .has-yellow-background-color[class] {
 	background-color: #eeeadd;
 }
 
+.has-yellow-background-color[class] [class*=__inner-container] {
+	background-color: #eeeadd;
+}
+
 .has-white-background-color[class] {
 	background-color: #fff;
 }
 
-:not(.has-text-color).has-black-background-color[class] {
-	color: #fff;
+.has-white-background-color[class] [class*=__inner-container] {
+	background-color: #fff;
 }
 
-:not(.has-text-color).has-gray-background-color[class] {
-	color: #fff;
-}
-
-:not(.has-text-color).has-dark-gray-background-color[class] {
-	color: #fff;
-}
-
-:not(.has-text-color).has-green-background-color[class] {
+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-blue-background-color[class] {
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-purple-background-color[class] {
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-red-background-color[class] {
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-orange-background-color[class] {
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-yellow-background-color[class] {
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-white-background-color[class] {
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css
index 96653cebb0..6887591eee 100644
--- a/src/wp-content/themes/twentytwentyone/assets/css/ie.css
+++ b/src/wp-content/themes/twentytwentyone/assets/css/ie.css
@@ -2244,125 +2244,230 @@ a:hover {
  * Button
  */
 .site .button {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
 }
 
 input[type=submit] {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
 }
 
 input[type=reset] {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
 }
 
-.wp-block-search__button {
-	line-height: 1.5;
-	color: #d1e4dd;
+.wp-block-search .wp-block-search__button {
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
 }
 
 .wp-block-button .wp-block-button__link {
-	line-height: 1.5;
-	color: #d1e4dd;
+	border: 3px solid transparent;
+	border-radius: 0;
 	cursor: pointer;
+	display: block;
 	font-weight: 500;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
+	line-height: 1.5;
 	padding: 15px 30px;
+	text-decoration: none;
+}
+
+.wp-block-file a.wp-block-file__button {
+	border: 3px solid transparent;
+	border-radius: 0;
+	cursor: pointer;
+	display: block;
+	font-weight: 500;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-size: 1.25rem;
+	line-height: 1.5;
+	padding: 15px 30px;
+	text-decoration: none;
+}
+
+.site .button:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: #28303d;
+}
+
+.site .button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+input[type=submit]:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+input[type=reset]:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
+}
+
+.site .button:hover,
+.site .button:active,
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=reset]:hover,
+input[type=reset]:active,
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:active,
+.wp-block-file a.wp-block-file__button:hover,
+.wp-block-file a.wp-block-file__button:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
 }
 
 .site .button:focus,
 input[type=submit]:focus,
 input[type=reset]:focus,
-.wp-block-search__button:focus,
-.wp-block-button .wp-block-button__link:focus {
-	background: transparent;
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-file a.wp-block-file__button:focus {
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .site .button:focus {
-	color: #39414d;
-}
-
-.is-dark-theme input[type=submit]:focus {
-	color: #39414d;
-}
-
-.is-dark-theme input[type=reset]:focus {
-	color: #39414d;
-}
-
-.is-dark-theme .wp-block-search__button:focus {
-	color: #39414d;
-}
-
-.is-dark-theme .wp-block-button .wp-block-button__link:focus {
-	color: #39414d;
-}
-
-.site .button:focus:not(.has-background) {
-	color: #39414d;
-}
-
-input[type=submit]:focus:not(.has-background) {
-	color: #39414d;
-}
-
-input[type=reset]:focus:not(.has-background) {
-	color: #39414d;
-}
-
-.wp-block-search__button:focus:not(.has-background) {
-	color: #39414d;
-}
-
-.wp-block-button .wp-block-button__link:focus:not(.has-background) {
-	color: #39414d;
-}
-
 .site .button:disabled {
 	background-color: rgba(255, 255, 255, 0.5);
 	border-color: rgba(255, 255, 255, 0.5);
@@ -2381,7 +2486,7 @@ input[type=reset]:disabled {
 	color: #39414d;
 }
 
-.wp-block-search__button:disabled {
+.wp-block-search .wp-block-search__button:disabled {
 	background-color: rgba(255, 255, 255, 0.5);
 	border-color: rgba(255, 255, 255, 0.5);
 	color: #39414d;
@@ -2393,150 +2498,92 @@ input[type=reset]:disabled {
 	color: #39414d;
 }
 
-.site .button:active {
+.wp-block-file a.wp-block-file__button:disabled {
+	background-color: rgba(255, 255, 255, 0.5);
+	border-color: rgba(255, 255, 255, 0.5);
 	color: #39414d;
-	background-color: #d1e4dd;
-}
-
-input[type=submit]:active {
-	color: #39414d;
-	background-color: #d1e4dd;
-}
-
-input[type=reset]:active {
-	color: #39414d;
-	background-color: #d1e4dd;
-}
-
-.wp-block-search .wp-block-search__button:active {
-	color: #39414d;
-	background-color: #d1e4dd;
-}
-
-.wp-block-file .wp-block-file__button:active {
-	color: #39414d;
-	background-color: #d1e4dd;
-}
-
-.site .button:hover {
-	color: #39414d;
-	background: transparent;
-}
-
-input[type=submit]:hover {
-	color: #39414d;
-	background: transparent;
-}
-
-input[type=reset]:hover {
-	color: #39414d;
-	background: transparent;
-}
-
-.wp-block-search .wp-block-search__button:hover {
-	color: #39414d;
-	background: transparent;
-}
-
-.wp-block-file .wp-block-file__button:hover {
-	color: #39414d;
-	background: transparent;
 }
 
 /**
  * Block Options
  */
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
-	color: #39414d !important;
-	background: transparent !important;
-	border-color: #39414d;
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-	color: #39414d !important;
-	background: transparent !important;
-	border-color: #39414d;
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #d1e4dd;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
-	color: #d1e4dd !important;
-	background: #39414d !important;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link {
-	padding: 15px 30px;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
-	background: transparent;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
-	background: transparent;
-	color: #39414d;
-	border-color: #39414d;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
-	color: currentColor;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
-	color: #fff;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
-	color: #fff;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
-	color: #fff;
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
 	color: #28303d;
 }
 
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color {
-	color: #fff;
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
 }
 
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color {
-	color: #fff;
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: #28303d;
 }
 
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
-	color: #fff;
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
+	border-color: currentColor !important;
+	background-color: transparent !important;
+	color: inherit !important;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
 	border-color: currentColor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:active {
-	color: #d1e4dd !important;
-	background: #39414d !important;
-	border-color: #39414d;
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: #28303d;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+	color: inherit;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: transparent;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover {
+	border-color: transparent !important;
+	background-color: #28303d !important;
 	color: #d1e4dd !important;
-	background: #39414d !important;
-	border-color: #39414d;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color {
-	border-color: #39414d;
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	border-color: transparent !important;
+	background-color: #28303d !important;
+	color: #d1e4dd !important;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
-	border-color: #39414d;
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
+	background-color: #28303d !important;
+	color: #d1e4dd !important;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:focus {
-	color: #39414d !important;
-	background: transparent !important;
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: #28303d !important;
+	color: #d1e4dd !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
+	color: #d1e4dd !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: #d1e4dd !important;
 }
 
 .wp-block-button .is-style-squared .wp-block-button__link {
@@ -2991,64 +3038,16 @@ input[type=reset]:hover {
 	border: 3px solid #28303d;
 }
 
-.wp-block-file a.wp-block-file__button:active {
-	color: #39414d;
-	opacity: inherit;
-}
-
-.wp-block-file a.wp-block-file__button:focus {
-	color: #39414d;
-	opacity: inherit;
-}
-
+.wp-block-file a.wp-block-file__button:active,
+.wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover {
-	color: #39414d;
 	opacity: inherit;
 }
 
-.wp-block-file a.wp-block-file__button:visited {
-	color: #d1e4dd;
-}
-
-.wp-block-file a.wp-block-file__button:visited:hover {
-	color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button {
-	line-height: 1.5;
-	color: #d1e4dd;
-	cursor: pointer;
-	font-weight: 500;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-size: 1.25rem;
-	background-color: #39414d;
-	border-radius: 0;
-	border: 3px solid #39414d;
-	text-decoration: none;
-	padding: 15px 30px;
+.wp-block-file a.wp-block-file__button {
 	display: inline-block;
 }
 
-.wp-block-file .wp-block-file__button:focus {
-	background: transparent;
-	outline-offset: -6px;
-	outline: 2px dotted currentColor;
-}
-
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
-	color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
-	color: #39414d;
-}
-
-.wp-block-file .wp-block-file__button:disabled {
-	background-color: rgba(255, 255, 255, 0.5);
-	border-color: rgba(255, 255, 255, 0.5);
-	color: #39414d;
-}
-
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -4557,37 +4556,15 @@ pre.wp-block-preformatted {
 	border-color: #39414d;
 }
 
-.has-background .wp-block-search .wp-block-search__input,
-[class*=background-color] .wp-block-search .wp-block-search__input,
-[style*=background-color] .wp-block-search .wp-block-search__input,
-.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
-	border-color: currentColor;
-}
-
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
-	border-color: #fff;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
-	border-color: #fff;
-}
-
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
-	border-color: #fff;
+.has-background .wp-block-search .wp-block-search__input {
+	border-color: #28303d !important;
 }
 
 .wp-block-search button.wp-block-search__button {
 	margin-left: 0;
-	background-color: transparent;
-	color: #39414d;
 	line-height: 1;
 }
 
-.wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	color: #d1e4dd;
-}
-
 .wp-block-search button.wp-block-search__button.has-icon {
 	padding: 6px 15px;
 }
@@ -4598,232 +4575,66 @@ pre.wp-block-preformatted {
 	fill: currentColor;
 }
 
-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button {
-	color: #fff;
-	border-color: currentColor;
+.has-background .wp-block-search button.wp-block-search__button:hover {
+	background-color: #d1e4dd !important;
+	color: #28303d !important;
 }
 
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button {
-	color: #fff;
-	border-color: currentColor;
+.has-background .wp-block-search button.wp-block-search__button:active {
+	background-color: #d1e4dd !important;
+	color: #28303d !important;
 }
 
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
-	color: #fff;
-	border-color: currentColor;
+.has-text-color .wp-block-search button.wp-block-search__button:hover {
+	color: #28303d !important;
 }
 
-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #fff;
-	color: #fff;
-}
-
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #fff;
-	color: #fff;
-}
-
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #fff;
-	color: #fff;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
-	color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
-	color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
-	color: #d1e4dd;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
-	border-color: currentColor;
-	color: currentColor;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: #39414d;
-	border-color: #39414d;
-	color: #fff;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
-}
-
-.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
-}
-
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
-}
-
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
-}
-
-.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
-}
-
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
-}
-
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
+.has-text-color .wp-block-search button.wp-block-search__button:active {
+	color: #28303d !important;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	background-color: #fff;
 	border: 3px solid #39414d;
 	border-radius: 0;
+	padding: 3px;
+}
+
+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-color: #28303d !important;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	margin-left: 0;
 	margin-right: 0;
+	padding-left: 10px;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
+	color: #28303d;
+	outline-offset: -2px;
 	outline: 2px dotted #39414d;
-	outline-offset: -5px;
 }
 
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
-	outline-color: currentColor;
-}
-
-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
 	padding: 15px 30px;
 }
 
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #39414d;
-	color: #39414d;
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+	color: #28303d;
 }
 
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #39414d;
-	color: #39414d;
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
+	color: #28303d;
 }
 
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #39414d;
-	color: #39414d;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+	background-color: #28303d;
 	color: #fff;
 }
 
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: #fff;
-}
-
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: #fff;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #d1e4dd;
-	color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #d1e4dd;
-	color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #d1e4dd;
-	color: #d1e4dd;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: #fff;
-}
-
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: #fff;
-}
-
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: #fff;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: #d1e4dd;
-	color: #d1e4dd;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	border-color: #d1e4dd;
-	background-color: #d1e4dd;
-	color: #39414d;
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
+	padding: 6px 15px;
 }
 
 .wp-block-search__button {
@@ -7564,16 +7375,9 @@ h1.page-title {
 
 .widget_search > .search-form .search-submit {
 	margin-left: 0;
-	background-color: transparent;
-	color: #39414d;
 	margin-bottom: 15px;
 }
 
-.widget_search > .search-form .search-submit:hover {
-	background-color: #39414d;
-	color: #d1e4dd;
-}
-
 .widget_rss a.rsswidget .rss-widget-icon {
 	display: none;
 }
@@ -7632,42 +7436,82 @@ h1.page-title {
 	color: #000;
 }
 
+.has-black-color[class] [class*=__inner-container] {
+	color: #000;
+}
+
 .has-gray-color[class] {
 	color: #39414d;
 }
 
+.has-gray-color[class] [class*=__inner-container] {
+	color: #39414d;
+}
+
 .has-dark-gray-color[class] {
 	color: #28303d;
 }
 
+.has-dark-gray-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
 .has-green-color[class] {
 	color: #d1e4dd;
 }
 
+.has-green-color[class] [class*=__inner-container] {
+	color: #d1e4dd;
+}
+
 .has-blue-color[class] {
 	color: #d1dfe4;
 }
 
+.has-blue-color[class] [class*=__inner-container] {
+	color: #d1dfe4;
+}
+
 .has-purple-color[class] {
 	color: #d1d1e4;
 }
 
+.has-purple-color[class] [class*=__inner-container] {
+	color: #d1d1e4;
+}
+
 .has-red-color[class] {
 	color: #e4d1d1;
 }
 
+.has-red-color[class] [class*=__inner-container] {
+	color: #e4d1d1;
+}
+
 .has-orange-color[class] {
 	color: #e4dad1;
 }
 
+.has-orange-color[class] [class*=__inner-container] {
+	color: #e4dad1;
+}
+
 .has-yellow-color[class] {
 	color: #eeeadd;
 }
 
+.has-yellow-color[class] [class*=__inner-container] {
+	color: #eeeadd;
+}
+
 .has-white-color[class] {
 	color: #fff;
 }
 
+.has-white-color[class] [class*=__inner-container] {
+	color: #fff;
+}
+
 .has-background a,
 .has-background p,
 .has-background h1,
@@ -7683,79 +7527,127 @@ h1.page-title {
 	background-color: #000;
 }
 
-.has-gray-background-color[class] {
-	background-color: #39414d;
+.has-black-background-color[class] [class*=__inner-container] {
+	background-color: #000;
 }
 
 .has-dark-gray-background-color[class] {
 	background-color: #28303d;
 }
 
+.has-dark-gray-background-color[class] [class*=__inner-container] {
+	background-color: #28303d;
+}
+
+.has-gray-background-color[class] {
+	background-color: #39414d;
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+	background-color: #39414d;
+}
+
+.has-light-gray-background-color[class] {
+	background-color: #f0f0f0;
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+	background-color: #f0f0f0;
+}
+
 .has-green-background-color[class] {
 	background-color: #d1e4dd;
 }
 
+.has-green-background-color[class] [class*=__inner-container] {
+	background-color: #d1e4dd;
+}
+
 .has-blue-background-color[class] {
 	background-color: #d1dfe4;
 }
 
+.has-blue-background-color[class] [class*=__inner-container] {
+	background-color: #d1dfe4;
+}
+
 .has-purple-background-color[class] {
 	background-color: #d1d1e4;
 }
 
+.has-purple-background-color[class] [class*=__inner-container] {
+	background-color: #d1d1e4;
+}
+
 .has-red-background-color[class] {
 	background-color: #e4d1d1;
 }
 
+.has-red-background-color[class] [class*=__inner-container] {
+	background-color: #e4d1d1;
+}
+
 .has-orange-background-color[class] {
 	background-color: #e4dad1;
 }
 
+.has-orange-background-color[class] [class*=__inner-container] {
+	background-color: #e4dad1;
+}
+
 .has-yellow-background-color[class] {
 	background-color: #eeeadd;
 }
 
+.has-yellow-background-color[class] [class*=__inner-container] {
+	background-color: #eeeadd;
+}
+
 .has-white-background-color[class] {
 	background-color: #fff;
 }
 
-:not(.has-text-color).has-black-background-color[class] {
-	color: #fff;
+.has-white-background-color[class] [class*=__inner-container] {
+	background-color: #fff;
 }
 
-:not(.has-text-color).has-gray-background-color[class] {
-	color: #fff;
-}
-
-:not(.has-text-color).has-dark-gray-background-color[class] {
-	color: #fff;
-}
-
-:not(.has-text-color).has-green-background-color[class] {
+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-blue-background-color[class] {
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-purple-background-color[class] {
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-red-background-color[class] {
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-orange-background-color[class] {
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-yellow-background-color[class] {
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
-:not(.has-text-color).has-white-background-color[class] {
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
+	color: #28303d;
+}
+
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
 	color: #28303d;
 }
 
diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css
index 58d1859664..96082aaf43 100644
--- a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css
+++ b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css
@@ -524,33 +524,50 @@ a:hover {
 }
 
 .wp-block-button__link {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
+	border: var(--button--border-width) solid transparent;
+	border-radius: var(--button--border-radius);
 	cursor: pointer;
+	display: block;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
+	line-height: var(--button--line-height);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	text-decoration: none;
+}
+
+.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-primary));
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-button__link:hover,
+.wp-block-button__link:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
 }
 
 .wp-block-button__link:focus {
-	background: transparent;
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .wp-block-button__link:focus {
-	color: var(--button--color-background);
-}
-
-.wp-block-button__link:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
 .wp-block-button__link:disabled {
 	background-color: var(--global--color-white-50);
 	border-color: var(--global--color-white-50);
@@ -573,69 +590,81 @@ a:hover {
 	margin-bottom: var(--global--spacing-vertical);
 }
 
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-background));
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
-	color: var(--button--color-text-active) !important;
-	background: transparent !important;
-	border-color: var(--button--color-background);
+	border-color: currentColor !important;
+	background-color: transparent !important;
+	color: inherit !important;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-	color: var(--button--color-text-hover) !important;
-	background: transparent !important;
-	border-color: var(--button--color-background);
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link {
-	color: var(--button--color-background);
-	background: transparent;
-	border: var(--button--border-width) solid currentColor;
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
-	background-color: var(--button--color-background);
-	color: var(--button--color-text);
-	border-color: var(--button--color-background);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background {
-	border-color: var(--button--color-background);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
-	background-color: var(--button--color-background) !important;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
-	color: var(--global--color-dark-gray);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
-	color: var(--global--color-dark-gray);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
 	border-color: currentColor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active,
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
-	color: var(--button--color-text) !important;
-	border-color: var(--button--color-background);
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+	color: inherit;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: transparent;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: var(--global--color-primary) !important;
+	border-color: transparent !important;
+	color: var(--global--color-background) !important;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+	color: var(--local--color-background, var(--global--color-background)) !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: var(--local--color-background, var(--global--color-background)) !important;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
 .wp-block-button.is-style-squared {
@@ -848,43 +877,60 @@ a:hover {
 }
 
 .wp-block-file .wp-block-file__button {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
+	border: var(--button--border-width) solid transparent;
+	border-radius: var(--button--border-radius);
 	cursor: pointer;
+	display: block;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
+	line-height: var(--button--line-height);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	text-decoration: none;
 	display: inline-block;
 }
 
+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-primary));
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-file .wp-block-file__button:hover,
+.wp-block-file .wp-block-file__button:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
+}
+
 .wp-block-file .wp-block-file__button:focus {
-	background: transparent;
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
-	color: var(--button--color-background);
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
 .wp-block-file .wp-block-file__button:disabled {
 	background-color: var(--global--color-white-50);
 	border-color: var(--global--color-white-50);
 	color: var(--button--color-text-active);
 }
 
-.wp-block-file .wp-block-file__button:hover {
-	color: var(--button--color-text-hover);
-	background: transparent;
+.wp-block-file .wp-block-file__button:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
 .wp-block-gallery figcaption {
@@ -1747,6 +1793,7 @@ pre.wp-block-preformatted {
 	margin-bottom: calc(var(--global--spacing-vertical) / 3);
 }
 
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
 .wp-block-search .wp-block-search__input {
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
@@ -1758,71 +1805,72 @@ pre.wp-block-preformatted {
 	padding: var(--form--spacing-unit);
 }
 
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
 .is-dark-theme .wp-block-search .wp-block-search__input {
 	background: var(--global--color-white-90);
 }
 
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
-	border-color: var(--form--color-text);
-}
-
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
-	border-color: var(--global--color-white);
+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
+.has-background .wp-block-search .wp-block-search__input {
+	border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search .wp-block-search__button {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
+	border: var(--button--border-width) solid transparent;
+	border-radius: var(--button--border-radius);
 	cursor: pointer;
+	display: block;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
+	line-height: var(--button--line-height);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	text-decoration: none;
 	box-shadow: none;
 	margin-left: 0;
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-primary));
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active {
 	background-color: transparent;
-	color: var(--button--color-text-hover);
+	border-color: currentColor;
+	color: inherit;
 }
 
 .wp-block-search .wp-block-search__button:focus {
-	background: transparent;
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .wp-block-search .wp-block-search__button:focus {
-	color: var(--button--color-background);
-}
-
-.wp-block-search .wp-block-search__button:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
 .wp-block-search .wp-block-search__button:disabled {
 	background-color: var(--global--color-white-50);
 	border-color: var(--global--color-white-50);
 	color: var(--button--color-text-active);
 }
 
-.wp-block-search .wp-block-search__button:hover {
-	color: var(--button--color-text);
-	background-color: var(--button--color-background);
-}
-
 .wp-block-search .wp-block-search__button.has-icon {
 	padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+	display: inherit;
 }
 
 .wp-block-search .wp-block-search__button.has-icon svg {
@@ -1830,119 +1878,50 @@ pre.wp-block-preformatted {
 	height: 40px;
 }
 
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
-	color: var(--global--color-white);
-	border-color: currentColor;
+.has-background .wp-block-search .wp-block-search__button:hover,
+.has-background .wp-block-search .wp-block-search__button:active {
+	background-color: var(--local--color-background, var(--global--color-background)) !important;
+	color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
-	color: var(--global--color-white);
-	background-color: var(--button--color-background);
-	border-color: var(--global--color-white);
+.has-text-color .wp-block-search .wp-block-search__button:hover,
+.has-text-color .wp-block-search .wp-block-search__button:active {
+	color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
-	color: var(--button--color-text);
-	background-color: var(--button--color-background);
+.wp-block-search .wp-block-search__button:focus {
+	outline-offset: inherit;
+	outline: inherit;
 }
 
-.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
-.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
-	color: var(--global--color-white);
-	background-color: var(--form--border-color);
-	border-color: var(--form--border-color);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	padding: var(--form--border-width);
 }
 
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
-	color: var(--form--color-text);
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
-	color: var(--global--color-white);
-	background-color: var(--button--color-text);
-	border-color: var(--button--color-text);
-}
-
-.wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
-.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
 	border: none;
 }
 
+.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
+.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+	color: var(--global--color-dark-gray);
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button,
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
+	color: var(--global--color-dark-gray);
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
+.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
+	background-color: var(--global--color-dark-gray);
+	color: var(--global--color-white);
+}
+
 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: var(--button--color-text);
-	border-color: currentColor;
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: var(--global--color-white);
-	background-color: var(--button--color-text);
-	border-color: var(--button--color-text);
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: var(--button--color-text-hover);
-	border-color: currentColor;
-}
-
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: var(--global--color-white);
-	background-color: var(--button--color-background);
-	border-color: var(--button--color-background);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
-	color: var(--button--color-text);
-	border-color: currentColor;
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
-	color: var(--global--color-white);
-	background-color: var(--button--color-text);
-	border-color: var(--button--color-text);
-}
-
 .wp-block[data-align=center] > * {
 	text-align: center;
 }
@@ -2350,42 +2329,92 @@ a {
 	color: var(--global--color-black);
 }
 
+.has-black-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-black, #000);
+	color: var(--local--color-primary);
+}
+
 .has-gray-color[class] {
 	color: var(--global--color-gray);
 }
 
+.has-gray-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-gray, #000);
+	color: var(--local--color-primary);
+}
+
 .has-dark-gray-color[class] {
 	color: var(--global--color-dark-gray);
 }
 
+.has-dark-gray-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-dark-gray, #000);
+	color: var(--local--color-primary);
+}
+
 .has-green-color[class] {
 	color: var(--global--color-green);
 }
 
+.has-green-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-green, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-blue-color[class] {
 	color: var(--global--color-blue);
 }
 
+.has-blue-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-blue, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-purple-color[class] {
 	color: var(--global--color-purple);
 }
 
+.has-purple-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-purple, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-red-color[class] {
 	color: var(--global--color-red);
 }
 
+.has-red-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-red, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-orange-color[class] {
 	color: var(--global--color-orange);
 }
 
+.has-orange-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-orange, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-yellow-color[class] {
 	color: var(--global--color-yellow);
 }
 
+.has-yellow-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-yellow, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-white-color[class] {
 	color: var(--global--color-white);
 }
 
+.has-white-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-white, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-background a,
 .has-background p,
 .has-background h1,
@@ -2401,56 +2430,133 @@ a {
 	background-color: var(--global--color-black);
 }
 
-.has-gray-background-color[class] {
-	background-color: var(--global--color-gray);
+.has-black-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-black, #000);
+	background-color: var(--local--color-background);
 }
 
 .has-dark-gray-background-color[class] {
 	background-color: var(--global--color-dark-gray);
 }
 
+.has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-dark-gray, #000);
+	background-color: var(--local--color-background);
+}
+
+.has-gray-background-color[class] {
+	background-color: var(--global--color-gray);
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-gray, #000);
+	background-color: var(--local--color-background);
+}
+
+.has-light-gray-background-color[class] {
+	background-color: var(--global--color-light-gray);
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-light-gray, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-green-background-color[class] {
 	background-color: var(--global--color-green);
 }
 
+.has-green-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-green, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-blue-background-color[class] {
 	background-color: var(--global--color-blue);
 }
 
+.has-blue-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-blue, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-purple-background-color[class] {
 	background-color: var(--global--color-purple);
 }
 
+.has-purple-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-purple, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-red-background-color[class] {
 	background-color: var(--global--color-red);
 }
 
+.has-red-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-red, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-orange-background-color[class] {
 	background-color: var(--global--color-orange);
 }
 
+.has-orange-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-orange, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-yellow-background-color[class] {
 	background-color: var(--global--color-yellow);
 }
 
+.has-yellow-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-yellow, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-white-background-color[class] {
 	background-color: var(--global--color-white);
 }
 
-:not(.has-text-color).has-black-background-color[class],
-:not(.has-text-color).has-gray-background-color[class],
-:not(.has-text-color).has-dark-gray-background-color[class] {
-	color: var(--global--color-white);
+.has-white-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-white, #fff);
+	background-color: var(--local--color-background);
 }
 
-:not(.has-text-color).has-green-background-color[class],
-:not(.has-text-color).has-blue-background-color[class],
-:not(.has-text-color).has-purple-background-color[class],
-:not(.has-text-color).has-red-background-color[class],
-:not(.has-text-color).has-orange-background-color[class],
-:not(.has-text-color).has-yellow-background-color[class],
-:not(.has-text-color).has-white-background-color[class] {
-	color: var(--global--color-dark-gray);
+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-background, #fff);
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-primary, #000);
+}
+
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-primary, #000);
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-background, #fff);
 }
 
 .has-purple-to-yellow-gradient-background {
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss
index a48e532a64..eb4fcc6d3b 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss
@@ -20,32 +20,60 @@
 // Button style
 // - Applies button styles to blocks and elements that share them.
 @mixin button-style() {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
+	border: var(--button--border-width) solid transparent;
+	border-radius: var(--button--border-radius);
 	cursor: pointer;
+	display: block;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
+	line-height: var(--button--line-height);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	text-decoration: none;
 
-	&:focus {
-		background: transparent;
-		outline-offset: -6px;
-		outline: 2px dotted currentColor;
+	// Standard Button Color Relationship Logic 
+	&:not(:hover):not(:active) {
 
-		.is-dark-theme & {
-			color: var(--button--color-background);
+		// Text colors
+		&:not(.has-text-color) {
+			color: var(--global--color-background);
+
+			// Nested
+			.has-background & {
+				color: var(--local--color-background, var(--global--color-primary));
+
+				&.has-background {
+					color: var(--global--color-primary);
+				}
+			}
 		}
 
+		// Background-colors
 		&:not(.has-background) {
-			color: var(--button--color-text-hover);
+			background-color: var(--global--color-primary);
+
+			// Nested
+			.has-background & {
+				background-color: var(--local--color-primary, var(--global--color-primary));
+			}
 		}
 	}
 
+	// Hover Button color should match parent element foreground color
+	&:hover,
+	&:active {
+		background-color: transparent;
+		border-color: currentColor;
+		color: inherit;
+	}
+
+	// Focus Button outline color should always match the current text color
+	&:focus {
+		outline-offset: -6px;
+		outline: 2px dotted currentColor;
+	}
+
+	// Disabled Button colors
 	&:disabled {
 		background-color: var(--global--color-white-50);
 		border-color: var(--global--color-white-50);
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
index 8ab5122b7e..f8ec69e130 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
@@ -27,82 +27,105 @@
 	// Target the default and filled button states.
 	&:not(.is-style-outline) {
 
-		.wp-block-button__link {
+		.wp-block-button__link:not(:hover):not(:active) {
 
-			&:active {
-				color: var(--button--color-text-active) !important;
-				background: transparent !important;
-				border-color: var(--button--color-background);
+			// Text colors
+			&:not(.has-text-color) {
+				color: var(--global--color-background);
+
+				// Nested
+				.has-background & {
+					color: var(--local--color-background, var(--global--color-background));
+
+					&.has-background {
+						color: var(--global--color-primary);
+					}
+				}
 			}
 
-			&:hover {
-				color: var(--button--color-text-hover) !important;
-				background: transparent !important;
-				border-color: var(--button--color-background);
+			// Background-colors
+			&:not(.has-background) {
+				background-color: var(--global--color-primary);
+
+				// Nested
+				.has-background & {
+					background-color: var(--local--color-primary, var(--global--color-primary));
+				}
 			}
 		}
+
+		// Hover Button color should match parent element foreground color 
+		.wp-block-button__link:hover,
+		.wp-block-button__link:active {
+			border-color: currentColor !important;
+			background-color: transparent !important;
+			color: inherit !important;
+		}
+		
+		// Remove :focus styles in the editor
+		.wp-block-button__link:focus {
+			outline-offset: inherit;
+			outline: inherit;
+		}
 	}
 
 	// Outline Style.
 	&.is-style-outline {
 
-		.wp-block-button__link {
-			color: var(--button--color-background);
-			background: transparent;
-			border: var(--button--border-width) solid currentColor;
-			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+		.wp-block-button__link:not(:hover):not(:active) {
 
-			&:active,
-			&:hover {
-				background-color: var(--button--color-background);
-				color: var(--button--color-text);
-				border-color: var(--button--color-background);
+			// Border colors
+			&:not(.has-text-color),
+			&:not(.has-background),
+			&.has-background {
+				border-color: currentColor;
+			}
+
+			// Text colors
+			&:not(.has-text-color) {
+				color: var(--global--color-primary);
+
+				// Nested
+				.has-background & {
+					color: var(--local--color-primary, var(--global--color-primary));
+				}
 			}
 
 			&.has-background {
-				border-color: var(--button--color-background);
-
-				&:active,
-				&:hover {
-					background-color: var(--button--color-background) !important;
+				// Nested
+				.has-background &:not(.has-text-color) {
+					color: inherit;
 				}
 			}
 
-			&.has-background:not(.has-text-color) {
-				color: var(--global--color-dark-gray);
+			// Background-colors
+			&:not(.has-background) {
+				background-color: transparent;
+			}
+		}
+
+		// Hover Button color should match default button style 
+		.wp-block-button__link:hover,
+		.wp-block-button__link:active {
+
+			background-color: var(--global--color-primary) !important;
+			border-color: transparent !important;
+			color: var(--global--color-background) !important;
+
+			.has-background & {
+				background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+				color: var(--local--color-background, var(--global--color-background)) !important;
 			}
 
-			&.has-background.has-gray-background-color:not(.has-text-color),
-			&.has-background.has-dark-gray-background-color:not(.has-text-color),
-			&.has-background.has-black-background-color:not(.has-text-color) {
-				color: var(--global--color-white);
+			.has-text-color & {	
+				color: var(--local--color-background, var(--global--color-background)) !important;
 			}
+		}
 
-			.is-dark-theme & {
-
-				&:not(.has-text-color) {
-
-					&.has-background.has-white-background-color,
-					&.has-background.has-green-background-color,
-					&.has-background.has-blue-background-color,
-					&.has-background.has-purple-background-color,
-					&.has-background.has-red-background-color,
-					&.has-background.has-orange-background-color,
-					&.has-background.has-yellow-background-color {
-						color: var(--global--color-dark-gray);
-					}
-				}
-			}
-
-			&.has-text-color {
-				border-color: currentColor;
-
-				&:active,
-				&:hover {
-					color: var(--button--color-text) !important;
-					border-color: var(--button--color-background);
-				}
-			}
+		// Remove :focus styles in the editor
+		.wp-block-button__link:focus {
+			outline-offset: inherit;
+			outline: inherit;
 		}
 	}
 
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss
index 2763994a41..2ef1f2359d 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss
@@ -4,29 +4,13 @@
 .site .button,
 input[type="submit"],
 input[type="reset"],
-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
 	// Extend button style
 	@include button-style();
 }
 
-.site .button,
-input[type="submit"],
-input[type="reset"],
-.wp-block-search .wp-block-search__button,
-.wp-block-file .wp-block-file__button {
-
-	&:active {
-		color: var(--button--color-text-active);
-		background-color: var(--button--color-background-active);
-	}
-
-	&:hover {
-		color: var(--button--color-text-hover);
-		background: transparent;
-	}
-}
-
 /**
  * Block Options
  */
@@ -35,88 +19,91 @@ input[type="reset"],
 	// Target the default and filled button states.
 	&:not(.is-style-outline) {
 
-		.wp-block-button__link {
+		.wp-block-button__link:not(:hover):not(:active) {
 
-			&:active {
-				color: var(--button--color-text-active) !important;
-				background: transparent !important;
-				border-color: var(--button--color-background);
+			// Text colors
+			&:not(.has-text-color) {
+				color: var(--global--color-background);
+
+				// Nested
+				.has-background & {
+					color: var(--local--color-background, var(--global--color-background));
+
+					&.has-background {
+						color: var(--global--color-primary);
+					}
+				}
 			}
 
-			&:hover {
-				color: var(--button--color-text-hover) !important;
-				background: transparent !important;
-				border-color: var(--button--color-background);
-			}
+			// Background-colors
+			&:not(.has-background) {
+				background-color: var(--global--color-primary);
 
-			&:focus {
-				color: var(--button--color-text) !important;
-				background: var(--button--color-background) !important;
+				// Nested
+				.has-background & {
+					background-color: var(--local--color-primary, var(--global--color-primary));
+				}
 			}
 		}
+
+		// Hover Button color should match parent element foreground color 
+		.wp-block-button__link:hover,
+		.wp-block-button__link:active {
+			border-color: currentColor !important;
+			background-color: transparent !important;
+			color: inherit !important;
+		}
 	}
 
 	// Outline Style.
 	&.is-style-outline {
 
-		.wp-block-button__link {
-			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+		.wp-block-button__link:not(:hover):not(:active) {
 
-			&:not(.has-background) {
-				background: transparent;
-			}
-
-			&:not(.has-background):not(.has-text-color) {
-				background: transparent;
-				color: var(--button--color-background);
-				border-color: var(--button--color-background);
-			}
-
-			&.has-background:not(.has-text-color) {
-				color: currentColor;
-			}
-
-			&.has-background.has-gray-background-color:not(.has-text-color),
-			&.has-background.has-dark-gray-background-color:not(.has-text-color),
-			&.has-background.has-black-background-color:not(.has-text-color) {
-				color: var(--global--color-white);
-			}
-
-			.is-dark-theme & {
-
-				&:not(.has-text-color) {
-
-					&.has-background {
-						color: var(--global--color-dark-gray);
-					}
-
-					&.has-background.has-gray-background-color,
-					&.has-background.has-dark-gray-background-color,
-					&.has-background.has-black-background-color {
-						color: var(--global--color-white);
-					}
-				}
-			}
-
-			&.has-text-color,
-			&.has-background.has-text-color {
+			// Border colors
+			&:not(.has-text-color),
+			&:not(.has-background),
+			&.has-background {
 				border-color: currentColor;
 			}
 
-			&:active,
-			&:hover {
-				color: var(--button--color-text) !important;
-				background: var(--button--color-background) !important;
-				border-color: var(--button--color-background);
+			// Text colors
+			&:not(.has-text-color) {
+				color: var(--global--color-primary);
 
-				&.has-text-color {
-					border-color: var(--button--color-background);
+				// Nested
+				.has-background & {
+					color: var(--local--color-primary, var(--global--color-primary));
 				}
 			}
 
-			&:focus {
-				color: var(--button--color-background) !important;
-				background: transparent !important;
+			&.has-background {
+				// Nested
+				.has-background &:not(.has-text-color) {
+					color: inherit;
+				}
+			}
+
+			// Background-colors
+			&:not(.has-background) {
+				background-color: transparent;
+			}
+		}
+
+		.wp-block-button__link:hover,
+		.wp-block-button__link:active {
+
+			border-color: transparent !important;
+			background-color: var(--global--color-primary) !important;
+			color: var(--global--color-background) !important;
+
+			.has-background & {
+				background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+				color: var(--local--color-background, var(--global--color-background)) !important;
+			}
+
+			.has-text-color & {	
+				color: var(--local--color-background, var(--global--color-background)) !important;
 			}
 		}
 	}
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss
index 4029851e1d..b3a19479a9 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss
@@ -15,10 +15,11 @@
 		// Extend button style
 		@include button-style();
 		display: inline-block;
-
-		&:hover {
-			color: var(--button--color-text-hover);
-			background: transparent;
+		
+		// Remove :focus styles in the editor
+		&:focus {
+			outline-offset: inherit;
+			outline: inherit;
 		}
 	}
 }
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss
index faf7798aab..5426f8a1a1 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss
@@ -4,21 +4,10 @@
 	a.wp-block-file__button:active,
 	a.wp-block-file__button:focus,
 	a.wp-block-file__button:hover {
-		color: var(--button--color-text-hover);
 		opacity: inherit;
 	}
 
-	a.wp-block-file__button:visited {
-		color: var(--button--color-text);
-
-		&:hover {
-			color: var(--button--color-text-hover);
-		}
-	}
-
-	.wp-block-file__button {
-		// Extend button style
-		@include button-style();
+	a.wp-block-file__button {
 		display: inline-block;
 	}
 }
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss
index c895e65a4b..758cd94f24 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss
@@ -7,6 +7,7 @@
 		margin-bottom: calc(var(--global--spacing-vertical) / 3);
 	}
 
+	&.wp-block-search__button-inside .wp-block-search__inside-wrapper,
 	.wp-block-search__input {
 		border: var(--form--border-width) solid var(--form--border-color);
 		border-radius: var(--form--border-radius);
@@ -21,23 +22,8 @@
 			background: var(--global--color-white-90);
 		}
 
-		.has-background.has-white-background-color &,
-		.has-background.has-green-background-color &,
-		.has-background.has-blue-background-color &,
-		.has-background.has-purple-background-color &,
-		.has-background.has-red-background-color &,
-		.has-background.has-orange-background-color &,
-		.has-background.has-yellow-background-color & {
-
-			.is-dark-theme & {
-				border-color: var(--form--color-text);
-			}
-		}
-
-		.has-background.has-gray-background-color &,
-		.has-background.has-dark-gray-background-color &,
-		.has-background.has-black-background-color & {
-			border-color: var(--global--color-white);
+		.has-background & {
+			border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 		}
 	}
 
@@ -45,16 +31,10 @@
 		@include button-style();
 		box-shadow: none;
 		margin-left: 0;
-		background-color: transparent;
-		color: var(--button--color-text-hover);
-
-		&:hover {
-			color: var(--button--color-text);
-			background-color: var(--button--color-background);
-		}
 
 		&.has-icon {
 			padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
+			display: inherit;
 
 			svg {
 				width: 40px;
@@ -62,109 +42,60 @@
 			}
 		}
 
-		.has-background.has-gray-background-color &,
-		.has-background.has-dark-gray-background-color &,
-		.has-background.has-black-background-color & {
-			color: var(--global--color-white);
-			border-color: currentColor;
+		&:hover,
+		&:active {
 
-			&:hover {
-				color: var(--global--color-white);
-				background-color: var(--button--color-background);
-				border-color: var(--global--color-white);
+			.has-background & {
+				background-color: var(--local--color-background, var(--global--color-background)) !important;
+				color: var(--local--color-primary, var(--global--color-primary)) !important;
+			}
 
-				.is-dark-theme & {
-					color: var(--button--color-text);
-					background-color: var(--button--color-background);
-				}
+			.has-text-color & {
+				color: var(--local--color-primary, var(--global--color-primary)) !important;
 			}
 		}
 
-		.has-background.has-white-background-color &,
-		.has-background.has-green-background-color &,
-		.has-background.has-blue-background-color &,
-		.has-background.has-purple-background-color &,
-		.has-background.has-red-background-color &,
-		.has-background.has-orange-background-color &,
-		.has-background.has-yellow-background-color & {
-
-			&:hover {
-				color: var(--global--color-white);
-				background-color: var(--form--border-color);
-				border-color: var(--form--border-color);
-			}
-
-			.is-dark-theme & {
-				color: var(--form--color-text);
-				border-color: currentColor;
-
-				&:hover {
-					color: var(--global--color-white);
-					background-color: var(--button--color-text);
-					border-color: var(--button--color-text);
-				}
-			}
+		// Remove :focus styles in the editor
+		&:focus {
+			outline-offset: inherit;
+			outline: inherit;
 		}
 	}
 
 	&.wp-block-search__button-inside {
 
-		.wp-block-search__input,
-		.has-background.has-white-background-color & .wp-block-search__input,
-		.has-background.has-green-background-color & .wp-block-search__input,
-		.has-background.has-blue-background-color & .wp-block-search__input,
-		.has-background.has-purple-background-color & .wp-block-search__input,
-		.has-background.has-red-background-color & .wp-block-search__input,
-		.has-background.has-orange-background-color & .wp-block-search__input,
-		.has-background.has-yellow-background-color & .wp-block-search__input {
+		.wp-block-search__inside-wrapper {
+			padding: var(--form--border-width);
+		}
+
+		.wp-block-search__input {
 			border: none;
 		}
 
-		&.wp-block-search__text-button {
+		&.wp-block-search__text-button,
+		&.wp-block-search__icon-button {
 
 			.wp-block-search__button {
-				// Match the text button size with the icon button.
-				padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-			}
-		}
-
-		.wp-block-search__button {
-
-			.is-dark-theme & {
-				color: var(--button--color-text);
-				border-color: currentColor;
-
+				// Search button always needs black contrast against white form background
 				&:hover {
-					color: var(--global--color-white);
-					background-color: var(--button--color-text);
-					border-color: var(--button--color-text);
-				}
-			}
-
-			.has-background.has-gray-background-color &,
-			.has-background.has-dark-gray-background-color &,
-			.has-background.has-black-background-color & {
-				color: var(--button--color-text-hover);
-				border-color: currentColor;
-
-				&:hover {
-					color: var(--global--color-white);
-					background-color: var(--button--color-background);
-					border-color: var(--button--color-background);
+					color: var(--global--color-dark-gray);
 				}
 
 				.is-dark-theme & {
-					color: var(--button--color-text);
-					border-color: currentColor;
+					color: var(--global--color-dark-gray);
 
 					&:hover {
+						background-color: var(--global--color-dark-gray);
 						color: var(--global--color-white);
-						background-color: var(--button--color-text);
-						border-color: var(--button--color-text);
 					}
 				}
 			}
 		}
+
+		&.wp-block-search__text-button .wp-block-search__button {
+			// Match the text button size with the icon button.
+			padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+		}
 	}
 }
 
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss
index f733715aa1..46899b5f0c 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss
@@ -28,31 +28,15 @@
 			border-color: var(--form--border-color);
 		}
 
-		.has-background &,
-		[class*="background-color"] &,
-		[style*="background-color"] &,
-		.wp-block-cover[style*="background-image"] & {
-			border-color: currentColor;
-		}
-
-		.has-background.has-gray-background-color &,
-		.has-background.has-dark-gray-background-color &,
-		.has-background.has-black-background-color & {
-			border-color: var(--global--color-white);
+		.has-background & {
+			border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 		}
 	}
 
 	button.wp-block-search__button {
 		margin-left: 0;
-		background-color: transparent;
-		color: var(--button--color-text-hover);
 		line-height: 1;
 
-		&:hover {
-			background-color: var(--button--color-background);
-			color: var(--button--color-text);
-		}
-
 		&.has-icon {
 			padding: 6px calc(0.5 * var(--button--padding-horizontal));
 
@@ -63,43 +47,16 @@
 			}
 		}
 
-		.has-background.has-gray-background-color &,
-		.has-background.has-dark-gray-background-color &,
-		.has-background.has-black-background-color & {
-			color: var(--global--color-white);
-			border-color: currentColor;
+		&:hover,
+		&:active {
 
-			&:hover {
-				background-color: var(--button--color-background);
-				border-color: var(--global--color-white);
-				color: var(--global--color-white);
-
-				.is-dark-theme & {
-					color: var(--button--color-text);
-				}
+			.has-background & {
+				background-color: var(--local--color-background, var(--global--color-background)) !important;
+				color: var(--local--color-primary, var(--global--color-primary)) !important;
 			}
-		}
 
-		.has-background.has-white-background-color &,
-		.has-background.has-green-background-color &,
-		.has-background.has-blue-background-color &,
-		.has-background.has-purple-background-color &,
-		.has-background.has-red-background-color &,
-		.has-background.has-orange-background-color &,
-		.has-background.has-yellow-background-color & {
-			border-color: currentColor;
-			color: currentColor;
-
-			&:hover {
-				background-color: var(--form--border-color);
-				border-color: var(--form--border-color);
-				color: var(--global--color-white);
-
-				.is-dark-theme & {
-					border-color: var(--button--color-text);
-					background-color: var(--button--color-text);
-					color: var(--button--color-background);
-				}
+			.has-text-color & {
+				color: var(--local--color-primary, var(--global--color-primary)) !important;
 			}
 		}
 	}
@@ -110,59 +67,44 @@
 			background-color: var(--global--color-white);
 			border: var(--form--border-width) solid var(--form--border-color);
 			border-radius: var(--form--border-radius);
+			padding: var(--form--border-width);
+
+			.has-background & {
+				border-color: var(--local--color-primary, var(--global--color-primary)) !important;
+			}
 
 			.wp-block-search__input {
+				margin-left: 0;
 				margin-right: 0;
+				padding-left: var(--form--spacing-unit);
 
+				// Add outline for focus styles to override default
 				&:focus {
+					color: var(--form--color-text);
+					outline-offset: -2px;
 					outline: 2px dotted var(--form--border-color);
-					outline-offset: -5px;
-
-					.is-dark-theme & {
-						outline-color: currentColor;
-					}
 				}
 			}
-		}
-
-		&.wp-block-search__text-button {
 
 			button.wp-block-search__button {
-				// Match the text button size with the icon button.
 				padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-			}
-		}
-
-		button.wp-block-search__button {
-
-			.has-background.has-gray-background-color &,
-			.has-background.has-dark-gray-background-color &,
-			.has-background.has-black-background-color & {
-				border-color: var(--button--color-background);
-				color: var(--button--color-background);
 
+				// Search button always needs black contrast against white form background
 				&:hover {
-					color: var(--global--color-white);
+					color: var(--global--color-dark-gray);
 				}
 
 				.is-dark-theme & {
-					border-color: var(--button--color-text);
-					color: var(--button--color-text);
+					color: var(--global--color-dark-gray);
 
 					&:hover {
+						background-color: var(--global--color-dark-gray);
 						color: var(--global--color-white);
 					}
 				}
-			}
 
-			.is-dark-theme & {
-				border-color: var(--button--color-text);
-				color: var(--button--color-text);
-
-				&:hover {
-					border-color: var(--button--color-text);
-					background-color: var(--button--color-text);
-					color: var(--button--color-background);
+				&.has-icon {
+					padding: 6px calc(0.5 * var(--button--padding-horizontal));
 				}
 			}
 		}
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss
index 4dd3c3f6e8..2c9e9ccc04 100755
--- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss
@@ -117,14 +117,7 @@
 
 	.search-submit {
 		margin-left: 0;
-		background-color: transparent;
-		color: var(--button--color-text-hover);
 		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
-
-		&:hover {
-			background-color: var(--button--color-background);
-			color: var(--button--color-text);
-		}
 	}
 }
 
diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
index b5e5e24d1b..b681bdb352 100644
--- a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
+++ b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
@@ -1,42 +1,92 @@
 // Gutenberg text color options
 
 .has-black-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-black, #000000);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-black);
 }
 
 .has-gray-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-gray, #000000);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-gray);
 }
 
 .has-dark-gray-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-dark-gray, #000000);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-dark-gray);
 }
 
 .has-green-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-green, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-green);
 }
 
 .has-blue-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-blue, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-blue);
 }
 
 .has-purple-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-purple, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-purple);
 }
 
 .has-red-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-red, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-red);
 }
 
 .has-orange-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-orange, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-orange);
 }
 
 .has-yellow-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-yellow, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-yellow);
 }
 
 .has-white-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-primary: var(--global--color-white, #FFFFFF);
+		color: var(--local--color-primary);
+	}
 	color: var(--global--color-white);
 }
 
@@ -56,51 +106,118 @@
 }
 
 .has-black-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-black, #000000);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-black);
 }
 
-.has-gray-background-color[class] {
-	background-color: var(--global--color-gray);
-}
-
 .has-dark-gray-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-dark-gray, #000000);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-dark-gray);
 }
 
+.has-gray-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-gray, #000000);
+		background-color: var(--local--color-background);
+	}
+	background-color: var(--global--color-gray);
+}
+
+.has-light-gray-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-light-gray, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
+	background-color: var(--global--color-light-gray);
+}
+
 .has-green-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-green, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-green);
 }
 
 .has-blue-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-blue, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-blue);
 }
 
 .has-purple-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-purple, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-purple);
 }
 
 .has-red-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-red, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-red);
 }
 
 .has-orange-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-orange, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-orange);
 }
 
 .has-yellow-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-yellow, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-yellow);
 }
 
 .has-white-background-color[class] {
+	// Localize CSS-variables to limit relationship scope
+	[class*="__inner-container"] {
+		--local--color-background: var(--global--color-white, #FFFFFF);
+		background-color: var(--local--color-background);
+	}
 	background-color: var(--global--color-white);
 }
 
-:not(.has-text-color) {
+.has-background:not(.has-text-color) {
 
 	&.has-black-background-color[class],
 	&.has-gray-background-color[class],
 	&.has-dark-gray-background-color[class] {
-		color: var(--global--color-white);
+		// Localize CSS-variables to limit relationship scope
+		[class*="__inner-container"] {
+			--local--color-primary: var(--global--color-background, #FFFFFF);
+			// Reverse the local foreground color in darkmode
+			.is-dark-theme & {
+				--local--color-primary: var(--global--color-primary, #000000);
+			}
+			color: var(--local--color-primary, var(--global--color-primary));
+		}
 	}
 
 	&.has-green-background-color[class],
@@ -110,7 +227,15 @@
 	&.has-orange-background-color[class],
 	&.has-yellow-background-color[class],
 	&.has-white-background-color[class] {
-		color: var(--global--color-dark-gray);
+		// Localize CSS-variables to limit relationship scope
+		[class*="__inner-container"] {
+			--local--color-primary: var(--global--color-primary, #000000);
+			// Reverse the local foreground color in darkmode
+			.is-dark-theme & {
+				--local--color-primary: var(--global--color-background, #FFFFFF);
+			}
+			color: var(--local--color-primary, var(--global--color-primary));
+		}
 	}
 }
 
diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css
index bdcdc6c873..321c3733b3 100644
--- a/src/wp-content/themes/twentytwentyone/style-rtl.css
+++ b/src/wp-content/themes/twentytwentyone/style-rtl.css
@@ -1707,149 +1707,172 @@ a:hover {
 .site .button,
 input[type=submit],
 input[type=reset],
-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
+	border: var(--button--border-width) solid transparent;
+	border-radius: var(--button--border-radius);
 	cursor: pointer;
+	display: block;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
+	line-height: var(--button--line-height);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	text-decoration: none;
+}
+
+.site .button:not(:hover):not(:active):not(.has-text-color),
+input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-primary));
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.site .button:not(:hover):not(:active):not(.has-background),
+input[type=submit]:not(:hover):not(:active):not(.has-background),
+input[type=reset]:not(:hover):not(:active):not(.has-background),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-background),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.site .button:hover,
+.site .button:active,
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=reset]:hover,
+input[type=reset]:active,
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:active,
+.wp-block-file a.wp-block-file__button:hover,
+.wp-block-file a.wp-block-file__button:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
 }
 
 .site .button:focus,
 input[type=submit]:focus,
 input[type=reset]:focus,
-.wp-block-search__button:focus,
-.wp-block-button .wp-block-button__link:focus {
-	background: transparent;
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-file a.wp-block-file__button:focus {
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .site .button:focus,
-.is-dark-theme input[type=submit]:focus,
-.is-dark-theme input[type=reset]:focus,
-.is-dark-theme .wp-block-search__button:focus,
-.is-dark-theme .wp-block-button .wp-block-button__link:focus {
-	color: var(--button--color-background);
-}
-
-.site .button:focus:not(.has-background),
-input[type=submit]:focus:not(.has-background),
-input[type=reset]:focus:not(.has-background),
-.wp-block-search__button:focus:not(.has-background),
-.wp-block-button .wp-block-button__link:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
 .site .button:disabled,
 input[type=submit]:disabled,
 input[type=reset]:disabled,
-.wp-block-search__button:disabled,
-.wp-block-button .wp-block-button__link:disabled {
+.wp-block-search .wp-block-search__button:disabled,
+.wp-block-button .wp-block-button__link:disabled,
+.wp-block-file a.wp-block-file__button:disabled {
 	background-color: var(--global--color-white-50);
 	border-color: var(--global--color-white-50);
 	color: var(--button--color-text-active);
 }
 
-.site .button:active,
-input[type=submit]:active,
-input[type=reset]:active,
-.wp-block-search .wp-block-search__button:active,
-.wp-block-file .wp-block-file__button:active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
-}
-
-.site .button:hover,
-input[type=submit]:hover,
-input[type=reset]:hover,
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-file .wp-block-file__button:hover {
-	color: var(--button--color-text-hover);
-	background: transparent;
-}
-
 /**
  * Block Options
  */
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-background));
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
-	color: var(--button--color-text-active) !important;
-	background: transparent !important;
-	border-color: var(--button--color-background);
+	border-color: currentColor !important;
+	background-color: transparent !important;
+	color: inherit !important;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-	color: var(--button--color-text-hover) !important;
-	background: transparent !important;
-	border-color: var(--button--color-background);
-}
-
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
-	color: var(--button--color-text) !important;
-	background: var(--button--color-background) !important;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link {
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
-	background: transparent;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
-	background: transparent;
-	color: var(--button--color-background);
-	border-color: var(--button--color-background);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
-	color: currentColor;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
-	color: var(--global--color-dark-gray);
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
-	color: var(--global--color-white);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
 	border-color: currentColor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
-	color: var(--button--color-text) !important;
-	background: var(--button--color-background) !important;
-	border-color: var(--button--color-background);
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-primary);
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
-	border-color: var(--button--color-background);
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-primary, var(--global--color-primary));
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:focus {
-	color: var(--button--color-background) !important;
-	background: transparent !important;
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+	color: inherit;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: transparent;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	border-color: transparent !important;
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background) !important;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+	color: var(--local--color-background, var(--global--color-background)) !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: var(--local--color-background, var(--global--color-background)) !important;
 }
 
 .wp-block-button .is-style-squared .wp-block-button__link {
@@ -2118,53 +2141,13 @@ input[type=reset]:hover,
 .wp-block-file a.wp-block-file__button:active,
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover {
-	color: var(--button--color-text-hover);
 	opacity: inherit;
 }
 
-.wp-block-file a.wp-block-file__button:visited {
-	color: var(--button--color-text);
-}
-
-.wp-block-file a.wp-block-file__button:visited:hover {
-	color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
-	cursor: pointer;
-	font-weight: var(--button--font-weight);
-	font-family: var(--button--font-family);
-	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+.wp-block-file a.wp-block-file__button {
 	display: inline-block;
 }
 
-.wp-block-file .wp-block-file__button:focus {
-	background: transparent;
-	outline-offset: -6px;
-	outline: 2px dotted currentColor;
-}
-
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
-	color: var(--button--color-background);
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button:disabled {
-	background-color: var(--global--color-white-50);
-	border-color: var(--global--color-white-50);
-	color: var(--button--color-text-active);
-}
-
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -3266,31 +3249,15 @@ pre.wp-block-preformatted {
 	border-color: var(--form--border-color);
 }
 
-.has-background .wp-block-search .wp-block-search__input,
-[class*=background-color] .wp-block-search .wp-block-search__input,
-[style*=background-color] .wp-block-search .wp-block-search__input,
-.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
-	border-color: currentColor;
-}
-
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
-	border-color: var(--global--color-white);
+.has-background .wp-block-search .wp-block-search__input {
+	border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search button.wp-block-search__button {
 	margin-right: 0;
-	background-color: transparent;
-	color: var(--button--color-text-hover);
 	line-height: 1;
 }
 
-.wp-block-search button.wp-block-search__button:hover {
-	background-color: var(--button--color-background);
-	color: var(--button--color-text);
-}
-
 .wp-block-search button.wp-block-search__button.has-icon {
 	padding: 6px calc(0.5 * var(--button--padding-horizontal));
 }
@@ -3301,120 +3268,59 @@ pre.wp-block-preformatted {
 	fill: currentColor;
 }
 
-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
-	color: var(--global--color-white);
-	border-color: currentColor;
+.has-background .wp-block-search button.wp-block-search__button:hover,
+.has-background .wp-block-search button.wp-block-search__button:active {
+	background-color: var(--local--color-background, var(--global--color-background)) !important;
+	color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: var(--button--color-background);
-	border-color: var(--global--color-white);
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
-	color: var(--button--color-text);
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
-	border-color: currentColor;
-	color: currentColor;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: var(--form--border-color);
-	border-color: var(--form--border-color);
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: var(--button--color-text);
-	background-color: var(--button--color-text);
-	color: var(--button--color-background);
+.has-text-color .wp-block-search button.wp-block-search__button:hover,
+.has-text-color .wp-block-search button.wp-block-search__button:active {
+	color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	background-color: var(--global--color-white);
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
+	padding: var(--form--border-width);
+}
+
+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	margin-right: 0;
 	margin-left: 0;
+	padding-right: var(--form--spacing-unit);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
+	color: var(--form--color-text);
+	outline-offset: -2px;
 	outline: 2px dotted var(--form--border-color);
-	outline-offset: -5px;
 }
 
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
-	outline-color: currentColor;
-}
-
-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: var(--button--color-background);
-	color: var(--button--color-background);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+	color: var(--global--color-dark-gray);
 }
 
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
+	color: var(--global--color-dark-gray);
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+	background-color: var(--global--color-dark-gray);
 	color: var(--global--color-white);
 }
 
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: var(--button--color-text);
-	color: var(--button--color-text);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: var(--button--color-text);
-	color: var(--button--color-text);
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	border-color: var(--button--color-text);
-	background-color: var(--button--color-text);
-	color: var(--button--color-background);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
+	padding: 6px calc(0.5 * var(--button--padding-horizontal));
 }
 
 .wp-block-search__button {
@@ -5562,16 +5468,9 @@ h1.page-title {
 
 .widget_search > .search-form .search-submit {
 	margin-right: 0;
-	background-color: transparent;
-	color: var(--button--color-text-hover);
 	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 }
 
-.widget_search > .search-form .search-submit:hover {
-	background-color: var(--button--color-background);
-	color: var(--button--color-text);
-}
-
 .widget_rss a.rsswidget .rss-widget-icon {
 	display: none;
 }
@@ -5630,42 +5529,92 @@ h1.page-title {
 	color: var(--global--color-black);
 }
 
+.has-black-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-black, #000);
+	color: var(--local--color-primary);
+}
+
 .has-gray-color[class] {
 	color: var(--global--color-gray);
 }
 
+.has-gray-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-gray, #000);
+	color: var(--local--color-primary);
+}
+
 .has-dark-gray-color[class] {
 	color: var(--global--color-dark-gray);
 }
 
+.has-dark-gray-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-dark-gray, #000);
+	color: var(--local--color-primary);
+}
+
 .has-green-color[class] {
 	color: var(--global--color-green);
 }
 
+.has-green-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-green, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-blue-color[class] {
 	color: var(--global--color-blue);
 }
 
+.has-blue-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-blue, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-purple-color[class] {
 	color: var(--global--color-purple);
 }
 
+.has-purple-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-purple, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-red-color[class] {
 	color: var(--global--color-red);
 }
 
+.has-red-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-red, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-orange-color[class] {
 	color: var(--global--color-orange);
 }
 
+.has-orange-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-orange, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-yellow-color[class] {
 	color: var(--global--color-yellow);
 }
 
+.has-yellow-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-yellow, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-white-color[class] {
 	color: var(--global--color-white);
 }
 
+.has-white-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-white, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-background a,
 .has-background p,
 .has-background h1,
@@ -5681,56 +5630,133 @@ h1.page-title {
 	background-color: var(--global--color-black);
 }
 
-.has-gray-background-color[class] {
-	background-color: var(--global--color-gray);
+.has-black-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-black, #000);
+	background-color: var(--local--color-background);
 }
 
 .has-dark-gray-background-color[class] {
 	background-color: var(--global--color-dark-gray);
 }
 
+.has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-dark-gray, #000);
+	background-color: var(--local--color-background);
+}
+
+.has-gray-background-color[class] {
+	background-color: var(--global--color-gray);
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-gray, #000);
+	background-color: var(--local--color-background);
+}
+
+.has-light-gray-background-color[class] {
+	background-color: var(--global--color-light-gray);
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-light-gray, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-green-background-color[class] {
 	background-color: var(--global--color-green);
 }
 
+.has-green-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-green, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-blue-background-color[class] {
 	background-color: var(--global--color-blue);
 }
 
+.has-blue-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-blue, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-purple-background-color[class] {
 	background-color: var(--global--color-purple);
 }
 
+.has-purple-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-purple, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-red-background-color[class] {
 	background-color: var(--global--color-red);
 }
 
+.has-red-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-red, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-orange-background-color[class] {
 	background-color: var(--global--color-orange);
 }
 
+.has-orange-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-orange, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-yellow-background-color[class] {
 	background-color: var(--global--color-yellow);
 }
 
+.has-yellow-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-yellow, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-white-background-color[class] {
 	background-color: var(--global--color-white);
 }
 
-:not(.has-text-color).has-black-background-color[class],
-:not(.has-text-color).has-gray-background-color[class],
-:not(.has-text-color).has-dark-gray-background-color[class] {
-	color: var(--global--color-white);
+.has-white-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-white, #fff);
+	background-color: var(--local--color-background);
 }
 
-:not(.has-text-color).has-green-background-color[class],
-:not(.has-text-color).has-blue-background-color[class],
-:not(.has-text-color).has-purple-background-color[class],
-:not(.has-text-color).has-red-background-color[class],
-:not(.has-text-color).has-orange-background-color[class],
-:not(.has-text-color).has-yellow-background-color[class],
-:not(.has-text-color).has-white-background-color[class] {
-	color: var(--global--color-dark-gray);
+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-background, #fff);
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-primary, #000);
+}
+
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-primary, #000);
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-background, #fff);
 }
 
 .has-purple-to-yellow-gradient-background {
diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css
index a0ef21ad16..95f818baf2 100644
--- a/src/wp-content/themes/twentytwentyone/style.css
+++ b/src/wp-content/themes/twentytwentyone/style.css
@@ -1717,149 +1717,172 @@ a:hover {
 .site .button,
 input[type=submit],
 input[type=reset],
-.wp-block-search__button,
-.wp-block-button .wp-block-button__link {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
+.wp-block-search .wp-block-search__button,
+.wp-block-button .wp-block-button__link,
+.wp-block-file a.wp-block-file__button {
+	border: var(--button--border-width) solid transparent;
+	border-radius: var(--button--border-radius);
 	cursor: pointer;
+	display: block;
 	font-weight: var(--button--font-weight);
 	font-family: var(--button--font-family);
 	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
+	line-height: var(--button--line-height);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+	text-decoration: none;
+}
+
+.site .button:not(:hover):not(:active):not(.has-text-color),
+input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-primary));
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.site .button:not(:hover):not(:active):not(.has-background),
+input[type=submit]:not(:hover):not(:active):not(.has-background),
+input[type=reset]:not(:hover):not(:active):not(.has-background),
+.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .site .button:not(:hover):not(:active):not(.has-background),
+.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
+.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.site .button:hover,
+.site .button:active,
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=reset]:hover,
+input[type=reset]:active,
+.wp-block-search .wp-block-search__button:hover,
+.wp-block-search .wp-block-search__button:active,
+.wp-block-button .wp-block-button__link:hover,
+.wp-block-button .wp-block-button__link:active,
+.wp-block-file a.wp-block-file__button:hover,
+.wp-block-file a.wp-block-file__button:active {
+	background-color: transparent;
+	border-color: currentColor;
+	color: inherit;
 }
 
 .site .button:focus,
 input[type=submit]:focus,
 input[type=reset]:focus,
-.wp-block-search__button:focus,
-.wp-block-button .wp-block-button__link:focus {
-	background: transparent;
+.wp-block-search .wp-block-search__button:focus,
+.wp-block-button .wp-block-button__link:focus,
+.wp-block-file a.wp-block-file__button:focus {
 	outline-offset: -6px;
 	outline: 2px dotted currentColor;
 }
 
-.is-dark-theme .site .button:focus,
-.is-dark-theme input[type=submit]:focus,
-.is-dark-theme input[type=reset]:focus,
-.is-dark-theme .wp-block-search__button:focus,
-.is-dark-theme .wp-block-button .wp-block-button__link:focus {
-	color: var(--button--color-background);
-}
-
-.site .button:focus:not(.has-background),
-input[type=submit]:focus:not(.has-background),
-input[type=reset]:focus:not(.has-background),
-.wp-block-search__button:focus:not(.has-background),
-.wp-block-button .wp-block-button__link:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
 .site .button:disabled,
 input[type=submit]:disabled,
 input[type=reset]:disabled,
-.wp-block-search__button:disabled,
-.wp-block-button .wp-block-button__link:disabled {
+.wp-block-search .wp-block-search__button:disabled,
+.wp-block-button .wp-block-button__link:disabled,
+.wp-block-file a.wp-block-file__button:disabled {
 	background-color: var(--global--color-white-50);
 	border-color: var(--global--color-white-50);
 	color: var(--button--color-text-active);
 }
 
-.site .button:active,
-input[type=submit]:active,
-input[type=reset]:active,
-.wp-block-search .wp-block-search__button:active,
-.wp-block-file .wp-block-file__button:active {
-	color: var(--button--color-text-active);
-	background-color: var(--button--color-background-active);
-}
-
-.site .button:hover,
-input[type=submit]:hover,
-input[type=reset]:hover,
-.wp-block-search .wp-block-search__button:hover,
-.wp-block-file .wp-block-file__button:hover {
-	color: var(--button--color-text-hover);
-	background: transparent;
-}
-
 /**
  * Block Options
  */
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-background);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-background, var(--global--color-background));
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
+	color: var(--global--color-primary);
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--global--color-primary);
+}
+
+.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
-	color: var(--button--color-text-active) !important;
-	background: transparent !important;
-	border-color: var(--button--color-background);
+	border-color: currentColor !important;
+	background-color: transparent !important;
+	color: inherit !important;
 }
 
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-	color: var(--button--color-text-hover) !important;
-	background: transparent !important;
-	border-color: var(--button--color-background);
-}
-
-.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
-	color: var(--button--color-text) !important;
-	background: var(--button--color-background) !important;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link {
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
-	background: transparent;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
-	background: transparent;
-	color: var(--button--color-background);
-	border-color: var(--button--color-background);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
-	color: currentColor;
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
-	color: var(--global--color-dark-gray);
-}
-
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
-.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
-	color: var(--global--color-white);
-}
-
-.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
 	border-color: currentColor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:active,
-.wp-block-button.is-style-outline .wp-block-button__link:hover {
-	color: var(--button--color-text) !important;
-	background: var(--button--color-background) !important;
-	border-color: var(--button--color-background);
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--global--color-primary);
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
-.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
-	border-color: var(--button--color-background);
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
+	color: var(--local--color-primary, var(--global--color-primary));
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:focus {
-	color: var(--button--color-background) !important;
-	background: transparent !important;
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
+	color: inherit;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
+	background-color: transparent;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:hover,
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	border-color: transparent !important;
+	background-color: var(--global--color-primary) !important;
+	color: var(--global--color-background) !important;
+}
+
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
+	background-color: var(--local--color-primary, var(--global--color-primary)) !important;
+	color: var(--local--color-background, var(--global--color-background)) !important;
+}
+
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
+.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: var(--local--color-background, var(--global--color-background)) !important;
 }
 
 .wp-block-button .is-style-squared .wp-block-button__link {
@@ -2128,53 +2151,13 @@ input[type=reset]:hover,
 .wp-block-file a.wp-block-file__button:active,
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:hover {
-	color: var(--button--color-text-hover);
 	opacity: inherit;
 }
 
-.wp-block-file a.wp-block-file__button:visited {
-	color: var(--button--color-text);
-}
-
-.wp-block-file a.wp-block-file__button:visited:hover {
-	color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button {
-	line-height: var(--button--line-height);
-	color: var(--button--color-text);
-	cursor: pointer;
-	font-weight: var(--button--font-weight);
-	font-family: var(--button--font-family);
-	font-size: var(--button--font-size);
-	background-color: var(--button--color-background);
-	border-radius: var(--button--border-radius);
-	border: var(--button--border-width) solid var(--button--color-background);
-	text-decoration: none;
-	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+.wp-block-file a.wp-block-file__button {
 	display: inline-block;
 }
 
-.wp-block-file .wp-block-file__button:focus {
-	background: transparent;
-	outline-offset: -6px;
-	outline: 2px dotted currentColor;
-}
-
-.is-dark-theme .wp-block-file .wp-block-file__button:focus {
-	color: var(--button--color-background);
-}
-
-.wp-block-file .wp-block-file__button:focus:not(.has-background) {
-	color: var(--button--color-text-hover);
-}
-
-.wp-block-file .wp-block-file__button:disabled {
-	background-color: var(--global--color-white-50);
-	border-color: var(--global--color-white-50);
-	color: var(--button--color-text-active);
-}
-
 .wp-block-gallery {
 	margin: 0 auto;
 }
@@ -3276,31 +3259,15 @@ pre.wp-block-preformatted {
 	border-color: var(--form--border-color);
 }
 
-.has-background .wp-block-search .wp-block-search__input,
-[class*=background-color] .wp-block-search .wp-block-search__input,
-[style*=background-color] .wp-block-search .wp-block-search__input,
-.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
-	border-color: currentColor;
-}
-
-.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
-.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
-	border-color: var(--global--color-white);
+.has-background .wp-block-search .wp-block-search__input {
+	border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search button.wp-block-search__button {
 	margin-left: 0;
-	background-color: transparent;
-	color: var(--button--color-text-hover);
 	line-height: 1;
 }
 
-.wp-block-search button.wp-block-search__button:hover {
-	background-color: var(--button--color-background);
-	color: var(--button--color-text);
-}
-
 .wp-block-search button.wp-block-search__button.has-icon {
 	padding: 6px calc(0.5 * var(--button--padding-horizontal));
 }
@@ -3311,120 +3278,59 @@ pre.wp-block-preformatted {
 	fill: currentColor;
 }
 
-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
-	color: var(--global--color-white);
-	border-color: currentColor;
+.has-background .wp-block-search button.wp-block-search__button:hover,
+.has-background .wp-block-search button.wp-block-search__button:active {
+	background-color: var(--local--color-background, var(--global--color-background)) !important;
+	color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
-.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: var(--button--color-background);
-	border-color: var(--global--color-white);
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
-	color: var(--button--color-text);
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
-	border-color: currentColor;
-	color: currentColor;
-}
-
-.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
-	background-color: var(--form--border-color);
-	border-color: var(--form--border-color);
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
-	border-color: var(--button--color-text);
-	background-color: var(--button--color-text);
-	color: var(--button--color-background);
+.has-text-color .wp-block-search button.wp-block-search__button:hover,
+.has-text-color .wp-block-search button.wp-block-search__button:active {
+	color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	background-color: var(--global--color-white);
 	border: var(--form--border-width) solid var(--form--border-color);
 	border-radius: var(--form--border-radius);
+	padding: var(--form--border-width);
+}
+
+.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+	border-color: var(--local--color-primary, var(--global--color-primary)) !important;
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+	margin-left: 0;
 	margin-right: 0;
+	padding-left: var(--form--spacing-unit);
 }
 
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
+	color: var(--form--color-text);
+	outline-offset: -2px;
 	outline: 2px dotted var(--form--border-color);
-	outline-offset: -5px;
 }
 
-.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
-	outline-color: currentColor;
-}
-
-.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 }
 
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: var(--button--color-background);
-	color: var(--button--color-background);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+	color: var(--global--color-dark-gray);
 }
 
-.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
+	color: var(--global--color-dark-gray);
+}
+
+.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
+	background-color: var(--global--color-dark-gray);
 	color: var(--global--color-white);
 }
 
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: var(--button--color-text);
-	color: var(--button--color-text);
-}
-
-.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
-.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	color: var(--global--color-white);
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
-	border-color: var(--button--color-text);
-	color: var(--button--color-text);
-}
-
-.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
-	border-color: var(--button--color-text);
-	background-color: var(--button--color-text);
-	color: var(--button--color-background);
+.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
+	padding: 6px calc(0.5 * var(--button--padding-horizontal));
 }
 
 .wp-block-search__button {
@@ -5598,16 +5504,9 @@ h1.page-title {
 
 .widget_search > .search-form .search-submit {
 	margin-left: 0;
-	background-color: transparent;
-	color: var(--button--color-text-hover);
 	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 }
 
-.widget_search > .search-form .search-submit:hover {
-	background-color: var(--button--color-background);
-	color: var(--button--color-text);
-}
-
 .widget_rss a.rsswidget .rss-widget-icon {
 	display: none;
 }
@@ -5666,42 +5565,92 @@ h1.page-title {
 	color: var(--global--color-black);
 }
 
+.has-black-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-black, #000);
+	color: var(--local--color-primary);
+}
+
 .has-gray-color[class] {
 	color: var(--global--color-gray);
 }
 
+.has-gray-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-gray, #000);
+	color: var(--local--color-primary);
+}
+
 .has-dark-gray-color[class] {
 	color: var(--global--color-dark-gray);
 }
 
+.has-dark-gray-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-dark-gray, #000);
+	color: var(--local--color-primary);
+}
+
 .has-green-color[class] {
 	color: var(--global--color-green);
 }
 
+.has-green-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-green, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-blue-color[class] {
 	color: var(--global--color-blue);
 }
 
+.has-blue-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-blue, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-purple-color[class] {
 	color: var(--global--color-purple);
 }
 
+.has-purple-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-purple, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-red-color[class] {
 	color: var(--global--color-red);
 }
 
+.has-red-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-red, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-orange-color[class] {
 	color: var(--global--color-orange);
 }
 
+.has-orange-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-orange, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-yellow-color[class] {
 	color: var(--global--color-yellow);
 }
 
+.has-yellow-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-yellow, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-white-color[class] {
 	color: var(--global--color-white);
 }
 
+.has-white-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-white, #fff);
+	color: var(--local--color-primary);
+}
+
 .has-background a,
 .has-background p,
 .has-background h1,
@@ -5717,56 +5666,133 @@ h1.page-title {
 	background-color: var(--global--color-black);
 }
 
-.has-gray-background-color[class] {
-	background-color: var(--global--color-gray);
+.has-black-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-black, #000);
+	background-color: var(--local--color-background);
 }
 
 .has-dark-gray-background-color[class] {
 	background-color: var(--global--color-dark-gray);
 }
 
+.has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-dark-gray, #000);
+	background-color: var(--local--color-background);
+}
+
+.has-gray-background-color[class] {
+	background-color: var(--global--color-gray);
+}
+
+.has-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-gray, #000);
+	background-color: var(--local--color-background);
+}
+
+.has-light-gray-background-color[class] {
+	background-color: var(--global--color-light-gray);
+}
+
+.has-light-gray-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-light-gray, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-green-background-color[class] {
 	background-color: var(--global--color-green);
 }
 
+.has-green-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-green, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-blue-background-color[class] {
 	background-color: var(--global--color-blue);
 }
 
+.has-blue-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-blue, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-purple-background-color[class] {
 	background-color: var(--global--color-purple);
 }
 
+.has-purple-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-purple, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-red-background-color[class] {
 	background-color: var(--global--color-red);
 }
 
+.has-red-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-red, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-orange-background-color[class] {
 	background-color: var(--global--color-orange);
 }
 
+.has-orange-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-orange, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-yellow-background-color[class] {
 	background-color: var(--global--color-yellow);
 }
 
+.has-yellow-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-yellow, #fff);
+	background-color: var(--local--color-background);
+}
+
 .has-white-background-color[class] {
 	background-color: var(--global--color-white);
 }
 
-:not(.has-text-color).has-black-background-color[class],
-:not(.has-text-color).has-gray-background-color[class],
-:not(.has-text-color).has-dark-gray-background-color[class] {
-	color: var(--global--color-white);
+.has-white-background-color[class] [class*=__inner-container] {
+	--local--color-background: var(--global--color-white, #fff);
+	background-color: var(--local--color-background);
 }
 
-:not(.has-text-color).has-green-background-color[class],
-:not(.has-text-color).has-blue-background-color[class],
-:not(.has-text-color).has-purple-background-color[class],
-:not(.has-text-color).has-red-background-color[class],
-:not(.has-text-color).has-orange-background-color[class],
-:not(.has-text-color).has-yellow-background-color[class],
-:not(.has-text-color).has-white-background-color[class] {
-	color: var(--global--color-dark-gray);
+.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-background, #fff);
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-primary, #000);
+}
+
+.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-primary, #000);
+	color: var(--local--color-primary, var(--global--color-primary));
+}
+
+.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
+.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
+	--local--color-primary: var(--global--color-background, #fff);
 }
 
 .has-purple-to-yellow-gradient-background {