.components-tab-panel__tabs-item::after {
content: attr(data-label);
.components-tab-panel__tabs-item:focus:not(:disabled) {
box-shadow: inset 0 2px #007cba;
box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
.components-tab-panel__tabs-item.is-active {
box-shadow: inset 0 0 0 2px transparent, inset 0 -4px 0 0 #007cba;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
.components-tab-panel__tabs-item.is-active::before {
border-bottom: 4px solid transparent;
.components-tab-panel__tabs-item:focus {
box-shadow: inset 0 0 0 2px #007cba;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
.components-tab-panel__tabs-item.is-active:focus {
box-shadow: inset 0 0 0 2px #007cba, inset 0 -4px 0 0 #007cba;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
.components-text-control__input,
.components-text-control__input[type=text],
.components-text-control__input[type=tel],
.components-text-control__input[type=time],
.components-text-control__input[type=url],
.components-text-control__input[type=week],
.components-text-control__input[type=password],
.components-text-control__input[type=color],
.components-text-control__input[type=date],
.components-text-control__input[type=datetime],
.components-text-control__input[type=datetime-local],
.components-text-control__input[type=email],
.components-text-control__input[type=month],
.components-text-control__input[type=number] {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
box-shadow: 0 0 0 transparent;
transition: box-shadow 0.1s linear;
border: 1px solid #757575;
/* Fonts smaller than 16px causes mobile safari to zoom. */
/* Override core line-height. To be reviewed. */
@media (prefers-reduced-motion: reduce) {
.components-text-control__input,
.components-text-control__input[type=text],
.components-text-control__input[type=tel],
.components-text-control__input[type=time],
.components-text-control__input[type=url],
.components-text-control__input[type=week],
.components-text-control__input[type=password],
.components-text-control__input[type=color],
.components-text-control__input[type=date],
.components-text-control__input[type=datetime],
.components-text-control__input[type=datetime-local],
.components-text-control__input[type=email],
.components-text-control__input[type=month],
.components-text-control__input[type=number] {
@media (min-width: 600px) {
.components-text-control__input,
.components-text-control__input[type=text],
.components-text-control__input[type=tel],
.components-text-control__input[type=time],
.components-text-control__input[type=url],
.components-text-control__input[type=week],
.components-text-control__input[type=password],
.components-text-control__input[type=color],
.components-text-control__input[type=date],
.components-text-control__input[type=datetime],
.components-text-control__input[type=datetime-local],
.components-text-control__input[type=email],
.components-text-control__input[type=month],
.components-text-control__input[type=number] {
/* Override core line-height. To be reviewed. */
.components-text-control__input:focus,
.components-text-control__input[type=text]:focus,
.components-text-control__input[type=tel]:focus,
.components-text-control__input[type=time]:focus,
.components-text-control__input[type=url]:focus,
.components-text-control__input[type=week]:focus,
.components-text-control__input[type=password]:focus,
.components-text-control__input[type=color]:focus,
.components-text-control__input[type=date]:focus,
.components-text-control__input[type=datetime]:focus,
.components-text-control__input[type=datetime-local]:focus,
.components-text-control__input[type=email]:focus,
.components-text-control__input[type=month]:focus,
.components-text-control__input[type=number]:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 1px #007cba;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
outline: 2px solid transparent;
.components-text-control__input::-webkit-input-placeholder,
.components-text-control__input[type=text]::-webkit-input-placeholder,
.components-text-control__input[type=tel]::-webkit-input-placeholder,
.components-text-control__input[type=time]::-webkit-input-placeholder,
.components-text-control__input[type=url]::-webkit-input-placeholder,
.components-text-control__input[type=week]::-webkit-input-placeholder,
.components-text-control__input[type=password]::-webkit-input-placeholder,
.components-text-control__input[type=color]::-webkit-input-placeholder,
.components-text-control__input[type=date]::-webkit-input-placeholder,
.components-text-control__input[type=datetime]::-webkit-input-placeholder,
.components-text-control__input[type=datetime-local]::-webkit-input-placeholder,
.components-text-control__input[type=email]::-webkit-input-placeholder,
.components-text-control__input[type=month]::-webkit-input-placeholder,
.components-text-control__input[type=number]::-webkit-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-text-control__input::-moz-placeholder,
.components-text-control__input[type=text]::-moz-placeholder,
.components-text-control__input[type=tel]::-moz-placeholder,
.components-text-control__input[type=time]::-moz-placeholder,
.components-text-control__input[type=url]::-moz-placeholder,
.components-text-control__input[type=week]::-moz-placeholder,
.components-text-control__input[type=password]::-moz-placeholder,
.components-text-control__input[type=color]::-moz-placeholder,
.components-text-control__input[type=date]::-moz-placeholder,
.components-text-control__input[type=datetime]::-moz-placeholder,
.components-text-control__input[type=datetime-local]::-moz-placeholder,
.components-text-control__input[type=email]::-moz-placeholder,
.components-text-control__input[type=month]::-moz-placeholder,
.components-text-control__input[type=number]::-moz-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-text-control__input:-ms-input-placeholder,
.components-text-control__input[type=text]:-ms-input-placeholder,
.components-text-control__input[type=tel]:-ms-input-placeholder,
.components-text-control__input[type=time]:-ms-input-placeholder,
.components-text-control__input[type=url]:-ms-input-placeholder,
.components-text-control__input[type=week]:-ms-input-placeholder,
.components-text-control__input[type=password]:-ms-input-placeholder,
.components-text-control__input[type=color]:-ms-input-placeholder,
.components-text-control__input[type=date]:-ms-input-placeholder,
.components-text-control__input[type=datetime]:-ms-input-placeholder,
.components-text-control__input[type=datetime-local]:-ms-input-placeholder,
.components-text-control__input[type=email]:-ms-input-placeholder,
.components-text-control__input[type=month]:-ms-input-placeholder,
.components-text-control__input[type=number]:-ms-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.is-dark-theme .components-text-control__input::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=text]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=tel]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=time]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=url]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=week]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=password]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=color]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=date]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=datetime]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=datetime-local]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=email]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=month]::-webkit-input-placeholder,
.is-dark-theme .components-text-control__input[type=number]::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-text-control__input::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=text]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=tel]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=time]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=url]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=week]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=password]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=color]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=date]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=datetime]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=datetime-local]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=email]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=month]::-moz-placeholder,
.is-dark-theme .components-text-control__input[type=number]::-moz-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-text-control__input:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=text]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=tel]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=time]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=url]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=week]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=password]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=color]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=date]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=datetime]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=datetime-local]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=email]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=month]:-ms-input-placeholder,
.is-dark-theme .components-text-control__input[type=number]:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.65);
-ms-grid-row-align: center;
.components-toggle-control .components-base-control__field {
.components-toggle-control .components-base-control__field .components-form-toggle {
.components-toggle-control .components-base-control__field .components-toggle-control__label {
.components-accessible-toolbar {
border: 1px solid #1e1e1e;
.components-accessible-toolbar > .components-toolbar-group:last-child {
.components-accessible-toolbar .components-button,
.components-toolbar .components-button {
.components-accessible-toolbar .components-button:focus:enabled,
.components-toolbar .components-button:focus:enabled {
.components-accessible-toolbar .components-button::before,
.components-toolbar .components-button::before {
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.components-accessible-toolbar .components-button::before,
.components-toolbar .components-button::before {
.components-accessible-toolbar .components-button svg,
.components-toolbar .components-button svg {
.components-accessible-toolbar .components-button.is-pressed,
.components-toolbar .components-button.is-pressed {
.components-accessible-toolbar .components-button.is-pressed:hover,
.components-toolbar .components-button.is-pressed:hover {
.components-accessible-toolbar .components-button.is-pressed::before,
.components-toolbar .components-button.is-pressed::before {
.components-accessible-toolbar .components-button:focus::before,
.components-toolbar .components-button:focus::before {
box-shadow: inset 0 0 0 2px #007cba, inset 0 0 0 4px #fff;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
outline: 2px solid transparent;
.components-accessible-toolbar .components-button.has-icon,
.components-toolbar .components-button.has-icon {
.components-accessible-toolbar .components-button.components-tab-button,
.components-toolbar .components-button.components-tab-button {
.components-accessible-toolbar .components-button.components-tab-button span,
.components-toolbar .components-button.components-tab-button span {
@keyframes components-button__appear-animation {
.components-toolbar__control.components-button {
.components-toolbar__control.components-button[data-subscript] svg {
.components-toolbar__control.components-button[data-subscript]::after {
content: attr(data-subscript);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.components-toolbar__control.components-button:active::before {
.components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after {
.components-toolbar-group {
border-right: 1px solid #1e1e1e;
.components-toolbar-group .components-toolbar-group.components-toolbar-group {
border: 1px solid #1e1e1e;
.components-toolbar .components-toolbar.components-toolbar {
div.components-toolbar > div {
@supports ((position: -webkit-sticky) or (position: sticky)) {
div.components-toolbar > div {
div.components-toolbar > div + div.has-left-divider {
div.components-toolbar > div + div.has-left-divider::before {
.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon,
.components-toolbar div > .components-button.components-button.has-icon {
.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon svg,
.components-toolbar div > .components-button.components-button.has-icon svg {
.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon::before,
.components-toolbar div > .components-button.components-button.has-icon::before {
.components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon,
.components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon,
.components-toolbar div:first-child .components-button.has-icon {
.components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon::before,
.components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon::before,
.components-toolbar div:first-child .components-button.has-icon::before {
.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon,
.components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon,
.components-toolbar div:last-child .components-button.has-icon {
.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon::before,
.components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon::before,
.components-toolbar div:last-child .components-button.has-icon::before {
.components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon,
.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon,
.components-toolbar div:first-child:last-child > .components-button.has-icon {
.components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon::before,
.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon::before,
.components-toolbar div:first-child:last-child > .components-button.has-icon::before {
.components-tooltip.components-popover {
.components-tooltip.components-popover .components-popover__content {
.components-tooltip .components-popover__content {
.components-tooltip .components-popover__content > div {
.components-tooltip__shortcut {