[Summary view] [Print] [Text view]

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