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