[Summary view] [Print] [Text view]

   1  @charset "UTF-8";
   2  /**
   3   * Typography
   4   */
   5  /**
   6   * SCSS Variables.
   7   *
   8   * Please use variables from this sheet to ensure consistency across the UI.
   9   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  10   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  11   */
  12  /**
  13   * Colors
  14   */
  15  /**
  16   * Fonts & basic variables.
  17   */
  18  /**
  19   * Typography
  20   */
  21  /**
  22   * Grid System.
  23   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  24   */
  25  /**
  26   * Radius scale.
  27   */
  28  /**
  29   * Elevation scale.
  30   */
  31  /**
  32   * Dimensions.
  33   */
  34  /**
  35   * Mobile specific styles
  36   */
  37  /**
  38   * Editor styles.
  39   */
  40  /**
  41   * Block & Editor UI.
  42   */
  43  /**
  44   * Block paddings.
  45   */
  46  /**
  47   * React Native specific.
  48   * These variables do not appear to be used anywhere else.
  49   */
  50  /**
  51   * Breakpoints & Media Queries
  52   */
  53  /**
  54  *  Converts a hex value into the rgb equivalent.
  55  *
  56  * @param {string} hex - the hexadecimal value to convert
  57  * @return {string} comma separated rgb values
  58  */
  59  /**
  60   * Long content fade mixin
  61   *
  62   * Creates a fading overlay to signify that the content is longer
  63   * than the space allows.
  64   */
  65  /**
  66   * Breakpoint mixins
  67   */
  68  /**
  69   * Focus styles.
  70   */
  71  /**
  72   * Applies editor left position to the selector passed as argument
  73   */
  74  /**
  75   * Styles that are reused verbatim in a few places
  76   */
  77  /**
  78   * Allows users to opt-out of animations via OS-level preferences.
  79   */
  80  /**
  81   * Reset default styles for JavaScript UI based pages.
  82   * This is a WP-admin agnostic reset
  83   */
  84  /**
  85   * Reset the WP Admin page styles for Gutenberg-like pages.
  86   */
  87  /**
  88   * Creates a checkerboard pattern background to indicate transparency.
  89   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  90   */
  91  @media not (prefers-reduced-motion) {
  92    .components-animate__appear {
  93      animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
  94      animation-fill-mode: forwards;
  95    }
  96  }
  97  .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left {
  98    transform-origin: top left;
  99  }
 100  .components-animate__appear.is-from-top.is-from-right {
 101    transform-origin: top right;
 102  }
 103  .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left {
 104    transform-origin: bottom left;
 105  }
 106  .components-animate__appear.is-from-bottom.is-from-right {
 107    transform-origin: bottom right;
 108  }
 109  
 110  @keyframes components-animate__appear-animation {
 111    from {
 112      transform: translateY(-2em) scaleY(0) scaleX(0);
 113    }
 114    to {
 115      transform: translateY(0%) scaleY(1) scaleX(1);
 116    }
 117  }
 118  @media not (prefers-reduced-motion) {
 119    .components-animate__slide-in {
 120      animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
 121      animation-fill-mode: forwards;
 122    }
 123    .components-animate__slide-in.is-from-left {
 124      transform: translateX(100%);
 125    }
 126    .components-animate__slide-in.is-from-right {
 127      transform: translateX(-100%);
 128    }
 129  }
 130  
 131  @keyframes components-animate__slide-in-animation {
 132    100% {
 133      transform: translateX(0%);
 134    }
 135  }
 136  @media not (prefers-reduced-motion) {
 137    .components-animate__loading {
 138      animation: components-animate__loading 1.6s ease-in-out infinite;
 139    }
 140  }
 141  
 142  @keyframes components-animate__loading {
 143    0% {
 144      opacity: 0.5;
 145    }
 146    50% {
 147      opacity: 1;
 148    }
 149    100% {
 150      opacity: 0.5;
 151    }
 152  }
 153  .components-autocomplete__popover .components-popover__content {
 154    padding: 8px;
 155    min-width: 200px;
 156  }
 157  
 158  .components-autocomplete__result.components-button {
 159    display: flex;
 160    height: auto;
 161    min-height: 36px;
 162    text-align: left;
 163    width: 100%;
 164  }
 165  .components-autocomplete__result.components-button:focus:not(:disabled) {
 166    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 167    outline: 2px solid transparent;
 168  }
 169  
 170  .components-badge {
 171    box-sizing: border-box;
 172  }
 173  .components-badge *,
 174  .components-badge *::before,
 175  .components-badge *::after {
 176    box-sizing: inherit;
 177  }
 178  .components-badge {
 179    background-color: color-mix(in srgb, #fff 90%, var(--base-color));
 180    color: color-mix(in srgb, #000 50%, var(--base-color));
 181    padding: 2px 8px;
 182    min-height: 24px;
 183    border-radius: 2px;
 184    line-height: 0;
 185    max-width: 100%;
 186    display: inline-block;
 187  }
 188  .components-badge:where(.is-default) {
 189    background-color: #f0f0f0;
 190    color: #2f2f2f;
 191  }
 192  .components-badge.has-icon {
 193    padding-inline-start: 4px;
 194  }
 195  .components-badge.is-info {
 196    --base-color: #3858e9;
 197  }
 198  .components-badge.is-warning {
 199    --base-color: #f0b849;
 200  }
 201  .components-badge.is-error {
 202    --base-color: #cc1818;
 203  }
 204  .components-badge.is-success {
 205    --base-color: #4ab866;
 206  }
 207  
 208  .components-badge__flex-wrapper {
 209    display: inline-flex;
 210    align-items: center;
 211    gap: 2px;
 212    max-width: 100%;
 213    font-size: 12px;
 214    font-weight: 400;
 215    line-height: 20px;
 216  }
 217  
 218  .components-badge__icon {
 219    flex-shrink: 0;
 220  }
 221  
 222  .components-badge__content {
 223    overflow: hidden;
 224    white-space: nowrap;
 225    text-overflow: ellipsis;
 226  }
 227  
 228  .components-button-group {
 229    display: inline-block;
 230  }
 231  .components-button-group .components-button {
 232    border-radius: 0;
 233    display: inline-flex;
 234    color: #1e1e1e;
 235    box-shadow: inset 0 0 0 1px #1e1e1e;
 236  }
 237  .components-button-group .components-button + .components-button {
 238    margin-left: -1px;
 239  }
 240  .components-button-group .components-button:first-child {
 241    border-radius: 2px 0 0 2px;
 242  }
 243  .components-button-group .components-button:last-child {
 244    border-radius: 0 2px 2px 0;
 245  }
 246  .components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
 247    position: relative;
 248    z-index: 1;
 249  }
 250  .components-button-group .components-button.is-primary {
 251    box-shadow: inset 0 0 0 1px #1e1e1e;
 252  }
 253  
 254  /**
 255   * For easier testing of potential regressions, you can use a Button variant matrix
 256   * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
 257   *
 258   * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
 259   */
 260  .components-button {
 261    display: inline-flex;
 262    text-decoration: none;
 263    font-family: inherit;
 264    font-size: 13px;
 265    font-weight: 499;
 266    margin: 0;
 267    border: 0;
 268    cursor: pointer;
 269    appearance: none;
 270    background: none;
 271  }
 272  @media not (prefers-reduced-motion) {
 273    .components-button {
 274      transition: box-shadow 0.1s linear;
 275    }
 276  }
 277  .components-button {
 278    height: 36px;
 279    align-items: center;
 280    box-sizing: border-box;
 281    padding: 4px 12px;
 282    border-radius: 2px;
 283    color: var(--wp-components-color-foreground, #1e1e1e);
 284  }
 285  .components-button.is-next-40px-default-size {
 286    height: 40px;
 287  }
 288  .components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
 289    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 290  }
 291  .components-button:focus:not(:active) {
 292    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 293  }
 294  .components-button {
 295    /**
 296     * Primary button style.
 297     */
 298  }
 299  .components-button.is-primary {
 300    white-space: nowrap;
 301    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 302    color: var(--wp-components-color-accent-inverted, #fff);
 303    text-decoration: none;
 304    text-shadow: none;
 305    outline: 1px solid transparent;
 306  }
 307  .components-button.is-primary:hover:not(:disabled) {
 308    background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 309    color: var(--wp-components-color-accent-inverted, #fff);
 310  }
 311  .components-button.is-primary:active:not(:disabled) {
 312    background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 313    border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 314    color: var(--wp-components-color-accent-inverted, #fff);
 315  }
 316  .components-button.is-primary:focus:not(:active) {
 317    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));
 318  }
 319  .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]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
 320    color: rgba(255, 255, 255, 0.4);
 321    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 322    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 323    outline: none;
 324  }
 325  .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
 326    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));
 327  }
 328  .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
 329    color: var(--wp-components-color-accent-inverted, #fff);
 330    background-size: 100px 100%;
 331    /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 332    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%);
 333    /* stylelint-enable */
 334    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 335  }
 336  .components-button {
 337    /**
 338     * Secondary and tertiary buttons.
 339     */
 340  }
 341  .components-button.is-secondary, .components-button.is-tertiary {
 342    outline: 1px solid transparent;
 343  }
 344  .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
 345    box-shadow: none;
 346  }
 347  .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 {
 348    color: #949494;
 349    background: transparent;
 350    transform: none;
 351  }
 352  .components-button {
 353    /**
 354     * Secondary button style.
 355     */
 356  }
 357  .components-button.is-secondary {
 358    box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
 359    outline: 1px solid transparent;
 360    white-space: nowrap;
 361    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 362    background: transparent;
 363  }
 364  .components-button.is-secondary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
 365    box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 366    color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 367    background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 368  }
 369  .components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
 370    box-shadow: inset 0 0 0 1px #ddd;
 371  }
 372  .components-button.is-secondary:focus:not(:active) {
 373    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));
 374  }
 375  .components-button {
 376    /**
 377     * Tertiary buttons.
 378     */
 379  }
 380  .components-button.is-tertiary {
 381    white-space: nowrap;
 382    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 383    background: transparent;
 384  }
 385  .components-button.is-tertiary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
 386    background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 387    color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 388  }
 389  .components-button.is-tertiary:active:not(:disabled, [aria-disabled=true]) {
 390    background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 8%, transparent);
 391  }
 392  p + .components-button.is-tertiary {
 393    margin-left: -6px;
 394  }
 395  .components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
 396    box-shadow: none;
 397    outline: none;
 398  }
 399  .components-button {
 400    /**
 401     * Destructive buttons.
 402     */
 403  }
 404  .components-button.is-destructive {
 405    --wp-components-color-accent: #cc1818;
 406    --wp-components-color-accent-darker-10: rgb(158.3684210526, 18.6315789474, 18.6315789474);
 407    --wp-components-color-accent-darker-20: rgb(112.7368421053, 13.2631578947, 13.2631578947);
 408  }
 409  .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
 410    color: #cc1818;
 411  }
 412  .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
 413    color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
 414  }
 415  .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
 416    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
 417  }
 418  .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
 419    background: #ccc;
 420  }
 421  .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] {
 422    color: #949494;
 423  }
 424  .components-button.is-destructive.is-tertiary:hover:not(:disabled, [aria-disabled=true]), .components-button.is-destructive.is-secondary:hover:not(:disabled, [aria-disabled=true]) {
 425    background: rgba(204, 24, 24, 0.04);
 426  }
 427  .components-button.is-destructive.is-tertiary:active:not(:disabled, [aria-disabled=true]), .components-button.is-destructive.is-secondary:active:not(:disabled, [aria-disabled=true]) {
 428    background: rgba(204, 24, 24, 0.08);
 429  }
 430  .components-button {
 431    /**
 432     * Link buttons.
 433     */
 434  }
 435  .components-button.is-link {
 436    margin: 0;
 437    padding: 0;
 438    box-shadow: none;
 439    border: 0;
 440    border-radius: 0;
 441    background: none;
 442    outline: none;
 443    text-align: left;
 444    font-weight: 400;
 445    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 446    text-decoration: underline;
 447  }
 448  @media not (prefers-reduced-motion) {
 449    .components-button.is-link {
 450      transition-property: border, background, color;
 451      transition-duration: 0.05s;
 452      transition-timing-function: ease-in-out;
 453    }
 454  }
 455  .components-button.is-link {
 456    height: auto;
 457  }
 458  .components-button.is-link:focus {
 459    border-radius: 2px;
 460  }
 461  .components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
 462    color: #949494;
 463  }
 464  .components-button:focus {
 465    outline: 3px solid transparent;
 466  }
 467  .components-button:not(:disabled, [aria-disabled=true]):active {
 468    color: var(--wp-components-color-foreground, #1e1e1e);
 469  }
 470  .components-button:disabled, .components-button[aria-disabled=true] {
 471    cursor: default;
 472    color: #949494;
 473  }
 474  @media not (prefers-reduced-motion) {
 475    .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] {
 476      animation: components-button__busy-animation 2500ms infinite linear;
 477    }
 478  }
 479  .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] {
 480    background-size: 100px 100%;
 481    /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 482    background-image: linear-gradient(-45deg, rgb(249.9, 249.9, 249.9) 33%, rgb(224.4, 224.4, 224.4) 33%, rgb(224.4, 224.4, 224.4) 70%, rgb(249.9, 249.9, 249.9) 70%);
 483    /* stylelint-enable */
 484  }
 485  .components-button.is-compact {
 486    height: 32px;
 487  }
 488  .components-button.is-compact.has-icon:not(.has-text) {
 489    padding: 0;
 490    min-width: 32px;
 491  }
 492  .components-button.is-small {
 493    height: 24px;
 494    line-height: 22px;
 495    padding: 0 8px;
 496    font-size: 11px;
 497  }
 498  .components-button.is-small.has-icon:not(.has-text) {
 499    padding: 0;
 500    min-width: 24px;
 501  }
 502  .components-button.has-icon {
 503    padding: 6px;
 504    min-width: 36px;
 505    justify-content: center;
 506  }
 507  .components-button.has-icon.is-next-40px-default-size {
 508    min-width: 40px;
 509  }
 510  .components-button.has-icon .dashicon {
 511    display: inline-flex;
 512    justify-content: center;
 513    align-items: center;
 514    padding: 2px;
 515    box-sizing: content-box;
 516  }
 517  .components-button.has-icon.has-text {
 518    justify-content: start;
 519    padding-right: 12px;
 520    padding-left: 8px;
 521    gap: 4px;
 522  }
 523  .components-button.has-icon.has-text.has-icon-right {
 524    padding-right: 8px;
 525    padding-left: 12px;
 526  }
 527  .components-button.is-pressed, .components-button.is-pressed:hover {
 528    color: var(--wp-components-color-foreground-inverted, #fff);
 529  }
 530  .components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
 531    background: var(--wp-components-color-foreground, #1e1e1e);
 532  }
 533  .components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
 534    color: #949494;
 535  }
 536  .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) {
 537    color: var(--wp-components-color-foreground-inverted, #fff);
 538    background: #949494;
 539  }
 540  .components-button.is-pressed:focus:not(:active) {
 541    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));
 542  }
 543  .components-button.is-pressed:focus {
 544    outline: 2px solid transparent;
 545  }
 546  .components-button svg {
 547    fill: currentColor;
 548    outline: none;
 549    flex-shrink: 0;
 550  }
 551  @media (forced-colors: active) {
 552    .components-button svg {
 553      fill: CanvasText;
 554    }
 555  }
 556  .components-button .components-visually-hidden {
 557    height: auto;
 558  }
 559  
 560  @keyframes components-button__busy-animation {
 561    0% {
 562      background-position: 200px 0;
 563    }
 564  }
 565  /* Root of the component. */
 566  .components-calendar {
 567    position: relative; /* Required to position the navigation toolbar. */
 568    box-sizing: border-box;
 569    display: inline flow-root;
 570    color: var(--wp-components-color-foreground, #1e1e1e);
 571    background-color: var(--wp-components-color-background, #fff);
 572    font-size: 13px;
 573    font-weight: 400;
 574    z-index: 0;
 575  }
 576  .components-calendar *,
 577  .components-calendar *::before,
 578  .components-calendar *::after {
 579    box-sizing: border-box;
 580  }
 581  
 582  .components-calendar__day {
 583    padding: 0;
 584    position: relative;
 585  }
 586  .components-calendar__day:has(.components-calendar__day-button:disabled) {
 587    color: var(--wp-components-color-gray-400, #ccc);
 588  }
 589  .components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
 590    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 591  }
 592  
 593  .components-calendar__day-button {
 594    background: none;
 595    padding: 0;
 596    margin: 0;
 597    cursor: pointer;
 598    justify-content: center;
 599    align-items: center;
 600    display: flex;
 601    position: relative;
 602    width: 32px;
 603    height: 32px;
 604    border: none;
 605    border-radius: 2px;
 606    font: inherit;
 607    font-variant-numeric: tabular-nums;
 608    color: inherit;
 609  }
 610  .components-calendar__day-button::before {
 611    content: "";
 612    position: absolute;
 613    z-index: -1;
 614    inset: 0;
 615    border: none;
 616    border-radius: 2px;
 617  }
 618  .components-calendar__day-button::after {
 619    content: "";
 620    position: absolute;
 621    z-index: 1;
 622    inset: 0;
 623    pointer-events: none;
 624  }
 625  .components-calendar__day-button:disabled {
 626    cursor: revert;
 627  }
 628  @media (forced-colors: active) {
 629    .components-calendar__day-button:disabled {
 630      text-decoration: line-through;
 631    }
 632  }
 633  .components-calendar__day-button:focus-visible {
 634    outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 635    outline-offset: 1px;
 636  }
 637  
 638  .components-calendar__caption-label {
 639    z-index: 1;
 640    position: relative;
 641    display: inline-flex;
 642    align-items: center;
 643    white-space: nowrap;
 644    border: 0;
 645    text-transform: capitalize;
 646  }
 647  
 648  .components-calendar__button-next,
 649  .components-calendar__button-previous {
 650    border: none;
 651    border-radius: 2px;
 652    background: none;
 653    padding: 0;
 654    margin: 0;
 655    cursor: pointer;
 656    appearance: none;
 657    display: inline-flex;
 658    align-items: center;
 659    justify-content: center;
 660    position: relative;
 661    width: 32px;
 662    height: 32px;
 663    color: inherit;
 664  }
 665  .components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
 666  .components-calendar__button-previous:disabled,
 667  .components-calendar__button-previous[aria-disabled=true] {
 668    cursor: revert;
 669    color: var(--wp-components-color-gray-600, #949494);
 670  }
 671  .components-calendar__button-next:focus-visible,
 672  .components-calendar__button-previous:focus-visible {
 673    outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 674  }
 675  
 676  .components-calendar__chevron {
 677    display: inline-block;
 678    fill: currentColor;
 679    width: 16px;
 680    height: 16px;
 681  }
 682  
 683  .components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
 684    transform: rotate(180deg);
 685    transform-origin: 50%;
 686  }
 687  
 688  .components-calendar__month-caption {
 689    display: flex;
 690    justify-content: center;
 691    align-content: center;
 692    height: 32px;
 693    margin-bottom: 12px;
 694  }
 695  
 696  .components-calendar__months {
 697    position: relative;
 698    display: flex;
 699    justify-content: center;
 700    flex-wrap: wrap;
 701    gap: 16px;
 702    max-width: fit-content;
 703  }
 704  
 705  .components-calendar__month-grid {
 706    border-collapse: separate;
 707    border-spacing: 0 4px;
 708  }
 709  
 710  .components-calendar__nav {
 711    position: absolute;
 712    inset-block-start: 0;
 713    inset-inline-start: 0;
 714    inset-inline-end: 0;
 715    display: flex;
 716    align-items: center;
 717    justify-content: space-between;
 718    height: 32px;
 719  }
 720  
 721  .components-calendar__weekday {
 722    width: 32px;
 723    height: 32px;
 724    padding: 0;
 725    color: var(--wp-components-color-gray-700, #757575);
 726    text-align: center;
 727    text-transform: uppercase;
 728  }
 729  
 730  /* DAY MODIFIERS */
 731  .components-calendar__day--today::after {
 732    content: "";
 733    position: absolute;
 734    z-index: 1;
 735    inset-block-start: 2px;
 736    inset-inline-end: 2px;
 737    width: 0;
 738    height: 0;
 739    border-radius: 50%;
 740    border: 2px solid currentColor;
 741  }
 742  
 743  .components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
 744  .components-calendar__day-button:hover:not(:disabled)) {
 745    color: var(--wp-components-color-foreground-inverted, #fff);
 746  }
 747  .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
 748    background-color: var(--wp-components-color-foreground, #1e1e1e);
 749    border: 1px solid transparent;
 750  }
 751  .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
 752    background-color: var(--wp-components-color-gray-600, #949494);
 753  }
 754  .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
 755    background-color: var(--wp-components-color-gray-800, #2f2f2f);
 756  }
 757  
 758  .components-calendar__day--hidden {
 759    visibility: hidden;
 760  }
 761  
 762  .components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button, .components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button::before {
 763    border-start-end-radius: 0;
 764    border-end-end-radius: 0;
 765  }
 766  
 767  .components-calendar__range-middle .components-calendar__day-button::before {
 768    background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 769    border-radius: 0;
 770    border-width: 1px 0;
 771    border-color: transparent;
 772    border-style: solid;
 773  }
 774  
 775  .components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button, .components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button::before {
 776    border-start-start-radius: 0;
 777    border-end-start-radius: 0;
 778  }
 779  
 780  /*
 781   * RANGE PREVIEW (range calendar only)
 782   *
 783   * The preview is rendered in the button's ::after pseudo-element, so that it
 784   * can be rendered over the button's contents.
 785   * The selection preview is shown with a dashed border. In order to have
 786   * control over the dash pattern (especially the seams between days), the
 787   * dashed borders are rendered as SVGs via the url() CSS function.
 788   * Since SVGs rendered in the url() function don't seem to be able to access
 789   * CSS variables, we're using the SVGs as masks, and using `background-color`
 790   * to consume the accent color variable.
 791   */
 792  .components-calendar__day--preview svg {
 793    position: absolute;
 794    inset: 0;
 795    pointer-events: none;
 796    color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
 797  }
 798  @media (forced-colors: active) {
 799    .components-calendar__day--preview svg {
 800      color: inherit;
 801    }
 802  }
 803  .components-calendar[dir=rtl] .components-calendar__day--preview svg {
 804    transform: scaleX(-1);
 805  }
 806  
 807  .components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
 808    border: none;
 809  }
 810  
 811  /* ANIMATIONS */
 812  @keyframes slide-in-left {
 813    0% {
 814      transform: translateX(-100%);
 815    }
 816    100% {
 817      transform: translateX(0);
 818    }
 819  }
 820  @keyframes slide-in-right {
 821    0% {
 822      transform: translateX(100%);
 823    }
 824    100% {
 825      transform: translateX(0);
 826    }
 827  }
 828  @keyframes slide-out-left {
 829    0% {
 830      transform: translateX(0);
 831    }
 832    100% {
 833      transform: translateX(-100%);
 834    }
 835  }
 836  @keyframes slide-out-right {
 837    0% {
 838      transform: translateX(0);
 839    }
 840    100% {
 841      transform: translateX(100%);
 842    }
 843  }
 844  @keyframes fade-in {
 845    from {
 846      opacity: 0;
 847    }
 848    to {
 849      opacity: 1;
 850    }
 851  }
 852  @keyframes fade-out {
 853    from {
 854      opacity: 1;
 855    }
 856    to {
 857      opacity: 0;
 858    }
 859  }
 860  .components-calendar__weeks-before-enter,
 861  .components-calendar__weeks-before-exit,
 862  .components-calendar__weeks-after-enter,
 863  .components-calendar__weeks-after-exit,
 864  .components-calendar__caption-after-enter,
 865  .components-calendar__caption-after-exit,
 866  .components-calendar__caption-before-enter,
 867  .components-calendar__caption-before-exit {
 868    animation-duration: 0s;
 869    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 870    animation-fill-mode: forwards;
 871  }
 872  @media not (prefers-reduced-motion) {
 873    .components-calendar__weeks-before-enter,
 874    .components-calendar__weeks-before-exit,
 875    .components-calendar__weeks-after-enter,
 876    .components-calendar__weeks-after-exit,
 877    .components-calendar__caption-after-enter,
 878    .components-calendar__caption-after-exit,
 879    .components-calendar__caption-before-enter,
 880    .components-calendar__caption-before-exit {
 881      animation-duration: 0.3s;
 882    }
 883  }
 884  
 885  .components-calendar__weeks-before-enter,
 886  .components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
 887    animation-name: slide-in-left;
 888  }
 889  
 890  .components-calendar__weeks-before-exit,
 891  .components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
 892    animation-name: slide-out-left;
 893  }
 894  
 895  .components-calendar__weeks-after-enter,
 896  .components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
 897    animation-name: slide-in-right;
 898  }
 899  
 900  .components-calendar__weeks-after-exit,
 901  .components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
 902    animation-name: slide-out-right;
 903  }
 904  
 905  .components-calendar__caption-after-enter {
 906    animation-name: fade-in;
 907  }
 908  
 909  .components-calendar__caption-after-exit {
 910    animation-name: fade-out;
 911  }
 912  
 913  .components-calendar__caption-before-enter {
 914    animation-name: fade-in;
 915  }
 916  
 917  .components-calendar__caption-before-exit {
 918    animation-name: fade-out;
 919  }
 920  
 921  .components-checkbox-control {
 922    --checkbox-input-size: 24px;
 923  }
 924  @media (min-width: 600px) {
 925    .components-checkbox-control {
 926      --checkbox-input-size: 16px;
 927    }
 928  }
 929  .components-checkbox-control {
 930    --checkbox-input-margin: 8px;
 931  }
 932  
 933  .components-checkbox-control__label {
 934    line-height: var(--checkbox-input-size);
 935    cursor: pointer;
 936  }
 937  
 938  .components-checkbox-control__input[type=checkbox] {
 939    border: 1px solid #1e1e1e;
 940    margin-right: 12px;
 941    transition: none;
 942    border-radius: 2px;
 943    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 944    padding: 6px 8px;
 945    /* Fonts smaller than 16px causes mobile safari to zoom. */
 946    font-size: 16px;
 947    /* Override core line-height. To be reviewed. */
 948    line-height: normal;
 949    box-shadow: 0 0 0 transparent;
 950    border-radius: 2px;
 951    border: 1px solid #949494;
 952  }
 953  @media not (prefers-reduced-motion) {
 954    .components-checkbox-control__input[type=checkbox] {
 955      transition: box-shadow 0.1s linear;
 956    }
 957  }
 958  @media (min-width: 600px) {
 959    .components-checkbox-control__input[type=checkbox] {
 960      font-size: 13px;
 961      /* Override core line-height. To be reviewed. */
 962      line-height: normal;
 963    }
 964  }
 965  .components-checkbox-control__input[type=checkbox]:focus {
 966    border-color: var(--wp-admin-theme-color);
 967    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 968    outline: 2px solid transparent;
 969  }
 970  .components-checkbox-control__input[type=checkbox]::placeholder {
 971    color: rgba(30, 30, 30, 0.62);
 972  }
 973  .components-checkbox-control__input[type=checkbox]:focus {
 974    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
 975    outline: 2px solid transparent;
 976  }
 977  .components-checkbox-control__input[type=checkbox]:checked {
 978    background: var(--wp-admin-theme-color);
 979    border-color: var(--wp-admin-theme-color);
 980  }
 981  .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
 982    margin: -3px -5px;
 983    color: #fff;
 984  }
 985  @media (min-width: 782px) {
 986    .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
 987      margin: -4px 0 0 -5px;
 988    }
 989  }
 990  .components-checkbox-control__input[type=checkbox][aria-checked=mixed] {
 991    background: var(--wp-admin-theme-color);
 992    border-color: var(--wp-admin-theme-color);
 993  }
 994  .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
 995    content: "\f460";
 996    float: left;
 997    display: inline-block;
 998    vertical-align: middle;
 999    width: 16px;
1000    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1001    font: normal 30px/1 dashicons;
1002    speak: none;
1003    -webkit-font-smoothing: antialiased;
1004    -moz-osx-font-smoothing: grayscale;
1005  }
1006  @media (min-width: 782px) {
1007    .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
1008      float: none;
1009      font-size: 21px;
1010    }
1011  }
1012  .components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
1013    background: #f0f0f0;
1014    border-color: #ddd;
1015    cursor: default;
1016    opacity: 1;
1017  }
1018  .components-checkbox-control__input[type=checkbox] {
1019    background: #fff;
1020    color: #1e1e1e;
1021    clear: none;
1022    cursor: pointer;
1023    display: inline-block;
1024    line-height: 0;
1025    margin: 0 4px 0 0;
1026    outline: 0;
1027    padding: 0 !important;
1028    text-align: center;
1029    vertical-align: top;
1030    width: var(--checkbox-input-size);
1031    height: var(--checkbox-input-size);
1032    appearance: none;
1033  }
1034  @media not (prefers-reduced-motion) {
1035    .components-checkbox-control__input[type=checkbox] {
1036      transition: 0.1s border-color ease-in-out;
1037    }
1038  }
1039  .components-checkbox-control__input[type=checkbox]:focus {
1040    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
1041    outline: 2px solid transparent;
1042    outline-offset: 2px;
1043  }
1044  .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
1045    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1046    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1047  }
1048  .components-checkbox-control__input[type=checkbox]:checked::before {
1049    content: none;
1050  }
1051  
1052  .components-checkbox-control__input-container {
1053    position: relative;
1054    display: inline-block;
1055    margin-right: var(--checkbox-input-margin);
1056    vertical-align: middle;
1057    width: var(--checkbox-input-size);
1058    aspect-ratio: 1;
1059    line-height: 1;
1060    flex-shrink: 0;
1061  }
1062  
1063  svg.components-checkbox-control__checked,
1064  svg.components-checkbox-control__indeterminate {
1065    --checkmark-size: var(--checkbox-input-size);
1066    fill: #fff;
1067    cursor: pointer;
1068    position: absolute;
1069    left: 50%;
1070    top: 50%;
1071    transform: translate(-50%, -50%);
1072    width: var(--checkmark-size);
1073    height: var(--checkmark-size);
1074    -webkit-user-select: none;
1075            user-select: none;
1076    pointer-events: none;
1077  }
1078  @media (min-width: 600px) {
1079    svg.components-checkbox-control__checked,
1080    svg.components-checkbox-control__indeterminate {
1081      --checkmark-size: calc(var(--checkbox-input-size) + 4px);
1082    }
1083  }
1084  
1085  .components-checkbox-control__help {
1086    display: inline-block;
1087    margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
1088  }
1089  
1090  .components-circular-option-picker {
1091    display: inline-block;
1092    width: 100%;
1093    min-width: 188px;
1094  }
1095  .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
1096    display: flex;
1097    justify-content: flex-end;
1098    margin-top: 12px;
1099  }
1100  .components-circular-option-picker .components-circular-option-picker__swatches {
1101    display: flex;
1102    flex-wrap: wrap;
1103    gap: 12px;
1104    position: relative;
1105    z-index: 1;
1106  }
1107  .components-circular-option-picker > *:not(.components-circular-option-picker__swatches) {
1108    position: relative;
1109    z-index: 0;
1110  }
1111  
1112  .components-circular-option-picker__option-wrapper {
1113    display: inline-block;
1114    height: 28px;
1115    width: 28px;
1116    vertical-align: top;
1117    transform: scale(1);
1118  }
1119  @media not (prefers-reduced-motion) {
1120    .components-circular-option-picker__option-wrapper {
1121      transition: 100ms transform ease;
1122      will-change: transform;
1123    }
1124  }
1125  .components-circular-option-picker__option-wrapper:hover {
1126    transform: scale(1.2);
1127  }
1128  .components-circular-option-picker__option-wrapper > div {
1129    height: 100%;
1130    width: 100%;
1131  }
1132  
1133  .components-circular-option-picker__option-wrapper::before {
1134    content: "";
1135    position: absolute;
1136    top: 1px;
1137    left: 1px;
1138    bottom: 1px;
1139    right: 1px;
1140    border-radius: 50%;
1141    z-index: -1;
1142    /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1143    background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
1144  }
1145  
1146  .components-circular-option-picker__option {
1147    display: inline-block;
1148    vertical-align: top;
1149    height: 100% !important;
1150    aspect-ratio: 1;
1151    border: none;
1152    border-radius: 50%;
1153    background: transparent;
1154    box-shadow: inset 0 0 0 14px;
1155  }
1156  @media not (prefers-reduced-motion) {
1157    .components-circular-option-picker__option {
1158      transition: 100ms box-shadow ease;
1159    }
1160  }
1161  .components-circular-option-picker__option {
1162    cursor: pointer;
1163  }
1164  .components-circular-option-picker__option:hover {
1165    box-shadow: inset 0 0 0 14px !important;
1166  }
1167  .components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
1168    box-shadow: inset 0 0 0 4px;
1169    position: relative;
1170    z-index: 1;
1171    overflow: visible;
1172  }
1173  .components-circular-option-picker__option[aria-pressed=true] + svg, .components-circular-option-picker__option[aria-selected=true] + svg {
1174    position: absolute;
1175    left: 2px;
1176    top: 2px;
1177    border-radius: 50%;
1178    z-index: 2;
1179    pointer-events: none;
1180  }
1181  .components-circular-option-picker__option::after {
1182    content: "";
1183    position: absolute;
1184    top: -1px;
1185    left: -1px;
1186    bottom: -1px;
1187    right: -1px;
1188    border-radius: 50%;
1189    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1190    border: 1px solid transparent;
1191    box-sizing: inherit;
1192  }
1193  .components-circular-option-picker__option:focus::after {
1194    content: "";
1195    border-radius: 50%;
1196    box-shadow: inset 0 0 0 2px #fff;
1197    position: absolute;
1198    top: 50%;
1199    left: 50%;
1200    transform: translate(-50%, -50%);
1201    border: 2px solid #757575;
1202    width: calc(100% + 4px);
1203    height: calc(100% + 4px);
1204  }
1205  .components-circular-option-picker__option.components-button:focus {
1206    background-color: transparent;
1207    box-shadow: inset 0 0 0 14px;
1208    outline: none;
1209  }
1210  
1211  .components-circular-option-picker__button-action .components-circular-option-picker__option {
1212    color: #fff;
1213    background: #fff;
1214  }
1215  
1216  .components-circular-option-picker__dropdown-link-action {
1217    margin-right: 16px;
1218  }
1219  .components-circular-option-picker__dropdown-link-action .components-button {
1220    line-height: 22px;
1221  }
1222  
1223  .components-palette-edit__popover-gradient-picker {
1224    width: 260px;
1225    padding: 8px;
1226  }
1227  
1228  .components-dropdown-menu__menu .components-palette-edit__menu-button {
1229    width: 100%;
1230  }
1231  
1232  .component-color-indicator {
1233    width: 20px;
1234    height: 20px;
1235    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1236    border-radius: 50%;
1237    display: inline-block;
1238    padding: 0;
1239    background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1240  }
1241  
1242  .components-combobox-control {
1243    width: 100%;
1244  }
1245  
1246  input.components-combobox-control__input[type=text] {
1247    width: 100%;
1248    border: none;
1249    box-shadow: none;
1250    font-family: inherit;
1251    font-size: 16px;
1252    padding: 2px;
1253    margin: 0;
1254    line-height: inherit;
1255    min-height: auto;
1256    background: var(--wp-components-color-background, #fff);
1257    color: var(--wp-components-color-foreground, #1e1e1e);
1258  }
1259  @media (min-width: 600px) {
1260    input.components-combobox-control__input[type=text] {
1261      font-size: 13px;
1262    }
1263  }
1264  input.components-combobox-control__input[type=text]:focus {
1265    outline: none;
1266    box-shadow: none;
1267  }
1268  
1269  .components-combobox-control__suggestions-container {
1270    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1271    padding: 6px 8px;
1272    /* Fonts smaller than 16px causes mobile safari to zoom. */
1273    font-size: 16px;
1274    /* Override core line-height. To be reviewed. */
1275    line-height: normal;
1276    box-shadow: 0 0 0 transparent;
1277    border-radius: 2px;
1278    border: 1px solid #949494;
1279  }
1280  @media not (prefers-reduced-motion) {
1281    .components-combobox-control__suggestions-container {
1282      transition: box-shadow 0.1s linear;
1283    }
1284  }
1285  @media (min-width: 600px) {
1286    .components-combobox-control__suggestions-container {
1287      font-size: 13px;
1288      /* Override core line-height. To be reviewed. */
1289      line-height: normal;
1290    }
1291  }
1292  .components-combobox-control__suggestions-container:focus {
1293    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1294    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1295    outline: 2px solid transparent;
1296  }
1297  .components-combobox-control__suggestions-container::placeholder {
1298    color: rgba(30, 30, 30, 0.62);
1299  }
1300  .components-combobox-control__suggestions-container {
1301    display: flex;
1302    flex-wrap: wrap;
1303    align-items: flex-start;
1304    width: 100%;
1305    padding: 0;
1306  }
1307  .components-combobox-control__suggestions-container:focus-within {
1308    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1309    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1310    outline: 2px solid transparent;
1311  }
1312  .components-combobox-control__suggestions-container .components-spinner {
1313    margin: 0;
1314  }
1315  
1316  .components-color-palette__custom-color-wrapper {
1317    position: relative;
1318    z-index: 0;
1319  }
1320  
1321  .components-color-palette__custom-color-button {
1322    position: relative;
1323    border: none;
1324    background: none;
1325    height: 64px;
1326    width: 100%;
1327    box-sizing: border-box;
1328    cursor: pointer;
1329    outline: 1px solid transparent;
1330    border-radius: 4px 4px 0 0;
1331    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1332  }
1333  .components-color-palette__custom-color-button:focus {
1334    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1335    outline-width: 2px;
1336  }
1337  .components-color-palette__custom-color-button::after {
1338    content: "";
1339    position: absolute;
1340    inset: 1px;
1341    z-index: -1;
1342    border-radius: 3px 3px 0 0;
1343    /*rtl:begin:ignore*/
1344    background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
1345    background-position: 0 0, 24px 24px;
1346    /*rtl:end:ignore*/
1347    background-size: 48px 48px;
1348  }
1349  
1350  .components-color-palette__custom-color-text-wrapper {
1351    padding: 12px 16px;
1352    border-radius: 0 0 4px 4px;
1353    position: relative;
1354    font-size: 13px;
1355    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2);
1356  }
1357  
1358  .components-color-palette__custom-color-name {
1359    color: var(--wp-components-color-foreground, #1e1e1e);
1360    margin: 0 1px;
1361  }
1362  
1363  .components-color-palette__custom-color-value {
1364    color: #757575;
1365  }
1366  .components-color-palette__custom-color-value--is-hex {
1367    text-transform: uppercase;
1368  }
1369  .components-color-palette__custom-color-value:empty::after {
1370    content: "​";
1371    visibility: hidden;
1372  }
1373  
1374  .components-custom-gradient-picker__gradient-bar {
1375    border-radius: 2px;
1376    width: 100%;
1377    height: 48px;
1378    position: relative;
1379    z-index: 1;
1380  }
1381  .components-custom-gradient-picker__gradient-bar.has-gradient {
1382    /*rtl:begin:ignore*/
1383    background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
1384    background-position: 0 0, 12px 12px;
1385    /*rtl:end:ignore*/
1386    background-size: 24px 24px;
1387  }
1388  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background {
1389    position: absolute;
1390    inset: 0;
1391  }
1392  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
1393    position: relative;
1394    width: calc(100% - 48px);
1395    margin-left: auto;
1396    margin-right: auto;
1397  }
1398  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown {
1399    position: absolute;
1400    height: 16px;
1401    width: 16px;
1402    top: 16px;
1403    display: flex;
1404  }
1405  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown {
1406    position: relative;
1407    height: inherit;
1408    width: inherit;
1409    min-width: 16px !important;
1410    border-radius: 50%;
1411    background: #fff;
1412    padding: 2px;
1413    color: #1e1e1e;
1414  }
1415  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown svg {
1416    height: 100%;
1417    width: 100%;
1418  }
1419  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
1420    height: inherit;
1421    width: inherit;
1422    border-radius: 50%;
1423    padding: 0;
1424    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1425    outline: 2px solid transparent;
1426  }
1427  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1428    box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1429    outline: 1.5px solid transparent;
1430  }
1431  
1432  .components-custom-gradient-picker__remove-control-point-wrapper {
1433    padding-bottom: 8px;
1434  }
1435  
1436  .components-custom-gradient-picker__inserter {
1437    /*rtl:ignore*/
1438    direction: ltr;
1439  }
1440  
1441  .components-custom-gradient-picker__liner-gradient-indicator {
1442    display: inline-block;
1443    flex: 0 auto;
1444    width: 20px;
1445    height: 20px;
1446  }
1447  
1448  .components-custom-gradient-picker__ui-line {
1449    position: relative;
1450    z-index: 0;
1451  }
1452  
1453  body.is-dragging-components-draggable {
1454    cursor: move; /* Fallback for IE/Edge < 14 */
1455    cursor: grabbing !important;
1456  }
1457  
1458  .components-draggable__invisible-drag-image {
1459    position: fixed;
1460    left: -1000px;
1461    height: 50px;
1462    width: 50px;
1463  }
1464  
1465  .components-draggable__clone {
1466    position: fixed;
1467    padding: 0;
1468    background: transparent;
1469    pointer-events: none;
1470    z-index: 1000000000;
1471  }
1472  
1473  .components-drop-zone {
1474    position: absolute;
1475    top: 0;
1476    right: 0;
1477    bottom: 0;
1478    left: 0;
1479    z-index: 40;
1480    visibility: hidden;
1481    opacity: 0;
1482    border-radius: 2px;
1483  }
1484  .components-drop-zone.is-active {
1485    opacity: 1;
1486    visibility: visible;
1487  }
1488  .components-drop-zone .components-drop-zone__content {
1489    position: absolute;
1490    top: 0;
1491    bottom: 0;
1492    left: 0;
1493    right: 0;
1494    height: 100%;
1495    width: 100%;
1496    display: flex;
1497    background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1498    align-items: center;
1499    justify-content: center;
1500    z-index: 50;
1501    text-align: center;
1502    color: #fff;
1503    opacity: 0;
1504    pointer-events: none;
1505  }
1506  .components-drop-zone .components-drop-zone__content-inner {
1507    opacity: 0;
1508    transform: scale(0.9);
1509  }
1510  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
1511    opacity: 1;
1512  }
1513  @media not (prefers-reduced-motion) {
1514    .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
1515      transition: opacity 0.2s ease-in-out;
1516    }
1517  }
1518  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
1519    opacity: 1;
1520    transform: scale(1);
1521  }
1522  @media not (prefers-reduced-motion) {
1523    .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
1524      transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
1525    }
1526  }
1527  
1528  .components-drop-zone__content-icon,
1529  .components-drop-zone__content-text {
1530    display: block;
1531  }
1532  
1533  .components-drop-zone__content-icon {
1534    margin: 0 auto 8px;
1535    line-height: 0;
1536    fill: currentColor;
1537    pointer-events: none;
1538  }
1539  
1540  .components-drop-zone__content-text {
1541    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1542    font-size: 13px;
1543  }
1544  
1545  .components-dropdown {
1546    display: inline-block;
1547  }
1548  
1549  .components-dropdown__content .components-popover__content {
1550    padding: 8px;
1551  }
1552  .components-dropdown__content .components-popover__content:has(.components-menu-group) {
1553    padding: 0;
1554  }
1555  .components-dropdown__content .components-popover__content:has(.components-menu-group) .components-dropdown-menu__menu > .components-menu-item__button,
1556  .components-dropdown__content .components-popover__content:has(.components-menu-group) > .components-menu-item__button {
1557    margin: 8px;
1558    width: auto;
1559  }
1560  .components-dropdown__content [role=menuitem] {
1561    white-space: nowrap;
1562  }
1563  .components-dropdown__content .components-menu-group {
1564    padding: 8px;
1565  }
1566  .components-dropdown__content .components-menu-group + .components-menu-group {
1567    border-top: 1px solid #ccc;
1568    padding: 8px;
1569  }
1570  .components-dropdown__content.is-alternate .components-menu-group + .components-menu-group {
1571    border-color: #1e1e1e;
1572  }
1573  
1574  .components-dropdown-menu__toggle {
1575    vertical-align: top;
1576  }
1577  
1578  .components-dropdown-menu__menu {
1579    width: 100%;
1580    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1581    font-size: 13px;
1582    line-height: 1.4;
1583  }
1584  .components-dropdown-menu__menu .components-dropdown-menu__menu-item,
1585  .components-dropdown-menu__menu .components-menu-item {
1586    width: 100%;
1587    padding: 6px;
1588    outline: none;
1589    cursor: pointer;
1590    white-space: nowrap;
1591    font-weight: 400;
1592  }
1593  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1594  .components-dropdown-menu__menu .components-menu-item.has-separator {
1595    margin-top: 6px;
1596    position: relative;
1597    overflow: visible;
1598  }
1599  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before,
1600  .components-dropdown-menu__menu .components-menu-item.has-separator::before {
1601    display: block;
1602    content: "";
1603    box-sizing: content-box;
1604    background-color: #ddd;
1605    position: absolute;
1606    top: -3px;
1607    left: 0;
1608    right: 0;
1609    height: 1px;
1610  }
1611  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg,
1612  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active .dashicon,
1613  .components-dropdown-menu__menu .components-menu-item.is-active svg,
1614  .components-dropdown-menu__menu .components-menu-item.is-active .dashicon {
1615    color: #fff;
1616    background: #1e1e1e;
1617    box-shadow: 0 0 0 1px #1e1e1e;
1618    border-radius: 1px;
1619  }
1620  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-icon-only,
1621  .components-dropdown-menu__menu .components-menu-item.is-icon-only {
1622    width: auto;
1623  }
1624  .components-dropdown-menu__menu .components-menu-item__button,
1625  .components-dropdown-menu__menu .components-menu-item__button.components-button {
1626    min-height: 32px;
1627    height: auto;
1628    text-align: left;
1629    padding-left: 8px;
1630    padding-right: 8px;
1631  }
1632  
1633  .components-duotone-picker__color-indicator::before {
1634    background: transparent;
1635  }
1636  
1637  .components-duotone-picker__color-indicator > .components-button {
1638    background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1639    color: transparent;
1640  }
1641  .components-duotone-picker__color-indicator > .components-button.is-pressed:hover:not(:disabled) {
1642    background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1643    color: transparent;
1644  }
1645  .components-duotone-picker__color-indicator > .components-button:hover:not(:disabled):not([aria-disabled=true]) {
1646    color: transparent;
1647  }
1648  .components-duotone-picker__color-indicator > .components-button:not([aria-disabled=true]):active {
1649    color: transparent;
1650  }
1651  
1652  .components-color-list-picker,
1653  .components-color-list-picker__swatch-button {
1654    width: 100%;
1655  }
1656  
1657  .components-color-list-picker__color-picker {
1658    margin: 8px 0;
1659  }
1660  
1661  .components-color-list-picker__swatch-color {
1662    margin: 2px;
1663  }
1664  
1665  .components-external-link {
1666    text-decoration: none;
1667  }
1668  
1669  .components-external-link__contents {
1670    text-decoration: underline;
1671  }
1672  
1673  .components-external-link__icon {
1674    margin-left: 0.5ch;
1675    font-weight: 400;
1676  }
1677  
1678  .components-form-toggle {
1679    position: relative;
1680    display: inline-block;
1681    height: 16px;
1682  }
1683  .components-form-toggle .components-form-toggle__track {
1684    position: relative;
1685    content: "";
1686    display: inline-block;
1687    box-sizing: border-box;
1688    vertical-align: top;
1689    background-color: #fff;
1690    border: 1px solid #949494;
1691    width: 32px;
1692    height: 16px;
1693    border-radius: 8px;
1694  }
1695  @media not (prefers-reduced-motion) {
1696    .components-form-toggle .components-form-toggle__track {
1697      transition: 0.2s background-color ease, 0.2s border-color ease;
1698    }
1699  }
1700  .components-form-toggle .components-form-toggle__track {
1701    overflow: hidden;
1702  }
1703  .components-form-toggle .components-form-toggle__track::after {
1704    content: "";
1705    position: absolute;
1706    inset: 0;
1707    box-sizing: border-box;
1708    border-top: 16px solid transparent;
1709  }
1710  @media not (prefers-reduced-motion) {
1711    .components-form-toggle .components-form-toggle__track::after {
1712      transition: 0.2s opacity ease;
1713    }
1714  }
1715  .components-form-toggle .components-form-toggle__track::after {
1716    opacity: 0;
1717  }
1718  .components-form-toggle .components-form-toggle__thumb {
1719    display: block;
1720    position: absolute;
1721    box-sizing: border-box;
1722    top: 2px;
1723    left: 2px;
1724    width: 12px;
1725    height: 12px;
1726    border-radius: 50%;
1727  }
1728  @media not (prefers-reduced-motion) {
1729    .components-form-toggle .components-form-toggle__thumb {
1730      transition: 0.2s transform ease, 0.2s background-color ease-out;
1731    }
1732  }
1733  .components-form-toggle .components-form-toggle__thumb {
1734    background-color: #1e1e1e;
1735    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);
1736    border: 6px solid transparent;
1737  }
1738  .components-form-toggle.is-checked .components-form-toggle__track {
1739    background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1740    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1741  }
1742  .components-form-toggle.is-checked .components-form-toggle__track::after {
1743    opacity: 1;
1744  }
1745  .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
1746    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1747    outline: 2px solid transparent;
1748    outline-offset: 2px;
1749  }
1750  .components-form-toggle.is-checked .components-form-toggle__thumb {
1751    background-color: #fff;
1752    border-width: 0;
1753    transform: translateX(16px);
1754  }
1755  .components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
1756    opacity: 0.3;
1757  }
1758  
1759  .components-form-toggle input.components-form-toggle__input[type=checkbox] {
1760    position: absolute;
1761    top: 0;
1762    left: 0;
1763    width: 100%;
1764    height: 100%;
1765    opacity: 0;
1766    margin: 0;
1767    padding: 0;
1768    z-index: 1;
1769    border: none;
1770  }
1771  .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked {
1772    background: none;
1773  }
1774  .components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
1775    content: "";
1776  }
1777  .components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
1778    cursor: pointer;
1779  }
1780  
1781  .components-form-token-field__input-container {
1782    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1783    padding: 6px 8px;
1784    /* Fonts smaller than 16px causes mobile safari to zoom. */
1785    font-size: 16px;
1786    /* Override core line-height. To be reviewed. */
1787    line-height: normal;
1788    box-shadow: 0 0 0 transparent;
1789    border-radius: 2px;
1790    border: 1px solid #949494;
1791  }
1792  @media not (prefers-reduced-motion) {
1793    .components-form-token-field__input-container {
1794      transition: box-shadow 0.1s linear;
1795    }
1796  }
1797  @media (min-width: 600px) {
1798    .components-form-token-field__input-container {
1799      font-size: 13px;
1800      /* Override core line-height. To be reviewed. */
1801      line-height: normal;
1802    }
1803  }
1804  .components-form-token-field__input-container:focus {
1805    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1806    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1807    outline: 2px solid transparent;
1808  }
1809  .components-form-token-field__input-container::placeholder {
1810    color: rgba(30, 30, 30, 0.62);
1811  }
1812  .components-form-token-field__input-container {
1813    width: 100%;
1814    padding: 0;
1815    cursor: text;
1816  }
1817  .components-form-token-field__input-container.is-disabled {
1818    background: #ddd;
1819    border-color: #ddd;
1820  }
1821  .components-form-token-field__input-container.is-active {
1822    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1823    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1824    outline: 2px solid transparent;
1825  }
1826  .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1827    display: inline-block;
1828    flex: 1;
1829    font-family: inherit;
1830    font-size: 16px;
1831    line-height: 1;
1832    width: 100%;
1833    max-width: 100%;
1834    margin-left: 4px;
1835    padding: 0;
1836    min-height: 24px;
1837    min-width: 50px;
1838    background: inherit;
1839    border: 0;
1840    color: var(--wp-components-color-foreground, #1e1e1e);
1841    box-shadow: none;
1842  }
1843  @media (min-width: 600px) {
1844    .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1845      font-size: 13px;
1846    }
1847  }
1848  .components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1849    outline: none;
1850    box-shadow: none;
1851  }
1852  .components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input {
1853    width: auto;
1854  }
1855  
1856  .components-form-token-field__token {
1857    font-size: 13px;
1858    display: flex;
1859    color: #1e1e1e;
1860    max-width: 100%;
1861  }
1862  .components-form-token-field__token.is-success .components-form-token-field__token-text,
1863  .components-form-token-field__token.is-success .components-form-token-field__remove-token {
1864    background: #4ab866;
1865  }
1866  .components-form-token-field__token.is-error .components-form-token-field__token-text,
1867  .components-form-token-field__token.is-error .components-form-token-field__remove-token {
1868    background: #cc1818;
1869  }
1870  .components-form-token-field__token.is-validating .components-form-token-field__token-text,
1871  .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
1872    color: #757575;
1873  }
1874  .components-form-token-field__token.is-borderless {
1875    position: relative;
1876    padding: 0 24px 0 0;
1877  }
1878  .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
1879    background: transparent;
1880  }
1881  .components-form-token-field__token.is-borderless:not(.is-disabled) .components-form-token-field__token-text {
1882    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1883  }
1884  .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
1885    background: transparent;
1886    color: #757575;
1887    position: absolute;
1888    top: 1px;
1889    right: 0;
1890  }
1891  .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
1892    color: #4ab866;
1893  }
1894  .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
1895    color: #cc1818;
1896    padding: 0 4px 0 6px;
1897  }
1898  .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
1899    color: #1e1e1e;
1900  }
1901  
1902  .components-form-token-field__token-text,
1903  .components-form-token-field__remove-token.components-button {
1904    display: inline-block;
1905    height: auto;
1906    background: #ddd;
1907    min-width: unset;
1908  }
1909  @media not (prefers-reduced-motion) {
1910    .components-form-token-field__token-text,
1911    .components-form-token-field__remove-token.components-button {
1912      transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
1913    }
1914  }
1915  
1916  .components-form-token-field__token-text {
1917    border-radius: 1px 0 0 1px;
1918    padding: 0 0 0 8px;
1919    line-height: 24px;
1920    white-space: nowrap;
1921    overflow: hidden;
1922    text-overflow: ellipsis;
1923  }
1924  
1925  .components-form-token-field__remove-token.components-button {
1926    border-radius: 0 1px 1px 0;
1927    color: #1e1e1e;
1928    line-height: 10px;
1929    overflow: initial;
1930  }
1931  .components-form-token-field__remove-token.components-button:hover:not(:disabled) {
1932    color: #1e1e1e;
1933  }
1934  
1935  .components-form-token-field__suggestions-list {
1936    flex: 1 0 100%;
1937    min-width: 100%;
1938    max-height: 128px;
1939    overflow-y: auto;
1940  }
1941  @media not (prefers-reduced-motion) {
1942    .components-form-token-field__suggestions-list {
1943      transition: all 0.15s ease-in-out;
1944    }
1945  }
1946  .components-form-token-field__suggestions-list {
1947    list-style: none;
1948    box-shadow: inset 0 1px 0 0 #949494;
1949    margin: 0;
1950    padding: 0;
1951  }
1952  
1953  .components-form-token-field__suggestion {
1954    color: var(--wp-components-color-foreground, #1e1e1e);
1955    display: block;
1956    font-size: 13px;
1957    padding: 8px 12px;
1958    min-height: 32px;
1959    margin: 0;
1960    box-sizing: border-box;
1961  }
1962  .components-form-token-field__suggestion.is-selected {
1963    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1964    color: var(--wp-components-color-foreground-inverted, #fff);
1965  }
1966  .components-form-token-field__suggestion[aria-disabled=true] {
1967    pointer-events: none;
1968    color: #949494;
1969  }
1970  .components-form-token-field__suggestion[aria-disabled=true].is-selected {
1971    background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
1972  }
1973  .components-form-token-field__suggestion:not(.is-empty) {
1974    cursor: pointer;
1975  }
1976  
1977  @media (min-width: 600px) {
1978    .components-guide {
1979      width: 600px;
1980    }
1981  }
1982  .components-guide .components-modal__content {
1983    padding: 0;
1984    margin-top: 0;
1985  }
1986  .components-guide .components-modal__content::before {
1987    content: none;
1988  }
1989  .components-guide .components-modal__header {
1990    border-bottom: none;
1991    padding: 0;
1992    position: sticky;
1993    height: 64px;
1994  }
1995  .components-guide .components-modal__header .components-button {
1996    align-self: flex-start;
1997    margin: 8px 8px 0 0;
1998    position: static;
1999  }
2000  .components-guide .components-guide__container {
2001    display: flex;
2002    flex-direction: column;
2003    justify-content: space-between;
2004    margin-top: -64px;
2005    min-height: 100%;
2006  }
2007  .components-guide .components-guide__page {
2008    display: flex;
2009    flex-direction: column;
2010    justify-content: center;
2011    position: relative;
2012  }
2013  @media (min-width: 600px) {
2014    .components-guide .components-guide__page {
2015      min-height: 300px;
2016    }
2017  }
2018  .components-guide .components-guide__footer {
2019    align-content: center;
2020    display: flex;
2021    height: 36px;
2022    justify-content: center;
2023    margin: 0 0 24px 0;
2024    padding: 0 24px;
2025    position: relative;
2026    width: 100%;
2027  }
2028  .components-guide .components-guide__page-control {
2029    margin: 0;
2030    text-align: center;
2031  }
2032  .components-guide .components-guide__page-control li {
2033    display: inline-block;
2034    margin: 0;
2035  }
2036  .components-guide .components-guide__page-control .components-button {
2037    margin: -6px 0;
2038    color: #e0e0e0;
2039  }
2040  .components-guide .components-guide__page-control li[aria-current=step] .components-button {
2041    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2042  }
2043  
2044  .components-modal__frame.components-guide {
2045    border: none;
2046    min-width: 312px;
2047    max-height: 575px;
2048  }
2049  @media (max-width: 600px) {
2050    .components-modal__frame.components-guide {
2051      margin: auto;
2052      max-width: calc(100vw - 16px * 2);
2053    }
2054  }
2055  
2056  .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
2057    position: absolute;
2058  }
2059  .components-button.components-guide__back-button {
2060    left: 24px;
2061  }
2062  .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
2063    right: 24px;
2064  }
2065  
2066  [role=region] {
2067    position: relative;
2068  }
2069  [role=region].interface-interface-skeleton__content:focus-visible::after {
2070    content: "";
2071    position: absolute;
2072    pointer-events: none;
2073    top: 0;
2074    right: 0;
2075    bottom: 0;
2076    left: 0;
2077    outline-color: var(--wp-admin-theme-color);
2078    outline-style: solid;
2079    outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2080    outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2081    box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2082    z-index: 1000000;
2083  }
2084  
2085  .is-focusing-regions [role=region]:focus::after {
2086    content: "";
2087    position: absolute;
2088    pointer-events: none;
2089    top: 0;
2090    right: 0;
2091    bottom: 0;
2092    left: 0;
2093    outline-color: var(--wp-admin-theme-color);
2094    outline-style: solid;
2095    outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2096    outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2097    box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2098    z-index: 1000000;
2099  }
2100  .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
2101  .is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
2102  .is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
2103  .is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
2104  .is-focusing-regions .editor-post-publish-panel {
2105    outline-color: var(--wp-admin-theme-color);
2106    outline-style: solid;
2107    outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2108    outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2109    box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
2110  }
2111  
2112  .components-menu-group + .components-menu-group {
2113    padding-top: 8px;
2114    border-top: 1px solid #1e1e1e;
2115  }
2116  .components-menu-group + .components-menu-group.has-hidden-separator {
2117    border-top: none;
2118    margin-top: 0;
2119    padding-top: 0;
2120  }
2121  
2122  .components-menu-group:has(> div:empty) {
2123    display: none;
2124  }
2125  
2126  .components-menu-group__label {
2127    padding: 0 8px;
2128    margin-top: 4px;
2129    margin-bottom: 12px;
2130    color: #757575;
2131    text-transform: uppercase;
2132    font-size: 11px;
2133    font-weight: 499;
2134    white-space: nowrap;
2135  }
2136  
2137  .components-menu-item__button,
2138  .components-menu-item__button.components-button {
2139    width: 100%;
2140    font-weight: 400;
2141  }
2142  .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2143  .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2144  .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
2145    padding-right: 48px;
2146    box-sizing: initial;
2147  }
2148  .components-menu-item__button .components-menu-items__item-icon,
2149  .components-menu-item__button.components-button .components-menu-items__item-icon {
2150    display: inline-block;
2151    flex: 0 0 auto;
2152  }
2153  .components-menu-item__button .components-menu-items__item-icon.has-icon-right,
2154  .components-menu-item__button.components-button .components-menu-items__item-icon.has-icon-right {
2155    margin-right: -2px;
2156    margin-left: 24px;
2157  }
2158  .components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right,
2159  .components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right {
2160    margin-left: 8px;
2161  }
2162  .components-menu-item__button .block-editor-block-icon,
2163  .components-menu-item__button.components-button .block-editor-block-icon {
2164    margin-left: -2px;
2165    margin-right: 8px;
2166  }
2167  .components-menu-item__button.is-primary,
2168  .components-menu-item__button.components-button.is-primary {
2169    justify-content: center;
2170  }
2171  .components-menu-item__button.is-primary .components-menu-item__item,
2172  .components-menu-item__button.components-button.is-primary .components-menu-item__item {
2173    margin-right: 0;
2174  }
2175  .components-menu-item__button:disabled.is-tertiary, .components-menu-item__button[aria-disabled=true].is-tertiary,
2176  .components-menu-item__button.components-button:disabled.is-tertiary,
2177  .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
2178    background: none;
2179    color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
2180    opacity: 0.3;
2181  }
2182  
2183  .components-menu-item__info-wrapper {
2184    display: flex;
2185    flex-direction: column;
2186    margin-right: auto;
2187  }
2188  
2189  .components-menu-item__info {
2190    margin-top: 4px;
2191    font-size: 12px;
2192    color: #757575;
2193    white-space: normal;
2194  }
2195  
2196  .components-menu-item__item {
2197    white-space: nowrap;
2198    min-width: 160px;
2199    margin-right: auto;
2200    display: inline-flex;
2201    align-items: center;
2202  }
2203  
2204  .components-menu-item__shortcut {
2205    align-self: center;
2206    margin-right: 0;
2207    margin-left: auto;
2208    padding-left: 24px;
2209    color: currentColor;
2210    display: none;
2211  }
2212  @media (min-width: 480px) {
2213    .components-menu-item__shortcut {
2214      display: inline;
2215    }
2216  }
2217  
2218  .components-menu-items-choice,
2219  .components-menu-items-choice.components-button {
2220    min-height: 40px;
2221    height: auto;
2222  }
2223  .components-menu-items-choice svg,
2224  .components-menu-items-choice.components-button svg {
2225    margin-right: 12px;
2226  }
2227  .components-menu-items-choice.has-icon,
2228  .components-menu-items-choice.components-button.has-icon {
2229    padding-left: 12px;
2230  }
2231  
2232  .components-modal__screen-overlay {
2233    position: fixed;
2234    top: 0;
2235    right: 0;
2236    bottom: 0;
2237    left: 0;
2238    background-color: rgba(0, 0, 0, 0.35);
2239    z-index: 100000;
2240    display: flex;
2241  }
2242  @keyframes __wp-base-styles-fade-in {
2243    from {
2244      opacity: 0;
2245    }
2246    to {
2247      opacity: 1;
2248    }
2249  }
2250  @media not (prefers-reduced-motion) {
2251    .components-modal__screen-overlay {
2252      animation: __wp-base-styles-fade-in 0.08s linear 0s;
2253      animation-fill-mode: forwards;
2254    }
2255  }
2256  @keyframes __wp-base-styles-fade-out {
2257    from {
2258      opacity: 1;
2259    }
2260    to {
2261      opacity: 0;
2262    }
2263  }
2264  @media not (prefers-reduced-motion) {
2265    .components-modal__screen-overlay.is-animating-out {
2266      animation: __wp-base-styles-fade-out 0.08s linear 80ms;
2267      animation-fill-mode: forwards;
2268    }
2269  }
2270  
2271  .components-modal__frame {
2272    box-sizing: border-box;
2273  }
2274  .components-modal__frame *,
2275  .components-modal__frame *::before,
2276  .components-modal__frame *::after {
2277    box-sizing: inherit;
2278  }
2279  .components-modal__frame {
2280    margin: 40px 0 0 0;
2281    width: 100%;
2282    background: #fff;
2283    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
2284    border-radius: 8px 8px 0 0;
2285    overflow: hidden;
2286    display: flex;
2287    color: #1e1e1e;
2288    animation-name: components-modal__appear-animation;
2289    animation-fill-mode: forwards;
2290    animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
2291  }
2292  .components-modal__frame h1,
2293  .components-modal__frame h2,
2294  .components-modal__frame h3 {
2295    color: #1e1e1e;
2296  }
2297  @media not (prefers-reduced-motion) {
2298    .components-modal__frame {
2299      animation-duration: var(--modal-frame-animation-duration);
2300    }
2301  }
2302  .components-modal__screen-overlay.is-animating-out .components-modal__frame {
2303    animation-name: components-modal__disappear-animation;
2304    animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
2305  }
2306  @media (min-width: 600px) {
2307    .components-modal__frame {
2308      border-radius: 8px;
2309      margin: auto;
2310      width: auto;
2311      min-width: 350px;
2312      max-width: calc(100% - 32px);
2313      max-height: calc(100% - 128px);
2314    }
2315  }
2316  @media (min-width: 600px) and (min-width: 600px) {
2317    .components-modal__frame.is-full-screen {
2318      width: calc(100% - 32px);
2319      height: calc(100% - 32px);
2320      max-height: none;
2321    }
2322  }
2323  @media (min-width: 600px) and (min-width: 782px) {
2324    .components-modal__frame.is-full-screen {
2325      width: calc(100% - 80px);
2326      height: calc(100% - 80px);
2327      max-width: none;
2328    }
2329  }
2330  @media (min-width: 600px) {
2331    .components-modal__frame.has-size-small, .components-modal__frame.has-size-medium, .components-modal__frame.has-size-large {
2332      width: 100%;
2333    }
2334    .components-modal__frame.has-size-small {
2335      max-width: 384px;
2336    }
2337    .components-modal__frame.has-size-medium {
2338      max-width: 512px;
2339    }
2340    .components-modal__frame.has-size-large {
2341      max-width: 840px;
2342    }
2343  }
2344  @media (min-width: 960px) {
2345    .components-modal__frame {
2346      max-height: 70%;
2347    }
2348  }
2349  .components-modal__frame.is-full-screen :where(.components-modal__content) {
2350    display: flex;
2351    margin-bottom: 24px;
2352    padding-bottom: 0;
2353  }
2354  .components-modal__frame.is-full-screen :where(.components-modal__content) > :last-child {
2355    flex: 1;
2356  }
2357  
2358  @keyframes components-modal__appear-animation {
2359    from {
2360      opacity: 0;
2361      transform: scale(0.9);
2362    }
2363    to {
2364      opacity: 1;
2365      transform: scale(1);
2366    }
2367  }
2368  @keyframes components-modal__disappear-animation {
2369    from {
2370      opacity: 1;
2371      transform: scale(1);
2372    }
2373    to {
2374      opacity: 0;
2375      transform: scale(0.9);
2376    }
2377  }
2378  .components-modal__header {
2379    box-sizing: border-box;
2380    border-bottom: 1px solid transparent;
2381    padding: 24px;
2382    display: flex;
2383    flex-direction: row;
2384    justify-content: space-between;
2385    align-items: center;
2386    height: 72px;
2387    width: 100%;
2388    z-index: 10;
2389    position: absolute;
2390    top: 0;
2391    left: 0;
2392  }
2393  .components-modal__header .components-modal__header-heading {
2394    font-size: 20px;
2395    font-weight: 600;
2396  }
2397  .components-modal__header h1 {
2398    line-height: 1;
2399    margin: 0;
2400  }
2401  .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2402    border-bottom-color: #ddd;
2403  }
2404  .components-modal__header + p {
2405    margin-top: 0;
2406  }
2407  
2408  .components-modal__header-heading-container {
2409    align-items: center;
2410    flex-grow: 1;
2411    display: flex;
2412    flex-direction: row;
2413    justify-content: flex-start;
2414  }
2415  
2416  .components-modal__header-icon-container {
2417    display: inline-block;
2418  }
2419  .components-modal__header-icon-container svg {
2420    max-width: 36px;
2421    max-height: 36px;
2422    padding: 8px;
2423  }
2424  
2425  .components-modal__content {
2426    flex: 1;
2427    margin-top: 72px;
2428    padding: 4px 24px 24px;
2429    overflow: auto;
2430  }
2431  .components-modal__content.hide-header {
2432    margin-top: 0;
2433    padding-top: 24px;
2434  }
2435  .components-modal__content.is-scrollable:focus-visible {
2436    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2437    outline: 2px solid transparent;
2438    outline-offset: -2px;
2439  }
2440  
2441  .components-notice {
2442    display: flex;
2443    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2444    font-size: 13px;
2445    background-color: #fff;
2446    border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2447    padding: 8px 12px;
2448    align-items: center;
2449    color: #1e1e1e;
2450  }
2451  .components-notice.is-dismissible {
2452    position: relative;
2453  }
2454  .components-notice.is-dismissible .components-notice__content {
2455    margin-right: 25px;
2456  }
2457  .components-notice.is-success {
2458    border-left-color: #4ab866;
2459    background-color: rgb(238.8392857143, 248.6607142857, 241.3392857143);
2460  }
2461  .components-notice.is-warning {
2462    border-left-color: #f0b849;
2463    background-color: rgb(253.5913705584, 248.3324873096, 237.9086294416);
2464  }
2465  .components-notice.is-error {
2466    border-left-color: #cc1818;
2467    background-color: rgb(244.1052631579, 162.3947368421, 162.3947368421);
2468  }
2469  
2470  .components-notice__content {
2471    flex-grow: 1;
2472    margin-top: 4px;
2473    margin-bottom: 4px;
2474  }
2475  
2476  .components-notice__actions {
2477    display: flex;
2478    flex-wrap: wrap;
2479    align-items: center;
2480    gap: 12px;
2481    margin-top: 12px;
2482  }
2483  
2484  .components-notice__dismiss {
2485    color: #757575;
2486    align-self: flex-start;
2487    flex-shrink: 0;
2488  }
2489  .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 {
2490    color: #1e1e1e;
2491    background-color: transparent;
2492  }
2493  .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2494    box-shadow: none;
2495  }
2496  
2497  .components-notice-list {
2498    max-width: 100vw;
2499    box-sizing: border-box;
2500  }
2501  .components-notice-list .components-notice__content {
2502    margin-top: 12px;
2503    margin-bottom: 12px;
2504    line-height: 2;
2505  }
2506  
2507  .components-panel {
2508    background: #fff;
2509    border: 1px solid #e0e0e0;
2510  }
2511  .components-panel > .components-panel__header:first-child,
2512  .components-panel > .components-panel__body:first-child {
2513    margin-top: -1px;
2514  }
2515  .components-panel > .components-panel__header:last-child,
2516  .components-panel > .components-panel__body:last-child {
2517    border-bottom-width: 0;
2518  }
2519  
2520  .components-panel + .components-panel {
2521    margin-top: -1px;
2522  }
2523  
2524  .components-panel__body {
2525    border-top: 1px solid #e0e0e0;
2526    border-bottom: 1px solid #e0e0e0;
2527  }
2528  .components-panel__body h3 {
2529    margin: 0 0 0.5em;
2530  }
2531  .components-panel__body.is-opened {
2532    padding: 16px;
2533  }
2534  
2535  .components-panel__header {
2536    display: flex;
2537    flex-shrink: 0;
2538    justify-content: space-between;
2539    align-items: center;
2540    padding: 0 16px;
2541    border-bottom: 1px solid #ddd;
2542    box-sizing: content-box;
2543    height: 47px;
2544  }
2545  .components-panel__header h2 {
2546    margin: 0;
2547    font-size: inherit;
2548    color: inherit;
2549  }
2550  
2551  .components-panel__body + .components-panel__body,
2552  .components-panel__body + .components-panel__header,
2553  .components-panel__header + .components-panel__body,
2554  .components-panel__header + .components-panel__header {
2555    margin-top: -1px;
2556  }
2557  
2558  .components-panel__body > .components-panel__body-title {
2559    display: block;
2560    padding: 0;
2561    font-size: inherit;
2562    margin-top: 0;
2563    margin-bottom: 0;
2564  }
2565  @media not (prefers-reduced-motion) {
2566    .components-panel__body > .components-panel__body-title {
2567      transition: 0.1s background ease-in-out;
2568    }
2569  }
2570  
2571  .components-panel__body.is-opened > .components-panel__body-title {
2572    margin: -16px;
2573    margin-bottom: 5px;
2574  }
2575  
2576  .components-panel__body > .components-panel__body-title:hover {
2577    background: #f0f0f0;
2578    border: none;
2579  }
2580  
2581  .components-panel__body-toggle.components-button {
2582    position: relative;
2583    padding: 16px 48px 16px 16px;
2584    outline: none;
2585    width: 100%;
2586    font-weight: 499;
2587    text-align: left;
2588    color: #1e1e1e;
2589    border: none;
2590    box-shadow: none;
2591  }
2592  @media not (prefers-reduced-motion) {
2593    .components-panel__body-toggle.components-button {
2594      transition: 0.1s background ease-in-out;
2595    }
2596  }
2597  .components-panel__body-toggle.components-button {
2598    height: auto;
2599  }
2600  .components-panel__body-toggle.components-button:focus {
2601    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2602    border-radius: 0;
2603  }
2604  .components-panel__body-toggle.components-button .components-panel__arrow {
2605    position: absolute;
2606    right: 16px;
2607    top: 50%;
2608    transform: translateY(-50%);
2609    color: #1e1e1e;
2610    fill: currentColor;
2611  }
2612  @media not (prefers-reduced-motion) {
2613    .components-panel__body-toggle.components-button .components-panel__arrow {
2614      transition: 0.1s color ease-in-out;
2615    }
2616  }
2617  .components-panel__body-toggle.components-button {
2618    /* rtl:begin:ignore */
2619  }
2620  body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {
2621    transform: scaleX(-1);
2622    margin-top: -10px;
2623  }
2624  .components-panel__body-toggle.components-button {
2625    /* rtl:end:ignore */
2626  }
2627  
2628  .components-panel__icon {
2629    color: #757575;
2630    margin: -2px 0 -2px 6px;
2631  }
2632  
2633  .components-panel__body-toggle-icon {
2634    margin-right: -5px;
2635  }
2636  
2637  .components-panel__color-title {
2638    float: left;
2639    height: 19px;
2640  }
2641  
2642  .components-panel__row {
2643    display: flex;
2644    justify-content: space-between;
2645    align-items: center;
2646    margin-top: 8px;
2647    min-height: 36px;
2648  }
2649  .components-panel__row select {
2650    min-width: 0;
2651  }
2652  .components-panel__row label {
2653    margin-right: 12px;
2654    flex-shrink: 0;
2655    max-width: 75%;
2656  }
2657  .components-panel__row:empty, .components-panel__row:first-of-type {
2658    margin-top: 0;
2659  }
2660  
2661  .components-panel .circle-picker {
2662    padding-bottom: 20px;
2663  }
2664  
2665  .components-placeholder.components-placeholder {
2666    font-size: 13px;
2667    box-sizing: border-box;
2668    position: relative;
2669    padding: 24px;
2670    width: 100%;
2671    text-align: left;
2672    margin: 0;
2673    color: #1e1e1e;
2674    display: flex;
2675    flex-direction: column;
2676    align-items: flex-start;
2677    gap: 16px;
2678    -webkit-font-smoothing: subpixel-antialiased;
2679    border-radius: 2px;
2680    background-color: #fff;
2681    box-shadow: inset 0 0 0 1px #1e1e1e;
2682    outline: 1px solid transparent;
2683  }
2684  
2685  .components-placeholder__error,
2686  .components-placeholder__instructions,
2687  .components-placeholder__label,
2688  .components-placeholder__fieldset {
2689    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2690    font-size: 13px;
2691    letter-spacing: initial;
2692    line-height: initial;
2693    text-transform: none;
2694    font-weight: normal;
2695  }
2696  
2697  .components-placeholder__label {
2698    font-weight: 600;
2699    align-items: center;
2700    display: flex;
2701  }
2702  .components-placeholder__label > svg,
2703  .components-placeholder__label .dashicon,
2704  .components-placeholder__label .block-editor-block-icon {
2705    margin-right: 4px;
2706    fill: currentColor;
2707  }
2708  @media (forced-colors: active) {
2709    .components-placeholder__label > svg,
2710    .components-placeholder__label .dashicon,
2711    .components-placeholder__label .block-editor-block-icon {
2712      fill: CanvasText;
2713    }
2714  }
2715  .components-placeholder__label:empty {
2716    display: none;
2717  }
2718  
2719  .components-placeholder__fieldset,
2720  .components-placeholder__fieldset form {
2721    display: flex;
2722    flex-direction: row;
2723    width: 100%;
2724    flex-wrap: wrap;
2725    gap: 16px;
2726    justify-content: flex-start;
2727  }
2728  .components-placeholder__fieldset p,
2729  .components-placeholder__fieldset form p {
2730    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2731    font-size: 13px;
2732  }
2733  
2734  .components-placeholder__fieldset.is-column-layout,
2735  .components-placeholder__fieldset.is-column-layout form {
2736    flex-direction: column;
2737  }
2738  
2739  .components-placeholder__input[type=url] {
2740    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2741    padding: 6px 8px;
2742    /* Fonts smaller than 16px causes mobile safari to zoom. */
2743    font-size: 16px;
2744    /* Override core line-height. To be reviewed. */
2745    line-height: normal;
2746    box-shadow: 0 0 0 transparent;
2747    border-radius: 2px;
2748    border: 1px solid #949494;
2749  }
2750  @media not (prefers-reduced-motion) {
2751    .components-placeholder__input[type=url] {
2752      transition: box-shadow 0.1s linear;
2753    }
2754  }
2755  @media (min-width: 600px) {
2756    .components-placeholder__input[type=url] {
2757      font-size: 13px;
2758      /* Override core line-height. To be reviewed. */
2759      line-height: normal;
2760    }
2761  }
2762  .components-placeholder__input[type=url]:focus {
2763    border-color: var(--wp-admin-theme-color);
2764    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2765    outline: 2px solid transparent;
2766  }
2767  .components-placeholder__input[type=url]::placeholder {
2768    color: rgba(30, 30, 30, 0.62);
2769  }
2770  .components-placeholder__input[type=url] {
2771    flex: 1 1 auto;
2772  }
2773  
2774  .components-placeholder__error {
2775    width: 100%;
2776    gap: 8px;
2777  }
2778  
2779  .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
2780    margin-left: 10px;
2781    margin-right: 10px;
2782  }
2783  .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child {
2784    margin-right: 0;
2785  }
2786  
2787  .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
2788    display: none;
2789  }
2790  .components-placeholder.is-medium .components-placeholder__fieldset,
2791  .components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset,
2792  .components-placeholder.is-small .components-placeholder__fieldset form {
2793    flex-direction: column;
2794  }
2795  .components-placeholder.is-medium .components-placeholder__fieldset > *,
2796  .components-placeholder.is-medium .components-button, .components-placeholder.is-small .components-placeholder__fieldset > *,
2797  .components-placeholder.is-small .components-button {
2798    width: 100%;
2799    justify-content: center;
2800  }
2801  .components-placeholder.is-small {
2802    padding: 16px;
2803  }
2804  
2805  /**
2806   * Dashed style placeholders
2807   */
2808  .components-placeholder.has-illustration {
2809    color: inherit;
2810    display: flex;
2811    box-shadow: none;
2812    border-radius: 0;
2813    backdrop-filter: blur(100px);
2814    background-color: transparent;
2815    backface-visibility: hidden;
2816  }
2817  .is-dark-theme .components-placeholder.has-illustration {
2818    background-color: rgba(0, 0, 0, 0.1);
2819  }
2820  .components-placeholder.has-illustration .components-placeholder__fieldset {
2821    margin-left: 0;
2822    margin-right: 0;
2823  }
2824  .components-placeholder.has-illustration .components-placeholder__label,
2825  .components-placeholder.has-illustration .components-placeholder__instructions,
2826  .components-placeholder.has-illustration .components-button {
2827    opacity: 0;
2828    pointer-events: none;
2829  }
2830  @media not (prefers-reduced-motion) {
2831    .components-placeholder.has-illustration .components-placeholder__label,
2832    .components-placeholder.has-illustration .components-placeholder__instructions,
2833    .components-placeholder.has-illustration .components-button {
2834      transition: opacity 0.1s linear;
2835    }
2836  }
2837  .is-selected > .components-placeholder.has-illustration .components-placeholder__label,
2838  .is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
2839  .is-selected > .components-placeholder.has-illustration .components-button {
2840    opacity: 1;
2841    pointer-events: auto;
2842  }
2843  .components-placeholder.has-illustration::before {
2844    content: "";
2845    position: absolute;
2846    top: 0;
2847    right: 0;
2848    bottom: 0;
2849    left: 0;
2850    pointer-events: none;
2851    background: currentColor;
2852    opacity: 0.1;
2853  }
2854  .components-placeholder.has-illustration {
2855    overflow: hidden;
2856  }
2857  .is-selected .components-placeholder.has-illustration {
2858    overflow: auto;
2859  }
2860  
2861  .components-placeholder__preview {
2862    display: flex;
2863    justify-content: center;
2864  }
2865  
2866  .components-placeholder__illustration {
2867    box-sizing: content-box;
2868    position: absolute;
2869    top: 50%;
2870    left: 50%;
2871    transform: translate(-50%, -50%);
2872    width: 100%;
2873    height: 100%;
2874    stroke: currentColor;
2875    opacity: 0.25;
2876  }
2877  
2878  .components-popover {
2879    box-sizing: border-box;
2880  }
2881  .components-popover *,
2882  .components-popover *::before,
2883  .components-popover *::after {
2884    box-sizing: inherit;
2885  }
2886  .components-popover {
2887    z-index: 1000000;
2888    will-change: transform;
2889  }
2890  .components-popover.is-expanded {
2891    position: fixed;
2892    top: 0;
2893    left: 0;
2894    right: 0;
2895    bottom: 0;
2896    z-index: 1000000 !important;
2897  }
2898  
2899  .components-popover__content {
2900    background: #fff;
2901    box-shadow: 0 0 0 1px #ccc, 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
2902    border-radius: 4px;
2903    box-sizing: border-box;
2904    width: min-content;
2905  }
2906  .is-alternate .components-popover__content {
2907    box-shadow: 0 0 0 1px #1e1e1e;
2908    border-radius: 2px;
2909  }
2910  .is-unstyled .components-popover__content {
2911    background: none;
2912    border-radius: 0;
2913    box-shadow: none;
2914  }
2915  .components-popover.is-expanded .components-popover__content {
2916    position: static;
2917    height: calc(100% - 48px);
2918    overflow-y: visible;
2919    width: auto;
2920    box-shadow: 0 -1px 0 0 #ccc;
2921  }
2922  .components-popover.is-expanded.is-alternate .components-popover__content {
2923    box-shadow: 0 -1px 0 #1e1e1e;
2924  }
2925  
2926  .components-popover__header {
2927    align-items: center;
2928    background: #fff;
2929    display: flex;
2930    height: 48px;
2931    justify-content: space-between;
2932    padding: 0 8px 0 16px;
2933  }
2934  
2935  .components-popover__header-title {
2936    overflow: hidden;
2937    text-overflow: ellipsis;
2938    white-space: nowrap;
2939    width: 100%;
2940  }
2941  
2942  .components-popover__close.components-button {
2943    z-index: 5;
2944  }
2945  
2946  .components-popover__arrow {
2947    position: absolute;
2948    width: 14px;
2949    height: 14px;
2950    pointer-events: none;
2951    display: flex;
2952  }
2953  .components-popover__arrow::before {
2954    content: "";
2955    position: absolute;
2956    top: -1px;
2957    left: 1px;
2958    height: 2px;
2959    right: 1px;
2960    background-color: #fff;
2961  }
2962  .components-popover__arrow.is-top {
2963    bottom: -14px !important;
2964    transform: rotate(0);
2965  }
2966  .components-popover__arrow.is-right {
2967    /*rtl:begin:ignore*/
2968    left: -14px !important;
2969    transform: rotate(90deg);
2970  }
2971  .components-popover__arrow.is-bottom {
2972    top: -14px !important;
2973    transform: rotate(180deg);
2974  }
2975  .components-popover__arrow.is-left {
2976    /*rtl:begin:ignore*/
2977    right: -14px !important;
2978    transform: rotate(-90deg);
2979    /*rtl:end:ignore*/
2980  }
2981  
2982  .components-popover__triangle {
2983    display: block;
2984    flex: 1;
2985  }
2986  
2987  .components-popover__triangle-bg {
2988    fill: #fff;
2989  }
2990  
2991  .components-popover__triangle-border {
2992    fill: transparent;
2993    stroke-width: 1px;
2994    stroke: #ccc;
2995  }
2996  .is-alternate .components-popover__triangle-border {
2997    stroke: #1e1e1e;
2998  }
2999  
3000  .components-radio-control {
3001    border: 0;
3002    margin: 0;
3003    padding: 0;
3004    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3005    font-size: 13px;
3006  }
3007  
3008  .components-radio-control__group-wrapper.has-help {
3009    margin-block-end: 12px;
3010  }
3011  
3012  .components-radio-control__option {
3013    display: grid;
3014    grid-template-columns: auto 1fr;
3015    grid-template-rows: auto minmax(0, max-content);
3016    column-gap: 8px;
3017    align-items: center;
3018  }
3019  
3020  .components-radio-control__input[type=radio] {
3021    grid-column: 1;
3022    grid-row: 1;
3023    border: 1px solid #1e1e1e;
3024    margin-right: 12px;
3025    transition: none;
3026    border-radius: 50%;
3027    width: 24px;
3028    height: 24px;
3029    min-width: 24px;
3030    max-width: 24px;
3031    position: relative;
3032  }
3033  @media not (prefers-reduced-motion) {
3034    .components-radio-control__input[type=radio] {
3035      transition: box-shadow 0.1s linear;
3036    }
3037  }
3038  @media (min-width: 600px) {
3039    .components-radio-control__input[type=radio] {
3040      height: 16px;
3041      width: 16px;
3042      min-width: 16px;
3043      max-width: 16px;
3044    }
3045  }
3046  .components-radio-control__input[type=radio]:checked::before {
3047    box-sizing: inherit;
3048    width: 12px;
3049    height: 12px;
3050    position: absolute;
3051    top: 50%;
3052    left: 50%;
3053    transform: translate(-50%, -50%);
3054    margin: 0;
3055    background-color: #fff;
3056    border: 4px solid #fff;
3057  }
3058  @media (min-width: 600px) {
3059    .components-radio-control__input[type=radio]:checked::before {
3060      width: 8px;
3061      height: 8px;
3062    }
3063  }
3064  .components-radio-control__input[type=radio]:focus {
3065    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
3066    outline: 2px solid transparent;
3067  }
3068  .components-radio-control__input[type=radio]:checked {
3069    background: var(--wp-admin-theme-color);
3070    border: none;
3071  }
3072  .components-radio-control__input[type=radio] {
3073    display: inline-flex;
3074    margin: 0;
3075    padding: 0;
3076    appearance: none;
3077    cursor: pointer;
3078  }
3079  .components-radio-control__input[type=radio]:focus {
3080    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
3081    outline: 2px solid transparent;
3082    outline-offset: 2px;
3083  }
3084  .components-radio-control__input[type=radio]:checked {
3085    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3086    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3087  }
3088  .components-radio-control__input[type=radio]:checked::before {
3089    content: "";
3090    border-radius: 50%;
3091  }
3092  
3093  .components-radio-control__label {
3094    grid-column: 2;
3095    grid-row: 1;
3096    cursor: pointer;
3097    line-height: 24px;
3098  }
3099  @media (min-width: 600px) {
3100    .components-radio-control__label {
3101      line-height: 16px;
3102    }
3103  }
3104  
3105  .components-radio-control__option-description {
3106    grid-column: 2;
3107    grid-row: 2;
3108    padding-block-start: 4px;
3109  }
3110  .components-radio-control__option-description.components-radio-control__option-description {
3111    margin-top: 0;
3112  }
3113  
3114  .components-resizable-box__handle {
3115    display: none;
3116    width: 23px;
3117    height: 23px;
3118    z-index: 2;
3119  }
3120  .components-resizable-box__container.has-show-handle .components-resizable-box__handle {
3121    display: block;
3122  }
3123  .components-resizable-box__handle > div {
3124    position: relative;
3125    width: 100%;
3126    height: 100%;
3127    z-index: 2;
3128    outline: none;
3129  }
3130  
3131  .components-resizable-box__container > img {
3132    width: inherit;
3133  }
3134  
3135  .components-resizable-box__handle::after {
3136    display: block;
3137    content: "";
3138    width: 15px;
3139    height: 15px;
3140    border-radius: 50%;
3141    background: #fff;
3142    cursor: inherit;
3143    position: absolute;
3144    top: calc(50% - 8px);
3145    right: calc(50% - 8px);
3146    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 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);
3147    outline: 2px solid transparent;
3148  }
3149  
3150  .components-resizable-box__side-handle::before {
3151    display: block;
3152    border-radius: 9999px;
3153    content: "";
3154    width: 3px;
3155    height: 3px;
3156    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3157    cursor: inherit;
3158    position: absolute;
3159    top: calc(50% - 1px);
3160    right: calc(50% - 1px);
3161  }
3162  @media not (prefers-reduced-motion) {
3163    .components-resizable-box__side-handle::before {
3164      transition: transform 0.1s ease-in;
3165      will-change: transform;
3166    }
3167  }
3168  .components-resizable-box__side-handle::before {
3169    opacity: 0;
3170  }
3171  
3172  .components-resizable-box__side-handle {
3173    z-index: 2;
3174  }
3175  
3176  .components-resizable-box__corner-handle {
3177    z-index: 2;
3178  }
3179  
3180  .components-resizable-box__side-handle.components-resizable-box__handle-top,
3181  .components-resizable-box__side-handle.components-resizable-box__handle-bottom,
3182  .components-resizable-box__side-handle.components-resizable-box__handle-top::before,
3183  .components-resizable-box__side-handle.components-resizable-box__handle-bottom::before {
3184    width: 100%;
3185    left: 0;
3186    border-left: 0;
3187    border-right: 0;
3188  }
3189  
3190  .components-resizable-box__side-handle.components-resizable-box__handle-left,
3191  .components-resizable-box__side-handle.components-resizable-box__handle-right,
3192  .components-resizable-box__side-handle.components-resizable-box__handle-left::before,
3193  .components-resizable-box__side-handle.components-resizable-box__handle-right::before {
3194    height: 100%;
3195    top: 0;
3196    border-top: 0;
3197    border-bottom: 0;
3198  }
3199  
3200  @media not (prefers-reduced-motion) {
3201    .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
3202    .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
3203    .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
3204    .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
3205      animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
3206      animation-fill-mode: forwards;
3207    }
3208  }
3209  
3210  @media not (prefers-reduced-motion) {
3211    .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
3212    .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
3213    .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
3214    .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
3215      animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
3216      animation-fill-mode: forwards;
3217    }
3218  }
3219  
3220  /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
3221  See https://bugs.webkit.org/show_bug.cgi?id=187903. */
3222  @media not all and (min-resolution: 0.001dpcm) {
3223    @supports (-webkit-appearance: none) {
3224      .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
3225      .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
3226      .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
3227      .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
3228        animation: none;
3229      }
3230      .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
3231      .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
3232      .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
3233      .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
3234        animation: none;
3235      }
3236    }
3237  }
3238  @keyframes components-resizable-box__top-bottom-animation {
3239    from {
3240      transform: scaleX(0);
3241      opacity: 0;
3242    }
3243    to {
3244      transform: scaleX(1);
3245      opacity: 1;
3246    }
3247  }
3248  @keyframes components-resizable-box__left-right-animation {
3249    from {
3250      transform: scaleY(0);
3251      opacity: 0;
3252    }
3253    to {
3254      transform: scaleY(1);
3255      opacity: 1;
3256    }
3257  }
3258  /*!rtl:begin:ignore*/
3259  .components-resizable-box__handle-right {
3260    right: calc(11.5px * -1);
3261  }
3262  
3263  .components-resizable-box__handle-left {
3264    left: calc(11.5px * -1);
3265  }
3266  
3267  .components-resizable-box__handle-top {
3268    top: calc(11.5px * -1);
3269  }
3270  
3271  .components-resizable-box__handle-bottom {
3272    bottom: calc(11.5px * -1);
3273  }
3274  
3275  /*!rtl:end:ignore*/
3276  .components-responsive-wrapper {
3277    position: relative;
3278    max-width: 100%;
3279    display: flex;
3280    align-items: center;
3281    justify-content: center;
3282  }
3283  
3284  .components-responsive-wrapper__content {
3285    display: block;
3286    max-width: 100%;
3287    width: 100%;
3288  }
3289  
3290  .components-sandbox {
3291    overflow: hidden;
3292  }
3293  
3294  iframe.components-sandbox {
3295    width: 100%;
3296  }
3297  
3298  html.lockscroll,
3299  body.lockscroll {
3300    overflow: hidden;
3301  }
3302  
3303  .components-select-control__input {
3304    outline: 0;
3305    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3306  }
3307  
3308  .components-snackbar {
3309    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3310    font-size: 13px;
3311    background: rgba(0, 0, 0, 0.85);
3312    backdrop-filter: blur(16px) saturate(180%);
3313    border-radius: 4px;
3314    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
3315    color: #fff;
3316    padding: 12px 20px;
3317    width: 100%;
3318    max-width: 600px;
3319    box-sizing: border-box;
3320    cursor: pointer;
3321    pointer-events: auto;
3322  }
3323  @media (min-width: 600px) {
3324    .components-snackbar {
3325      width: fit-content;
3326    }
3327  }
3328  .components-snackbar:focus {
3329    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3330  }
3331  .components-snackbar.components-snackbar-explicit-dismiss {
3332    cursor: default;
3333  }
3334  .components-snackbar .components-snackbar__content-with-icon {
3335    position: relative;
3336    padding-left: 24px;
3337  }
3338  .components-snackbar .components-snackbar__icon {
3339    position: absolute;
3340    left: -8px;
3341    top: calc((5.8px) / -2);
3342  }
3343  .components-snackbar .components-snackbar__dismiss-button {
3344    margin-left: 24px;
3345    cursor: pointer;
3346  }
3347  
3348  .components-snackbar__action.components-button,
3349  .components-snackbar__action.components-external-link {
3350    margin-left: 32px;
3351    color: #fff;
3352    flex-shrink: 0;
3353  }
3354  .components-snackbar__action.components-button:focus,
3355  .components-snackbar__action.components-external-link:focus {
3356    box-shadow: none;
3357    outline: 1px dotted #fff;
3358  }
3359  .components-snackbar__action.components-button:hover,
3360  .components-snackbar__action.components-external-link:hover {
3361    text-decoration: none;
3362    color: currentColor;
3363  }
3364  
3365  .components-snackbar__content {
3366    display: flex;
3367    align-items: baseline;
3368    justify-content: space-between;
3369    line-height: 1.4;
3370  }
3371  
3372  .components-snackbar-list {
3373    position: absolute;
3374    z-index: 100000;
3375    width: 100%;
3376    box-sizing: border-box;
3377    pointer-events: none;
3378  }
3379  
3380  .components-snackbar-list__notice-container {
3381    position: relative;
3382    padding-top: 8px;
3383  }
3384  
3385  .components-tab-panel__tabs {
3386    display: flex;
3387    align-items: stretch;
3388    flex-direction: row;
3389  }
3390  .components-tab-panel__tabs[aria-orientation=vertical] {
3391    flex-direction: column;
3392  }
3393  
3394  .components-tab-panel__tabs-item {
3395    position: relative;
3396    border-radius: 0;
3397    height: 48px !important;
3398    background: transparent;
3399    border: none;
3400    box-shadow: none;
3401    cursor: pointer;
3402    padding: 3px 16px;
3403    margin-left: 0;
3404    font-weight: 400;
3405  }
3406  .components-tab-panel__tabs-item:focus:not(:disabled) {
3407    position: relative;
3408    box-shadow: none;
3409    outline: none;
3410  }
3411  .components-tab-panel__tabs-item::after {
3412    content: "";
3413    position: absolute;
3414    right: 0;
3415    bottom: 0;
3416    left: 0;
3417    pointer-events: none;
3418    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3419    height: calc(0 * var(--wp-admin-border-width-focus));
3420    border-radius: 0;
3421  }
3422  @media not (prefers-reduced-motion) {
3423    .components-tab-panel__tabs-item::after {
3424      transition: all 0.1s linear;
3425    }
3426  }
3427  .components-tab-panel__tabs-item.is-active::after {
3428    height: calc(1 * var(--wp-admin-border-width-focus));
3429    outline: 2px solid transparent;
3430    outline-offset: -1px;
3431  }
3432  .components-tab-panel__tabs-item::before {
3433    content: "";
3434    position: absolute;
3435    top: 12px;
3436    right: 12px;
3437    bottom: 12px;
3438    left: 12px;
3439    pointer-events: none;
3440    box-shadow: 0 0 0 0 transparent;
3441    border-radius: 2px;
3442  }
3443  @media not (prefers-reduced-motion) {
3444    .components-tab-panel__tabs-item::before {
3445      transition: all 0.1s linear;
3446    }
3447  }
3448  .components-tab-panel__tabs-item:focus-visible::before {
3449    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3450    outline: 2px solid transparent;
3451  }
3452  
3453  .components-tab-panel__tab-content:focus {
3454    box-shadow: none;
3455    outline: none;
3456  }
3457  .components-tab-panel__tab-content:focus-visible {
3458    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3459    outline: 2px solid transparent;
3460    outline-offset: 0;
3461  }
3462  
3463  .components-text-control__input,
3464  .components-text-control__input[type=text],
3465  .components-text-control__input[type=tel],
3466  .components-text-control__input[type=time],
3467  .components-text-control__input[type=url],
3468  .components-text-control__input[type=week],
3469  .components-text-control__input[type=password],
3470  .components-text-control__input[type=color],
3471  .components-text-control__input[type=date],
3472  .components-text-control__input[type=datetime],
3473  .components-text-control__input[type=datetime-local],
3474  .components-text-control__input[type=email],
3475  .components-text-control__input[type=month],
3476  .components-text-control__input[type=number] {
3477    width: 100%;
3478    height: 32px;
3479    margin: 0;
3480    background: var(--wp-components-color-background, #fff);
3481    color: var(--wp-components-color-foreground, #1e1e1e);
3482    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3483    padding: 6px 8px;
3484    /* Fonts smaller than 16px causes mobile safari to zoom. */
3485    font-size: 16px;
3486    /* Override core line-height. To be reviewed. */
3487    line-height: normal;
3488    box-shadow: 0 0 0 transparent;
3489    border-radius: 2px;
3490    border: 1px solid #949494;
3491  }
3492  @media not (prefers-reduced-motion) {
3493    .components-text-control__input,
3494    .components-text-control__input[type=text],
3495    .components-text-control__input[type=tel],
3496    .components-text-control__input[type=time],
3497    .components-text-control__input[type=url],
3498    .components-text-control__input[type=week],
3499    .components-text-control__input[type=password],
3500    .components-text-control__input[type=color],
3501    .components-text-control__input[type=date],
3502    .components-text-control__input[type=datetime],
3503    .components-text-control__input[type=datetime-local],
3504    .components-text-control__input[type=email],
3505    .components-text-control__input[type=month],
3506    .components-text-control__input[type=number] {
3507      transition: box-shadow 0.1s linear;
3508    }
3509  }
3510  @media (min-width: 600px) {
3511    .components-text-control__input,
3512    .components-text-control__input[type=text],
3513    .components-text-control__input[type=tel],
3514    .components-text-control__input[type=time],
3515    .components-text-control__input[type=url],
3516    .components-text-control__input[type=week],
3517    .components-text-control__input[type=password],
3518    .components-text-control__input[type=color],
3519    .components-text-control__input[type=date],
3520    .components-text-control__input[type=datetime],
3521    .components-text-control__input[type=datetime-local],
3522    .components-text-control__input[type=email],
3523    .components-text-control__input[type=month],
3524    .components-text-control__input[type=number] {
3525      font-size: 13px;
3526      /* Override core line-height. To be reviewed. */
3527      line-height: normal;
3528    }
3529  }
3530  .components-text-control__input:focus,
3531  .components-text-control__input[type=text]:focus,
3532  .components-text-control__input[type=tel]:focus,
3533  .components-text-control__input[type=time]:focus,
3534  .components-text-control__input[type=url]:focus,
3535  .components-text-control__input[type=week]:focus,
3536  .components-text-control__input[type=password]:focus,
3537  .components-text-control__input[type=color]:focus,
3538  .components-text-control__input[type=date]:focus,
3539  .components-text-control__input[type=datetime]:focus,
3540  .components-text-control__input[type=datetime-local]:focus,
3541  .components-text-control__input[type=email]:focus,
3542  .components-text-control__input[type=month]:focus,
3543  .components-text-control__input[type=number]:focus {
3544    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3545    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3546    outline: 2px solid transparent;
3547  }
3548  .components-text-control__input::placeholder,
3549  .components-text-control__input[type=text]::placeholder,
3550  .components-text-control__input[type=tel]::placeholder,
3551  .components-text-control__input[type=time]::placeholder,
3552  .components-text-control__input[type=url]::placeholder,
3553  .components-text-control__input[type=week]::placeholder,
3554  .components-text-control__input[type=password]::placeholder,
3555  .components-text-control__input[type=color]::placeholder,
3556  .components-text-control__input[type=date]::placeholder,
3557  .components-text-control__input[type=datetime]::placeholder,
3558  .components-text-control__input[type=datetime-local]::placeholder,
3559  .components-text-control__input[type=email]::placeholder,
3560  .components-text-control__input[type=month]::placeholder,
3561  .components-text-control__input[type=number]::placeholder {
3562    color: rgba(30, 30, 30, 0.62);
3563  }
3564  .components-text-control__input,
3565  .components-text-control__input[type=text],
3566  .components-text-control__input[type=tel],
3567  .components-text-control__input[type=time],
3568  .components-text-control__input[type=url],
3569  .components-text-control__input[type=week],
3570  .components-text-control__input[type=password],
3571  .components-text-control__input[type=color],
3572  .components-text-control__input[type=date],
3573  .components-text-control__input[type=datetime],
3574  .components-text-control__input[type=datetime-local],
3575  .components-text-control__input[type=email],
3576  .components-text-control__input[type=month],
3577  .components-text-control__input[type=number] {
3578    border-color: var(--wp-components-color-gray-600, #949494);
3579  }
3580  .components-text-control__input::placeholder,
3581  .components-text-control__input[type=text]::placeholder,
3582  .components-text-control__input[type=tel]::placeholder,
3583  .components-text-control__input[type=time]::placeholder,
3584  .components-text-control__input[type=url]::placeholder,
3585  .components-text-control__input[type=week]::placeholder,
3586  .components-text-control__input[type=password]::placeholder,
3587  .components-text-control__input[type=color]::placeholder,
3588  .components-text-control__input[type=date]::placeholder,
3589  .components-text-control__input[type=datetime]::placeholder,
3590  .components-text-control__input[type=datetime-local]::placeholder,
3591  .components-text-control__input[type=email]::placeholder,
3592  .components-text-control__input[type=month]::placeholder,
3593  .components-text-control__input[type=number]::placeholder {
3594    color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3595  }
3596  .components-text-control__input.is-next-40px-default-size,
3597  .components-text-control__input[type=text].is-next-40px-default-size,
3598  .components-text-control__input[type=tel].is-next-40px-default-size,
3599  .components-text-control__input[type=time].is-next-40px-default-size,
3600  .components-text-control__input[type=url].is-next-40px-default-size,
3601  .components-text-control__input[type=week].is-next-40px-default-size,
3602  .components-text-control__input[type=password].is-next-40px-default-size,
3603  .components-text-control__input[type=color].is-next-40px-default-size,
3604  .components-text-control__input[type=date].is-next-40px-default-size,
3605  .components-text-control__input[type=datetime].is-next-40px-default-size,
3606  .components-text-control__input[type=datetime-local].is-next-40px-default-size,
3607  .components-text-control__input[type=email].is-next-40px-default-size,
3608  .components-text-control__input[type=month].is-next-40px-default-size,
3609  .components-text-control__input[type=number].is-next-40px-default-size {
3610    height: 40px;
3611    padding-left: 12px;
3612    padding-right: 12px;
3613  }
3614  
3615  .components-text-control__input[type=email],
3616  .components-text-control__input[type=url] {
3617    /* rtl:ignore */
3618    direction: ltr;
3619  }
3620  
3621  .components-tip {
3622    display: flex;
3623    color: #757575;
3624  }
3625  .components-tip svg {
3626    align-self: center;
3627    fill: #f0b849;
3628    flex-shrink: 0;
3629    margin-right: 16px;
3630  }
3631  .components-tip p {
3632    margin: 0;
3633  }
3634  
3635  .components-toggle-control__label {
3636    line-height: 16px;
3637  }
3638  .components-toggle-control__label:not(.is-disabled) {
3639    cursor: pointer;
3640  }
3641  
3642  .components-toggle-control__help {
3643    display: inline-block;
3644    margin-inline-start: 40px;
3645  }
3646  
3647  .components-accessible-toolbar {
3648    display: inline-flex;
3649    border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3650    border-radius: 2px;
3651    flex-shrink: 0;
3652  }
3653  .components-accessible-toolbar > .components-toolbar-group:last-child {
3654    border-right: none;
3655  }
3656  .components-accessible-toolbar.is-unstyled {
3657    border: none;
3658  }
3659  .components-accessible-toolbar.is-unstyled > .components-toolbar-group {
3660    border-right: none;
3661  }
3662  
3663  .components-accessible-toolbar[aria-orientation=vertical],
3664  .components-toolbar[aria-orientation=vertical] {
3665    display: flex;
3666    flex-direction: column;
3667    align-items: center;
3668  }
3669  .components-accessible-toolbar .components-button,
3670  .components-toolbar .components-button {
3671    position: relative;
3672    height: 48px;
3673    z-index: 1;
3674    padding-left: 16px;
3675    padding-right: 16px;
3676  }
3677  .components-accessible-toolbar .components-button:focus:not(:disabled),
3678  .components-toolbar .components-button:focus:not(:disabled) {
3679    box-shadow: none;
3680    outline: none;
3681  }
3682  .components-accessible-toolbar .components-button::before,
3683  .components-toolbar .components-button::before {
3684    content: "";
3685    position: absolute;
3686    display: block;
3687    border-radius: 2px;
3688    height: 32px;
3689    left: 8px;
3690    right: 8px;
3691    z-index: -1;
3692  }
3693  @media not (prefers-reduced-motion) {
3694    .components-accessible-toolbar .components-button::before,
3695    .components-toolbar .components-button::before {
3696      animation: components-button__appear-animation 0.1s ease;
3697      animation-fill-mode: forwards;
3698    }
3699  }
3700  .components-accessible-toolbar .components-button svg,
3701  .components-toolbar .components-button svg {
3702    position: relative;
3703    margin-left: auto;
3704    margin-right: auto;
3705  }
3706  .components-accessible-toolbar .components-button.is-pressed,
3707  .components-toolbar .components-button.is-pressed {
3708    background: transparent;
3709  }
3710  .components-accessible-toolbar .components-button.is-pressed:hover,
3711  .components-toolbar .components-button.is-pressed:hover {
3712    background: transparent;
3713  }
3714  .components-accessible-toolbar .components-button.is-pressed::before,
3715  .components-toolbar .components-button.is-pressed::before {
3716    background: var(--wp-components-color-foreground, #1e1e1e);
3717  }
3718  .components-accessible-toolbar .components-button:focus::before,
3719  .components-toolbar .components-button:focus::before {
3720    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3721    outline: 2px solid transparent;
3722  }
3723  .components-accessible-toolbar .components-button.has-icon.has-icon,
3724  .components-toolbar .components-button.has-icon.has-icon {
3725    padding-left: 8px;
3726    padding-right: 8px;
3727    min-width: 48px;
3728  }
3729  
3730  @keyframes components-button__appear-animation {
3731    from {
3732      transform: scaleY(0);
3733    }
3734    to {
3735      transform: scaleY(1);
3736    }
3737  }
3738  .components-toolbar__control.components-button {
3739    position: relative;
3740  }
3741  .components-toolbar__control.components-button[data-subscript] svg {
3742    padding: 5px 10px 5px 0;
3743  }
3744  .components-toolbar__control.components-button[data-subscript]::after {
3745    content: attr(data-subscript);
3746    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3747    font-size: 13px;
3748    font-weight: 600;
3749    line-height: 12px;
3750    position: absolute;
3751    right: 8px;
3752    bottom: 10px;
3753  }
3754  .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after {
3755    color: #fff;
3756  }
3757  
3758  .components-toolbar-group {
3759    min-height: 48px;
3760    border-right: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3761    background-color: var(--wp-components-color-background, #fff);
3762    display: inline-flex;
3763    flex-shrink: 0;
3764    flex-wrap: wrap;
3765    padding-left: 6px;
3766    padding-right: 6px;
3767  }
3768  .components-toolbar-group .components-toolbar-group.components-toolbar-group {
3769    border-width: 0;
3770    margin: 0;
3771  }
3772  .components-toolbar-group {
3773    line-height: 0;
3774  }
3775  .components-toolbar-group .components-button.components-button,
3776  .components-toolbar-group .components-button.has-icon.has-icon {
3777    justify-content: center;
3778    min-width: 36px;
3779    padding-left: 6px;
3780    padding-right: 6px;
3781  }
3782  .components-toolbar-group .components-button.components-button svg,
3783  .components-toolbar-group .components-button.has-icon.has-icon svg {
3784    min-width: 24px;
3785  }
3786  .components-toolbar-group .components-button.components-button::before,
3787  .components-toolbar-group .components-button.has-icon.has-icon::before {
3788    left: 2px;
3789    right: 2px;
3790  }
3791  
3792  .components-toolbar {
3793    min-height: 48px;
3794    margin: 0;
3795    border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3796    background-color: var(--wp-components-color-background, #fff);
3797    display: inline-flex;
3798    flex-shrink: 0;
3799    flex-wrap: wrap;
3800  }
3801  .components-toolbar .components-toolbar.components-toolbar {
3802    border-width: 0;
3803    margin: 0;
3804  }
3805  
3806  div.components-toolbar > div {
3807    display: flex;
3808    margin: 0;
3809  }
3810  div.components-toolbar > div + div.has-left-divider {
3811    margin-left: 6px;
3812    position: relative;
3813    overflow: visible;
3814  }
3815  div.components-toolbar > div + div.has-left-divider::before {
3816    display: inline-block;
3817    content: "";
3818    box-sizing: content-box;
3819    background-color: #ddd;
3820    position: absolute;
3821    top: 8px;
3822    left: -3px;
3823    width: 1px;
3824    height: 20px;
3825  }
3826  
3827  .components-tooltip {
3828    background: #000;
3829    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3830    border-radius: 2px;
3831    color: #f0f0f0;
3832    text-align: center;
3833    line-height: 1.4;
3834    font-size: 12px;
3835    padding: 4px 8px;
3836    z-index: 1000002;
3837    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
3838  }
3839  
3840  .components-tooltip__shortcut {
3841    margin-left: 8px;
3842  }
3843  
3844  .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3845    --wp-components-color-accent: #cc1818;
3846    border-color: #cc1818;
3847  }
3848  .components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
3849    --wp-admin-theme-color: #cc1818;
3850    --wp-components-color-accent: #cc1818;
3851    border-color: #cc1818;
3852  }
3853  .components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3854    --wp-components-color-accent: #cc1818;
3855  }
3856  
3857  .components-validated-control__wrapper-with-error-delegate {
3858    position: relative;
3859  }
3860  .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
3861    --wp-components-color-accent: #cc1818;
3862    border-color: #cc1818;
3863  }
3864  .components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
3865    --wp-components-color-accent: #cc1818;
3866  }
3867  .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3868    --wp-components-color-accent: #cc1818;
3869    border-color: #cc1818;
3870  }
3871  
3872  .components-validated-control__error-delegate {
3873    position: absolute;
3874    top: 0;
3875    height: 100%;
3876    width: 100%;
3877    opacity: 0;
3878    pointer-events: none;
3879  }
3880  
3881  .components-validated-control__indicator {
3882    display: flex;
3883    align-items: flex-start;
3884    gap: 4px;
3885    margin: 8px 0 0;
3886    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3887    font-size: 12px;
3888    line-height: 16px;
3889    color: var(--wp-components-color-gray-700, #757575);
3890    animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
3891  }
3892  .components-validated-control__indicator.is-invalid {
3893    color: #cc1818;
3894  }
3895  .components-validated-control__indicator.is-valid {
3896    color: color-mix(in srgb, #000 30%, #4ab866);
3897  }
3898  
3899  .components-validated-control__indicator-icon {
3900    flex-shrink: 0;
3901  }
3902  
3903  .components-validated-control__indicator-spinner {
3904    margin: 2px;
3905    width: 12px;
3906    height: 12px;
3907  }
3908  
3909  @keyframes components-validated-control__indicator-jump {
3910    0% {
3911      transform: translateY(-4px);
3912      opacity: 0;
3913    }
3914    100% {
3915      transform: translateY(0);
3916      opacity: 1;
3917    }
3918  }
3919  :root {
3920    --wp-admin-theme-color: #3858e9;
3921    --wp-admin-theme-color--rgb: 56, 88, 233;
3922    --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
3923    --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
3924    --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
3925    --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
3926    --wp-admin-border-width-focus: 2px;
3927  }
3928  @media (min-resolution: 192dpi) {
3929    :root {
3930      --wp-admin-border-width-focus: 1.5px;
3931    }
3932  }