[Summary view] [Print] [Text view]

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