input[type=range]::-ms-thumb {
border: 3px solid var(--form--color-ranged);
background: var(--global--color-background);
border-color: var(--global--color-secondary);
padding: var(--global--spacing-horizontal);
font-size: var(--global--font-size-lg);
fieldset input[type=submit] {
fieldset input:not([type=submit]) {
margin-bottom: var(--global--spacing-unit);
fieldset input[type=radio],
fieldset input[type=checkbox] {
fieldset input[type=radio] + label,
fieldset input[type=checkbox] + label {
font-size: var(--form--font-size);
margin-bottom: var(--global--spacing-unit);
font-size: var(--global--font-size-lg);
.post-password-form__label {
.post-password-form input[type=password] {
margin-top: calc(var(--global--spacing-vertical) / 3);
margin-right: calc(0.66 * var(--global--spacing-horizontal));
.post-password-form__submit {
margin-top: calc(var(--global--spacing-vertical) / 3);
@media only screen and (min-width: 592px) {
.post-password-form__submit {
margin-left: calc(0.4 * var(--global--spacing-horizontal));
/* Classic editor images */
/* Make sure embeds and iframes fit their containers. */
.wp-block-embed figcaption {
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
margin-top: calc(0.5 * var(--global--spacing-unit));
margin-bottom: var(--global--spacing-unit);
.alignleft .wp-caption-text,
.alignright .wp-caption-text,
.alignleft .wp-block-embed figcaption,
.alignright .wp-block-embed figcaption {
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
/* Over here, place any elements that do not need to have their own file. */
* text-underline-offset doesn't work in Chrome at all 👎
* But looks nice in Safari/Firefox, so let's keep it and
* maybe Chrome will support it soon.
color: var(--wp--style--color--link, var(--global--color-primary));
text-underline-offset: 3px;
text-decoration-skip-ink: all;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
text-decoration: underline 1px dotted currentColor;
text-decoration-skip-ink: none;
background: rgba(255, 255, 255, 0.9);
.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
color: var(--wp--style--color--link, var(--global--color-background));
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
background: rgba(0, 0, 0, 0.9);
color: var(--wp--style--color--link, var(--global--color-white));
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
color: var(--wp--style--color--link, var(--global--color-white));
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
background-color: #f1f1f1;
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
.has-background .has-link-color a,
.has-background.has-link-color a {
color: var(--wp--style--color--link, var(--global--color-primary));
/* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */
.wp-block-audio audio:focus {
outline: 2px solid var(--global--color-primary);
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
line-height: var(--button--line-height);
color: var(--button--color-text);
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);
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
input[type=submit]:focus,
.wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus {
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);
input[type=submit]:disabled,
input[type=reset]:disabled,
.wp-block-search__button:disabled,
.wp-block-button .wp-block-button__link:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-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);
input[type=submit]:hover,
.wp-block-search .wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover {
color: var(--button--color-text-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);
.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) {
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
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) {
.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 {
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:active.has-text-color,
.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
border-color: var(--button--color-background);
.wp-block-button.is-style-outline .wp-block-button__link:focus {
color: var(--button--color-background) !important;
background: transparent !important;
.wp-block-button .is-style-squared .wp-block-button__link {
.is-style-outline .wp-block-button__link[style*=radius]:focus,
.wp-block-button a.wp-block-button__link[style*=radius]:focus {
outline: 2px dotted var(--button--color-background);
border-color: var(--global--color-border);
padding: var(--global--spacing-unit);
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
.wp-block-columns:not(.alignwide):not(.alignfull) {
.wp-block-columns .wp-block-column > * {
margin-top: calc(0.66 * var(--global--spacing-vertical));
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
@media only screen and (min-width: 482px) {
.wp-block-columns .wp-block-column > * {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
.wp-block-columns .wp-block-column > *:first-child {
.wp-block-columns .wp-block-column > *:last-child {
.wp-block-columns .wp-block-column:last-child {
.wp-block-columns .wp-block-column:not(:last-child) {
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
@media only screen and (min-width: 482px) {
.wp-block-columns .wp-block-column:not(:last-child) {
margin-bottom: var(--global--spacing-vertical);
@media only screen and (min-width: 822px) {
.wp-block-columns .wp-block-column:not(:last-child) {
.wp-block-columns.is-style-twentytwentyone-columns-overlap {
justify-content: space-around;
@media only screen and (min-width: 652px) {
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
margin-left: calc(-2 * var(--global--spacing-horizontal));
margin-top: calc(2.5 * var(--global--spacing-horizontal));
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
background-color: var(--global--color-background);
padding: var(--global--spacing-unit);
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
padding-left: calc(2 * var(--global--spacing-horizontal));
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center {
.wp-block-columns.alignfull .wp-block-column p:not(.has-background),
.wp-block-columns.alignfull .wp-block-column h1:not(.has-background),
.wp-block-columns.alignfull .wp-block-column h2:not(.has-background),
.wp-block-columns.alignfull .wp-block-column h3:not(.has-background),
.wp-block-columns.alignfull .wp-block-column h4:not(.has-background),
.wp-block-columns.alignfull .wp-block-column h5:not(.has-background),
.wp-block-columns.alignfull .wp-block-column h6:not(.has-background) {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
background-color: var(--cover--color-background);
min-height: var(--cover--height);
/* default & custom background-color */
/* Treating H2 separately to account for legacy /core styles */
.wp-block-cover:not(.alignwide):not(.alignfull),
.wp-block-cover-image:not(.alignwide):not(.alignfull) {
.wp-block-cover.alignfull,