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