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