.components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) {
.components-popover__content {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
.is-alternate .components-popover__content {
border: 1px solid #1e1e1e;
.components-popover .components-popover__content {
.components-popover.is-expanded .components-popover__content {
height: calc(100% - 48px);
border-top: 1px solid #1e1e1e;
.components-popover[data-y-axis=top] .components-popover__content {
.components-popover[data-x-axis=center] .components-popover__content {
transform: translateX(-50%);
.components-popover[data-x-axis=right] .components-popover__content {
.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
.components-popover[data-x-axis=left] .components-popover__content {
.components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content {
.components-popover__header {
justify-content: space-between;
.components-popover__header-title {
.components-popover__close.components-button {
.components-radio-control {
.components-radio-control .components-base-control__help {
.components-radio-control .components-base-control__field {
.components-radio-control__option:not(:last-child) {
.components-radio-control__input[type=radio] {
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. */
border: 1px solid #1e1e1e;
@media (prefers-reduced-motion: reduce) {
.components-radio-control__input[type=radio] {
@media (min-width: 600px) {
.components-radio-control__input[type=radio] {
/* Override core line-height. To be reviewed. */
.components-radio-control__input[type=radio]: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-radio-control__input[type=radio]::-webkit-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-radio-control__input[type=radio]::-moz-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-radio-control__input[type=radio]:-ms-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.is-dark-theme .components-radio-control__input[type=radio]::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-radio-control__input[type=radio]::-moz-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-radio-control__input[type=radio]:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.65);
@media (min-width: 600px) {
.components-radio-control__input[type=radio] {
.components-radio-control__input[type=radio]:checked::before {
transform: translate(7px, 7px);
@media (min-width: 600px) {
.components-radio-control__input[type=radio]:checked::before {
transform: translate(5px, 5px);
.components-radio-control__input[type=radio]:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007cba;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
.components-radio-control__input[type=radio]:checked {
background: var(--wp-admin-theme-color);
border-color: var(--wp-admin-theme-color);
.components-resizable-box__handle {
.components-resizable-box__container.has-show-handle .components-resizable-box__handle {
.components-resizable-box__handle::after {
background: var(--wp-admin-theme-color);
.components-resizable-box__side-handle::before {
background: var(--wp-admin-theme-color);
transition: transform 0.1s ease-in;
@media (prefers-reduced-motion: reduce) {
.components-resizable-box__side-handle::before {
.is-dark-theme .components-resizable-box__side-handle::before,
.is-dark-theme .components-resizable-box__handle::after {
.components-resizable-box__side-handle {
.components-resizable-box__corner-handle {
.components-resizable-box__side-handle.components-resizable-box__handle-top,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom,
.components-resizable-box__side-handle.components-resizable-box__handle-top::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom::before {
.components-resizable-box__side-handle.components-resizable-box__handle-left,
.components-resizable-box__side-handle.components-resizable-box__handle-right,
.components-resizable-box__side-handle.components-resizable-box__handle-left::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right::before {
.components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
.components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
/* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
See https://bugs.webkit.org/show_bug.cgi?id=187903. */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
.components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
.components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
@keyframes components-resizable-box__top-bottom-animation {
@keyframes components-resizable-box__left-right-animation {
.components-resizable-box__handle-right {
right: calc(11.5px * -1);
.components-resizable-box__handle-left {
.components-resizable-box__handle-top {
.components-resizable-box__handle-bottom {
bottom: calc(11.5px * -1);
.components-responsive-wrapper {
.components-responsive-wrapper, .components-responsive-wrapper > span {
.components-responsive-wrapper__content {
iframe.components-sandbox {
.components-select-control__input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
@media (min-width: 782px) {
.components-select-control__input {
@media (max-width: 782px) {
.components-base-control .components-base-control__field .components-select-control__input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-color: #1e1e1e;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@media (min-width: 600px) {
width: -webkit-fit-content;
.components-snackbar:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007cba;
box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
.components-snackbar.components-snackbar-explicit-dismiss {
.components-snackbar .components-snackbar__content-with-icon {
.components-snackbar .components-snackbar__icon {
.components-snackbar .components-snackbar__dismiss-button {
.components-snackbar__action.components-button {
.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) {
text-decoration: underline;
background-color: transparent;
.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus {
outline: 1px dotted #fff;
.components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
color: var(--wp-admin-theme-color);
.components-snackbar__content {
justify-content: space-between;
.components-snackbar-list {
.components-snackbar-list__notice-container {
.components-tab-panel__tabs {
.components-tab-panel__tabs[aria-orientation=vertical] {
.components-tab-panel__tabs-item {
transition: box-shadow 0.1s linear;