.components-datetime__timezone {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
.components-datetime__time-legend {
.components-datetime__time-legend.invisible {
.components-datetime__time-field-hours-input,
.components-datetime__time-field-minutes-input,
.components-datetime__time-field-day-input {
.components-datetime__time-field-year-input {
.components-datetime__time-field-month-select {
.components-popover .components-datetime__date {
.block-editor-dimension-control .components-base-control__field {
.block-editor-dimension-control .components-base-control__label {
.block-editor-dimension-control .components-base-control__label .dashicon {
.block-editor-dimension-control.is-manual .components-base-control__label {
body.is-dragging-components-draggable {
/* Fallback for IE/Edge < 14 */
cursor: grabbing !important;
.components-draggable__invisible-drag-image {
.components-draggable__clone {
transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s;
border: 2px solid #007cba;
border: 2px solid var(--wp-admin-theme-color);
@media (prefers-reduced-motion: reduce) {
.components-drop-zone.is-active {
transition: 0.3s opacity, 0.3s background-color;
@media (prefers-reduced-motion: reduce) {
.components-drop-zone.is-active {
.components-drop-zone.is-dragging-over-element {
background-color: #007cba;
background-color: var(--wp-admin-theme-color);
.components-drop-zone__content {
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
@media (prefers-reduced-motion: reduce) {
.components-drop-zone__content {
.components-drop-zone.is-dragging-over-element .components-drop-zone__content {
transform: translateY(-50%) scale(1.05);
.components-drop-zone__content-icon,
.components-drop-zone__content-text {
.components-drop-zone__content-icon {
.components-drop-zone__content-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.components-drop-zone__provider {
.components-dropdown__content .components-popover__content > div {
.components-dropdown-menu__popover .components-popover__content {
.components-dropdown-menu__menu {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
.components-dropdown-menu__menu .components-dropdown-menu__menu-item,
.components-dropdown-menu__menu .components-menu-item {
.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
.components-dropdown-menu__menu .components-menu-item.has-separator {
.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before,
.components-dropdown-menu__menu .components-menu-item.has-separator::before {
.components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg,
.components-dropdown-menu__menu .components-menu-item.is-active svg {
box-shadow: 0 0 0 1px #1e1e1e;
.components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg,
.components-dropdown-menu__menu .components-menu-item > svg {
.components-dropdown-menu__menu .components-menu-item__button,
.components-dropdown-menu__menu .components-menu-item__button.components-button {
.components-dropdown-menu__menu .components-menu-group {
.components-dropdown-menu__menu .components-menu-group:first-child {
.components-dropdown-menu__menu .components-menu-group:last-child {
.components-dropdown-menu__menu .components-menu-group + .components-menu-group {
border-top: 1px solid #ccc;
.is-alternate .components-dropdown-menu__menu .components-menu-group + .components-menu-group {
.components-font-size-picker__controls {
.components-font-size-picker__controls .components-font-size-picker__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-font-size-picker__controls .components-font-size-picker__number {
@media (min-width: 600px) {
.components-font-size-picker__controls .components-font-size-picker__number {
/* Override core line-height. To be reviewed. */
.components-font-size-picker__controls .components-font-size-picker__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-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.is-dark-theme .components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button {
.components-font-size-picker__controls .components-font-size-picker__number-container {
.components-font-size-picker__controls .components-font-size-picker__select {
.components-font-size-picker__controls .components-color-palette__clear {
.components-font-size-picker__custom-input .components-range-control__slider + .dashicon {
.components-font-size-picker {
.components-form-toggle {
.components-form-toggle .components-form-toggle__track {
border: 1px solid #1e1e1e;
transition: 0.2s background ease;
@media (prefers-reduced-motion: reduce) {
.components-form-toggle .components-form-toggle__track {
.components-form-toggle .components-form-toggle__thumb {
transition: 0.1s transform ease;
background-color: #1e1e1e;
border: 5px solid #1e1e1e;
@media (prefers-reduced-motion: reduce) {
.components-form-toggle .components-form-toggle__thumb {
.components-form-toggle.is-checked .components-form-toggle__track {
background-color: #007cba;
background-color: var(--wp-admin-theme-color);
border: 1px solid #007cba;
border: 1px solid var(--wp-admin-theme-color);
border: 9px solid transparent;
.components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
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-form-toggle.is-checked .components-form-toggle__thumb {
transform: translateX(18px);
.components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
.components-form-toggle input.components-form-toggle__input[type=checkbox] {
.components-form-toggle input.components-form-toggle__input[type=checkbox]:checked {
.components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
.components-form-token-field__input-container {
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-form-token-field__input-container {
@media (min-width: 600px) {
.components-form-token-field__input-container {
/* Override core line-height. To be reviewed. */
.components-form-token-field__input-container: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-form-token-field__input-container::-webkit-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-form-token-field__input-container::-moz-placeholder {
color: rgba(30, 30, 30, 0.62);
.components-form-token-field__input-container:-ms-input-placeholder {
color: rgba(30, 30, 30, 0.62);
.is-dark-theme .components-form-token-field__input-container::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-form-token-field__input-container::-moz-placeholder {
color: rgba(255, 255, 255, 0.65);
.is-dark-theme .components-form-token-field__input-container:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.65);
.components-form-token-field__input-container.is-disabled {
.components-form-token-field__input-container.is-active {
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-form-token-field__input-container input[type=text].components-form-token-field__input {
@media (min-width: 600px) {
.components-form-token-field__input-container input[type=text].components-form-token-field__input {