[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 left;
  99  }
 100  .components-animate__appear.is-from-top.is-from-right {
 101    transform-origin: top right;
 102  }
 103  .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left {
 104    transform-origin: bottom left;
 105  }
 106  .components-animate__appear.is-from-bottom.is-from-right {
 107    transform-origin: bottom right;
 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: left;
 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-left: -1px;
 239  }
 240  .components-button-group .components-button:first-child {
 241    border-radius: 2px 0 0 2px;
 242  }
 243  .components-button-group .components-button:last-child {
 244    border-radius: 0 2px 2px 0;
 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-left: -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: left;
 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-right: 12px;
 524    padding-left: 8px;
 525    gap: 4px;
 526  }
 527  .components-button.has-icon.has-text.has-icon-right {
 528    padding-right: 8px;
 529    padding-left: 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: 200px 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-right: 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 0 0 -5px;
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: left;
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 4px 0 0;
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-right: 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    left: 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    left: 1px;
1165    bottom: 1px;
1166    right: 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    left: 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    left: -1px;
1213    bottom: -1px;
1214    right: -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    left: 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-right: 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    /*rtl:begin:ignore*/
1374    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);
1375    background-position: 0 0, 24px 24px;
1376    /*rtl:end:ignore*/
1377    background-size: 48px 48px;
1378  }
1379  
1380  .components-color-palette__custom-color-text-wrapper {
1381    padding: 12px 16px;
1382    border-radius: 0 0 4px 4px;
1383    position: relative;
1384    font-size: 13px;
1385    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);
1386  }
1387  
1388  .components-color-palette__custom-color-name {
1389    color: var(--wp-components-color-foreground, #1e1e1e);
1390    margin: 0 1px;
1391  }
1392  
1393  .components-color-palette__custom-color-value {
1394    color: #757575;
1395  }
1396  .components-color-palette__custom-color-value--is-hex {
1397    text-transform: uppercase;
1398  }
1399  .components-color-palette__custom-color-value:empty::after {
1400    content: "​";
1401    visibility: hidden;
1402  }
1403  
1404  .components-custom-gradient-picker__gradient-bar {
1405    border-radius: 2px;
1406    width: 100%;
1407    height: 48px;
1408    position: relative;
1409    z-index: 1;
1410  }
1411  .components-custom-gradient-picker__gradient-bar.has-gradient {
1412    /*rtl:begin:ignore*/
1413    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);
1414    background-position: 0 0, 12px 12px;
1415    /*rtl:end:ignore*/
1416    background-size: 24px 24px;
1417  }
1418  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background {
1419    position: absolute;
1420    inset: 0;
1421  }
1422  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
1423    position: relative;
1424    width: calc(100% - 48px);
1425    margin-left: auto;
1426    margin-right: auto;
1427  }
1428  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown {
1429    position: absolute;
1430    height: 16px;
1431    width: 16px;
1432    top: 16px;
1433    display: flex;
1434  }
1435  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown {
1436    position: relative;
1437    height: inherit;
1438    width: inherit;
1439    min-width: 16px !important;
1440    border-radius: 50%;
1441    background: #fff;
1442    padding: 2px;
1443    color: #1e1e1e;
1444  }
1445  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown svg {
1446    height: 100%;
1447    width: 100%;
1448  }
1449  .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
1450    height: inherit;
1451    width: inherit;
1452    border-radius: 50%;
1453    padding: 0;
1454    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1455    outline: 2px solid transparent;
1456  }
1457  .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 {
1458    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);
1459    outline: 1.5px solid transparent;
1460  }
1461  
1462  .components-custom-gradient-picker__remove-control-point-wrapper {
1463    padding-bottom: 8px;
1464  }
1465  
1466  .components-custom-gradient-picker__inserter {
1467    /*rtl:ignore*/
1468    direction: ltr;
1469  }
1470  
1471  .components-custom-gradient-picker__liner-gradient-indicator {
1472    display: inline-block;
1473    flex: 0 auto;
1474    width: 20px;
1475    height: 20px;
1476  }
1477  
1478  .components-custom-gradient-picker__ui-line {
1479    position: relative;
1480    z-index: 0;
1481  }
1482  
1483  .components-drop-zone {
1484    position: absolute;
1485    top: 0;
1486    right: 0;
1487    bottom: 0;
1488    left: 0;
1489    z-index: 40;
1490    visibility: hidden;
1491    opacity: 0;
1492    border-radius: 2px;
1493  }
1494  .components-drop-zone.is-active {
1495    opacity: 1;
1496    visibility: visible;
1497  }
1498  .components-drop-zone .components-drop-zone__content {
1499    position: absolute;
1500    top: 0;
1501    bottom: 0;
1502    left: 0;
1503    right: 0;
1504    height: 100%;
1505    width: 100%;
1506    display: flex;
1507    background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1508    align-items: center;
1509    justify-content: center;
1510    z-index: 50;
1511    text-align: center;
1512    color: #fff;
1513    opacity: 0;
1514    pointer-events: none;
1515  }
1516  .components-drop-zone .components-drop-zone__content-inner {
1517    opacity: 0;
1518    transform: scale(0.9);
1519  }
1520  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
1521    opacity: 1;
1522  }
1523  @media not (prefers-reduced-motion) {
1524    .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content {
1525      transition: opacity 0.2s ease-in-out;
1526    }
1527  }
1528  .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
1529    opacity: 1;
1530    transform: scale(1);
1531  }
1532  @media not (prefers-reduced-motion) {
1533    .components-drop-zone.is-active.is-dragging-over-element .components-drop-zone__content-inner {
1534      transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
1535    }
1536  }
1537  
1538  .components-drop-zone__content-icon,
1539  .components-drop-zone__content-text {
1540    display: block;
1541  }
1542  
1543  .components-drop-zone__content-icon {
1544    margin: 0 auto 8px;
1545    line-height: 0;
1546    fill: currentColor;
1547    pointer-events: none;
1548  }
1549  
1550  .components-drop-zone__content-text {
1551    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1552    font-size: 13px;
1553  }
1554  
1555  .components-dropdown {
1556    display: inline-block;
1557  }
1558  
1559  .components-dropdown__content .components-popover__content {
1560    padding: 8px;
1561  }
1562  .components-dropdown__content .components-popover__content:has(.components-menu-group) {
1563    padding: 0;
1564  }
1565  .components-dropdown__content .components-popover__content:has(.components-menu-group) .components-dropdown-menu__menu > .components-menu-item__button,
1566  .components-dropdown__content .components-popover__content:has(.components-menu-group) > .components-menu-item__button {
1567    margin: 8px;
1568    width: auto;
1569  }
1570  .components-dropdown__content [role=menuitem] {
1571    white-space: nowrap;
1572  }
1573  .components-dropdown__content .components-menu-group {
1574    padding: 8px;
1575  }
1576  .components-dropdown__content .components-menu-group + .components-menu-group {
1577    border-top: 1px solid #ccc;
1578    padding: 8px;
1579  }
1580  .components-dropdown__content.is-alternate .components-menu-group + .components-menu-group {
1581    border-color: #1e1e1e;
1582  }
1583  
1584  .components-dropdown-menu__toggle {
1585    vertical-align: top;
1586  }
1587  
1588  .components-dropdown-menu__menu {
1589    width: 100%;
1590    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1591    font-size: 13px;
1592    line-height: 1.4;
1593  }
1594  .components-dropdown-menu__menu .components-dropdown-menu__menu-item,
1595  .components-dropdown-menu__menu .components-menu-item {
1596    width: 100%;
1597    padding: 6px;
1598    outline: none;
1599    cursor: var(--wpds-cursor-control, pointer);
1600    white-space: nowrap;
1601    font-weight: 400;
1602  }
1603  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1604  .components-dropdown-menu__menu .components-menu-item.has-separator {
1605    margin-top: 6px;
1606    position: relative;
1607    overflow: visible;
1608  }
1609  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before,
1610  .components-dropdown-menu__menu .components-menu-item.has-separator::before {
1611    display: block;
1612    content: "";
1613    box-sizing: content-box;
1614    background-color: #ddd;
1615    position: absolute;
1616    top: -3px;
1617    left: 0;
1618    right: 0;
1619    height: 1px;
1620  }
1621  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg,
1622  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active .dashicon,
1623  .components-dropdown-menu__menu .components-menu-item.is-active svg,
1624  .components-dropdown-menu__menu .components-menu-item.is-active .dashicon {
1625    color: #fff;
1626    background: #1e1e1e;
1627    box-shadow: 0 0 0 1px #1e1e1e;
1628    border-radius: 1px;
1629  }
1630  .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-icon-only,
1631  .components-dropdown-menu__menu .components-menu-item.is-icon-only {
1632    width: auto;
1633  }
1634  .components-dropdown-menu__menu .components-menu-item__button,
1635  .components-dropdown-menu__menu .components-menu-item__button.components-button {
1636    min-height: 32px;
1637    height: auto;
1638    text-align: left;
1639    padding-left: 8px;
1640    padding-right: 8px;
1641  }
1642  
1643  .components-duotone-picker__color-indicator::before {
1644    background: transparent;
1645  }
1646  
1647  .components-duotone-picker__color-indicator > .components-button {
1648    background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1649    color: transparent;
1650  }
1651  .components-duotone-picker__color-indicator > .components-button.is-pressed:hover:not(:disabled) {
1652    background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1653    color: transparent;
1654  }
1655  .components-duotone-picker__color-indicator > .components-button:hover:not(:disabled):not([aria-disabled=true]) {
1656    color: transparent;
1657  }
1658  .components-duotone-picker__color-indicator > .components-button:not([aria-disabled=true]):active {
1659    color: transparent;
1660  }
1661  
1662  .components-color-list-picker,
1663  .components-color-list-picker__swatch-button {
1664    width: 100%;
1665  }
1666  
1667  .components-color-list-picker__color-picker {
1668    margin: 8px 0;
1669  }
1670  
1671  .components-color-list-picker__swatch-color {
1672    margin: 2px;
1673  }
1674  
1675  .components-external-link {
1676    color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1677    text-decoration: none;
1678  }
1679  @media not (prefers-reduced-motion) {
1680    .components-external-link {
1681      transition: outline 0.1s ease-out;
1682    }
1683  }
1684  .components-external-link {
1685    outline: 0 solid transparent;
1686    outline-offset: 1px;
1687  }
1688  .components-external-link:visited {
1689    color: var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1690  }
1691  .components-external-link:hover, .components-external-link:active {
1692    color: var(--wpds-color-fg-interactive-brand-active, var(--wp-admin-theme-color, #3858e9));
1693  }
1694  .components-external-link:focus {
1695    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));
1696    box-shadow: none;
1697    border-radius: 0;
1698  }
1699  
1700  .components-external-link__contents {
1701    text-decoration: underline;
1702    text-underline-offset: 0.2em;
1703    text-decoration-thickness: from-font;
1704  }
1705  
1706  .components-external-link__icon {
1707    line-height: 1;
1708    display: inline-block;
1709    margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
1710    font-weight: var(--wpds-typography-font-weight-regular, 400);
1711  }
1712  
1713  .components-form-toggle {
1714    position: relative;
1715    isolation: isolate;
1716    display: inline-block;
1717    height: 16px;
1718  }
1719  .components-form-toggle .components-form-toggle__track {
1720    position: relative;
1721    content: "";
1722    display: inline-block;
1723    box-sizing: border-box;
1724    vertical-align: top;
1725    background-color: #fff;
1726    border: 1px solid #949494;
1727    width: 32px;
1728    height: 16px;
1729    border-radius: 8px;
1730  }
1731  @media not (prefers-reduced-motion) {
1732    .components-form-toggle .components-form-toggle__track {
1733      transition: 0.2s background-color ease, 0.2s border-color ease;
1734    }
1735  }
1736  .components-form-toggle .components-form-toggle__track {
1737    overflow: hidden;
1738  }
1739  .components-form-toggle .components-form-toggle__track::after {
1740    content: "";
1741    position: absolute;
1742    inset: 0;
1743    box-sizing: border-box;
1744    border-top: 16px solid transparent;
1745  }
1746  @media not (prefers-reduced-motion) {
1747    .components-form-toggle .components-form-toggle__track::after {
1748      transition: 0.2s opacity ease;
1749    }
1750  }
1751  .components-form-toggle .components-form-toggle__track::after {
1752    opacity: 0;
1753  }
1754  .components-form-toggle .components-form-toggle__thumb {
1755    display: block;
1756    position: absolute;
1757    box-sizing: border-box;
1758    top: 2px;
1759    left: 2px;
1760    width: 12px;
1761    height: 12px;
1762    border-radius: 50%;
1763  }
1764  @media not (prefers-reduced-motion) {
1765    .components-form-toggle .components-form-toggle__thumb {
1766      transition: 0.2s transform ease, 0.2s background-color ease-out;
1767    }
1768  }
1769  .components-form-toggle .components-form-toggle__thumb {
1770    background-color: #1e1e1e;
1771    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);
1772    border: 6px solid transparent;
1773  }
1774  .components-form-toggle.is-checked .components-form-toggle__track {
1775    background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1776    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1777  }
1778  .components-form-toggle.is-checked .components-form-toggle__track::after {
1779    opacity: 1;
1780  }
1781  .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
1782    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));
1783    outline: 2px solid transparent;
1784    outline-offset: 2px;
1785  }
1786  .components-form-toggle.is-checked .components-form-toggle__thumb {
1787    background-color: #fff;
1788    border-width: 0;
1789    transform: translateX(16px);
1790  }
1791  .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1792    background-color: var(--wp-components-color-gray-100, #f0f0f0);
1793    border-color: var(--wp-components-color-gray-300, #ddd);
1794  }
1795  @media (forced-colors: active) {
1796    .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1797      border-color: GrayText;
1798    }
1799  }
1800  .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1801    background-color: var(--wp-components-color-gray-400, #ccc);
1802    box-shadow: none;
1803  }
1804  @media (forced-colors: active) {
1805    .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1806      border-color: GrayText;
1807    }
1808  }
1809  .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1810    background-color: var(--wp-components-color-gray-400, #ccc);
1811    border-color: var(--wp-components-color-gray-400, #ccc);
1812  }
1813  @media (forced-colors: active) {
1814    .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1815      border-color: GrayText;
1816    }
1817    .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
1818      border-top-color: GrayText;
1819    }
1820  }
1821  .components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
1822    background-color: #fff;
1823  }
1824  
1825  .components-form-toggle input.components-form-toggle__input[type=checkbox] {
1826    position: absolute;
1827    top: 0;
1828    left: 0;
1829    width: 100%;
1830    height: 100%;
1831    opacity: 0;
1832    margin: 0;
1833    padding: 0;
1834    z-index: 1;
1835    border: none;
1836  }
1837  .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked {
1838    background: none;
1839  }
1840  .components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
1841    content: "";
1842  }
1843  .components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
1844    cursor: var(--wpds-cursor-control, pointer);
1845  }
1846  
1847  .components-form-token-field__input-container {
1848    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1849    padding: 6px 8px;
1850    /* Fonts smaller than 16px causes mobile safari to zoom. */
1851    font-size: 16px;
1852    /* Override core line-height. To be reviewed. */
1853    line-height: normal;
1854    box-shadow: 0 0 0 transparent;
1855    border-radius: 2px;
1856    border: 1px solid #949494;
1857  }
1858  @media not (prefers-reduced-motion) {
1859    .components-form-token-field__input-container {
1860      transition: box-shadow 0.1s linear;
1861    }
1862  }
1863  @media (min-width: 600px) {
1864    .components-form-token-field__input-container {
1865      font-size: 13px;
1866      /* Override core line-height. To be reviewed. */
1867      line-height: normal;
1868    }
1869  }
1870  .components-form-token-field__input-container:focus {
1871    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1872    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1873    outline: 2px solid transparent;
1874  }
1875  .components-form-token-field__input-container::-moz-placeholder {
1876    color: rgba(30, 30, 30, 0.62);
1877  }
1878  .components-form-token-field__input-container::placeholder {
1879    color: rgba(30, 30, 30, 0.62);
1880  }
1881  .components-form-token-field__input-container {
1882    width: 100%;
1883    padding: 0;
1884    cursor: text;
1885  }
1886  .components-form-token-field__input-container.is-disabled {
1887    background: var(--wp-components-color-gray-100, #f0f0f0);
1888    border-color: var(--wp-components-color-gray-400, #ccc);
1889    cursor: default;
1890  }
1891  .components-form-token-field__input-container.is-active {
1892    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1893    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1894    outline: 2px solid transparent;
1895  }
1896  .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1897    display: inline-block;
1898    flex: 1;
1899    font-family: inherit;
1900    font-size: 16px;
1901    line-height: 1;
1902    width: 100%;
1903    max-width: 100%;
1904    margin-left: 4px;
1905    padding: 0;
1906    min-height: 24px;
1907    min-width: 50px;
1908    background: inherit;
1909    border: 0;
1910    color: var(--wp-components-color-foreground, #1e1e1e);
1911    box-shadow: none;
1912  }
1913  @media (min-width: 600px) {
1914    .components-form-token-field__input-container input[type=text].components-form-token-field__input {
1915      font-size: 13px;
1916    }
1917  }
1918  .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 {
1919    outline: none;
1920    box-shadow: none;
1921  }
1922  .components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input {
1923    width: auto;
1924  }
1925  
1926  .components-form-token-field__token {
1927    font-size: 13px;
1928    display: flex;
1929    color: #1e1e1e;
1930    max-width: 100%;
1931  }
1932  .components-form-token-field__token.is-success .components-form-token-field__token-text,
1933  .components-form-token-field__token.is-success .components-form-token-field__remove-token {
1934    background: #4ab866;
1935  }
1936  .components-form-token-field__token.is-error .components-form-token-field__token-text,
1937  .components-form-token-field__token.is-error .components-form-token-field__remove-token {
1938    background: #cc1818;
1939  }
1940  .components-form-token-field__token.is-validating .components-form-token-field__token-text,
1941  .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
1942    color: #757575;
1943  }
1944  .components-form-token-field__token.is-disabled .components-form-token-field__token-text,
1945  .components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
1946    background: var(--wp-components-color-gray-100, #f0f0f0);
1947    color: var(--wp-components-color-gray-600, #949494);
1948  }
1949  .components-form-token-field__token.is-borderless {
1950    position: relative;
1951    padding: 0 24px 0 0;
1952  }
1953  .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
1954    background: transparent;
1955  }
1956  .components-form-token-field__token.is-borderless:not(.is-disabled) .components-form-token-field__token-text {
1957    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1958  }
1959  .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
1960    background: transparent;
1961    color: #757575;
1962    position: absolute;
1963    top: 1px;
1964    right: 0;
1965  }
1966  .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
1967    color: #4ab866;
1968  }
1969  .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
1970    color: #cc1818;
1971    padding: 0 4px 0 6px;
1972  }
1973  .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
1974    color: #1e1e1e;
1975  }
1976  
1977  .components-form-token-field__token-text,
1978  .components-form-token-field__remove-token.components-button {
1979    display: inline-block;
1980    height: auto;
1981    background: #ddd;
1982    min-width: unset;
1983  }
1984  @media not (prefers-reduced-motion) {
1985    .components-form-token-field__token-text,
1986    .components-form-token-field__remove-token.components-button {
1987      transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
1988    }
1989  }
1990  
1991  .components-form-token-field__token-text {
1992    border-radius: 1px 0 0 1px;
1993    padding: 0 0 0 8px;
1994    line-height: 24px;
1995    white-space: nowrap;
1996    overflow: hidden;
1997    text-overflow: ellipsis;
1998  }
1999  
2000  .components-form-token-field__remove-token.components-button {
2001    border-radius: 0 1px 1px 0;
2002    color: #1e1e1e;
2003    line-height: 10px;
2004    overflow: initial;
2005  }
2006  .components-form-token-field__remove-token.components-button:hover:not(:disabled) {
2007    color: #1e1e1e;
2008  }
2009  
2010  .components-form-token-field__suggestions-list {
2011    flex: 1 0 100%;
2012    min-width: 100%;
2013    max-height: 128px;
2014    overflow-y: auto;
2015  }
2016  @media not (prefers-reduced-motion) {
2017    .components-form-token-field__suggestions-list {
2018      transition: all 0.15s ease-in-out;
2019    }
2020  }
2021  .components-form-token-field__suggestions-list {
2022    list-style: none;
2023    box-shadow: inset 0 1px 0 0 #949494;
2024    margin: 0;
2025    padding: 0;
2026  }
2027  
2028  .components-form-token-field__suggestion {
2029    color: var(--wp-components-color-foreground, #1e1e1e);
2030    display: block;
2031    font-size: 13px;
2032    padding: 8px 12px;
2033    min-height: 32px;
2034    margin: 0;
2035    box-sizing: border-box;
2036  }
2037  .components-form-token-field__suggestion.is-selected {
2038    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2039    color: var(--wp-components-color-foreground-inverted, #fff);
2040  }
2041  .components-form-token-field__suggestion[aria-disabled=true] {
2042    pointer-events: none;
2043    color: #949494;
2044  }
2045  .components-form-token-field__suggestion[aria-disabled=true].is-selected {
2046    background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
2047  }
2048  .components-form-token-field__suggestion:not(.is-empty) {
2049    cursor: var(--wpds-cursor-control, pointer);
2050  }
2051  
2052  @media (min-width: 600px) {
2053    .components-guide {
2054      width: 600px;
2055    }
2056  }
2057  .components-guide .components-modal__content {
2058    padding: 0;
2059    margin-top: 0;
2060  }
2061  .components-guide .components-modal__content::before {
2062    content: none;
2063  }
2064  .components-guide .components-modal__header {
2065    border-bottom: none;
2066    padding: 0;
2067    position: sticky;
2068    height: 64px;
2069  }
2070  .components-guide .components-modal__header .components-button {
2071    align-self: flex-start;
2072    margin: 8px 8px 0 0;
2073    position: static;
2074  }
2075  .components-guide .components-guide__container {
2076    display: flex;
2077    flex-direction: column;
2078    justify-content: space-between;
2079    margin-top: -64px;
2080    min-height: 100%;
2081  }
2082  .components-guide .components-guide__page {
2083    display: flex;
2084    flex-direction: column;
2085    justify-content: center;
2086    position: relative;
2087  }
2088  @media (min-width: 600px) {
2089    .components-guide .components-guide__page {
2090      min-height: 300px;
2091    }
2092  }
2093  .components-guide .components-guide__footer {
2094    align-content: center;
2095    display: flex;
2096    height: 36px;
2097    justify-content: center;
2098    margin: 0 0 24px 0;
2099    padding: 0 24px;
2100    position: relative;
2101    width: 100%;
2102  }
2103  .components-guide .components-guide__page-control {
2104    margin: 0;
2105    text-align: center;
2106  }
2107  .components-guide .components-guide__page-control li {
2108    display: inline-block;
2109    margin: 0;
2110  }
2111  .components-guide .components-guide__page-control .components-button {
2112    margin: -6px 0;
2113    color: #e0e0e0;
2114  }
2115  .components-guide .components-guide__page-control li[aria-current=step] .components-button {
2116    color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2117  }
2118  
2119  .components-modal__frame.components-guide {
2120    border: none;
2121    min-width: 312px;
2122    max-height: 575px;
2123  }
2124  @media (max-width: 600px) {
2125    .components-modal__frame.components-guide {
2126      margin: auto;
2127      max-width: calc(100vw - 16px * 2);
2128    }
2129  }
2130  
2131  .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
2132    position: absolute;
2133  }
2134  .components-button.components-guide__back-button {
2135    left: 24px;
2136  }
2137  .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
2138    right: 24px;
2139  }
2140  
2141  [role=region] {
2142    position: relative;
2143  }
2144  [role=region].interface-interface-skeleton__content:focus-visible::after {
2145    content: "";
2146    position: absolute;
2147    pointer-events: none;
2148    top: 0;
2149    right: 0;
2150    bottom: 0;
2151    left: 0;
2152    outline-color: var(--wp-admin-theme-color);
2153    outline-style: solid;
2154    outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2155    outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2156    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);
2157    z-index: 1000000;
2158  }
2159  
2160  .is-focusing-regions [role=region]:focus::after {
2161    content: "";
2162    position: absolute;
2163    pointer-events: none;
2164    top: 0;
2165    right: 0;
2166    bottom: 0;
2167    left: 0;
2168    outline-color: var(--wp-admin-theme-color);
2169    outline-style: solid;
2170    outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2171    outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2172    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);
2173    z-index: 1000000;
2174  }
2175  .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
2176  .is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
2177  .is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
2178  .is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
2179  .is-focusing-regions .editor-post-publish-panel {
2180    outline-color: var(--wp-admin-theme-color);
2181    outline-style: solid;
2182    outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2183    outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2184    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);
2185  }
2186  
2187  .components-menu-group + .components-menu-group {
2188    padding-top: 8px;
2189    border-top: 1px solid #1e1e1e;
2190  }
2191  .components-menu-group + .components-menu-group.has-hidden-separator {
2192    border-top: none;
2193    margin-top: 0;
2194    padding-top: 0;
2195  }
2196  
2197  .components-menu-group:has(> div:empty) {
2198    display: none;
2199  }
2200  
2201  .components-menu-group__label {
2202    padding: 0 8px;
2203    margin-top: 4px;
2204    margin-bottom: 12px;
2205    color: #757575;
2206    text-transform: uppercase;
2207    font-size: 11px;
2208    font-weight: 499;
2209    white-space: nowrap;
2210  }
2211  
2212  .components-menu-item__button,
2213  .components-menu-item__button.components-button {
2214    width: 100%;
2215    font-weight: 400;
2216  }
2217  .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2218  .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2219  .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
2220    padding-right: 48px;
2221    box-sizing: initial;
2222  }
2223  .components-menu-item__button .components-menu-items__item-icon,
2224  .components-menu-item__button.components-button .components-menu-items__item-icon {
2225    display: inline-block;
2226    flex: 0 0 auto;
2227  }
2228  .components-menu-item__button .components-menu-items__item-icon.has-icon-right,
2229  .components-menu-item__button.components-button .components-menu-items__item-icon.has-icon-right {
2230    margin-right: -2px;
2231    margin-left: 24px;
2232  }
2233  .components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right,
2234  .components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon.has-icon-right {
2235    margin-left: 8px;
2236  }
2237  .components-menu-item__button .block-editor-block-icon,
2238  .components-menu-item__button.components-button .block-editor-block-icon {
2239    margin-left: -2px;
2240    margin-right: 8px;
2241  }
2242  .components-menu-item__button.is-primary,
2243  .components-menu-item__button.components-button.is-primary {
2244    justify-content: center;
2245  }
2246  .components-menu-item__button.is-primary .components-menu-item__item,
2247  .components-menu-item__button.components-button.is-primary .components-menu-item__item {
2248    margin-right: 0;
2249  }
2250  .components-menu-item__button:disabled.is-tertiary, .components-menu-item__button[aria-disabled=true].is-tertiary,
2251  .components-menu-item__button.components-button:disabled.is-tertiary,
2252  .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
2253    background: none;
2254    color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
2255    opacity: 0.3;
2256  }
2257  
2258  .components-menu-item__info-wrapper {
2259    display: flex;
2260    flex-direction: column;
2261    margin-right: auto;
2262  }
2263  
2264  .components-menu-item__info {
2265    margin-top: 4px;
2266    font-size: 12px;
2267    color: #757575;
2268    white-space: normal;
2269  }
2270  
2271  .components-menu-item__item {
2272    white-space: nowrap;
2273    min-width: 160px;
2274    margin-right: auto;
2275    display: inline-flex;
2276    align-items: center;
2277  }
2278  
2279  .components-menu-item__shortcut {
2280    align-self: center;
2281    margin-right: 0;
2282    margin-left: auto;
2283    padding-left: 24px;
2284    color: currentColor;
2285    display: none;
2286  }
2287  @media (min-width: 480px) {
2288    .components-menu-item__shortcut {
2289      display: inline;
2290    }
2291  }
2292  
2293  .components-menu-items-choice,
2294  .components-menu-items-choice.components-button {
2295    min-height: 40px;
2296    height: auto;
2297  }
2298  .components-menu-items-choice svg,
2299  .components-menu-items-choice.components-button svg {
2300    margin-right: 12px;
2301  }
2302  .components-menu-items-choice.has-icon,
2303  .components-menu-items-choice.components-button.has-icon {
2304    padding-left: 12px;
2305  }
2306  
2307  .components-modal__screen-overlay {
2308    position: fixed;
2309    top: 0;
2310    right: 0;
2311    bottom: 0;
2312    left: 0;
2313    background-color: rgba(0, 0, 0, 0.35);
2314    z-index: 100000;
2315    display: flex;
2316  }
2317  @keyframes __wp-base-styles-fade-in {
2318    from {
2319      opacity: 0;
2320    }
2321    to {
2322      opacity: 1;
2323    }
2324  }
2325  @media not (prefers-reduced-motion) {
2326    .components-modal__screen-overlay {
2327      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;
2328      animation-fill-mode: forwards;
2329    }
2330  }
2331  @keyframes __wp-base-styles-fade-out {
2332    from {
2333      opacity: 1;
2334    }
2335    to {
2336      opacity: 0;
2337    }
2338  }
2339  @media not (prefers-reduced-motion) {
2340    .components-modal__screen-overlay.is-animating-out {
2341      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);
2342      animation-fill-mode: forwards;
2343    }
2344  }
2345  
2346  .components-modal__frame {
2347    box-sizing: border-box;
2348  }
2349  .components-modal__frame *,
2350  .components-modal__frame *::before,
2351  .components-modal__frame *::after {
2352    box-sizing: inherit;
2353  }
2354  .components-modal__frame {
2355    align-self: flex-end;
2356    margin: 0;
2357    width: 100%;
2358    max-height: calc(100% - 40px);
2359    background: #fff;
2360    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);
2361    border-radius: 8px 8px 0 0;
2362    overflow: hidden;
2363    display: flex;
2364    color: #1e1e1e;
2365    animation-name: components-modal__appear-animation;
2366    animation-fill-mode: forwards;
2367    animation-timing-function: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
2368  }
2369  .components-modal__frame h1,
2370  .components-modal__frame h2,
2371  .components-modal__frame h3 {
2372    color: #1e1e1e;
2373  }
2374  @media not (prefers-reduced-motion) {
2375    .components-modal__frame {
2376      animation-duration: var(--wpds-motion-duration-md, 200ms);
2377    }
2378  }
2379  .components-modal__screen-overlay.is-animating-out .components-modal__frame {
2380    animation-name: components-modal__disappear-animation;
2381    animation-timing-function: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
2382  }
2383  @media (min-width: 600px) {
2384    .components-modal__frame {
2385      align-self: auto;
2386      border-radius: 8px;
2387      margin: auto;
2388      width: auto;
2389      min-width: var(--wpds-dimension-surface-width-sm, 320px);
2390      max-width: calc(100% - 32px);
2391      max-height: calc(100% - 128px);
2392    }
2393    .components-modal__frame.has-size-small, .components-modal__frame.has-size-medium, .components-modal__frame.has-size-large {
2394      width: 100%;
2395    }
2396    .components-modal__frame.has-size-small {
2397      max-width: var(--wpds-dimension-surface-width-md, 400px);
2398    }
2399    .components-modal__frame.has-size-medium {
2400      max-width: var(--wpds-dimension-surface-width-lg, 560px);
2401    }
2402    .components-modal__frame.has-size-large {
2403      max-width: var(--wpds-dimension-surface-width-2xl, 960px);
2404    }
2405  }
2406  @media (min-width: 960px) {
2407    .components-modal__frame {
2408      max-height: 70%;
2409    }
2410  }
2411  .components-modal__frame.is-full-screen {
2412    margin: 0;
2413    width: 100%;
2414    height: 100%;
2415    max-height: none;
2416    border-radius: 0;
2417  }
2418  .components-modal__frame.is-full-screen :where(.components-modal__content) {
2419    display: flex;
2420    margin-bottom: 24px;
2421    padding-bottom: 0;
2422  }
2423  .components-modal__frame.is-full-screen :where(.components-modal__content) > :last-child {
2424    flex: 1;
2425  }
2426  @media (min-width: 600px) {
2427    .components-modal__frame.is-full-screen {
2428      margin: auto;
2429      border-radius: 8px;
2430      width: calc(100% - 32px);
2431      height: calc(100% - 32px);
2432    }
2433  }
2434  @media (min-width: 782px) {
2435    .components-modal__frame.is-full-screen {
2436      width: calc(100% - 80px);
2437      height: calc(100% - 80px);
2438      max-width: none;
2439    }
2440  }
2441  
2442  @keyframes components-modal__appear-animation {
2443    from {
2444      opacity: 0;
2445      transform: translateY(100%);
2446    }
2447    to {
2448      opacity: 1;
2449      transform: translateY(0);
2450    }
2451  }
2452  @keyframes components-modal__disappear-animation {
2453    from {
2454      opacity: 1;
2455      transform: translateY(0);
2456    }
2457    to {
2458      opacity: 0;
2459      transform: translateY(100%);
2460    }
2461  }
2462  @media (min-width: 600px) {
2463    @keyframes components-modal__appear-animation {
2464      from {
2465        opacity: 0;
2466        transform: scale(0.9);
2467      }
2468      to {
2469        opacity: 1;
2470        transform: scale(1);
2471      }
2472    }
2473    @keyframes components-modal__disappear-animation {
2474      from {
2475        opacity: 1;
2476        transform: scale(1);
2477      }
2478      to {
2479        opacity: 0;
2480        transform: scale(0.9);
2481      }
2482    }
2483  }
2484  .components-modal__header {
2485    box-sizing: border-box;
2486    border-bottom: 1px solid transparent;
2487    padding: 24px;
2488    display: flex;
2489    flex-direction: row;
2490    justify-content: space-between;
2491    align-items: center;
2492    height: 72px;
2493    width: 100%;
2494    z-index: 10;
2495    position: absolute;
2496    top: 0;
2497    left: 0;
2498  }
2499  .components-modal__header .components-modal__header-heading {
2500    font-size: 20px;
2501    font-weight: 600;
2502  }
2503  .components-modal__header h1 {
2504    line-height: 1;
2505    margin: 0;
2506  }
2507  .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2508    border-bottom-color: #ddd;
2509  }
2510  .components-modal__header + p {
2511    margin-top: 0;
2512  }
2513  
2514  .components-modal__header-heading-container {
2515    align-items: center;
2516    flex-grow: 1;
2517    display: flex;
2518    flex-direction: row;
2519    justify-content: flex-start;
2520  }
2521  
2522  .components-modal__header-icon-container {
2523    display: inline-block;
2524  }
2525  .components-modal__header-icon-container svg {
2526    max-width: 36px;
2527    max-height: 36px;
2528    padding: 8px;
2529  }
2530  
2531  .components-modal__content {
2532    flex: 1;
2533    margin-top: 72px;
2534    padding: 4px 24px 24px;
2535    overflow: auto;
2536  }
2537  .components-modal__content.hide-header {
2538    margin-top: 0;
2539    padding-top: 24px;
2540  }
2541  .components-modal__content.is-scrollable:focus-visible {
2542    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2543    outline: 2px solid transparent;
2544    outline-offset: -2px;
2545  }
2546  
2547  .components-notice {
2548    --wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak, #f3f9ff);
2549    --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #a9c6e7);
2550    --wp-components-notice-text-color: var(--wpds-color-fg-content-info, #001b4f);
2551    box-sizing: border-box;
2552    display: grid;
2553    grid-template-columns: 1fr auto;
2554    align-items: start;
2555    padding: var(--wpds-dimension-padding-md, 12px);
2556    border: var(--wpds-border-width-xs, 1px) solid var(--wp-components-notice-border-color);
2557    border-radius: var(--wpds-border-radius-lg, 8px);
2558    background-color: var(--wp-components-notice-background-color);
2559    color: var(--wp-components-notice-text-color);
2560    font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
2561    font-size: var(--wpds-typography-font-size-md, 13px);
2562    line-height: var(--wpds-typography-line-height-sm, 20px);
2563  }
2564  .components-notice.is-success {
2565    --wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak, #ebffed);
2566    --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #94d29e);
2567    --wp-components-notice-text-color: var(--wpds-color-fg-content-success, #002900);
2568  }
2569  .components-notice.is-warning {
2570    --wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak, #fff7e1);
2571    --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bc7c);
2572    --wp-components-notice-text-color: var(--wpds-color-fg-content-warning, #2e1900);
2573  }
2574  .components-notice.is-error {
2575    --wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak, #fff6f5);
2576    --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #dab1aa);
2577    --wp-components-notice-text-color: var(--wpds-color-fg-content-error, #470000);
2578  }
2579  
2580  .components-notice__content {
2581    grid-column: 1;
2582    grid-row: 1;
2583    padding-block: calc((24px - 1lh) / 2);
2584  }
2585  
2586  .components-notice__actions {
2587    grid-column: 1;
2588    grid-row: 2;
2589    display: flex;
2590    flex-wrap: wrap;
2591    align-items: center;
2592    gap: var(--wpds-dimension-gap-md, 12px);
2593    margin-top: var(--wpds-dimension-gap-sm, 8px);
2594  }
2595  
2596  .components-notice__dismiss {
2597    grid-column: 2;
2598    grid-row: 1;
2599    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
2600    margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2601  }
2602  .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 {
2603    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
2604    background-color: transparent;
2605  }
2606  .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2607    box-shadow: none;
2608  }
2609  
2610  .components-notice-list {
2611    display: flex;
2612    flex-direction: column;
2613    gap: var(--wpds-dimension-gap-md, 12px);
2614    max-width: 100vw;
2615    box-sizing: border-box;
2616  }
2617  
2618  .components-panel {
2619    background: #fff;
2620    border: 1px solid #e0e0e0;
2621  }
2622  .components-panel > .components-panel__header:first-child,
2623  .components-panel > .components-panel__body:first-child {
2624    margin-top: -1px;
2625  }
2626  .components-panel > .components-panel__header:last-child,
2627  .components-panel > .components-panel__body:last-child {
2628    border-bottom-width: 0;
2629  }
2630  
2631  .components-panel + .components-panel {
2632    margin-top: -1px;
2633  }
2634  
2635  .components-panel__body {
2636    border-top: 1px solid #e0e0e0;
2637    border-bottom: 1px solid #e0e0e0;
2638  }
2639  .components-panel__body h3 {
2640    margin: 0 0 0.5em;
2641  }
2642  .components-panel__body.is-opened {
2643    padding: 16px;
2644  }
2645  
2646  .components-panel__header {
2647    display: flex;
2648    flex-shrink: 0;
2649    justify-content: space-between;
2650    align-items: center;
2651    padding: 0 16px;
2652    border-bottom: 1px solid #ddd;
2653    box-sizing: content-box;
2654    height: 47px;
2655  }
2656  .components-panel__header h2 {
2657    margin: 0;
2658    font-size: inherit;
2659    color: inherit;
2660  }
2661  
2662  .components-panel__body + .components-panel__body,
2663  .components-panel__body + .components-panel__header,
2664  .components-panel__header + .components-panel__body,
2665  .components-panel__header + .components-panel__header {
2666    margin-top: -1px;
2667  }
2668  
2669  .components-panel__body > .components-panel__body-title {
2670    display: block;
2671    padding: 0;
2672    font-size: inherit;
2673    margin-top: 0;
2674    margin-bottom: 0;
2675  }
2676  @media not (prefers-reduced-motion) {
2677    .components-panel__body > .components-panel__body-title {
2678      transition: 0.1s background ease-in-out;
2679    }
2680  }
2681  
2682  .components-panel__body.is-opened > .components-panel__body-title {
2683    margin: -16px;
2684    margin-bottom: 5px;
2685  }
2686  
2687  .components-panel__body > .components-panel__body-title:hover {
2688    background: #f0f0f0;
2689    border: none;
2690  }
2691  
2692  .components-panel__body-toggle.components-button {
2693    position: relative;
2694    padding: 16px 48px 16px 16px;
2695    outline: none;
2696    width: 100%;
2697    font-weight: 499;
2698    text-align: left;
2699    color: #1e1e1e;
2700    border: none;
2701    box-shadow: none;
2702  }
2703  @media not (prefers-reduced-motion) {
2704    .components-panel__body-toggle.components-button {
2705      transition: 0.1s background ease-in-out;
2706    }
2707  }
2708  .components-panel__body-toggle.components-button {
2709    height: auto;
2710  }
2711  .components-panel__body-toggle.components-button:focus {
2712    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2713    border-radius: 0;
2714  }
2715  .components-panel__body-toggle.components-button .components-panel__arrow {
2716    position: absolute;
2717    right: 16px;
2718    top: 50%;
2719    transform: translateY(-50%);
2720    color: #1e1e1e;
2721    fill: currentColor;
2722  }
2723  @media not (prefers-reduced-motion) {
2724    .components-panel__body-toggle.components-button .components-panel__arrow {
2725      transition: 0.1s color ease-in-out;
2726    }
2727  }
2728  .components-panel__body-toggle.components-button {
2729    /* rtl:begin:ignore */
2730  }
2731  body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {
2732    transform: scaleX(-1);
2733    margin-top: -10px;
2734  }
2735  .components-panel__body-toggle.components-button {
2736    /* rtl:end:ignore */
2737  }
2738  
2739  .components-panel__icon {
2740    color: #757575;
2741    margin: -2px 0 -2px 6px;
2742  }
2743  
2744  .components-panel__body-toggle-icon {
2745    margin-right: -5px;
2746  }
2747  
2748  .components-panel__color-title {
2749    float: left;
2750    height: 19px;
2751  }
2752  
2753  .components-panel__row {
2754    display: flex;
2755    justify-content: space-between;
2756    align-items: center;
2757    margin-top: 8px;
2758    min-height: 36px;
2759  }
2760  .components-panel__row select {
2761    min-width: 0;
2762  }
2763  .components-panel__row label {
2764    margin-right: 12px;
2765    flex-shrink: 0;
2766    max-width: 75%;
2767  }
2768  .components-panel__row:empty, .components-panel__row:first-of-type {
2769    margin-top: 0;
2770  }
2771  
2772  .components-panel .circle-picker {
2773    padding-bottom: 20px;
2774  }
2775  
2776  .components-placeholder.components-placeholder {
2777    font-size: 13px;
2778    box-sizing: border-box;
2779    position: relative;
2780    padding: 24px;
2781    width: 100%;
2782    text-align: left;
2783    margin: 0;
2784    color: #1e1e1e;
2785    display: flex;
2786    flex-direction: column;
2787    align-items: flex-start;
2788    gap: 16px;
2789    -webkit-font-smoothing: subpixel-antialiased;
2790    border-radius: 2px;
2791    background-color: #fff;
2792    box-shadow: inset 0 0 0 1px #1e1e1e;
2793    outline: 1px solid transparent;
2794  }
2795  
2796  .components-placeholder__error,
2797  .components-placeholder__instructions,
2798  .components-placeholder__label,
2799  .components-placeholder__fieldset {
2800    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2801    font-size: 13px;
2802    letter-spacing: initial;
2803    line-height: initial;
2804    text-transform: none;
2805    font-weight: normal;
2806  }
2807  
2808  .components-placeholder__label {
2809    font-weight: 600;
2810    align-items: center;
2811    display: flex;
2812  }
2813  .components-placeholder__label > svg,
2814  .components-placeholder__label .dashicon,
2815  .components-placeholder__label .block-editor-block-icon {
2816    margin-right: 4px;
2817    fill: currentColor;
2818  }
2819  @media (forced-colors: active) {
2820    .components-placeholder__label > svg,
2821    .components-placeholder__label .dashicon,
2822    .components-placeholder__label .block-editor-block-icon {
2823      fill: CanvasText;
2824    }
2825  }
2826  .components-placeholder__label:empty {
2827    display: none;
2828  }
2829  
2830  .components-placeholder__fieldset,
2831  .components-placeholder__fieldset form {
2832    display: flex;
2833    flex-direction: row;
2834    width: 100%;
2835    flex-wrap: wrap;
2836    gap: 16px;
2837    justify-content: flex-start;
2838  }
2839  .components-placeholder__fieldset p,
2840  .components-placeholder__fieldset form p {
2841    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2842    font-size: 13px;
2843  }
2844  
2845  .components-placeholder__fieldset.is-column-layout,
2846  .components-placeholder__fieldset.is-column-layout form {
2847    flex-direction: column;
2848  }
2849  
2850  .components-placeholder__input[type=url] {
2851    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2852    padding: 6px 8px;
2853    /* Fonts smaller than 16px causes mobile safari to zoom. */
2854    font-size: 16px;
2855    /* Override core line-height. To be reviewed. */
2856    line-height: normal;
2857    box-shadow: 0 0 0 transparent;
2858    border-radius: 2px;
2859    border: 1px solid #949494;
2860  }
2861  @media not (prefers-reduced-motion) {
2862    .components-placeholder__input[type=url] {
2863      transition: box-shadow 0.1s linear;
2864    }
2865  }
2866  @media (min-width: 600px) {
2867    .components-placeholder__input[type=url] {
2868      font-size: 13px;
2869      /* Override core line-height. To be reviewed. */
2870      line-height: normal;
2871    }
2872  }
2873  .components-placeholder__input[type=url]:focus {
2874    border-color: var(--wp-admin-theme-color);
2875    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2876    outline: 2px solid transparent;
2877  }
2878  .components-placeholder__input[type=url]::-moz-placeholder {
2879    color: rgba(30, 30, 30, 0.62);
2880  }
2881  .components-placeholder__input[type=url]::placeholder {
2882    color: rgba(30, 30, 30, 0.62);
2883  }
2884  .components-placeholder__input[type=url] {
2885    flex: 1 1 auto;
2886  }
2887  
2888  .components-placeholder__error {
2889    width: 100%;
2890    gap: 8px;
2891  }
2892  
2893  .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
2894    margin-left: 10px;
2895    margin-right: 10px;
2896  }
2897  .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child {
2898    margin-right: 0;
2899  }
2900  
2901  .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
2902    display: none;
2903  }
2904  .components-placeholder.is-medium .components-placeholder__fieldset,
2905  .components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset,
2906  .components-placeholder.is-small .components-placeholder__fieldset form {
2907    flex-direction: column;
2908  }
2909  .components-placeholder.is-medium .components-placeholder__fieldset > *,
2910  .components-placeholder.is-medium .components-button, .components-placeholder.is-small .components-placeholder__fieldset > *,
2911  .components-placeholder.is-small .components-button {
2912    width: 100%;
2913    justify-content: center;
2914  }
2915  .components-placeholder.is-small {
2916    padding: 16px;
2917  }
2918  
2919  /**
2920   * Dashed style placeholders
2921   */
2922  .components-placeholder.has-illustration {
2923    color: inherit;
2924    display: flex;
2925    box-shadow: none;
2926    border-radius: 0;
2927    backdrop-filter: blur(100px);
2928    background-color: transparent;
2929    backface-visibility: hidden;
2930  }
2931  .is-dark-theme .components-placeholder.has-illustration {
2932    background-color: rgba(0, 0, 0, 0.1);
2933  }
2934  .components-placeholder.has-illustration .components-placeholder__fieldset {
2935    margin-left: 0;
2936    margin-right: 0;
2937  }
2938  .components-placeholder.has-illustration .components-placeholder__label,
2939  .components-placeholder.has-illustration .components-placeholder__instructions,
2940  .components-placeholder.has-illustration .components-button {
2941    opacity: 0;
2942    pointer-events: none;
2943  }
2944  @media not (prefers-reduced-motion) {
2945    .components-placeholder.has-illustration .components-placeholder__label,
2946    .components-placeholder.has-illustration .components-placeholder__instructions,
2947    .components-placeholder.has-illustration .components-button {
2948      transition: opacity 0.1s linear;
2949    }
2950  }
2951  .is-selected > .components-placeholder.has-illustration .components-placeholder__label,
2952  .is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
2953  .is-selected > .components-placeholder.has-illustration .components-button {
2954    opacity: 1;
2955    pointer-events: auto;
2956  }
2957  .components-placeholder.has-illustration::before {
2958    content: "";
2959    position: absolute;
2960    top: 0;
2961    right: 0;
2962    bottom: 0;
2963    left: 0;
2964    pointer-events: none;
2965    background: currentColor;
2966    opacity: 0.1;
2967  }
2968  .components-placeholder.has-illustration {
2969    overflow: hidden;
2970  }
2971  .is-selected .components-placeholder.has-illustration {
2972    overflow: auto;
2973  }
2974  
2975  .components-placeholder__preview {
2976    display: flex;
2977    justify-content: center;
2978  }
2979  
2980  .components-placeholder__illustration {
2981    box-sizing: content-box;
2982    position: absolute;
2983    top: 50%;
2984    left: 50%;
2985    transform: translate(-50%, -50%);
2986    width: 100%;
2987    height: 100%;
2988    stroke: currentColor;
2989    opacity: 0.25;
2990  }
2991  
2992  .components-popover {
2993    box-sizing: border-box;
2994  }
2995  .components-popover *,
2996  .components-popover *::before,
2997  .components-popover *::after {
2998    box-sizing: inherit;
2999  }
3000  .components-popover {
3001    z-index: 1000000;
3002    will-change: transform;
3003  }
3004  .components-popover.is-expanded {
3005    position: fixed;
3006    top: 0;
3007    left: 0;
3008    right: 0;
3009    bottom: 0;
3010    z-index: 1000000 !important;
3011  }
3012  
3013  .components-popover__content {
3014    background: #fff;
3015    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);
3016    border-radius: 4px;
3017    box-sizing: border-box;
3018    width: -moz-min-content;
3019    width: min-content;
3020  }
3021  .is-alternate .components-popover__content {
3022    box-shadow: 0 0 0 1px #1e1e1e;
3023    border-radius: 2px;
3024  }
3025  .is-unstyled .components-popover__content {
3026    background: none;
3027    border-radius: 0;
3028    box-shadow: none;
3029  }
3030  .components-popover.is-expanded .components-popover__content {
3031    position: static;
3032    height: calc(100% - 48px);
3033    overflow-y: visible;
3034    width: auto;
3035    box-shadow: 0 -1px 0 0 #ccc;
3036  }
3037  .components-popover.is-expanded.is-alternate .components-popover__content {
3038    box-shadow: 0 -1px 0 #1e1e1e;
3039  }
3040  
3041  .components-popover__header {
3042    align-items: center;
3043    background: #fff;
3044    display: flex;
3045    height: 48px;
3046    justify-content: space-between;
3047    padding: 0 8px 0 16px;
3048  }
3049  
3050  .components-popover__header-title {
3051    overflow: hidden;
3052    text-overflow: ellipsis;
3053    white-space: nowrap;
3054    width: 100%;
3055  }
3056  
3057  .components-popover__arrow {
3058    position: absolute;
3059    width: 14px;
3060    height: 14px;
3061    pointer-events: none;
3062    display: flex;
3063  }
3064  .components-popover__arrow::before {
3065    content: "";
3066    position: absolute;
3067    top: -1px;
3068    left: 1px;
3069    height: 2px;
3070    right: 1px;
3071    background-color: #fff;
3072  }
3073  .components-popover__arrow.is-top {
3074    bottom: -14px !important;
3075    transform: rotate(0);
3076  }
3077  .components-popover__arrow.is-right {
3078    /*rtl:begin:ignore*/
3079    left: -14px !important;
3080    transform: rotate(90deg);
3081  }
3082  .components-popover__arrow.is-bottom {
3083    top: -14px !important;
3084    transform: rotate(180deg);
3085  }
3086  .components-popover__arrow.is-left {
3087    /*rtl:begin:ignore*/
3088    right: -14px !important;
3089    transform: rotate(-90deg);
3090    /*rtl:end:ignore*/
3091  }
3092  
3093  .components-popover__triangle {
3094    display: block;
3095    flex: 1;
3096  }
3097  
3098  .components-popover__triangle-bg {
3099    fill: #fff;
3100  }
3101  
3102  .components-popover__triangle-border {
3103    fill: transparent;
3104    stroke-width: 1px;
3105    stroke: #ccc;
3106  }
3107  .is-alternate .components-popover__triangle-border {
3108    stroke: #1e1e1e;
3109  }
3110  
3111  .components-radio-control {
3112    border: 0;
3113    margin: 0;
3114    padding: 0;
3115    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3116    font-size: 13px;
3117  }
3118  
3119  .components-radio-control__group-wrapper.has-help {
3120    margin-block-end: 12px;
3121  }
3122  
3123  .components-radio-control__option {
3124    display: grid;
3125    grid-template-columns: auto 1fr;
3126    grid-template-rows: auto minmax(0, max-content);
3127    -moz-column-gap: 8px;
3128         column-gap: 8px;
3129    align-items: center;
3130  }
3131  
3132  .components-radio-control__input[type=radio] {
3133    grid-column: 1;
3134    grid-row: 1;
3135    border: 1px solid #1e1e1e;
3136    margin-right: 12px;
3137    transition: none;
3138    border-radius: 50%;
3139    width: 24px;
3140    height: 24px;
3141    min-width: 24px;
3142    max-width: 24px;
3143    position: relative;
3144  }
3145  @media not (prefers-reduced-motion) {
3146    .components-radio-control__input[type=radio] {
3147      transition: box-shadow 0.1s linear;
3148    }
3149  }
3150  @media (min-width: 600px) {
3151    .components-radio-control__input[type=radio] {
3152      height: 16px;
3153      width: 16px;
3154      min-width: 16px;
3155      max-width: 16px;
3156    }
3157  }
3158  .components-radio-control__input[type=radio]:checked::before {
3159    box-sizing: inherit;
3160    width: 12px;
3161    height: 12px;
3162    position: absolute;
3163    top: 50%;
3164    left: 50%;
3165    transform: translate(-50%, -50%);
3166    margin: 0;
3167    background-color: #fff;
3168    border: 4px solid #fff;
3169  }
3170  @media (min-width: 600px) {
3171    .components-radio-control__input[type=radio]:checked::before {
3172      width: 8px;
3173      height: 8px;
3174    }
3175  }
3176  .components-radio-control__input[type=radio]:focus {
3177    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
3178    outline: 2px solid transparent;
3179  }
3180  .components-radio-control__input[type=radio]:checked {
3181    background: var(--wp-admin-theme-color);
3182    border: none;
3183  }
3184  .components-radio-control__input[type=radio] {
3185    display: inline-flex;
3186    margin: 0;
3187    padding: 0;
3188    -webkit-appearance: none;
3189       -moz-appearance: none;
3190            appearance: none;
3191  }
3192  .components-radio-control__input[type=radio]:not(:disabled) {
3193    cursor: var(--wpds-cursor-control, pointer);
3194  }
3195  .components-radio-control__input[type=radio]:focus {
3196    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);
3197    outline: 2px solid transparent;
3198    outline-offset: 2px;
3199  }
3200  .components-radio-control__input[type=radio]:checked {
3201    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3202    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3203  }
3204  .components-radio-control__input[type=radio]:checked::before {
3205    content: "";
3206    border-radius: 50%;
3207  }
3208  .components-radio-control__input[type=radio]:disabled {
3209    background: var(--wp-components-color-gray-100, #f0f0f0);
3210    border: 1px solid var(--wp-components-color-gray-300, #ddd);
3211    opacity: 1;
3212  }
3213  .components-radio-control__input[type=radio]:disabled:checked::before {
3214    border-color: var(--wp-components-color-gray-400, #ccc);
3215    opacity: 1;
3216  }
3217  
3218  .components-radio-control__label {
3219    grid-column: 2;
3220    grid-row: 1;
3221  }
3222  .components-radio-control:not(:disabled) .components-radio-control__label {
3223    cursor: var(--wpds-cursor-control, pointer);
3224  }
3225  .components-radio-control__label {
3226    line-height: 24px;
3227  }
3228  @media (min-width: 600px) {
3229    .components-radio-control__label {
3230      line-height: 16px;
3231    }
3232  }
3233  
3234  .components-radio-control__option-description {
3235    grid-column: 2;
3236    grid-row: 2;
3237    padding-block-start: 4px;
3238  }
3239  .components-radio-control__option-description.components-radio-control__option-description {
3240    margin-top: 0;
3241  }
3242  
3243  .components-resizable-box__handle {
3244    display: none;
3245    width: 23px;
3246    height: 23px;
3247    z-index: 2;
3248  }
3249  .components-resizable-box__container.has-show-handle .components-resizable-box__handle {
3250    display: block;
3251  }
3252  .components-resizable-box__handle > div {
3253    position: relative;
3254    width: 100%;
3255    height: 100%;
3256    z-index: 2;
3257    outline: none;
3258  }
3259  
3260  .components-resizable-box__container > img {
3261    width: inherit;
3262  }
3263  
3264  .components-resizable-box__handle::after {
3265    display: block;
3266    content: "";
3267    width: 15px;
3268    height: 15px;
3269    border-radius: 50%;
3270    background: #fff;
3271    cursor: inherit;
3272    position: absolute;
3273    top: calc(50% - 8px);
3274    right: calc(50% - 8px);
3275    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);
3276    outline: 2px solid transparent;
3277  }
3278  
3279  .components-resizable-box__side-handle::before {
3280    display: block;
3281    border-radius: 9999px;
3282    content: "";
3283    width: 3px;
3284    height: 3px;
3285    background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3286    cursor: inherit;
3287    position: absolute;
3288    top: calc(50% - 1px);
3289    right: calc(50% - 1px);
3290  }
3291  @media not (prefers-reduced-motion) {
3292    .components-resizable-box__side-handle::before {
3293      transition: transform 0.1s ease-in;
3294      will-change: transform;
3295    }
3296  }
3297  .components-resizable-box__side-handle::before {
3298    opacity: 0;
3299  }
3300  
3301  .components-resizable-box__side-handle {
3302    z-index: 2;
3303  }
3304  
3305  .components-resizable-box__corner-handle {
3306    z-index: 2;
3307  }
3308  
3309  .components-resizable-box__side-handle.components-resizable-box__handle-top,
3310  .components-resizable-box__side-handle.components-resizable-box__handle-bottom,
3311  .components-resizable-box__side-handle.components-resizable-box__handle-top::before,
3312  .components-resizable-box__side-handle.components-resizable-box__handle-bottom::before {
3313    width: 100%;
3314    left: 0;
3315    border-left: 0;
3316    border-right: 0;
3317  }
3318  
3319  .components-resizable-box__side-handle.components-resizable-box__handle-left,
3320  .components-resizable-box__side-handle.components-resizable-box__handle-right,
3321  .components-resizable-box__side-handle.components-resizable-box__handle-left::before,
3322  .components-resizable-box__side-handle.components-resizable-box__handle-right::before {
3323    height: 100%;
3324    top: 0;
3325    border-top: 0;
3326    border-bottom: 0;
3327  }
3328  
3329  @media not (prefers-reduced-motion) {
3330    .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
3331    .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
3332    .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
3333    .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
3334      animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
3335      animation-fill-mode: forwards;
3336    }
3337  }
3338  
3339  @media not (prefers-reduced-motion) {
3340    .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
3341    .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
3342    .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
3343    .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
3344      animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
3345      animation-fill-mode: forwards;
3346    }
3347  }
3348  
3349  /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
3350  See https://bugs.webkit.org/show_bug.cgi?id=187903. */
3351  @media not all and (min-resolution: 0.001dpcm) {
3352    @supports (-webkit-appearance: none) {
3353      .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
3354      .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
3355      .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
3356      .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
3357        animation: none;
3358      }
3359      .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
3360      .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
3361      .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
3362      .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
3363        animation: none;
3364      }
3365    }
3366  }
3367  @keyframes components-resizable-box__top-bottom-animation {
3368    from {
3369      transform: scaleX(0);
3370      opacity: 0;
3371    }
3372    to {
3373      transform: scaleX(1);
3374      opacity: 1;
3375    }
3376  }
3377  @keyframes components-resizable-box__left-right-animation {
3378    from {
3379      transform: scaleY(0);
3380      opacity: 0;
3381    }
3382    to {
3383      transform: scaleY(1);
3384      opacity: 1;
3385    }
3386  }
3387  /*!rtl:begin:ignore*/
3388  .components-resizable-box__handle-right {
3389    right: calc(11.5px * -1);
3390  }
3391  
3392  .components-resizable-box__handle-left {
3393    left: calc(11.5px * -1);
3394  }
3395  
3396  .components-resizable-box__handle-top {
3397    top: calc(11.5px * -1);
3398  }
3399  
3400  .components-resizable-box__handle-bottom {
3401    bottom: calc(11.5px * -1);
3402  }
3403  
3404  /*!rtl:end:ignore*/
3405  .components-responsive-wrapper {
3406    position: relative;
3407    max-width: 100%;
3408    display: flex;
3409    align-items: center;
3410    justify-content: center;
3411  }
3412  
3413  .components-responsive-wrapper__content {
3414    display: block;
3415    max-width: 100%;
3416    width: 100%;
3417  }
3418  
3419  .components-sandbox {
3420    overflow: hidden;
3421  }
3422  
3423  iframe.components-sandbox {
3424    width: 100%;
3425  }
3426  
3427  html.lockscroll,
3428  body.lockscroll {
3429    overflow: hidden;
3430  }
3431  
3432  .components-select-control__input {
3433    outline: 0;
3434    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3435  }
3436  
3437  .components-snackbar {
3438    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3439    font-size: 13px;
3440    background: rgba(0, 0, 0, 0.85);
3441    backdrop-filter: blur(16px) saturate(180%);
3442    border-radius: 4px;
3443    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);
3444    color: #fff;
3445    padding: 12px 20px;
3446    width: 100%;
3447    max-width: var(--wpds-dimension-surface-width-lg, 560px);
3448    box-sizing: border-box;
3449    cursor: var(--wpds-cursor-control, pointer);
3450    pointer-events: auto;
3451  }
3452  @media (min-width: 600px) {
3453    .components-snackbar {
3454      width: -moz-fit-content;
3455      width: fit-content;
3456    }
3457  }
3458  .components-snackbar:focus {
3459    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));
3460  }
3461  .components-snackbar.components-snackbar-explicit-dismiss {
3462    cursor: default;
3463  }
3464  .components-snackbar .components-snackbar__content-with-icon {
3465    position: relative;
3466    padding-left: 24px;
3467  }
3468  .components-snackbar .components-snackbar__icon {
3469    position: absolute;
3470    left: -8px;
3471    top: calc((5.8px) / -2);
3472  }
3473  .components-snackbar .components-snackbar__dismiss-button {
3474    margin-left: 24px;
3475    cursor: var(--wpds-cursor-control, pointer);
3476  }
3477  
3478  .components-snackbar__action.components-button,
3479  .components-snackbar__action.components-external-link {
3480    margin-left: 32px;
3481    color: #fff;
3482    flex-shrink: 0;
3483  }
3484  .components-snackbar__action.components-button:focus,
3485  .components-snackbar__action.components-external-link:focus {
3486    box-shadow: none;
3487    outline: 1px dotted #fff;
3488  }
3489  .components-snackbar__action.components-button:hover,
3490  .components-snackbar__action.components-external-link:hover {
3491    text-decoration: none;
3492    color: currentColor;
3493  }
3494  
3495  .components-snackbar__content {
3496    display: flex;
3497    align-items: baseline;
3498    justify-content: space-between;
3499    line-height: 1.4;
3500  }
3501  
3502  .components-snackbar-list {
3503    position: absolute;
3504    z-index: 100000;
3505    width: 100%;
3506    box-sizing: border-box;
3507    pointer-events: none;
3508  }
3509  
3510  .components-snackbar-list__notice-container {
3511    position: relative;
3512    padding-top: 8px;
3513  }
3514  
3515  .components-tab-panel__tabs {
3516    display: flex;
3517    align-items: stretch;
3518    flex-direction: row;
3519  }
3520  .components-tab-panel__tabs[aria-orientation=vertical] {
3521    flex-direction: column;
3522  }
3523  
3524  .components-tab-panel__tabs-item {
3525    position: relative;
3526    border-radius: 0;
3527    height: 48px !important;
3528    background: transparent;
3529    border: none;
3530    box-shadow: none;
3531    cursor: var(--wpds-cursor-control, pointer);
3532    padding: 3px var(--wpds-dimension-padding-lg, 16px);
3533    margin-left: 0;
3534    font-weight: var(--wpds-typography-font-weight-regular, 400);
3535    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
3536  }
3537  .components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
3538    color: var(--wpds-color-fg-interactive-neutral-disabled, #8d8d8d);
3539  }
3540  .components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
3541    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
3542  }
3543  .components-tab-panel__tabs-item:focus:not(:disabled) {
3544    position: relative;
3545    box-shadow: none;
3546    outline: none;
3547  }
3548  .components-tab-panel__tabs-item::after {
3549    content: "";
3550    position: absolute;
3551    right: 0;
3552    bottom: 0;
3553    left: 0;
3554    pointer-events: none;
3555    background: var(--wpds-color-stroke-interactive-neutral-strong, #6e6e6e);
3556    height: calc(0 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3557    border-radius: 0;
3558  }
3559  @media not (prefers-reduced-motion) {
3560    .components-tab-panel__tabs-item::after {
3561      transition: height 0.1s linear;
3562    }
3563  }
3564  .components-tab-panel__tabs-item.is-active::after {
3565    height: calc(1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3566    outline: 2px solid transparent;
3567    outline-offset: -1px;
3568  }
3569  .components-tab-panel__tabs-item::before {
3570    content: "";
3571    position: absolute;
3572    inset: var(--wpds-dimension-padding-md, 12px);
3573    pointer-events: none;
3574    box-shadow: 0 0 0 0 transparent;
3575    border-radius: var(--wpds-border-radius-sm, 2px);
3576  }
3577  @media not (prefers-reduced-motion) {
3578    .components-tab-panel__tabs-item::before {
3579      transition: box-shadow 0.1s linear;
3580    }
3581  }
3582  .components-tab-panel__tabs-item:focus-visible::before {
3583    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));
3584    outline: 2px solid transparent;
3585  }
3586  .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
3587    border-radius: var(--wpds-border-radius-sm, 2px);
3588  }
3589  .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item::after {
3590    display: none;
3591  }
3592  .components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
3593    background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
3594  }
3595  
3596  .components-tab-panel__tab-content:focus {
3597    box-shadow: none;
3598    outline: none;
3599  }
3600  .components-tab-panel__tab-content:focus-visible {
3601    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));
3602    outline: 2px solid transparent;
3603    outline-offset: 0;
3604  }
3605  
3606  .components-text-control__input,
3607  .components-text-control__input[type=text],
3608  .components-text-control__input[type=tel],
3609  .components-text-control__input[type=time],
3610  .components-text-control__input[type=url],
3611  .components-text-control__input[type=week],
3612  .components-text-control__input[type=password],
3613  .components-text-control__input[type=color],
3614  .components-text-control__input[type=date],
3615  .components-text-control__input[type=datetime],
3616  .components-text-control__input[type=datetime-local],
3617  .components-text-control__input[type=email],
3618  .components-text-control__input[type=month],
3619  .components-text-control__input[type=number] {
3620    width: 100%;
3621    height: 32px;
3622    margin: 0;
3623    background: var(--wp-components-color-background, #fff);
3624    color: var(--wp-components-color-foreground, #1e1e1e);
3625    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3626    padding: 6px 8px;
3627    /* Fonts smaller than 16px causes mobile safari to zoom. */
3628    font-size: 16px;
3629    /* Override core line-height. To be reviewed. */
3630    line-height: normal;
3631    box-shadow: 0 0 0 transparent;
3632    border-radius: 2px;
3633    border: 1px solid #949494;
3634  }
3635  @media not (prefers-reduced-motion) {
3636    .components-text-control__input,
3637    .components-text-control__input[type=text],
3638    .components-text-control__input[type=tel],
3639    .components-text-control__input[type=time],
3640    .components-text-control__input[type=url],
3641    .components-text-control__input[type=week],
3642    .components-text-control__input[type=password],
3643    .components-text-control__input[type=color],
3644    .components-text-control__input[type=date],
3645    .components-text-control__input[type=datetime],
3646    .components-text-control__input[type=datetime-local],
3647    .components-text-control__input[type=email],
3648    .components-text-control__input[type=month],
3649    .components-text-control__input[type=number] {
3650      transition: box-shadow 0.1s linear;
3651    }
3652  }
3653  @media (min-width: 600px) {
3654    .components-text-control__input,
3655    .components-text-control__input[type=text],
3656    .components-text-control__input[type=tel],
3657    .components-text-control__input[type=time],
3658    .components-text-control__input[type=url],
3659    .components-text-control__input[type=week],
3660    .components-text-control__input[type=password],
3661    .components-text-control__input[type=color],
3662    .components-text-control__input[type=date],
3663    .components-text-control__input[type=datetime],
3664    .components-text-control__input[type=datetime-local],
3665    .components-text-control__input[type=email],
3666    .components-text-control__input[type=month],
3667    .components-text-control__input[type=number] {
3668      font-size: 13px;
3669      /* Override core line-height. To be reviewed. */
3670      line-height: normal;
3671    }
3672  }
3673  .components-text-control__input:focus,
3674  .components-text-control__input[type=text]:focus,
3675  .components-text-control__input[type=tel]:focus,
3676  .components-text-control__input[type=time]:focus,
3677  .components-text-control__input[type=url]:focus,
3678  .components-text-control__input[type=week]:focus,
3679  .components-text-control__input[type=password]:focus,
3680  .components-text-control__input[type=color]:focus,
3681  .components-text-control__input[type=date]:focus,
3682  .components-text-control__input[type=datetime]:focus,
3683  .components-text-control__input[type=datetime-local]:focus,
3684  .components-text-control__input[type=email]:focus,
3685  .components-text-control__input[type=month]:focus,
3686  .components-text-control__input[type=number]:focus {
3687    border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3688    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3689    outline: 2px solid transparent;
3690  }
3691  .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 {
3692    color: rgba(30, 30, 30, 0.62);
3693  }
3694  .components-text-control__input::placeholder,
3695  .components-text-control__input[type=text]::placeholder,
3696  .components-text-control__input[type=tel]::placeholder,
3697  .components-text-control__input[type=time]::placeholder,
3698  .components-text-control__input[type=url]::placeholder,
3699  .components-text-control__input[type=week]::placeholder,
3700  .components-text-control__input[type=password]::placeholder,
3701  .components-text-control__input[type=color]::placeholder,
3702  .components-text-control__input[type=date]::placeholder,
3703  .components-text-control__input[type=datetime]::placeholder,
3704  .components-text-control__input[type=datetime-local]::placeholder,
3705  .components-text-control__input[type=email]::placeholder,
3706  .components-text-control__input[type=month]::placeholder,
3707  .components-text-control__input[type=number]::placeholder {
3708    color: rgba(30, 30, 30, 0.62);
3709  }
3710  .components-text-control__input,
3711  .components-text-control__input[type=text],
3712  .components-text-control__input[type=tel],
3713  .components-text-control__input[type=time],
3714  .components-text-control__input[type=url],
3715  .components-text-control__input[type=week],
3716  .components-text-control__input[type=password],
3717  .components-text-control__input[type=color],
3718  .components-text-control__input[type=date],
3719  .components-text-control__input[type=datetime],
3720  .components-text-control__input[type=datetime-local],
3721  .components-text-control__input[type=email],
3722  .components-text-control__input[type=month],
3723  .components-text-control__input[type=number] {
3724    border-color: var(--wp-components-color-gray-600, #949494);
3725  }
3726  .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 {
3727    color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3728  }
3729  .components-text-control__input::placeholder,
3730  .components-text-control__input[type=text]::placeholder,
3731  .components-text-control__input[type=tel]::placeholder,
3732  .components-text-control__input[type=time]::placeholder,
3733  .components-text-control__input[type=url]::placeholder,
3734  .components-text-control__input[type=week]::placeholder,
3735  .components-text-control__input[type=password]::placeholder,
3736  .components-text-control__input[type=color]::placeholder,
3737  .components-text-control__input[type=date]::placeholder,
3738  .components-text-control__input[type=datetime]::placeholder,
3739  .components-text-control__input[type=datetime-local]::placeholder,
3740  .components-text-control__input[type=email]::placeholder,
3741  .components-text-control__input[type=month]::placeholder,
3742  .components-text-control__input[type=number]::placeholder {
3743    color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
3744  }
3745  .components-text-control__input.is-next-40px-default-size,
3746  .components-text-control__input[type=text].is-next-40px-default-size,
3747  .components-text-control__input[type=tel].is-next-40px-default-size,
3748  .components-text-control__input[type=time].is-next-40px-default-size,
3749  .components-text-control__input[type=url].is-next-40px-default-size,
3750  .components-text-control__input[type=week].is-next-40px-default-size,
3751  .components-text-control__input[type=password].is-next-40px-default-size,
3752  .components-text-control__input[type=color].is-next-40px-default-size,
3753  .components-text-control__input[type=date].is-next-40px-default-size,
3754  .components-text-control__input[type=datetime].is-next-40px-default-size,
3755  .components-text-control__input[type=datetime-local].is-next-40px-default-size,
3756  .components-text-control__input[type=email].is-next-40px-default-size,
3757  .components-text-control__input[type=month].is-next-40px-default-size,
3758  .components-text-control__input[type=number].is-next-40px-default-size {
3759    height: 40px;
3760    padding-left: 12px;
3761    padding-right: 12px;
3762  }
3763  
3764  .components-text-control__input[type=email],
3765  .components-text-control__input[type=url] {
3766    /* rtl:ignore */
3767    direction: ltr;
3768  }
3769  
3770  .components-tip {
3771    display: flex;
3772    color: #757575;
3773  }
3774  .components-tip svg {
3775    align-self: center;
3776    fill: #f0b849;
3777    flex-shrink: 0;
3778    margin-right: 16px;
3779  }
3780  .components-tip p {
3781    margin: 0;
3782  }
3783  
3784  .components-toggle-control__label {
3785    line-height: 16px;
3786  }
3787  .components-toggle-control__label:not(.is-disabled) {
3788    cursor: var(--wpds-cursor-control, pointer);
3789  }
3790  
3791  .components-toggle-control__help {
3792    display: inline-block;
3793    margin-inline-start: 40px;
3794  }
3795  
3796  .components-accessible-toolbar {
3797    display: inline-flex;
3798    border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3799    border-radius: 2px;
3800    flex-shrink: 0;
3801  }
3802  .components-accessible-toolbar > .components-toolbar-group:last-child {
3803    border-right: none;
3804  }
3805  .components-accessible-toolbar.is-unstyled {
3806    border: none;
3807  }
3808  .components-accessible-toolbar.is-unstyled > .components-toolbar-group {
3809    border-right: none;
3810  }
3811  
3812  .components-accessible-toolbar[aria-orientation=vertical],
3813  .components-toolbar[aria-orientation=vertical] {
3814    display: flex;
3815    flex-direction: column;
3816    align-items: center;
3817  }
3818  .components-accessible-toolbar .components-button,
3819  .components-toolbar .components-button {
3820    position: relative;
3821    height: 48px;
3822    z-index: 1;
3823    padding-left: 16px;
3824    padding-right: 16px;
3825  }
3826  .components-accessible-toolbar .components-button:focus:not(:disabled),
3827  .components-toolbar .components-button:focus:not(:disabled) {
3828    box-shadow: none;
3829    outline: none;
3830  }
3831  .components-accessible-toolbar .components-button::before,
3832  .components-toolbar .components-button::before {
3833    content: "";
3834    position: absolute;
3835    display: block;
3836    border-radius: 2px;
3837    height: 32px;
3838    left: 8px;
3839    right: 8px;
3840    z-index: -1;
3841  }
3842  @media not (prefers-reduced-motion) {
3843    .components-accessible-toolbar .components-button::before,
3844    .components-toolbar .components-button::before {
3845      animation: components-button__appear-animation 0.1s ease;
3846      animation-fill-mode: forwards;
3847    }
3848  }
3849  .components-accessible-toolbar .components-button svg,
3850  .components-toolbar .components-button svg {
3851    position: relative;
3852    margin-left: auto;
3853    margin-right: auto;
3854  }
3855  .components-accessible-toolbar .components-button.is-pressed,
3856  .components-toolbar .components-button.is-pressed {
3857    background: transparent;
3858  }
3859  .components-accessible-toolbar .components-button.is-pressed:hover,
3860  .components-toolbar .components-button.is-pressed:hover {
3861    background: transparent;
3862  }
3863  .components-accessible-toolbar .components-button.is-pressed::before,
3864  .components-toolbar .components-button.is-pressed::before {
3865    background: var(--wp-components-color-foreground, #1e1e1e);
3866  }
3867  .components-accessible-toolbar .components-button:focus::before,
3868  .components-toolbar .components-button:focus::before {
3869    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3870    outline: 2px solid transparent;
3871  }
3872  .components-accessible-toolbar .components-button.has-icon.has-icon,
3873  .components-toolbar .components-button.has-icon.has-icon {
3874    padding-left: 8px;
3875    padding-right: 8px;
3876    min-width: 48px;
3877  }
3878  
3879  @keyframes components-button__appear-animation {
3880    from {
3881      transform: scaleY(0);
3882    }
3883    to {
3884      transform: scaleY(1);
3885    }
3886  }
3887  .components-toolbar__control.components-button {
3888    position: relative;
3889  }
3890  .components-toolbar__control.components-button[data-subscript] svg {
3891    padding: 5px 10px 5px 0;
3892  }
3893  .components-toolbar__control.components-button[data-subscript]::after {
3894    content: attr(data-subscript);
3895    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3896    font-size: 13px;
3897    font-weight: 600;
3898    line-height: 12px;
3899    position: absolute;
3900    right: 8px;
3901    bottom: 10px;
3902  }
3903  .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after {
3904    color: #fff;
3905  }
3906  
3907  .components-toolbar-group {
3908    min-height: 48px;
3909    border-right: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3910    background-color: var(--wp-components-color-background, #fff);
3911    display: inline-flex;
3912    flex-shrink: 0;
3913    flex-wrap: wrap;
3914    padding-left: 6px;
3915    padding-right: 6px;
3916  }
3917  .components-toolbar-group .components-toolbar-group.components-toolbar-group {
3918    border-width: 0;
3919    margin: 0;
3920  }
3921  .components-toolbar-group {
3922    line-height: 0;
3923  }
3924  .components-toolbar-group .components-button.components-button,
3925  .components-toolbar-group .components-button.has-icon.has-icon {
3926    justify-content: center;
3927    min-width: 36px;
3928    padding-left: 6px;
3929    padding-right: 6px;
3930  }
3931  .components-toolbar-group .components-button.components-button svg,
3932  .components-toolbar-group .components-button.has-icon.has-icon svg {
3933    min-width: 24px;
3934  }
3935  .components-toolbar-group .components-button.components-button::before,
3936  .components-toolbar-group .components-button.has-icon.has-icon::before {
3937    left: 2px;
3938    right: 2px;
3939  }
3940  
3941  .components-toolbar {
3942    min-height: 48px;
3943    margin: 0;
3944    border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3945    background-color: var(--wp-components-color-background, #fff);
3946    display: inline-flex;
3947    flex-shrink: 0;
3948    flex-wrap: wrap;
3949  }
3950  .components-toolbar .components-toolbar.components-toolbar {
3951    border-width: 0;
3952    margin: 0;
3953  }
3954  
3955  div.components-toolbar > div {
3956    display: flex;
3957    margin: 0;
3958  }
3959  div.components-toolbar > div + div.has-left-divider {
3960    margin-left: 6px;
3961    position: relative;
3962    overflow: visible;
3963  }
3964  div.components-toolbar > div + div.has-left-divider::before {
3965    display: inline-block;
3966    content: "";
3967    box-sizing: content-box;
3968    background-color: #ddd;
3969    position: absolute;
3970    top: 8px;
3971    left: -3px;
3972    width: 1px;
3973    height: 20px;
3974  }
3975  
3976  .components-tooltip {
3977    background: #000;
3978    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3979    border-radius: var(--wpds-border-radius-md, 4px);
3980    color: #f0f0f0;
3981    text-align: center;
3982    line-height: 1.4;
3983    font-size: 12px;
3984    padding: 4px 8px;
3985    z-index: 1000002;
3986    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);
3987  }
3988  
3989  .components-tooltip__shortcut {
3990    margin-left: 8px;
3991  }
3992  
3993  .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3994    --wp-components-color-accent: #cc1818;
3995    border-color: #cc1818;
3996  }
3997  .components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
3998    --wp-admin-theme-color: #cc1818;
3999    --wp-components-color-accent: #cc1818;
4000    border-color: #cc1818;
4001  }
4002  .components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
4003    --wp-components-color-accent: #cc1818;
4004  }
4005  
4006  .components-validated-control__wrapper-with-error-delegate {
4007    position: relative;
4008  }
4009  .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
4010    --wp-components-color-accent: #cc1818;
4011    border-color: #cc1818;
4012  }
4013  .components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
4014    --wp-components-color-accent: #cc1818;
4015  }
4016  .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
4017    --wp-components-color-accent: #cc1818;
4018    border-color: #cc1818;
4019  }
4020  
4021  .components-validated-control__error-delegate {
4022    position: absolute;
4023    top: 0;
4024    height: 100%;
4025    width: 100%;
4026    opacity: 0;
4027    pointer-events: none;
4028  }
4029  
4030  .components-validated-control__indicator {
4031    display: flex;
4032    align-items: flex-start;
4033    gap: 4px;
4034    margin: 8px 0 0;
4035    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4036    font-size: 12px;
4037    line-height: 16px;
4038    color: var(--wp-components-color-gray-700, #757575);
4039    animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
4040  }
4041  .components-validated-control__indicator.is-invalid {
4042    color: #cc1818;
4043  }
4044  .components-validated-control__indicator.is-valid {
4045    color: color-mix(in srgb, #000 30%, #4ab866);
4046  }
4047  
4048  .components-validated-control__indicator-icon {
4049    flex-shrink: 0;
4050  }
4051  
4052  .components-validated-control__indicator-spinner {
4053    margin: 2px;
4054    width: 12px;
4055    height: 12px;
4056  }
4057  
4058  @keyframes components-validated-control__indicator-jump {
4059    0% {
4060      transform: translateY(-4px);
4061      opacity: 0;
4062    }
4063    100% {
4064      transform: translateY(0);
4065      opacity: 1;
4066    }
4067  }
4068  :root {
4069    --wp-admin-theme-color: #3858e9;
4070    --wp-admin-theme-color--rgb: 56, 88, 233;
4071    --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
4072    --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
4073    --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
4074    --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
4075    --wp-admin-border-width-focus: 2px;
4076  }
4077  @media (min-resolution: 192dpi) {
4078    :root {
4079      --wp-admin-border-width-focus: 1.5px;
4080    }
4081  }