.components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input {
.components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input {
.components-form-token-field__label {
.components-form-token-field__help {
.components-form-token-field__token {
.components-form-token-field__token.is-success .components-form-token-field__token-text,
.components-form-token-field__token.is-success .components-form-token-field__remove-token {
.components-form-token-field__token.is-error .components-form-token-field__token-text,
.components-form-token-field__token.is-error .components-form-token-field__remove-token {
.components-form-token-field__token.is-validating .components-form-token-field__token-text,
.components-form-token-field__token.is-validating .components-form-token-field__remove-token {
.components-form-token-field__token.is-borderless {
.components-form-token-field__token.is-borderless .components-form-token-field__token-text {
color: var(--wp-admin-theme-color);
.components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
.components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
.components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
border-radius: 4px 0 0 4px;
.components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
.components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
.components-form-token-field__token-text,
.components-form-token-field__remove-token.components-button {
transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
@media (prefers-reduced-motion: reduce) {
.components-form-token-field__token-text,
.components-form-token-field__remove-token.components-button {
.components-form-token-field__token-text {
border-radius: 2px 0 0 2px;
.components-form-token-field__remove-token.components-button {
border-radius: 0 2px 2px 0;
.components-form-token-field__remove-token.components-button:hover {
.components-form-token-field__suggestions-list {
transition: all 0.15s ease-in-out;
border-top: 1px solid #757575;
@media (prefers-reduced-motion: reduce) {
.components-form-token-field__suggestions-list {
.components-form-token-field__suggestion {
.components-form-token-field__suggestion.is-selected {
background: var(--wp-admin-theme-color);
.components-form-token-field__suggestion-match {
text-decoration: underline;
@media (min-width: 600px) {
.components-guide .components-modal__header {
.components-guide .components-modal__header .components-button {
.components-guide .components-modal__header .components-button:hover svg {
.components-guide__container {
justify-content: space-between;
.components-guide__page {
@media (min-width: 600px) {
.components-guide__page {
.components-guide__footer {
@media (max-width: 600px) {
.components-guide__footer {
.components-guide__page-control {
.components-guide__page-control li {
.components-guide__page-control .components-button {
.components-guide .components-modal__content {
.components-modal__frame.components-guide {
@media (max-width: 600px) {
.components-modal__frame.components-guide {
.components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
.components-button.components-guide__back-button, .components-button.components-guide__forward-button {
.components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg {
.components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover {
text-decoration: underline;
.components-button.components-guide__back-button {
.components-button.components-guide__forward-button {
.components-button.components-guide__finish-button {
.components-button.components-guide__inline-finish-button {
.is-focusing-regions [role=region]:focus::after {
outline: 4px solid transparent;
box-shadow: inset 0 0 0 4px #007cba;
box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
@supports (outline-offset: 1px) {
.is-focusing-regions [role=region]:focus::after {
.is-focusing-regions [role=region]:focus {
outline-color: var(--wp-admin-theme-color);
.components-menu-group + .components-menu-group {
border-top: 1px solid #1e1e1e;
.components-menu-group__label {
text-transform: uppercase;
.components-menu-item__button,
.components-menu-item__button.components-button {
.components-menu-item__button .components-menu-items__item-icon,
.components-menu-item__button.components-button .components-menu-items__item-icon {
.components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon,
.components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon {
.components-menu-item__button .block-editor-block-icon,
.components-menu-item__button.components-button .block-editor-block-icon {
.components-menu-item__info-wrapper {
.components-menu-item__info {
.components-menu-item__item {
.components-menu-item__shortcut {
-ms-grid-row-align: center;
@media (min-width: 480px) {
.components-menu-item__shortcut {
.components-menu-items-choice svg,
.components-menu-items-choice.components-button svg {
.components-menu-items-choice.has-icon,
.components-menu-items-choice.components-button.has-icon {
.components-modal__screen-overlay {
background-color: rgba(0, 0, 0, 0.35);
animation: edit-post__fade-in-animation 0.2s ease-out 0s;
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.components-modal__screen-overlay {
.components-modal__frame {
box-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
@media (min-width: 600px) {
.components-modal__frame {
max-width: calc(100% - 16px - 16px);
transform: translate(-50%, -50%);
animation: components-modal__appear-animation 0.1s ease-out;
animation-fill-mode: forwards;
@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
.components-modal__frame {
@keyframes components-modal__appear-animation {
.components-modal__header {
border-bottom: 1px solid #ddd;
justify-content: space-between;
position: -webkit-sticky;
@supports (-ms-ime-align: auto) {
.components-modal__header {
.components-modal__header .components-modal__header-heading {
.components-modal__header h1 {
.components-modal__header .components-button {
.components-modal__header-heading-container {
.components-modal__header-icon-container {
.components-modal__header-icon-container svg {
.components-modal__content {
@supports (-ms-ime-align: auto) {
.components-modal__content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
border-left: 4px solid #007cba;
border-left: 4px solid var(--wp-admin-theme-color);
.components-notice.is-dismissible {