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