[Summary view] [Print] [Text view]

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