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