[Summary view] [Print] [Text view]

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