@wordpress/components 29.1.0 → 29.2.0

package/build-style/style-rtl.css

@@ -114,14 +114,10 @@
   }
 }
 
-.components-animate__appear {
-  animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-animate__appear {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
+    animation-fill-mode: forwards;
   }
 }
 .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left {
@@ -145,21 +141,17 @@
     transform: translateY(0%) scaleY(1) scaleX(1);
   }
 }
-.components-animate__slide-in {
-  animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-animate__slide-in {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
+    animation-fill-mode: forwards;
+  }
+  .components-animate__slide-in.is-from-left {
+    transform: translateX(-100%);
+  }
+  .components-animate__slide-in.is-from-right {
+    transform: translateX(100%);
   }
-}
-.components-animate__slide-in.is-from-left {
-  transform: translateX(-100%);
-}
-.components-animate__slide-in.is-from-right {
-  transform: translateX(100%);
 }
 
 @keyframes components-animate__slide-in-animation {
@@ -167,8 +159,10 @@
     transform: translateX(0%);
   }
 }
-.components-animate__loading {
-  animation: components-animate__loading 1.6s ease-in-out infinite;
+@media not (prefers-reduced-motion) {
+  .components-animate__loading {
+    animation: components-animate__loading 1.6s ease-in-out infinite;
+  }
 }
 
 @keyframes components-animate__loading {
@@ -291,7 +285,6 @@
   cursor: pointer;
   -webkit-appearance: none;
   background: none;
-  transition: box-shadow 0.1s linear;
   height: 36px;
   align-items: center;
   box-sizing: border-box;
@@ -317,10 +310,9 @@
    * Link buttons.
    */
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-button {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 .components-button.is-next-40px-default-size {
@@ -455,15 +447,13 @@ p + .components-button.is-tertiary {
   text-align: right;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   text-decoration: underline;
-  transition-property: border, background, color;
-  transition-duration: 0.05s;
-  transition-timing-function: ease-in-out;
   height: auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-button.is-link {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition-property: border, background, color;
+    transition-duration: 0.05s;
+    transition-timing-function: ease-in-out;
   }
 }
 .components-button.is-link:focus {
@@ -480,15 +470,14 @@ p + .components-button.is-tertiary {
   color: #949494;
 }
 .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
-  animation: components-button__busy-animation 2500ms infinite linear;
   background-size: 100px 100%;
   /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
   /* stylelint-enable */
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
-    animation-duration: 0s;
+    animation: components-button__busy-animation 2500ms infinite linear;
   }
 }
 .components-button.is-compact {
@@ -585,7 +574,6 @@ p + .components-button.is-tertiary {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
   border-radius: 2px;
   border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -610,12 +598,10 @@ p + .components-button.is-tertiary {
   width: var(--checkbox-input-size);
   height: var(--checkbox-input-size);
   appearance: none;
-  transition: 0.1s border-color ease-in-out;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-checkbox-control__input[type=checkbox] {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
@@ -688,10 +674,9 @@ p + .components-button.is-tertiary {
   cursor: default;
   opacity: 1;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-checkbox-control__input[type=checkbox] {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.1s border-color ease-in-out;
   }
 }
 .components-checkbox-control__input[type=checkbox]:focus {
@@ -776,13 +761,11 @@ svg.components-checkbox-control__indeterminate {
   width: 28px;
   vertical-align: top;
   transform: scale(1);
-  transition: 100ms transform ease;
-  will-change: transform;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-circular-option-picker__option-wrapper {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 100ms transform ease;
+    will-change: transform;
   }
 }
 .components-circular-option-picker__option-wrapper:hover {
@@ -815,13 +798,11 @@ svg.components-checkbox-control__indeterminate {
   border-radius: 50%;
   background: transparent;
   box-shadow: inset 0 0 0 14px;
-  transition: 100ms box-shadow ease;
   cursor: pointer;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-circular-option-picker__option {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 100ms box-shadow ease;
   }
 }
 .components-circular-option-picker__option:hover {
@@ -931,7 +912,6 @@ input.components-combobox-control__input[type=text]:focus {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
   border-radius: 2px;
   border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -944,10 +924,9 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
   padding: 0;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-combobox-control__suggestions-container {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
@@ -1186,21 +1165,19 @@ body.is-dragging-components-draggable {
 }
 .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
   opacity: 1;
-  transition: opacity 0.2s ease-in-out;
 }
-@media (prefers-reduced-motion) {
+@media not (prefers-reduced-motion) {
   .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
-    transition: none;
+    transition: opacity 0.2s ease-in-out;
   }
 }
 .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
   opacity: 1;
   transform: scale(1);
-  transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
 }
-@media (prefers-reduced-motion) {
+@media not (prefers-reduced-motion) {
   .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
-    transition: none;
+    transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
   }
 }
 
@@ -1366,13 +1343,11 @@ body.is-dragging-components-draggable {
   width: 32px;
   height: 16px;
   border-radius: 8px;
-  transition: 0.2s background-color ease, 0.2s border-color ease;
   overflow: hidden;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-form-toggle .components-form-toggle__track {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.2s background-color ease, 0.2s border-color ease;
   }
 }
 .components-form-toggle .components-form-toggle__track::after {
@@ -1381,13 +1356,11 @@ body.is-dragging-components-draggable {
   inset: 0;
   box-sizing: border-box;
   border-top: 16px solid transparent;
-  transition: 0.2s opacity ease;
   opacity: 0;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-form-toggle .components-form-toggle__track::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.2s opacity ease;
   }
 }
 .components-form-toggle .components-form-toggle__thumb {
@@ -1399,15 +1372,13 @@ body.is-dragging-components-draggable {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  transition: 0.2s transform ease, 0.2s background-color ease-out;
   background-color: #1e1e1e;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   border: 6px solid transparent;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-form-toggle .components-form-toggle__thumb {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.2s transform ease, 0.2s background-color ease-out;
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
@@ -1457,7 +1428,6 @@ body.is-dragging-components-draggable {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
   border-radius: 2px;
   border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -1468,10 +1438,9 @@ body.is-dragging-components-draggable {
   padding: 0;
   cursor: text;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-form-token-field__input-container {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
@@ -1586,15 +1555,11 @@ body.is-dragging-components-draggable {
   height: auto;
   background: #ddd;
   min-width: unset;
-  transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-form-token-field__token-text,
 .components-form-token-field__remove-token.components-button {
-    transition-duration: 0s;
-    transition-delay: 0s;
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
   }
 }
 
@@ -1622,16 +1587,14 @@ body.is-dragging-components-draggable {
   min-width: 100%;
   max-height: 128px;
   overflow-y: auto;
-  transition: all 0.15s ease-in-out;
   list-style: none;
   box-shadow: inset 0 1px 0 0 #949494;
   margin: 0;
   padding: 0;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-form-token-field__suggestions-list {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: all 0.15s ease-in-out;
   }
 }
 
@@ -1922,8 +1885,6 @@ body.is-dragging-components-draggable {
   background-color: rgba(0, 0, 0, 0.35);
   z-index: 100000;
   display: flex;
-  animation: __wp-base-styles-fade-in 0.08s linear 0s;
-  animation-fill-mode: forwards;
 }
 @keyframes __wp-base-styles-fade-in {
   from {
@@ -1933,16 +1894,12 @@ body.is-dragging-components-draggable {
     opacity: 1;
   }
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-modal__screen-overlay {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: __wp-base-styles-fade-in 0.08s linear 0s;
+    animation-fill-mode: forwards;
   }
 }
-.components-modal__screen-overlay.is-animating-out {
-  animation: __wp-base-styles-fade-out 0.08s linear 80ms;
-  animation-fill-mode: forwards;
-}
 @keyframes __wp-base-styles-fade-out {
   from {
     opacity: 1;
@@ -1951,10 +1908,10 @@ body.is-dragging-components-draggable {
     opacity: 0;
   }
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-modal__screen-overlay.is-animating-out {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: __wp-base-styles-fade-out 0.08s linear 80ms;
+    animation-fill-mode: forwards;
   }
 }
 
@@ -1968,7 +1925,6 @@ body.is-dragging-components-draggable {
   overflow: hidden;
   display: flex;
   animation-name: components-modal__appear-animation;
-  animation-duration: var(--modal-frame-animation-duration);
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 }
@@ -1977,10 +1933,9 @@ body.is-dragging-components-draggable {
 .components-modal__frame *::after {
   box-sizing: inherit;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-modal__frame {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation-duration: var(--modal-frame-animation-duration);
   }
 }
 .components-modal__screen-overlay.is-animating-out .components-modal__frame {
@@ -2250,12 +2205,10 @@ body.is-dragging-components-draggable {
   font-size: inherit;
   margin-top: 0;
   margin-bottom: 0;
-  transition: 0.1s background ease-in-out;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-panel__body > .components-panel__body-title {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.1s background ease-in-out;
   }
 }
 
@@ -2279,13 +2232,11 @@ body.is-dragging-components-draggable {
   color: #1e1e1e;
   border: none;
   box-shadow: none;
-  transition: 0.1s background ease-in-out;
   height: auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-panel__body-toggle.components-button {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.1s background ease-in-out;
   }
 }
 .components-panel__body-toggle.components-button:focus {
@@ -2299,12 +2250,10 @@ body.is-dragging-components-draggable {
   transform: translateY(-50%);
   color: #1e1e1e;
   fill: currentColor;
-  transition: 0.1s color ease-in-out;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-panel__body-toggle.components-button .components-panel__arrow {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: 0.1s color ease-in-out;
   }
 }
 body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {
@@ -2430,7 +2379,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
   border-radius: 2px;
   border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -2439,10 +2387,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   line-height: normal;
   flex: 1 1 auto;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-placeholder__input[type=url] {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
@@ -2525,14 +2472,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.has-illustration .components-button {
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.1s linear;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-placeholder.has-illustration .components-placeholder__label,
 .components-placeholder.has-illustration .components-placeholder__instructions,
 .components-placeholder.has-illustration .components-button {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: opacity 0.1s linear;
   }
 }
 .is-selected > .components-placeholder.has-illustration .components-placeholder__label,
@@ -2717,7 +2662,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
   border-radius: 2px;
   border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -2739,10 +2683,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   appearance: none;
   cursor: pointer;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-radio-control__input[type=radio] {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
@@ -2883,14 +2826,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 1px);
   left: calc(50% - 1px);
-  transition: transform 0.1s ease-in;
-  will-change: transform;
   opacity: 0;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-resizable-box__side-handle::before {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: transform 0.1s ease-in;
+    will-change: transform;
   }
 }
 
@@ -2922,37 +2863,23 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   border-bottom: 0;
 }
 
-.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) {
+@media not (prefers-reduced-motion) {
   .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-duration: 1ms;
-    animation-delay: 0s;
+    animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
+    animation-fill-mode: forwards;
   }
 }
 
-.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) {
+@media not (prefers-reduced-motion) {
   .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-duration: 1ms;
-    animation-delay: 0s;
+    animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
+    animation-fill-mode: forwards;
   }
 }
 
@@ -3157,12 +3084,10 @@ body.lockscroll {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   height: calc(0 * var(--wp-admin-border-width-focus));
   border-radius: 0;
-  transition: all 0.1s linear;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-tab-panel__tabs-item::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: all 0.1s linear;
   }
 }
 .components-tab-panel__tabs-item.is-active::after {
@@ -3180,12 +3105,10 @@ body.lockscroll {
   pointer-events: none;
   box-shadow: 0 0 0 0 transparent;
   border-radius: 2px;
-  transition: all 0.1s linear;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-tab-panel__tabs-item::before {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: all 0.1s linear;
   }
 }
 .components-tab-panel__tabs-item:focus-visible::before {
@@ -3223,7 +3146,6 @@ body.lockscroll {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
-  transition: box-shadow 0.1s linear;
   border-radius: 2px;
   border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -3231,7 +3153,7 @@ body.lockscroll {
   /* Override core line-height. To be reviewed. */
   line-height: normal;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-text-control__input,
 .components-text-control__input[type=text],
 .components-text-control__input[type=tel],
@@ -3246,8 +3168,7 @@ body.lockscroll {
 .components-text-control__input[type=email],
 .components-text-control__input[type=month],
 .components-text-control__input[type=number] {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s linear;
   }
 }
 @media (min-width: 600px) {
@@ -3427,14 +3348,12 @@ body.lockscroll {
   right: 8px;
   left: 8px;
   z-index: -1;
-  animation: components-button__appear-animation 0.1s ease;
-  animation-fill-mode: forwards;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .components-accessible-toolbar .components-button::before,
 .components-toolbar .components-button::before {
-    animation-duration: 1ms;
-    animation-delay: 0s;
+    animation: components-button__appear-animation 0.1s ease;
+    animation-fill-mode: forwards;
   }
 }
 .components-accessible-toolbar .components-button svg,