.components-notice.is-success {
border-left-color: #4ab866;
background-color: #eff9f1;
.components-notice.is-warning {
border-left-color: #f0b849;
background-color: #fef8ee;
.components-notice.is-error {
border-left-color: #cc1818;
background-color: #f4a2a2;
.components-notice__content {
.components-notice__action.components-button, .components-notice__action.components-button.is-link {
.components-notice__action.components-button.is-secondary {
.components-notice__dismiss {
.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
background-color: transparent;
.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
.components-notice-list {
.components-notice-list .components-notice__content {
.components-notice-list .components-notice__action.components-button {
border: 1px solid #e0e0e0;
.components-panel > .components-panel__header:first-child,
.components-panel > .components-panel__body:first-child {
.components-panel > .components-panel__header:last-child,
.components-panel > .components-panel__body:last-child {
.components-panel + .components-panel {
.components-panel__body {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.components-panel__body h3 {
.components-panel__body.is-opened {
.components-panel__header {
justify-content: space-between;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
.components-panel__header h2 {
.components-panel__body + .components-panel__body,
.components-panel__body + .components-panel__header,
.components-panel__header + .components-panel__body,
.components-panel__header + .components-panel__header {
.components-panel__body > .components-panel__body-title {
transition: 0.1s background ease-in-out;
@media (prefers-reduced-motion: reduce) {
.components-panel__body > .components-panel__body-title {
.components-panel__body.is-opened > .components-panel__body-title {
.components-panel__body > .components-panel__body-title:hover {
.components-panel__body-toggle.components-button {
transition: 0.1s background ease-in-out;
@media (prefers-reduced-motion: reduce) {
.components-panel__body-toggle.components-button {
.components-panel__body-toggle.components-button: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-panel__body-toggle.components-button .components-panel__arrow {
transform: translateY(-50%);
transition: 0.1s color ease-in-out;
@media (prefers-reduced-motion: reduce) {
.components-panel__body-toggle.components-button .components-panel__arrow {
body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {
.components-panel__icon {
.components-panel__body-toggle-icon {
.components-panel__color-title {
justify-content: space-between;
.components-panel__row select {
.components-panel__row label {
.components-panel__row:empty, .components-panel__row:first-of-type {
.components-panel .circle-picker {
.components-placeholder.components-placeholder {
-moz-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: subpixel-antialiased;
box-shadow: inset 0 0 0 1px #1e1e1e;
outline: 1px solid transparent;
@supports ((position: -webkit-sticky) or (position: sticky)) {
.components-placeholder.components-placeholder {
.components-placeholder.components-placeholder .components-base-control__label {
.components-placeholder__error,
.components-placeholder__instructions,
.components-placeholder__label,
.components-placeholder__fieldset {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.components-placeholder__label {
.components-placeholder__label > svg,
.components-placeholder__label .dashicon,
.components-placeholder__label .block-editor-block-icon {
.components-placeholder__fieldset,
.components-placeholder__fieldset form {
.components-placeholder__fieldset p,
.components-placeholder__fieldset form p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.components-placeholder__fieldset.is-column-layout,
.components-placeholder__fieldset.is-column-layout form {
.components-placeholder__input[type=url] {
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-placeholder__input[type=url] {
@media (min-width: 600px) {
.components-placeholder__input[type=url] {
/* Override core line-height. To be reviewed. */
.components-placeholder__input[type=url]: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-placeholder__input[type=url]::-webkit-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-placeholder__input[type=url]::-moz-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-placeholder__input[type=url]:-ms-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.is-dark-theme .components-placeholder__input[type=url]::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-placeholder__input[type=url]::-moz-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-placeholder__input[type=url]:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.components-placeholder__instructions {
.components-placeholder__error {
.components-placeholder__preview img {
.components-placeholder__fieldset .components-button {
.components-placeholder__fieldset .components-button:last-child {
.components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
.components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child {
.components-placeholder.is-large .components-placeholder__label {
.components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
.components-placeholder.is-medium .components-placeholder__fieldset,
.components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset,
.components-placeholder.is-small .components-placeholder__fieldset form {
.components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button {
.components-placeholder.is-small .components-button {
.components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] {
.components-popover.is-expanded {
z-index: 1000000 !important;
.components-popover:not(.is-without-arrow) {
.components-popover:not(.is-without-arrow)::before {
.components-popover:not(.is-without-arrow).is-alternate::before {
.components-popover:not(.is-without-arrow)::after {
.components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after {
.components-popover:not(.is-without-arrow)[data-y-axis=top] {
.components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
.components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
.components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
border-left-color: transparent;
border-right-color: transparent;
.components-popover:not(.is-without-arrow)[data-y-axis=bottom] {
.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
border-bottom-style: solid;
border-left-color: transparent;
border-right-color: transparent;
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] {
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before {
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
border-bottom-color: transparent;
border-left-style: solid;
border-top-color: transparent;
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] {
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before {
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
.components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
border-bottom-color: transparent;
border-right-style: solid;
border-top-color: transparent;
.components-popover[data-y-axis=top] {
.components-popover[data-y-axis=bottom] {
.components-popover[data-y-axis=middle] {
.components-popover.is-from-top {
.components-popover.is-from-bottom {
.components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) {