@media not (prefers-reduced-motion){
.components-animate__appear{
animation:components-animate__appear-animation .1s cubic-bezier(0, 0, .2, 1) 0s;
animation-fill-mode:forwards;
.components-animate__appear.is-from-top,.components-animate__appear.is-from-top.is-from-left{
transform-origin:top left;
.components-animate__appear.is-from-top.is-from-right{
transform-origin:top right;
.components-animate__appear.is-from-bottom,.components-animate__appear.is-from-bottom.is-from-left{
transform-origin:bottom left;
.components-animate__appear.is-from-bottom.is-from-right{
transform-origin:bottom right;
@keyframes components-animate__appear-animation{
transform:translateY(-2em) scaleY(0) scaleX(0);
transform:translateY(0) scaleY(1) scaleX(1);
@media not (prefers-reduced-motion){
.components-animate__slide-in{
animation:components-animate__slide-in-animation .1s cubic-bezier(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%);
@keyframes components-animate__slide-in-animation{
@media not (prefers-reduced-motion){
.components-animate__loading{
animation:components-animate__loading 1.6s ease-in-out infinite;
@keyframes components-animate__loading{
.components-autocomplete__popover .components-popover__content{
.components-autocomplete__result.components-button{
.components-autocomplete__result.components-button:focus:not(:disabled){
box-shadow:inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
.components-badge *,.components-badge :after,.components-badge :before{
background-color:color-mix(in srgb, #fff 90%, var(--base-color));
color:color-mix(in srgb, #000 50%, var(--base-color));
.components-badge:where(.is-default){
background-color:#f0f0f0;
.components-badge.has-icon{
padding-inline-start:4px;
.components-badge.is-info{
.components-badge.is-warning{
.components-badge.is-error{
.components-badge.is-success{
.components-badge__flex-wrapper{
.components-badge__content{
.components-button-group{
.components-button-group .components-button{
box-shadow:inset 0 0 0 1px #1e1e1e;
.components-button-group .components-button+.components-button{
.components-button-group .components-button:first-child{
border-radius:2px 0 0 2px;
.components-button-group .components-button:last-child{
border-radius:0 2px 2px 0;
.components-button-group .components-button.is-primary,.components-button-group .components-button:focus{
.components-button-group .components-button.is-primary{
box-shadow:inset 0 0 0 1px #1e1e1e;
@media not (prefers-reduced-motion){
transition:box-shadow .1s linear;
color:var(--wp-components-color-foreground, #1e1e1e);
.components-button.is-next-40px-default-size{
.components-button:hover:not(:disabled,[aria-disabled=true]),.components-button[aria-expanded=true]{
color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button:focus:not(:disabled){
box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-primary{
background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
color:var(--wp-components-color-accent-inverted, #fff);
.components-button.is-primary:hover:not(:disabled){
background:var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
color:var(--wp-components-color-accent-inverted, #fff);
.components-button.is-primary:active:not(:disabled){
background:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
border-color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
color:var(--wp-components-color-accent-inverted, #fff);
.components-button.is-primary:focus:not(:disabled){
box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-primary:disabled,.components-button.is-primary:disabled:active:enabled,.components-button.is-primary[aria-disabled=true],.components-button.is-primary[aria-disabled=true]:active:enabled,.components-button.is-primary[aria-disabled=true]:enabled{
background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-primary:disabled:active:enabled:focus:enabled,.components-button.is-primary:disabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:focus:enabled{
box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-primary.is-busy,.components-button.is-primary.is-busy:disabled,.components-button.is-primary.is-busy[aria-disabled=true]{
background-image:linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
background-size:100px 100%;
border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
color:var(--wp-components-color-accent-inverted, #fff);
.components-button.is-secondary,.components-button.is-tertiary{
.components-button.is-secondary:active:not(:disabled),.components-button.is-tertiary:active:not(:disabled){
.components-button.is-secondary:disabled,.components-button.is-secondary[aria-disabled=true],.components-button.is-secondary[aria-disabled=true]:hover,.components-button.is-tertiary:disabled,.components-button.is-tertiary[aria-disabled=true],.components-button.is-tertiary[aria-disabled=true]:hover{
.components-button.is-secondary{
box-shadow:inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-secondary:hover:not(:disabled,[aria-disabled=true],.is-pressed){
background:color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000);
box-shadow:inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
.components-button.is-secondary:disabled:not(:focus),.components-button.is-secondary[aria-disabled=true]:hover:not(:focus),.components-button.is-secondary[aria-disabled=true]:not(:focus){
box-shadow:inset 0 0 0 1px #ddd;
.components-button.is-secondary:focus:not(:disabled){
box-shadow:0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-tertiary{
color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-button.is-tertiary:hover:not(:disabled,[aria-disabled=true],.is-pressed){
background:color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000);
color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
.components-button.is-tertiary:active:not(:disabled,[aria-disabled=true]){
background:color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 8%, #0000);
p+.components-button.is-tertiary{
.components-button.is-tertiary:disabled:not(:focus),.components-button.is-tertiary[aria-disabled=true]:hover:not(:focus),.components-button.is-tertiary[aria-disabled=true]:not(:focus){
.components-button.is-destructive{
--wp-components-color-accent:#cc1818;
--wp-components-color-accent-darker-10:#9e1313;
--wp-components-color-accent-darker-20:#710d0d;
.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link){
.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled,[aria-disabled=true]){
.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus{
box-shadow:0 0 0 var(--wp-admin-border-width-focus) #cc1818;
.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled,[aria-disabled=true]){
.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):disabled,.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link)[aria-disabled=true]{
.components-button.is-destructive.is-secondary:hover:not(:disabled,[aria-disabled=true]),.components-button.is-destructive.is-tertiary:hover:not(:disabled,[aria-disabled=true]){
.components-button.is-destructive.is-secondary:active:not(:disabled,[aria-disabled=true]),.components-button.is-destructive.is-tertiary:active:not(:disabled,[aria-disabled=true]){
.components-button.is-link{
color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
text-decoration:underline;
@media not (prefers-reduced-motion){
.components-button.is-link{
transition-duration:.05s;
transition-property:border, background, color;
transition-timing-function:ease-in-out;
.components-button.is-link{
.components-button.is-link:focus{
.components-button.is-link:disabled,.components-button.is-link[aria-disabled=true]{
.components-button:not(:disabled,[aria-disabled=true]):active{
color:var(--wp-components-color-foreground, #1e1e1e);
.components-button:disabled,.components-button[aria-disabled=true]{
@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:components-button__busy-animation 2.5s linear infinite;
.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]{
background-image:linear-gradient(-45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0);
background-size:100px 100%;
.components-button.is-compact{
.components-button.is-compact.has-icon:not(.has-text){
.components-button.is-small{
.components-button.is-small.has-icon:not(.has-text){
.components-button.has-icon{
.components-button.has-icon.is-next-40px-default-size{
.components-button.has-icon .dashicon{
.components-button.has-icon.has-text{
.components-button.has-icon.has-text.has-icon-right{
.components-button.is-pressed,.components-button.is-pressed:hover{
color:var(--wp-components-color-foreground-inverted, #fff);
.components-button.is-pressed:hover:not(:disabled,[aria-disabled=true]),.components-button.is-pressed:not(:disabled,[aria-disabled=true]){
background:var(--wp-components-color-foreground, #1e1e1e);
.components-button.is-pressed:disabled,.components-button.is-pressed[aria-disabled=true]{
.components-button.is-pressed:disabled:not(.is-primary):not(.is-secondary):not(.is-tertiary),.components-button.is-pressed[aria-disabled=true]:not(.is-primary):not(.is-secondary):not(.is-tertiary){
color:var(--wp-components-color-foreground-inverted, #fff);
.components-button.is-pressed:focus:not(:disabled){
box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@media (forced-colors:active){
.components-button .components-visually-hidden{
@keyframes components-button__busy-animation{
background-position:200px 0;
background-color:var(--wp-components-color-background, #fff);
color:var(--wp-components-color-foreground, #1e1e1e);
.components-calendar,.components-calendar *,.components-calendar :after,.components-calendar :before{
.components-calendar__day{
.components-calendar__day:has(.components-calendar__day-button:disabled){
color:var(--wp-components-color-gray-600, #949494);
.components-calendar__day:has(.components-calendar__day-button:focus-visible),.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)){
color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-calendar__day-button{
font-variant-numeric:tabular-nums;
.components-calendar__day-button:before{
.components-calendar__day-button:after{
.components-calendar__day-button:disabled{
@media (forced-colors:active){
.components-calendar__day-button:disabled{
text-decoration:line-through;
.components-calendar__day-button:focus-visible{
outline:var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
.components-calendar__caption-label{
text-transform:capitalize;