[Summary view] [Print] [Text view]

   1  /**
   2   * Typography
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Colors
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Standard focus rings for the WordPress Design System.
  72   *
  73   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  74   * e.g. `&:focus { @include outset-ring__focus(); }`.
  75   */
  76  /**
  77   * Applies editor left position to the selector passed as argument
  78   */
  79  /**
  80   * Styles that are reused verbatim in a few places
  81   */
  82  /**
  83   * Allows users to opt-out of animations via OS-level preferences.
  84   */
  85  /**
  86   * Reset default styles for JavaScript UI based pages.
  87   * This is a WP-admin agnostic reset
  88   */
  89  /**
  90   * Reset the WP Admin page styles for Gutenberg-like pages.
  91   */
  92  /**
  93   * Creates a checkerboard pattern background to indicate transparency.
  94   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  95   */
  96  :root {
  97    --wp-block-synced-color: #7a00df;
  98    --wp-block-synced-color--rgb: 122, 0, 223;
  99    --wp-bound-block-color: var(--wp-block-synced-color);
 100    --wp-editor-canvas-background: #ddd;
 101    --wp-admin-theme-color: #3858e9;
 102    --wp-admin-theme-color--rgb: 56, 88, 233;
 103    --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
 104    --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
 105    --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
 106    --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
 107    --wp-admin-border-width-focus: 2px;
 108  }
 109  @media (min-resolution: 192dpi) {
 110    :root {
 111      --wp-admin-border-width-focus: 1.5px;
 112    }
 113  }
 114  
 115  body.admin-color-fresh {
 116    --wp-admin-theme-color: #007cba;
 117    --wp-admin-theme-color--rgb: 0, 124, 186;
 118    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
 119    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
 120    --wp-admin-theme-color-darker-20: #005a87;
 121    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
 122    --wp-admin-border-width-focus: 2px;
 123  }
 124  @media (min-resolution: 192dpi) {
 125    body.admin-color-fresh {
 126      --wp-admin-border-width-focus: 1.5px;
 127    }
 128  }
 129  
 130  .block-editor-autocompleters__block {
 131    white-space: nowrap;
 132  }
 133  .block-editor-autocompleters__block .block-editor-block-icon {
 134    margin-left: 8px;
 135  }
 136  .block-editor-autocompleters__block:is([aria-selected=true], :focus) .block-editor-block-icon {
 137    color: inherit !important;
 138    background-color: transparent !important;
 139  }
 140  
 141  .block-editor-background-clip-control__option::before {
 142    content: "";
 143    flex-shrink: 0;
 144    align-self: center;
 145    width: 24px;
 146    height: 24px;
 147    margin-left: 8px;
 148    border-radius: 2px;
 149    box-sizing: border-box;
 150    background-color: rgba(30, 30, 30, 0.55);
 151    border: 3px dashed #ddd;
 152    background-clip: border-box;
 153  }
 154  
 155  .block-editor-background-clip-control__option.is-default::before {
 156    visibility: hidden;
 157  }
 158  
 159  .block-editor-background-clip-control__option.is-padding-box::before {
 160    background-clip: padding-box;
 161  }
 162  
 163  .block-editor-background-clip-control__option.is-content-box::before {
 164    padding: 3px;
 165    background-clip: content-box;
 166  }
 167  
 168  .block-editor-background-clip-control__option.is-text::before {
 169    border: none;
 170    mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 9px);
 171    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 5px, transparent 5px 9px);
 172  }
 173  
 174  .block-editor-global-styles-background-panel__inspector-media-replace-container {
 175    position: relative;
 176  }
 177  .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
 178    background-color: #f0f0f0;
 179  }
 180  .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
 181    flex-grow: 1;
 182    border: 0;
 183  }
 184  .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
 185    display: block;
 186  }
 187  .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
 188    height: 100%;
 189  }
 190  .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
 191    display: block;
 192  }
 193  .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown .block-editor-global-styles-background-panel__dropdown-toggle {
 194    height: 40px;
 195  }
 196  
 197  .block-editor-global-styles-background-panel__image-tools-panel-item {
 198    border: 1px solid #ddd;
 199    grid-column: 1/-1;
 200    position: relative;
 201  }
 202  .block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
 203    display: none;
 204  }
 205  .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
 206    display: block;
 207  }
 208  .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
 209    color: #1e1e1e;
 210    width: 100%;
 211    display: block;
 212  }
 213  .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
 214    color: var(--wp-admin-theme-color);
 215  }
 216  .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
 217    height: 100%;
 218    position: absolute;
 219    z-index: 1;
 220    width: 100%;
 221    padding: 10px 0 0 0;
 222  }
 223  .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg {
 224    margin: 0;
 225  }
 226  
 227  .block-editor-global-styles-background-panel__dropdown-toggle {
 228    cursor: var(--wpds-cursor-control, pointer);
 229    background: transparent;
 230    border: none;
 231    height: 100%;
 232    width: 100%;
 233    padding-right: 12px;
 234    padding-left: 32px;
 235  }
 236  
 237  .block-editor-global-styles-background-panel__reset {
 238    position: absolute;
 239    left: 0;
 240    top: 8px;
 241    margin: auto 8px auto;
 242    opacity: 0;
 243  }
 244  @media not (prefers-reduced-motion) {
 245    .block-editor-global-styles-background-panel__reset {
 246      transition: opacity 0.1s ease-in-out;
 247    }
 248  }
 249  .block-editor-global-styles-background-panel__reset.has-local-override-from-global-styles__reset {
 250    position: absolute;
 251    display: inline-flex;
 252    align-items: center;
 253    justify-content: center;
 254    top: 50%;
 255    transform: translateY(-50%);
 256    margin-block: 0;
 257    margin-inline: 0 8px;
 258    opacity: 1;
 259  }
 260  .block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
 261    border-radius: 2px;
 262  }
 263  .block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:focus-within, .block-editor-global-styles-background-panel__reset:hover {
 264    opacity: 1;
 265  }
 266  @media (hover: none) {
 267    .block-editor-global-styles-background-panel__reset {
 268      opacity: 1;
 269    }
 270  }
 271  
 272  .block-editor-global-styles-background-panel__inspector-media-replace-title {
 273    word-break: break-all;
 274    white-space: normal;
 275    text-align: start;
 276  }
 277  
 278  .block-editor-global-styles-background-panel__inspector-image-indicator {
 279    width: 20px;
 280    height: 20px;
 281    border-radius: 2px;
 282    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 283    background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 284    background-size: cover;
 285    outline: 1px solid transparent;
 286  }
 287  
 288  .block-editor-global-styles-background-panel__dropdown-content-wrapper {
 289    min-width: 260px;
 290    overflow-x: hidden;
 291  }
 292  .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
 293    background-color: #f0f0f0;
 294    width: 100%;
 295    border-radius: 2px;
 296    border: 1px solid #ddd;
 297  }
 298  .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image {
 299    max-height: 180px;
 300  }
 301  .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker::after {
 302    content: none;
 303  }
 304  
 305  .modal-open .block-editor-global-styles-background-panel__popover {
 306    z-index: 159890;
 307  }
 308  
 309  .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
 310    width: auto;
 311  }
 312  .block-editor-global-styles-background-panel__media-replace-popover .components-menu-item__button.components-button {
 313    padding: 0 8px;
 314  }
 315  .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
 316    margin-right: 16px;
 317  }
 318  
 319  .block-editor-block-alignment-control__menu-group .components-menu-item__info {
 320    margin-top: 0;
 321  }
 322  
 323  iframe[name=editor-canvas] {
 324    box-sizing: border-box;
 325    width: 100%;
 326    height: 100%;
 327    display: block;
 328  }
 329  @media not (prefers-reduced-motion) {
 330    iframe[name=editor-canvas] {
 331      transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 332    }
 333  }
 334  iframe[name=editor-canvas] {
 335    background-color: var(--wp-editor-canvas-background);
 336  }
 337  
 338  .block-editor-block-icon {
 339    display: flex;
 340    align-items: center;
 341    justify-content: center;
 342    width: 24px;
 343    height: 24px;
 344  }
 345  .block-editor-block-icon.has-colors svg {
 346    fill: currentColor;
 347  }
 348  .block-editor-block-icon svg {
 349    min-width: 20px;
 350    min-height: 20px;
 351    max-width: 24px;
 352    max-height: 24px;
 353  }
 354  
 355  .block-editor-block-inspector p:not(.components-base-control__help) {
 356    margin-top: 0;
 357  }
 358  .block-editor-block-inspector h2,
 359  .block-editor-block-inspector h3 {
 360    font-size: 13px;
 361    color: #1e1e1e;
 362    margin-bottom: 1.5em;
 363  }
 364  .block-editor-block-inspector .components-base-control:where(:not(:last-child)),
 365  .block-editor-block-inspector .components-radio-control:where(:not(:last-child)),
 366  .block-editor-block-inspector .block-editor-html-element-control:where(:not(:last-child)),
 367  .block-editor-block-inspector .block-editor-image-size-control:where(:not(:last-child)) {
 368    margin-bottom: 16px;
 369  }
 370  .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
 371  .block-editor-block-inspector .components-query-controls .components-base-control,
 372  .block-editor-block-inspector .components-range-control .components-base-control,
 373  .block-editor-block-inspector .block-editor-html-element-control .components-base-control,
 374  .block-editor-block-inspector .block-editor-image-size-control .components-base-control {
 375    margin-bottom: 0;
 376  }
 377  .block-editor-block-inspector .components-panel__body {
 378    border: none;
 379    border-top: 1px solid #e0e0e0;
 380    margin-top: -1px;
 381  }
 382  
 383  .block-editor-block-inspector__no-blocks,
 384  .block-editor-block-inspector__no-block-tools {
 385    display: block;
 386    font-size: 13px;
 387    background: #fff;
 388    padding: 32px 16px;
 389    text-align: center;
 390  }
 391  
 392  .block-editor-block-inspector__state-badges {
 393    display: flex;
 394    align-items: center;
 395    flex-wrap: wrap;
 396    gap: 8px;
 397    padding: 8px 16px;
 398    margin-top: -16px;
 399  }
 400  
 401  .block-editor-block-inspector__state-badges-text {
 402    white-space: nowrap;
 403  }
 404  
 405  .block-editor-block-inspector__no-block-tools {
 406    border-top: 1px solid #ddd;
 407  }
 408  
 409  .block-editor-block-inspector-edit-contents {
 410    margin: 0 16px 16px 16px;
 411  }
 412  .block-editor-block-inspector-edit-contents .block-editor-block-inspector-edit-contents__button {
 413    justify-content: center;
 414  }
 415  
 416  /**
 417   * Insertion Point.
 418   */
 419  .block-editor-block-list__insertion-point {
 420    position: absolute;
 421    top: 0;
 422    bottom: 0;
 423    right: 0;
 424    left: 0;
 425  }
 426  
 427  .block-editor-block-list__insertion-point-indicator {
 428    position: absolute;
 429    background: var(--wp-admin-theme-color);
 430    border-radius: 2px;
 431    transform-origin: center;
 432    opacity: 0;
 433    will-change: transform, opacity;
 434  }
 435  .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
 436    top: calc(50% - 2px);
 437    height: 4px;
 438    width: 100%;
 439  }
 440  .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
 441    top: 0;
 442    bottom: 0;
 443    right: calc(50% - 2px);
 444    width: 4px;
 445  }
 446  
 447  .block-editor-block-list__insertion-point-inserter {
 448    display: none;
 449    position: absolute;
 450    will-change: transform;
 451  }
 452  @media (min-width: 480px) {
 453    .block-editor-block-list__insertion-point-inserter {
 454      display: flex;
 455    }
 456  }
 457  .block-editor-block-list__insertion-point-inserter {
 458    justify-content: center;
 459    top: calc(50% - 12px);
 460    right: calc(50% - 12px);
 461  }
 462  
 463  .block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
 464    pointer-events: none;
 465  }
 466  .block-editor-block-list__block-side-inserter-popover .components-popover__content > div > * {
 467    pointer-events: all;
 468  }
 469  
 470  .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
 471    position: absolute;
 472    top: 0;
 473    left: 0;
 474    line-height: 0;
 475  }
 476  .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled {
 477    display: none;
 478  }
 479  
 480  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 481  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
 482    background: #1e1e1e;
 483    color: #fff;
 484    padding: 0;
 485    min-width: 24px;
 486    height: 24px;
 487  }
 488  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 489  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
 490    color: #fff;
 491    background: var(--wp-admin-theme-color);
 492  }
 493  @media not (prefers-reduced-motion) {
 494    .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon svg,
 495    .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon svg {
 496      transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 497    }
 498  }
 499  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
 500  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
 501    transform: rotate(-45deg);
 502  }
 503  
 504  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
 505    background: var(--wp-admin-theme-color);
 506  }
 507  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
 508    background: #1e1e1e;
 509  }
 510  
 511  @keyframes hide-during-dragging {
 512    to {
 513      position: fixed;
 514      transform: translate(-9999px, 9999px);
 515    }
 516  }
 517  .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
 518    pointer-events: all;
 519    margin-top: 8px;
 520    margin-bottom: 8px;
 521    border: 1px solid #1e1e1e;
 522    border-radius: 2px;
 523    overflow: visible;
 524    position: static;
 525    width: auto;
 526  }
 527  .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
 528    margin-right: calc(48px + 8px);
 529  }
 530  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
 531    margin-right: 0;
 532  }
 533  .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) {
 534    margin-right: calc(48px + 24px + 12px + 8px + 2 * 1px);
 535  }
 536  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) {
 537    margin-right: 0;
 538  }
 539  .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar {
 540    overflow: visible;
 541  }
 542  .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group,
 543  .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar {
 544    border-left-color: #1e1e1e;
 545  }
 546  .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
 547    visibility: hidden;
 548  }
 549  .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover {
 550    opacity: 0;
 551  }
 552  @media not (prefers-reduced-motion) {
 553    .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover {
 554      animation: hide-during-dragging 1ms linear forwards;
 555    }
 556  }
 557  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
 558    position: absolute;
 559    right: calc(-48px - 8px - 1px);
 560  }
 561  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) {
 562    right: calc(-48px - 24px - 12px - 8px - 3 * 1px);
 563    border: 1px solid #1e1e1e;
 564    border-radius: 2px;
 565    background-color: #fff;
 566  }
 567  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) > .components-toolbar-group:last-child {
 568    border-left: none;
 569  }
 570  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) .block-editor-block-parent-selector__button {
 571    border: none;
 572    background: none;
 573  }
 574  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon {
 575    color: #fff;
 576    background: transparent;
 577  }
 578  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after {
 579    content: "";
 580    position: absolute;
 581    z-index: -1;
 582    top: 50%;
 583    right: 50%;
 584    transform: translate(50%, -50%);
 585    width: 24px;
 586    height: 24px;
 587    border-radius: 2px;
 588    background: #1e1e1e;
 589  }
 590  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover {
 591    color: #fff;
 592  }
 593  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after {
 594    background: var(--wp-admin-theme-color);
 595  }
 596  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon {
 597    width: auto;
 598    padding: 0 12px;
 599    color: inherit;
 600  }
 601  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon svg {
 602    display: none;
 603  }
 604  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after {
 605    content: attr(aria-label);
 606    position: static;
 607    transform: none;
 608    width: auto;
 609    height: auto;
 610    border-radius: 0;
 611    background: none;
 612    white-space: nowrap;
 613  }
 614  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover {
 615    color: var(--wp-admin-theme-color);
 616  }
 617  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after {
 618    background: none;
 619  }
 620  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
 621    content: "";
 622  }
 623  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
 624    display: none;
 625  }
 626  .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 627    border: 1px solid #1e1e1e;
 628    padding-left: 6px;
 629    padding-right: 6px;
 630    background-color: #fff;
 631  }
 632  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
 633    padding-left: 12px;
 634    padding-right: 12px;
 635  }
 636  .show-icon-labels .components-popover.block-editor-block-list__block-popover .components-popover__content {
 637    max-width: fit-content;
 638  }
 639  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
 640    position: relative;
 641    right: auto;
 642    margin-right: -1px;
 643  }
 644  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
 645  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
 646    border-right: 1px solid #1e1e1e;
 647  }
 648  
 649  .is-dragging-components-draggable .components-tooltip {
 650    display: none;
 651  }
 652  
 653  .components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
 654    pointer-events: all;
 655    position: absolute;
 656    transform: translateX(50%) translateY(-50%);
 657    top: 50%;
 658    right: 50%;
 659  }
 660  
 661  .block-editor-block-tools--is-dragging > .popover-slot {
 662    display: none;
 663  }
 664  
 665  .block-editor-block-lock-modal {
 666    z-index: 1000001;
 667  }
 668  
 669  .block-editor-block-lock-modal__options {
 670    border: 0;
 671    padding: 0;
 672    margin: 0;
 673  }
 674  
 675  .block-editor-block-lock-modal__options legend {
 676    margin-bottom: 16px;
 677    padding: 0;
 678  }
 679  
 680  .block-editor-block-lock-modal__checklist {
 681    list-style: none;
 682    padding: 0;
 683    margin: 0;
 684  }
 685  
 686  .block-editor-block-lock-modal__options-all {
 687    padding: 12px 0;
 688  }
 689  .block-editor-block-lock-modal__options-all .components-checkbox-control__label {
 690    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 691  }
 692  
 693  .block-editor-block-lock-modal__checklist-item {
 694    display: flex;
 695    justify-content: space-between;
 696    align-items: center;
 697    gap: 12px;
 698    margin-bottom: 0;
 699    padding: 12px 32px 12px 0;
 700  }
 701  .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
 702    flex-shrink: 0;
 703    margin-left: 12px;
 704    color: #1e1e1e;
 705  }
 706  .block-editor-block-lock-modal__checklist-item:hover {
 707    background-color: #f0f0f0;
 708    border-radius: 2px;
 709  }
 710  
 711  .block-editor-block-lock-modal__template-lock {
 712    border-top: 1px solid #ddd;
 713    margin-top: 16px;
 714    padding-top: 16px;
 715  }
 716  
 717  .block-editor-block-lock-modal__actions {
 718    margin-top: 24px;
 719  }
 720  
 721  .block-editor-block-lock-toolbar .components-button.has-icon {
 722    min-width: 36px !important;
 723  }
 724  
 725  .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
 726    margin-right: -6px !important;
 727  }
 728  
 729  .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
 730    border-right: 1px solid #1e1e1e;
 731    margin-right: 6px !important;
 732    margin-left: -6px;
 733  }
 734  
 735  .block-editor-block-allowed-blocks-control:not(:only-child) {
 736    margin-top: 16px;
 737  }
 738  
 739  .block-editor-block-allowed-blocks-control__button {
 740    width: 100%;
 741    justify-content: center;
 742  }
 743  
 744  .block-editor-block-allowed-blocks-modal {
 745    z-index: 1000001;
 746  }
 747  
 748  .block-editor-block-allowed-blocks-modal__actions {
 749    background-color: #fff;
 750    border-top: 1px solid #ddd;
 751    bottom: -24px;
 752    right: 0;
 753    margin: 0 -24px -24px;
 754    padding: 16px 24px;
 755    position: sticky;
 756    z-index: 1;
 757  }
 758  
 759  .block-editor-block-card {
 760    color: #1e1e1e;
 761    padding: 16px;
 762  }
 763  .block-editor-block-card.is-parent {
 764    padding-bottom: 4px;
 765  }
 766  .block-editor-block-card.is-child {
 767    padding-top: 4px;
 768  }
 769  
 770  .block-editor-block-card__parent-select-button {
 771    padding: 0;
 772    align-items: start;
 773    text-align: start;
 774    height: auto !important;
 775  }
 776  
 777  .block-editor-block-card__title {
 778    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 779    display: flex;
 780    align-items: center;
 781    flex-wrap: wrap;
 782    gap: 4px 8px;
 783    overflow-wrap: anywhere;
 784  }
 785  .block-editor-block-card__title.block-editor-block-card__title {
 786    font-size: 13px;
 787    line-height: 1.4;
 788    margin: 0;
 789  }
 790  
 791  .block-editor-block-card__name {
 792    padding: 3px 0;
 793  }
 794  
 795  .block-editor-block-card .block-editor-block-icon,
 796  .block-editor-block-card__child-indicator-icon {
 797    flex: 0 0 24px;
 798    margin-right: 0;
 799    margin-left: 12px;
 800    width: 24px;
 801    height: 24px;
 802  }
 803  
 804  .block-editor-block-card.is-synced .block-editor-block-icon {
 805    color: var(--wp-block-synced-color);
 806  }
 807  
 808  /**
 809   * Invalid block comparison
 810   */
 811  .block-editor-block-compare {
 812    height: auto;
 813  }
 814  
 815  .block-editor-block-compare__wrapper {
 816    display: flex;
 817    padding-bottom: 16px;
 818  }
 819  .block-editor-block-compare__wrapper > div {
 820    display: flex;
 821    justify-content: space-between;
 822    flex-direction: column;
 823    width: 50%;
 824    padding: 0 0 0 16px;
 825    min-width: 200px;
 826    max-width: 600px;
 827  }
 828  .block-editor-block-compare__wrapper > div button {
 829    float: left;
 830  }
 831  .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
 832    border-right: 1px solid #ddd;
 833    padding-right: 15px;
 834    padding-left: 0;
 835  }
 836  .block-editor-block-compare__wrapper .block-editor-block-compare__html {
 837    font-family: Menlo, Consolas, monaco, monospace;
 838    font-size: 12px;
 839    color: #1e1e1e;
 840    border-bottom: 1px solid #ddd;
 841    padding-bottom: 15px;
 842    line-height: 1.7;
 843    white-space: pre-wrap;
 844  }
 845  .block-editor-block-compare__wrapper .block-editor-block-compare__html span {
 846    background-color: #e6ffed;
 847    padding-top: 3px;
 848    padding-bottom: 3px;
 849  }
 850  .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added {
 851    background-color: #acf2bd;
 852  }
 853  .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed {
 854    background-color: #cc1818;
 855  }
 856  .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__newline {
 857    background: none;
 858    padding: 0;
 859  }
 860  .block-editor-block-compare__wrapper .block-editor-block-compare__preview {
 861    padding: 0;
 862    padding-top: 16px;
 863  }
 864  .block-editor-block-compare__wrapper .block-editor-block-compare__preview p {
 865    font-size: 12px;
 866    margin-top: 0;
 867  }
 868  .block-editor-block-compare__wrapper .block-editor-block-compare__action {
 869    margin-top: 16px;
 870  }
 871  .block-editor-block-compare__wrapper .block-editor-block-compare__heading {
 872    font-size: 1em;
 873    font-weight: 400;
 874    margin: 0.67em 0;
 875  }
 876  
 877  .block-editor-block-draggable-chip-wrapper {
 878    position: absolute;
 879    top: -24px;
 880    right: 0;
 881  }
 882  
 883  .block-editor-block-draggable-chip {
 884    background-color: #1e1e1e;
 885    border-radius: 2px;
 886    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);
 887    color: #fff;
 888    cursor: grabbing;
 889    display: inline-flex;
 890    height: 48px;
 891    padding: 0 13px;
 892    position: relative;
 893    -webkit-user-select: none;
 894            user-select: none;
 895    width: max-content;
 896  }
 897  .block-editor-block-draggable-chip svg {
 898    fill: currentColor;
 899  }
 900  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content {
 901    margin: auto;
 902    justify-content: flex-start;
 903  }
 904  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item {
 905    margin-left: 6px;
 906  }
 907  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child {
 908    margin-left: 0;
 909  }
 910  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content .block-editor-block-icon svg {
 911    min-width: 18px;
 912    min-height: 18px;
 913  }
 914  .block-editor-block-draggable-chip .components-flex__item {
 915    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 916    font-size: 13px;
 917  }
 918  
 919  .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
 920    opacity: 0;
 921    position: absolute;
 922    top: 0;
 923    left: 0;
 924    right: 0;
 925    bottom: 0;
 926    display: flex;
 927    justify-content: center;
 928    align-items: center;
 929    background-color: transparent;
 930  }
 931  @media not (prefers-reduced-motion) {
 932    .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
 933      transition: all 0.1s linear 0.1s;
 934    }
 935  }
 936  .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled .block-editor-block-draggable-chip__disabled-icon {
 937    width: 20px;
 938    height: 20px;
 939    box-shadow: inset 0 0 0 1.5px #fff;
 940    border-radius: 50%;
 941    display: inline-block;
 942    padding: 0;
 943    background: transparent linear-gradient(45deg, transparent 47.5%, #fff 47.5%, #fff 52.5%, transparent 52.5%);
 944  }
 945  
 946  .block-draggable-invalid-drag-token .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
 947    background-color: #757575;
 948    opacity: 1;
 949    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);
 950  }
 951  
 952  .block-editor-block-manager__no-results {
 953    font-style: italic;
 954    padding: 24px 0;
 955    text-align: center;
 956  }
 957  
 958  .block-editor-block-manager__category {
 959    isolation: isolate;
 960    margin: 0 0 24px 0;
 961  }
 962  
 963  .block-editor-block-manager__category-title {
 964    position: sticky;
 965    top: -4px;
 966    padding: 16px 0;
 967    background-color: #fff;
 968    z-index: 1;
 969  }
 970  .block-editor-block-manager__category-title .components-checkbox-control__label {
 971    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 972  }
 973  
 974  .block-editor-block-manager__checklist {
 975    margin-top: 0;
 976  }
 977  
 978  .block-editor-block-manager__category-title,
 979  .block-editor-block-manager__checklist-item {
 980    border-bottom: 1px solid #ddd;
 981  }
 982  
 983  .block-editor-block-manager__checklist-item {
 984    display: flex;
 985    justify-content: space-between;
 986    align-items: center;
 987    margin-bottom: 0;
 988    padding: 8px 16px 8px 0;
 989  }
 990  .components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container {
 991    margin: 0 8px;
 992  }
 993  .block-editor-block-manager__checklist-item .block-editor-block-icon {
 994    margin-left: 10px;
 995    fill: #1e1e1e;
 996    color: #1e1e1e;
 997  }
 998  
 999  .block-editor-block-manager__results {
1000    border-top: 1px solid #ddd;
1001  }
1002  
1003  .block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
1004    border-top-width: 0;
1005  }
1006  
1007  .block-editor-block-mover__move-button-container {
1008    display: flex;
1009    padding: 0;
1010    border: none;
1011    justify-content: center;
1012  }
1013  @media (min-width: 600px) {
1014    .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
1015      flex-direction: column;
1016    }
1017    .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > .block-editor-block-mover-button {
1018      height: 20px;
1019      width: 100%;
1020      min-width: 0 !important;
1021    }
1022    .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > .block-editor-block-mover-button::before {
1023      height: calc(100% - 4px);
1024    }
1025    .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
1026      top: 3px;
1027      flex-shrink: 0;
1028    }
1029    .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
1030      bottom: 3px;
1031      flex-shrink: 0;
1032    }
1033    .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container {
1034      width: 48px;
1035    }
1036    .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > .block-editor-block-mover-button {
1037      width: 24px;
1038      min-width: 0 !important;
1039      overflow: hidden;
1040    }
1041    .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button {
1042      padding-right: 0;
1043      padding-left: 0;
1044    }
1045    .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
1046      right: 5px;
1047    }
1048    .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
1049      left: 5px;
1050    }
1051  }
1052  
1053  .block-editor-block-mover__drag-handle {
1054    cursor: grab;
1055  }
1056  @media (min-width: 600px) {
1057    .block-editor-block-mover__drag-handle {
1058      width: 24px;
1059      min-width: 0 !important;
1060      overflow: hidden;
1061    }
1062    .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon.has-icon {
1063      padding-right: 0;
1064      padding-left: 0;
1065    }
1066  }
1067  
1068  .components-button.block-editor-block-mover-button {
1069    overflow: hidden;
1070  }
1071  .components-button.block-editor-block-mover-button::before {
1072    content: "";
1073    position: absolute;
1074    display: block;
1075    border-radius: 2px;
1076    height: 32px;
1077    right: 8px;
1078    left: 8px;
1079    z-index: -1;
1080  }
1081  @media not (prefers-reduced-motion) {
1082    .components-button.block-editor-block-mover-button::before {
1083      animation: components-button__appear-animation 0.1s ease;
1084      animation-fill-mode: forwards;
1085    }
1086  }
1087  
1088  .block-editor-block-navigation__container {
1089    min-width: 280px;
1090  }
1091  
1092  .block-editor-block-navigation__label {
1093    margin: 0 0 12px;
1094    color: #757575;
1095    text-transform: uppercase;
1096    font-size: 11px;
1097    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1098  }
1099  
1100  .block-editor-block-patterns-list__list-item {
1101    cursor: var(--wpds-cursor-control, pointer);
1102    margin-bottom: 16px;
1103    position: relative;
1104  }
1105  .block-editor-block-patterns-list__list-item.is-placeholder {
1106    min-height: 100px;
1107  }
1108  .block-editor-block-patterns-list__list-item[draggable=true] {
1109    cursor: grab;
1110  }
1111  
1112  .block-editor-block-patterns-list__item {
1113    height: 100%;
1114    scroll-margin-top: 24px;
1115    scroll-margin-bottom: 56px;
1116    outline: 0;
1117  }
1118  .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
1119    flex-grow: 1;
1120    text-align: right;
1121  }
1122  .block-editor-block-patterns-list__item .block-editor-block-preview__container {
1123    display: flex;
1124    align-items: center;
1125    overflow: hidden;
1126    border-radius: 4px;
1127  }
1128  .block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
1129    outline: 1px solid rgba(0, 0, 0, 0.1);
1130    outline-offset: -1px;
1131    border-radius: 4px;
1132  }
1133  @media not (prefers-reduced-motion) {
1134    .block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
1135      transition: outline 0.1s linear;
1136    }
1137  }
1138  .block-editor-block-patterns-list__item.is-selected .block-editor-block-preview__container::after {
1139    outline-color: #1e1e1e;
1140    outline-width: var(--wp-admin-border-width-focus);
1141    outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
1142  }
1143  .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container::after {
1144    outline-color: rgba(0, 0, 0, 0.3);
1145  }
1146  .block-editor-block-patterns-list__item[data-focus-visible] .block-editor-block-preview__container::after {
1147    outline-color: var(--wp-admin-theme-color);
1148    outline-width: var(--wp-admin-border-width-focus);
1149    outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
1150  }
1151  .block-editor-block-patterns-list__item .block-editor-patterns__pattern-details:not(:empty) {
1152    align-items: center;
1153    margin-top: 8px;
1154    padding-bottom: 4px;
1155  }
1156  .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper {
1157    min-width: 24px;
1158    height: 24px;
1159  }
1160  .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1161    color: var(--wp-block-synced-color);
1162  }
1163  
1164  .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1165    border-top: 1px solid #2f2f2f;
1166    padding: 4px;
1167    justify-content: center;
1168  }
1169  
1170  .show-icon-labels .block-editor-patterns__grid-pagination-button {
1171    width: auto;
1172  }
1173  .show-icon-labels .block-editor-patterns__grid-pagination-button span {
1174    display: none;
1175  }
1176  .show-icon-labels .block-editor-patterns__grid-pagination-button::before {
1177    content: attr(aria-label);
1178  }
1179  
1180  .components-popover.block-editor-block-popover {
1181    z-index: 31;
1182    position: absolute;
1183    margin: 0 !important;
1184    pointer-events: none;
1185  }
1186  .components-popover.block-editor-block-popover .components-popover__content {
1187    margin: 0 !important;
1188    min-width: auto;
1189    width: max-content;
1190    overflow-y: visible;
1191  }
1192  .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
1193    pointer-events: all;
1194  }
1195  
1196  .components-popover.block-editor-block-popover__inbetween {
1197    pointer-events: none;
1198  }
1199  .components-popover.block-editor-block-popover__inbetween * {
1200    pointer-events: none;
1201  }
1202  .components-popover.block-editor-block-popover__inbetween .is-with-inserter {
1203    pointer-events: all;
1204  }
1205  .components-popover.block-editor-block-popover__inbetween .is-with-inserter * {
1206    pointer-events: all;
1207  }
1208  
1209  .components-popover.block-editor-block-popover__drop-zone * {
1210    pointer-events: none;
1211  }
1212  .components-popover.block-editor-block-popover__drop-zone .block-editor-block-popover__drop-zone-foreground {
1213    position: absolute;
1214    inset: 0;
1215    background-color: var(--wp-admin-theme-color);
1216    border-radius: 2px;
1217  }
1218  
1219  .block-editor-block-preview__container {
1220    position: relative;
1221    width: 100%;
1222    overflow: hidden;
1223  }
1224  .block-editor-block-preview__container .block-editor-block-preview__content {
1225    width: 100%;
1226    top: 0;
1227    right: 0;
1228    transform-origin: top right;
1229    text-align: initial;
1230    margin: 0;
1231    overflow: visible;
1232    min-height: auto;
1233  }
1234  .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point,
1235  .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
1236    display: none;
1237  }
1238  
1239  .block-editor-block-preview__container::after {
1240    content: "";
1241    position: absolute;
1242    top: 0;
1243    right: 0;
1244    left: 0;
1245    bottom: 0;
1246    z-index: 1;
1247  }
1248  
1249  .block-editor-block-quick-navigation__item {
1250    font-weight: var(--wpds-typography-font-weight-default, 400);
1251  }
1252  
1253  .block-editor-block-rename-modal {
1254    z-index: 1000001;
1255  }
1256  
1257  .block-editor-block-styles__preview-panel {
1258    display: none;
1259    z-index: 90;
1260  }
1261  @media (min-width: 782px) {
1262    .block-editor-block-styles__preview-panel {
1263      display: block;
1264    }
1265  }
1266  .block-editor-block-styles__preview-panel .block-editor-block-icon {
1267    display: none;
1268  }
1269  
1270  .block-editor-block-styles {
1271    grid-column: 1/-1;
1272  }
1273  
1274  .block-editor-block-styles__variants {
1275    display: grid;
1276    gap: 8px;
1277  }
1278  .block-editor-block-styles__variants .block-editor-block-styles__row {
1279    display: grid;
1280    grid-template-columns: repeat(2, minmax(0, 1fr));
1281    gap: 8px;
1282  }
1283  .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1284    text-align: center;
1285    padding-inline: 4px;
1286    margin-inline: -4px;
1287  }
1288  
1289  .components-popover.block-editor-block-switcher__popover .components-popover__content {
1290    min-width: 300px;
1291  }
1292  
1293  .block-editor-block-switcher__transforms__menugroup .components-menu-item__button:focus:not([aria-disabled=true]) .block-editor-block-icon.has-colors {
1294    color: inherit !important;
1295    background-color: transparent !important;
1296  }
1297  
1298  .block-editor-block-switcher__popover-preview-container {
1299    right: 0;
1300    position: absolute;
1301    top: -1px;
1302    width: 100%;
1303    bottom: 0;
1304    pointer-events: none;
1305  }
1306  
1307  .block-editor-block-switcher__popover-preview {
1308    overflow: hidden;
1309  }
1310  .block-editor-block-switcher__popover-preview .components-popover__content {
1311    width: 300px;
1312    border: 1px solid #1e1e1e;
1313    background: #fff;
1314    border-radius: 4px;
1315    outline: none;
1316    box-shadow: none;
1317    overflow: auto;
1318    scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
1319  }
1320  .block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview {
1321    max-height: calc(500px - 32px);
1322    margin: 16px 0;
1323    padding: 0 16px;
1324    overflow: hidden;
1325  }
1326  .block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview.is-pattern-list-preview {
1327    overflow: unset;
1328  }
1329  
1330  .block-editor-block-switcher__preview-patterns-container {
1331    padding-bottom: 16px;
1332  }
1333  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item {
1334    margin-top: 16px;
1335  }
1336  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
1337    cursor: var(--wpds-cursor-control, pointer);
1338  }
1339  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
1340    height: 100%;
1341    border-radius: 2px;
1342    position: relative;
1343    border: 1px solid transparent;
1344  }
1345  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover {
1346    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1347    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1348    outline-color: #1e1e1e;
1349  }
1350  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:focus {
1351    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1352    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1353  }
1354  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item .block-editor-block-switcher__preview-patterns-container-list__item-title {
1355    padding: 4px;
1356    font-size: 12px;
1357    text-align: center;
1358    cursor: var(--wpds-cursor-control, pointer);
1359  }
1360  
1361  .block-editor-block-switcher__no-transforms {
1362    color: #757575;
1363    padding: 6px 8px;
1364    margin: 0;
1365  }
1366  
1367  .block-editor-block-switcher__binding-indicator {
1368    display: block;
1369    padding: 8px;
1370  }
1371  
1372  .block-editor-block-types-list > [role=presentation] {
1373    display: flex;
1374    flex-wrap: wrap;
1375  }
1376  
1377  .block-editor-block-pattern-setup {
1378    display: flex;
1379    flex-direction: column;
1380    justify-content: center;
1381    align-items: flex-start;
1382    width: 100%;
1383    border-radius: 2px;
1384  }
1385  .block-editor-block-pattern-setup.view-mode-grid {
1386    padding-top: 4px;
1387  }
1388  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
1389    justify-content: center;
1390  }
1391  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1392    column-gap: 24px;
1393    display: block;
1394    width: 100%;
1395    padding: 32px;
1396    padding-bottom: 0;
1397    padding-top: 0;
1398    column-count: 2;
1399  }
1400  @media (min-width: 1440px) {
1401    .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1402      column-count: 3;
1403    }
1404  }
1405  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
1406  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
1407    cursor: var(--wpds-cursor-control, pointer);
1408  }
1409  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
1410    scroll-margin: 5px 0;
1411  }
1412  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
1413    box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
1414  }
1415  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-preview__container {
1416    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);
1417    outline: 2px solid transparent;
1418    outline-offset: 2px;
1419  }
1420  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
1421    color: var(--wp-admin-theme-color);
1422  }
1423  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
1424    break-inside: avoid-column;
1425    margin-bottom: 24px;
1426  }
1427  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
1428    padding-top: 8px;
1429    font-size: 12px;
1430    text-align: center;
1431    cursor: var(--wpds-cursor-control, pointer);
1432  }
1433  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
1434    min-height: 100px;
1435    border-radius: 4px;
1436    border: 1px solid #ddd;
1437  }
1438  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content {
1439    width: 100%;
1440  }
1441  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar {
1442    height: 64px;
1443    box-sizing: border-box;
1444    padding: 16px;
1445    width: 100%;
1446    text-align: right;
1447    margin: 0;
1448    color: #1e1e1e;
1449    position: absolute;
1450    bottom: 0;
1451    background-color: #fff;
1452    display: flex;
1453    flex-direction: row;
1454    align-items: center;
1455    justify-content: space-between;
1456    border-top: 1px solid #ddd;
1457    align-self: stretch;
1458  }
1459  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
1460    display: flex;
1461  }
1462  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__navigation,
1463  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
1464    width: calc(50% - 36px);
1465    display: flex;
1466  }
1467  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
1468    justify-content: flex-end;
1469  }
1470  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container {
1471    display: flex;
1472    flex-direction: column;
1473    width: 100%;
1474    height: 100%;
1475    box-sizing: border-box;
1476  }
1477  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
1478    overflow: hidden;
1479    position: relative;
1480    padding: 0;
1481    margin: 0;
1482    height: 100%;
1483    list-style: none;
1484    transform-style: preserve-3d;
1485  }
1486  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container * {
1487    box-sizing: border-box;
1488  }
1489  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1490    position: absolute;
1491    top: 0;
1492    width: 100%;
1493    height: 100%;
1494    background-color: #fff;
1495    margin: auto;
1496    padding: 0;
1497  }
1498  @media not (prefers-reduced-motion) {
1499    .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1500      transition: transform 0.5s, z-index 0.5s;
1501    }
1502  }
1503  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1504    z-index: 100;
1505  }
1506  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
1507    opacity: 1;
1508    position: relative;
1509    z-index: 102;
1510  }
1511  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.previous-slide {
1512    transform: translateX(100%);
1513    z-index: 101;
1514  }
1515  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.next-slide {
1516    transform: translateX(-100%);
1517    z-index: 101;
1518  }
1519  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .block-list-appender {
1520    display: none;
1521  }
1522  
1523  .block-editor-block-pattern-setup__carousel,
1524  .block-editor-block-pattern-setup__grid {
1525    width: 100%;
1526  }
1527  
1528  .block-editor-block-variation-transforms {
1529    box-sizing: border-box;
1530    padding: 0 16px 16px;
1531  }
1532  .block-editor-block-variation-transforms:where(fieldset) {
1533    border: 0;
1534    margin: 0;
1535    min-inline-size: 0;
1536  }
1537  
1538  .block-editor-block-variation-transforms__button {
1539    width: 100%;
1540    justify-content: center;
1541  }
1542  
1543  .components-border-radius-control__header {
1544    height: 16px;
1545    margin-bottom: 12px;
1546  }
1547  
1548  .components-border-radius-control {
1549    border: 0;
1550    padding: 0;
1551    margin: 0;
1552    margin-bottom: 12px;
1553  }
1554  .components-border-radius-control legend {
1555    margin-bottom: 0;
1556  }
1557  .components-border-radius-control .components-border-radius-control__linked-button {
1558    display: flex;
1559    justify-content: center;
1560  }
1561  .components-border-radius-control .components-border-radius-control__linked-button svg {
1562    margin-left: 0;
1563  }
1564  
1565  .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
1566    margin-bottom: 12px;
1567  }
1568  
1569  .block-editor-color-gradient-control__fieldset {
1570    border: 0;
1571    padding: 0;
1572    margin: 0;
1573    min-width: 0;
1574  }
1575  
1576  @media screen and (min-width: 782px) {
1577    .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
1578      display: grid;
1579      grid-template-columns: repeat(6, 28px);
1580    }
1581  }
1582  .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1583    margin-bottom: inherit;
1584  }
1585  .block-editor-panel-color-gradient-settings {
1586    /* Increased specificity required to remove the slot wrapper's row gap */
1587  }
1588  .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__inner-wrapper {
1589    grid-column: 1/-1;
1590    row-gap: 0;
1591  }
1592  .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__inner-wrapper > * {
1593    grid-column: 1/-1;
1594  }
1595  
1596  .block-editor-panel-color-gradient-settings__dropdown-content {
1597    min-height: 160px;
1598  }
1599  .block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
1600    width: 260px;
1601    padding: 16px;
1602  }
1603  
1604  .block-editor-panel-color-gradient-settings__color-indicator {
1605    background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1606  }
1607  
1608  .block-editor-panel-color-gradient-settings__contrast-notice {
1609    margin-top: 16px;
1610  }
1611  
1612  /**
1613  * The following styles replicate the separated border of the
1614  * `ItemGroup` component but allows for hidden items. This is because
1615  * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1616  * must at least render a placeholder which would otherwise interfere
1617  * with the `:last-child` styles.
1618  *
1619  * Applied via the shared `block-editor-color-gradient-item` class on
1620  * color/gradient dropdown items across the Color, Background, and
1621  * Typography panels.
1622  */
1623  .block-editor-color-gradient-item {
1624    padding: 0;
1625    max-width: 100%;
1626    position: relative;
1627    border-right: 1px solid #ddd;
1628    border-left: 1px solid #ddd;
1629    border-bottom: 1px solid #ddd;
1630  }
1631  .block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
1632    border-top-right-radius: 2px;
1633    border-top-left-radius: 2px;
1634    border-top: 1px solid #ddd;
1635  }
1636  .block-editor-color-gradient-item:nth-last-child(1 of .block-editor-color-gradient-item) {
1637    border-bottom-right-radius: 2px;
1638    border-bottom-left-radius: 2px;
1639  }
1640  .block-editor-color-gradient-item > div,
1641  .block-editor-color-gradient-item > div > button {
1642    border-radius: inherit;
1643  }
1644  
1645  .block-editor-tools-panel-color-gradient-settings__dropdown {
1646    display: block;
1647    padding: 0;
1648  }
1649  .block-editor-tools-panel-color-gradient-settings__dropdown > button {
1650    height: auto;
1651    padding-top: 10px;
1652    padding-bottom: 10px;
1653    text-align: right;
1654  }
1655  .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
1656    background: #f0f0f0;
1657    color: var(--wp-admin-theme-color);
1658  }
1659  .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1660    min-width: 0;
1661    white-space: nowrap;
1662    overflow: hidden;
1663    text-overflow: ellipsis;
1664    max-width: calc(100% - 44px);
1665  }
1666  .block-editor-tools-panel-color-gradient-settings__dropdown > button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
1667    max-width: calc(100% - 72px);
1668  }
1669  
1670  .block-editor-panel-color-gradient-settings__dropdown {
1671    width: 100%;
1672  }
1673  .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1674    flex-shrink: 0;
1675  }
1676  
1677  .block-editor-panel-color-gradient-settings__labeled-indicators {
1678    width: 100%;
1679    min-width: 0;
1680  }
1681  
1682  .block-editor-panel-color-gradient-settings__color-indicators {
1683    display: flex;
1684    flex-shrink: 0;
1685  }
1686  .block-editor-panel-color-gradient-settings__color-indicators > * + * {
1687    margin-inline-start: -8px;
1688  }
1689  
1690  .block-editor-panel-color-gradient-settings__reset {
1691    position: absolute;
1692    left: 0;
1693    top: 8px;
1694    margin: auto 8px auto;
1695    opacity: 0;
1696  }
1697  @media not (prefers-reduced-motion) {
1698    .block-editor-panel-color-gradient-settings__reset {
1699      transition: opacity 0.1s ease-in-out;
1700    }
1701  }
1702  .block-editor-panel-color-gradient-settings__reset.block-editor-panel-color-gradient-settings__reset {
1703    border-radius: 2px;
1704  }
1705  .block-editor-panel-color-gradient-settings__dropdown:hover + .block-editor-panel-color-gradient-settings__reset, .block-editor-panel-color-gradient-settings__reset:focus, .block-editor-panel-color-gradient-settings__reset:hover {
1706    opacity: 1;
1707  }
1708  @media (hover: none) {
1709    .block-editor-panel-color-gradient-settings__reset {
1710      opacity: 1;
1711    }
1712  }
1713  .block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
1714    left: 28px;
1715  }
1716  
1717  .block-editor-panel-color-gradient-settings__contrast-warning {
1718    position: absolute;
1719    left: 0;
1720    top: 8px;
1721    margin: auto 8px auto;
1722  }
1723  .block-editor-panel-color-gradient-settings__contrast-warning.block-editor-panel-color-gradient-settings__contrast-warning {
1724    border-radius: 2px;
1725  }
1726  
1727  .block-editor-date-format-picker {
1728    margin: 0 0 16px;
1729    padding: 0;
1730    border: none;
1731  }
1732  
1733  .block-editor-dimension-control {
1734    border: 0;
1735    margin: 0;
1736    padding: 0;
1737  }
1738  
1739  .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1740    padding: 8px;
1741    width: 260px;
1742  }
1743  .block-editor-duotone-control__popover.components-popover .components-menu-group__label {
1744    padding: 0;
1745  }
1746  .block-editor-duotone-control__popover.components-popover .components-circular-option-picker__swatches {
1747    display: grid;
1748    grid-template-columns: repeat(6, 28px);
1749    gap: 12px;
1750    justify-content: space-between;
1751  }
1752  
1753  .block-editor-duotone-control__unset-indicator {
1754    background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1755  }
1756  
1757  .block-editor-fit-text-size-warning {
1758    grid-column: span 2;
1759  }
1760  
1761  .components-font-appearance-control__option {
1762    text-transform: capitalize;
1763  }
1764  
1765  .block-editor-font-family-control__hint {
1766    margin-inline-start: var(--wpds-dimension-gap-sm, 8px);
1767    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1768  }
1769  
1770  .block-editor-global-styles__toggle-icon {
1771    fill: currentColor;
1772  }
1773  
1774  .block-editor-global-styles__shadow-popover-container {
1775    width: 230px;
1776  }
1777  
1778  .block-editor-global-styles__shadow__list {
1779    display: flex;
1780    gap: 12px;
1781    flex-wrap: wrap;
1782    padding-bottom: 8px;
1783  }
1784  
1785  .block-editor-global-styles__clear-shadow {
1786    text-align: left;
1787  }
1788  
1789  .block-editor-global-styles-state-control {
1790    margin-top: -4px;
1791  }
1792  
1793  .block-editor-global-styles-state-control__badges {
1794    min-height: 24px;
1795  }
1796  
1797  .block-editor-global-styles-state-control__badge-infotip {
1798    display: inline-flex;
1799    align-items: center;
1800    padding: 0;
1801    border: 0;
1802    border-radius: var(--wpds-border-radius-sm, 2px);
1803    background: none;
1804    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1805    cursor: var(--wpds-cursor-control, pointer);
1806  }
1807  
1808  .block-editor-global-styles-state-control__badge-infotip-popup {
1809    max-width: 240px;
1810  }
1811  
1812  .block-editor-global-styles-filters-panel__dropdown,
1813  .block-editor-global-styles__shadow-dropdown {
1814    display: block;
1815    padding: 0;
1816    position: relative;
1817    border: 1px solid #ddd;
1818    border-radius: 2px;
1819  }
1820  
1821  .block-editor-global-styles-filters-panel__dropdown-toggle,
1822  .block-editor-global-styles__shadow-dropdown-toggle {
1823    width: 100%;
1824    padding: 8px;
1825  }
1826  .block-editor-global-styles-filters-panel__dropdown-toggle.is-open,
1827  .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1828    background-color: #f0f0f0;
1829  }
1830  
1831  .block-editor-panel-duotone-settings__label-row {
1832    width: 100%;
1833    min-width: 0;
1834  }
1835  
1836  .block-editor-panel-duotone-settings__label {
1837    min-width: 0;
1838  }
1839  
1840  .block-editor-global-styles__shadow-editor__remove-button {
1841    position: absolute;
1842    left: 0;
1843    top: 8px;
1844    margin: auto 8px auto;
1845    opacity: 0;
1846  }
1847  @media not (prefers-reduced-motion) {
1848    .block-editor-global-styles__shadow-editor__remove-button {
1849      transition: opacity 0.1s ease-in-out;
1850    }
1851  }
1852  .block-editor-global-styles__shadow-dropdown:hover .block-editor-global-styles__shadow-editor__remove-button, .block-editor-global-styles__shadow-editor__remove-button:focus, .block-editor-global-styles__shadow-editor__remove-button:hover {
1853    opacity: 1;
1854  }
1855  @media (hover: none) {
1856    .block-editor-global-styles__shadow-editor__remove-button {
1857      opacity: 1;
1858    }
1859  }
1860  
1861  .block-editor-global-styles__shadow-indicator {
1862    appearance: none;
1863    background: none;
1864    color: #2f2f2f;
1865    border: #e0e0e0 1px solid;
1866    border-radius: 2px;
1867    cursor: var(--wpds-cursor-control, pointer);
1868    display: inline-flex;
1869    align-items: center;
1870    padding: 0;
1871    height: 26px;
1872    width: 26px;
1873    box-sizing: border-box;
1874    transform: scale(1);
1875  }
1876  @media not (prefers-reduced-motion) {
1877    .block-editor-global-styles__shadow-indicator {
1878      transition: transform 0.1s ease;
1879    }
1880  }
1881  .block-editor-global-styles__shadow-indicator {
1882    will-change: transform;
1883  }
1884  .block-editor-global-styles__shadow-indicator:focus {
1885    border: 2px solid #757575;
1886  }
1887  .block-editor-global-styles__shadow-indicator:hover {
1888    transform: scale(1.2);
1889  }
1890  .block-editor-global-styles__shadow-indicator.unset {
1891    background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1892  }
1893  
1894  .block-editor-global-styles-advanced-panel__custom-css-input {
1895    margin-bottom: 16px;
1896  }
1897  .block-editor-global-styles-advanced-panel__custom-css-input textarea {
1898    font-family: Menlo, Consolas, monaco, monospace;
1899    direction: ltr;
1900  }
1901  
1902  .block-editor-panel-duotone-settings__reset {
1903    position: absolute;
1904    left: 0;
1905    top: 8px;
1906    margin: auto 8px auto;
1907    opacity: 0;
1908  }
1909  @media not (prefers-reduced-motion) {
1910    .block-editor-panel-duotone-settings__reset {
1911      transition: opacity 0.1s ease-in-out;
1912    }
1913  }
1914  .block-editor-global-styles-filters-panel__dropdown:hover .block-editor-panel-duotone-settings__reset, .block-editor-panel-duotone-settings__reset:focus, .block-editor-panel-duotone-settings__reset:hover {
1915    opacity: 1;
1916  }
1917  @media (hover: none) {
1918    .block-editor-panel-duotone-settings__reset {
1919      opacity: 1;
1920    }
1921  }
1922  
1923  .block-editor-global-styles__text-shadow {
1924    width: 260px;
1925    padding: 8px;
1926  }
1927  
1928  .block-editor-global-styles__text-shadow-preview {
1929    display: flex;
1930    align-items: center;
1931    justify-content: center;
1932    height: 80px;
1933    border: #ddd 1px solid;
1934    border-radius: 2px;
1935    font-size: 24px;
1936    margin-bottom: 16px;
1937    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);
1938    background-position: 0 0, 8px 8px;
1939    background-size: 16px 16px;
1940  }
1941  
1942  .block-editor-global-styles__text-shadow-list-item {
1943    justify-content: space-between;
1944    gap: 8px;
1945    width: 100%;
1946  }
1947  .block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
1948    opacity: 0;
1949  }
1950  
1951  .block-editor-global-styles__text-shadow-dropdown {
1952    display: block;
1953    padding: 0;
1954    position: relative;
1955    border: 1px solid #ddd;
1956    border-radius: 2px;
1957  }
1958  
1959  .block-editor-global-styles__text-shadow-dropdown-toggle {
1960    width: 100%;
1961    padding: 8px;
1962  }
1963  .block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
1964    background-color: #f0f0f0;
1965  }
1966  
1967  .block-editor-global-styles__text-shadow-remove-button {
1968    position: absolute;
1969    left: 8px;
1970    top: 8px;
1971    opacity: 0;
1972  }
1973  @media not (prefers-reduced-motion) {
1974    .block-editor-global-styles__text-shadow-remove-button {
1975      transition: opacity 0.1s ease-in-out;
1976    }
1977  }
1978  .block-editor-global-styles__text-shadow-dropdown:hover .block-editor-global-styles__text-shadow-remove-button, .block-editor-global-styles__text-shadow-remove-button:focus, .block-editor-global-styles__text-shadow-remove-button:hover {
1979    opacity: 1;
1980  }
1981  @media (hover: none) {
1982    .block-editor-global-styles__text-shadow-remove-button {
1983      opacity: 1;
1984    }
1985  }
1986  
1987  .is-inherited-from-global-styles .components-base-control__label,
1988  .is-inherited-from-global-styles .components-input-control__label,
1989  .is-inherited-from-global-styles .block-editor-font-appearance-control__label,
1990  .is-inherited-from-global-styles .block-editor-font-family-control__label {
1991    text-decoration-line: underline;
1992    text-decoration-style: dotted;
1993    text-decoration-thickness: 1px;
1994    text-underline-offset: 0.2em;
1995  }
1996  .is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name,
1997  .is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title,
1998  .is-inherited-from-global-styles .block-editor-panel-duotone-settings__label {
1999    border-bottom: 1px dotted currentColor;
2000  }
2001  
2002  .has-local-override-from-global-styles {
2003    position: relative;
2004  }
2005  
2006  .global-styles-inheritance-affordance {
2007    position: absolute;
2008    inset-block-start: 0;
2009    inset-inline-end: 0;
2010    z-index: 1;
2011    display: flex;
2012    align-items: center;
2013    justify-content: center;
2014    pointer-events: none;
2015    height: 16px;
2016  }
2017  .global-styles-inheritance-affordance--offset-toggle {
2018    inset-inline-end: 32px;
2019  }
2020  .global-styles-inheritance-affordance .has-local-override-from-global-styles__reset {
2021    pointer-events: auto;
2022    margin-inline-start: 0 !important;
2023  }
2024  
2025  .has-local-override-from-global-styles__reset {
2026    display: inline-flex !important;
2027    align-items: center;
2028    justify-content: center;
2029    vertical-align: middle;
2030    position: relative;
2031    margin-inline-start: 6px;
2032    min-width: 14px !important;
2033    width: 14px !important;
2034    height: 14px !important;
2035    padding: 0 !important;
2036    border-radius: 50% !important;
2037    background: transparent !important;
2038    box-shadow: none !important;
2039    overflow: hidden;
2040    text-transform: none;
2041    letter-spacing: normal;
2042    cursor: var(--wpds-cursor-control, pointer);
2043  }
2044  .has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus {
2045    background: transparent !important;
2046  }
2047  .has-local-override-from-global-styles__reset:hover .has-local-override-from-global-styles__dot, .has-local-override-from-global-styles__reset:focus .has-local-override-from-global-styles__dot {
2048    display: none;
2049  }
2050  .has-local-override-from-global-styles__reset:hover .has-local-override-from-global-styles__reset-icon, .has-local-override-from-global-styles__reset:focus .has-local-override-from-global-styles__reset-icon {
2051    display: block;
2052  }
2053  .has-local-override-from-global-styles__reset:focus-visible {
2054    outline: 1.5px solid var(--wp-admin-theme-color, #3858e9);
2055    outline-offset: 1px;
2056  }
2057  .has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset {
2058    position: absolute;
2059    justify-content: center;
2060    top: 50%;
2061    transform: translateY(-50%);
2062    margin-block: 0;
2063    margin-inline-start: 0;
2064    opacity: 1;
2065  }
2066  .has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button {
2067    position: absolute;
2068    justify-content: center;
2069    inset-inline-end: 8px;
2070    top: 50%;
2071    transform: translateY(-50%);
2072    margin-block: 0;
2073    margin-inline-start: 0;
2074    opacity: 1;
2075  }
2076  .has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset {
2077    position: absolute;
2078    justify-content: center;
2079    inset-inline-end: 8px;
2080    top: 50%;
2081    transform: translateY(-50%);
2082    margin-block: 0;
2083    margin-inline-start: 0;
2084    opacity: 1;
2085  }
2086  
2087  .has-local-override-from-global-styles__dot {
2088    display: block;
2089    width: 8px;
2090    height: 8px;
2091    background-color: var(--wp-admin-theme-color, #3858e9);
2092    border-radius: 50%;
2093  }
2094  
2095  .has-local-override-from-global-styles__reset-icon {
2096    display: none;
2097    position: absolute;
2098    top: 50%;
2099    right: 50%;
2100    transform: translate(50%, -50%);
2101    color: var(--wp-admin-theme-color, #3858e9);
2102  }
2103  
2104  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
2105    z-index: 30;
2106  }
2107  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
2108    pointer-events: none;
2109  }
2110  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
2111    pointer-events: all;
2112  }
2113  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
2114    pointer-events: auto;
2115  }
2116  
2117  .block-editor-grid-visualizer__grid {
2118    display: grid;
2119    position: absolute;
2120  }
2121  
2122  .block-editor-grid-visualizer__cell {
2123    display: grid;
2124    position: relative;
2125  }
2126  .block-editor-grid-visualizer__cell .block-editor-inserter {
2127    color: inherit;
2128    z-index: 32;
2129    position: absolute;
2130    top: 0;
2131    bottom: 0;
2132    right: 0;
2133    left: 0;
2134    overflow: hidden;
2135  }
2136  .block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
2137    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
2138    color: inherit;
2139    overflow: hidden;
2140    height: 100%;
2141    width: 100%;
2142    padding: 0 !important;
2143    opacity: 0;
2144  }
2145  .block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
2146  .block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
2147    background: var(--wp-admin-theme-color);
2148  }
2149  .block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
2150  .block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
2151    opacity: 1;
2152    background-color: color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
2153  }
2154  
2155  .block-editor-grid-visualizer__drop-zone {
2156    background: rgba(204, 204, 204, 0.1);
2157    width: 100%;
2158    height: 100%;
2159    grid-column: 1;
2160    grid-row: 1;
2161    min-width: 8px;
2162    min-height: 8px;
2163  }
2164  
2165  .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
2166    z-index: 30;
2167  }
2168  .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
2169    pointer-events: none;
2170  }
2171  
2172  .block-editor-grid-item-resizer__box {
2173    border: 1px solid var(--wp-admin-theme-color);
2174  }
2175  .block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
2176    pointer-events: all;
2177  }
2178  
2179  .block-editor-grid-item-mover__move-button-container {
2180    display: flex;
2181    padding: 0;
2182    border: none;
2183    justify-content: center;
2184  }
2185  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
2186    width: 24px;
2187    min-width: 0 !important;
2188    padding-right: 0;
2189    padding-left: 0;
2190  }
2191  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
2192    min-width: 24px;
2193  }
2194  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
2195    content: "";
2196    position: absolute;
2197    display: block;
2198    border-radius: 2px;
2199    height: 32px;
2200    right: 8px;
2201    left: 8px;
2202    z-index: -1;
2203  }
2204  @media not (prefers-reduced-motion) {
2205    .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
2206      animation: components-button__appear-animation 0.1s ease;
2207      animation-fill-mode: forwards;
2208    }
2209  }
2210  
2211  .block-editor-grid-item-mover__move-vertical-button-container {
2212    display: flex;
2213    position: relative;
2214  }
2215  @media (min-width: 600px) {
2216    .block-editor-grid-item-mover__move-vertical-button-container {
2217      flex-direction: column;
2218      justify-content: space-around;
2219    }
2220    .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
2221      height: 20px !important;
2222      width: 100%;
2223      min-width: 0 !important;
2224    }
2225    .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
2226      height: calc(100% - 4px);
2227    }
2228    .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
2229    .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
2230      flex-shrink: 0;
2231      height: 20px;
2232    }
2233  }
2234  
2235  @media (min-width: 600px) {
2236    .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
2237      height: 40px;
2238      position: relative;
2239      top: -4px;
2240    }
2241  }
2242  
2243  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
2244    position: relative;
2245  }
2246  @media (min-width: 600px) {
2247    .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
2248      content: "";
2249      height: 100%;
2250      width: 1px;
2251      background: #e0e0e0;
2252      position: absolute;
2253      top: 0;
2254    }
2255  }
2256  @media (min-width: 782px) {
2257    .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
2258      background: #1e1e1e;
2259    }
2260  }
2261  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
2262    padding-left: 6px;
2263  }
2264  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
2265    left: 0;
2266  }
2267  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
2268    padding-right: 6px;
2269  }
2270  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
2271    right: 0;
2272  }
2273  @media (min-width: 600px) {
2274    .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
2275      content: "";
2276      height: 1px;
2277      width: 100%;
2278      background: #e0e0e0;
2279      position: absolute;
2280      top: 50%;
2281      right: 50%;
2282      transform: translate(50%, 0);
2283      margin-top: -0.5px;
2284    }
2285  }
2286  @media (min-width: 782px) {
2287    .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
2288      background: #1e1e1e;
2289    }
2290  }
2291  .show-icon-labels .block-editor-grid-item-mover-button {
2292    white-space: nowrap;
2293  }
2294  .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
2295    height: 24px;
2296    background: #ddd;
2297    top: 4px;
2298  }
2299  .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
2300    background: #ddd;
2301    width: calc(100% - 24px);
2302  }
2303  
2304  .block-editor-height-control {
2305    border: 0;
2306    margin: 0;
2307    padding: 0;
2308  }
2309  
2310  .block-editor-iframe__container {
2311    width: 100%;
2312    height: 100%;
2313  }
2314  
2315  .block-editor-iframe__scale-container {
2316    height: 100%;
2317  }
2318  
2319  .block-editor-iframe__scale-container.is-zoomed-out {
2320    width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
2321    position: absolute;
2322    left: 0;
2323  }
2324  
2325  .wp-block-image__crop-area {
2326    position: relative;
2327    max-width: 100%;
2328    width: 100%;
2329    overflow: hidden;
2330  }
2331  .wp-block-image__crop-area .reactEasyCrop_Container {
2332    pointer-events: auto;
2333  }
2334  .wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
2335    border: none;
2336    border-radius: 0;
2337  }
2338  
2339  .wp-block-image__zoom .components-popover__content {
2340    min-width: 260px;
2341    overflow: visible !important;
2342  }
2343  
2344  .block-editor-block-types-list__list-item {
2345    display: block;
2346    width: 33.33%;
2347    padding: 0;
2348    margin: 0;
2349  }
2350  .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled) .block-editor-block-icon.has-colors {
2351    color: var(--wp-block-synced-color);
2352  }
2353  .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
2354    color: var(--wp-block-synced-color) !important;
2355    filter: brightness(0.95);
2356  }
2357  .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
2358    color: var(--wp-block-synced-color) !important;
2359  }
2360  .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled)::after {
2361    background: var(--wp-block-synced-color);
2362  }
2363  
2364  .components-button.block-editor-block-types-list__item {
2365    display: flex;
2366    flex-direction: column;
2367    width: 100%;
2368    font-size: 13px;
2369    color: #1e1e1e;
2370    padding: 8px;
2371    align-items: stretch;
2372    justify-content: center;
2373    cursor: var(--wpds-cursor-control, pointer);
2374    background: transparent;
2375    word-break: normal;
2376    overflow-wrap: break-word;
2377  }
2378  @media not (prefers-reduced-motion) {
2379    .components-button.block-editor-block-types-list__item {
2380      transition: all 0.05s ease-in-out;
2381    }
2382  }
2383  .components-button.block-editor-block-types-list__item {
2384    position: relative;
2385    height: auto;
2386  }
2387  .components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
2388    opacity: 0.6;
2389    cursor: default;
2390  }
2391  .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
2392    color: var(--wp-admin-theme-color) !important;
2393    filter: brightness(0.95);
2394  }
2395  .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
2396    color: var(--wp-admin-theme-color) !important;
2397  }
2398  .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
2399    content: "";
2400    position: absolute;
2401    top: 0;
2402    bottom: 0;
2403    right: 0;
2404    left: 0;
2405    border-radius: 2px;
2406    opacity: 0.04;
2407    background: var(--wp-admin-theme-color);
2408    pointer-events: none;
2409  }
2410  
2411  .block-editor-block-types-list__item-icon {
2412    padding: 12px 20px;
2413    color: #1e1e1e;
2414  }
2415  @media not (prefers-reduced-motion) {
2416    .block-editor-block-types-list__item-icon {
2417      transition: all 0.05s ease-in-out;
2418    }
2419  }
2420  .block-editor-block-types-list__item-icon .block-editor-block-icon {
2421    margin-right: auto;
2422    margin-left: auto;
2423  }
2424  @media not (prefers-reduced-motion) {
2425    .block-editor-block-types-list__item-icon svg {
2426      transition: all 0.15s ease-out;
2427    }
2428  }
2429  .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2430    cursor: grab;
2431  }
2432  
2433  .block-editor-block-types-list__item-title {
2434    padding: 4px 2px 8px;
2435    font-size: 12px;
2436    hyphens: auto;
2437  }
2438  
2439  .modal-open .block-editor-inspector-list-view-content-popover {
2440    z-index: 99999;
2441  }
2442  
2443  .block-editor-block-inspector__tabs [role=tablist] {
2444    width: 100%;
2445  }
2446  
2447  .block-editor-inspector-popover-header {
2448    margin-bottom: 16px;
2449  }
2450  
2451  .items-justified-left {
2452    justify-content: flex-start;
2453  }
2454  
2455  .items-justified-center {
2456    justify-content: center;
2457  }
2458  
2459  .items-justified-right {
2460    justify-content: flex-end;
2461  }
2462  
2463  .items-justified-space-between {
2464    justify-content: space-between;
2465  }
2466  
2467  @keyframes loadingpulse {
2468    0% {
2469      opacity: 1;
2470    }
2471    50% {
2472      opacity: 0;
2473    }
2474    100% {
2475      opacity: 1;
2476    }
2477  }
2478  .block-editor-link-control {
2479    position: relative;
2480    min-width: 350px;
2481  }
2482  .components-popover__content .block-editor-link-control {
2483    min-width: auto;
2484    width: 90vw;
2485    max-width: 350px;
2486  }
2487  .show-icon-labels .block-editor-link-control .components-button.has-icon svg {
2488    display: none;
2489  }
2490  .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
2491    content: attr(aria-label);
2492  }
2493  .show-icon-labels .block-editor-link-control .block-editor-link-control__preview {
2494    gap: 4px;
2495    flex-wrap: wrap;
2496  }
2497  .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .components-button.has-icon {
2498    width: auto;
2499    padding: 4px;
2500  }
2501  .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .block-editor-link-control_link-information {
2502    min-width: 100%;
2503    margin-left: 0;
2504  }
2505  
2506  .block-editor-link-control__search-input-wrapper {
2507    margin-bottom: 8px;
2508    position: relative;
2509  }
2510  
2511  .block-editor-link-control__help {
2512    padding: 0 16px;
2513    margin-top: -8px;
2514    margin-bottom: 0;
2515    font-size: 12px;
2516    font-style: normal;
2517    color: #757575;
2518  }
2519  
2520  .block-editor-link-control__search-input-container,
2521  .block-editor-link-control__search-input-wrapper {
2522    position: relative;
2523  }
2524  
2525  .block-editor-link-control__field {
2526    margin: 16px;
2527  }
2528  .block-editor-link-control__field .components-base-control__label {
2529    color: #1e1e1e;
2530  }
2531  
2532  .block-editor-link-control__search-error {
2533    margin: -8px 16px 16px;
2534  }
2535  
2536  .block-editor-link-control__search-actions {
2537    padding: 8px 16px 16px;
2538  }
2539  
2540  .block-editor-link-control__search-results-wrapper {
2541    position: relative;
2542  }
2543  .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
2544    content: "";
2545    position: absolute;
2546    right: -1px;
2547    left: 16px;
2548    display: block;
2549    pointer-events: none;
2550    z-index: 100;
2551  }
2552  .block-editor-link-control__search-results-wrapper::before {
2553    height: 8px;
2554    top: 0;
2555    bottom: auto;
2556  }
2557  .block-editor-link-control__search-results-wrapper::after {
2558    height: 16px;
2559    bottom: 0;
2560    top: auto;
2561  }
2562  
2563  .block-editor-link-control__search-results {
2564    margin-top: -16px;
2565    padding: 8px;
2566    max-height: 200px;
2567    overflow-y: auto;
2568  }
2569  .block-editor-link-control__search-results.is-loading {
2570    opacity: 0.2;
2571  }
2572  
2573  .block-editor-link-control__search-item.components-button.components-menu-item__button {
2574    height: auto;
2575    text-align: right;
2576  }
2577  .block-editor-link-control__search-item .components-menu-item__item {
2578    overflow: hidden;
2579    text-overflow: ellipsis;
2580    display: inline-block;
2581    width: 100%;
2582  }
2583  .block-editor-link-control__search-item .components-menu-item__item mark {
2584    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2585    color: inherit;
2586    background-color: transparent;
2587  }
2588  .block-editor-link-control__search-item .components-menu-item__shortcut {
2589    white-space: nowrap;
2590  }
2591  .block-editor-link-control__search-item:not(:focus, [aria-selected=true]) .components-menu-item__shortcut {
2592    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2593  }
2594  
2595  .block-editor-link-control__preview {
2596    background: transparent;
2597    border: 0;
2598    padding: 16px;
2599  }
2600  .block-editor-link-control__preview .block-editor-link-control__link-information {
2601    margin-left: 8px;
2602    white-space: pre-wrap;
2603    overflow-wrap: break-word;
2604  }
2605  .block-editor-link-control__preview .block-editor-link-control__link-information .block-editor-link-control__preview-info {
2606    color: #757575;
2607    line-height: 1.1;
2608    font-size: 12px;
2609    word-break: break-all;
2610  }
2611  .block-editor-link-control__preview.is-url-title .block-editor-link-control__preview-title {
2612    word-break: break-all;
2613  }
2614  .block-editor-link-control__preview .block-editor-link-control__preview-image,
2615  .block-editor-link-control__preview .block-editor-link-control__preview-icon {
2616    position: relative;
2617    flex-shrink: 0;
2618    background-color: #f0f0f0;
2619    width: 32px;
2620    height: 32px;
2621    border-radius: 2px;
2622  }
2623  .block-editor-link-control__preview .block-editor-link-control__preview-icon img {
2624    width: 16px;
2625  }
2626  .block-editor-link-control__preview.is-error .block-editor-link-control__preview-icon {
2627    top: 0;
2628    width: 32px;
2629    max-height: 32px;
2630  }
2631  .block-editor-link-control__preview .block-editor-link-control__preview-title {
2632    display: flex;
2633    align-items: baseline;
2634    line-height: var(--wpds-typography-line-height-sm, 20px);
2635  }
2636  .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2637    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2638    color: inherit;
2639    background-color: transparent;
2640  }
2641  .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2642    font-weight: 400;
2643  }
2644  
2645  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
2646  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon img {
2647    opacity: 0;
2648  }
2649  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2650    content: "";
2651    display: block;
2652    background-color: #f0f0f0;
2653    position: absolute;
2654    top: 0;
2655    right: 0;
2656    left: 0;
2657    bottom: 0;
2658    border-radius: 100%;
2659  }
2660  @media not (prefers-reduced-motion) {
2661    .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2662      animation: loadingpulse 1s linear infinite;
2663      animation-delay: 0.5s;
2664    }
2665  }
2666  
2667  .block-editor-link-control__loading {
2668    margin: 16px;
2669    display: flex;
2670    align-items: center;
2671  }
2672  .block-editor-link-control__loading .components-spinner {
2673    margin-top: 0;
2674  }
2675  
2676  .components-button + .block-editor-link-control__search-create {
2677    overflow: visible;
2678    padding: 12px 16px;
2679  }
2680  .components-button + .block-editor-link-control__search-create::before {
2681    content: "";
2682    position: absolute;
2683    top: -10px;
2684    right: 0;
2685    display: block;
2686    width: 100%;
2687  }
2688  
2689  .block-editor-link-control__search-create {
2690    align-items: center;
2691  }
2692  .block-editor-link-control__search-create .block-editor-link-control__preview-title {
2693    margin-bottom: 0;
2694  }
2695  .block-editor-link-control__search-create .block-editor-link-control__search-item-icon {
2696    top: 0;
2697  }
2698  
2699  .block-editor-link-control__drawer-inner {
2700    display: flex;
2701    flex-direction: column;
2702    flex-basis: 100%;
2703    position: relative;
2704  }
2705  
2706  .block-editor-link-control__settings {
2707    border: 0;
2708    padding: 0;
2709    margin: 0;
2710  }
2711  
2712  .block-editor-link-control__setting {
2713    margin-bottom: 0;
2714    flex: 1;
2715    padding: 8px 24px;
2716  }
2717  .block-editor-link-control__setting .components-base-control:not(.components-input-control) .components-base-control__field {
2718    display: flex;
2719  }
2720  .block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
2721    color: #1e1e1e;
2722  }
2723  .block-editor-link-control__setting input {
2724    margin-right: 0;
2725  }
2726  .is-preview .block-editor-link-control__setting {
2727    padding: 20px 0 8px 8px;
2728  }
2729  
2730  .block-editor-link-control__tools {
2731    padding: 8px 8px 0 8px;
2732    margin-top: -16px;
2733  }
2734  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
2735    padding-right: 0;
2736    gap: 0;
2737  }
2738  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
2739    color: #1e1e1e;
2740  }
2741  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2742    visibility: visible;
2743  }
2744  @media not (prefers-reduced-motion) {
2745    .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2746      transition: transform 0.1s ease;
2747    }
2748  }
2749  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2750    transform: rotate(-90deg);
2751  }
2752  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2753    visibility: visible;
2754    transform: rotate(0deg);
2755  }
2756  @media not (prefers-reduced-motion) {
2757    .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2758      transition: transform 0.1s ease;
2759    }
2760  }
2761  
2762  .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
2763    display: block;
2764  }
2765  .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
2766    position: absolute;
2767    right: auto;
2768    bottom: auto;
2769    top: calc(50% - 16px / 2);
2770    left: 40px;
2771  }
2772  
2773  .block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
2774    top: calc(50% + 16px / 4);
2775    left: 12px;
2776  }
2777  
2778  /**
2779   * Link Picker Styles
2780   */
2781  .link-preview-button.components-button {
2782    width: 100%;
2783    height: auto;
2784    padding: 12px;
2785    border-color: #949494;
2786  }
2787  
2788  .link-preview-button__image-container {
2789    width: 24px;
2790    height: 24px;
2791    flex-shrink: 0;
2792  }
2793  
2794  .link-preview-button__image {
2795    width: 100%;
2796    height: 100%;
2797    object-fit: cover;
2798    border-radius: 2px;
2799  }
2800  
2801  .link-preview-button__content {
2802    min-width: 0;
2803    flex: 1;
2804  }
2805  
2806  .link-preview-button__details {
2807    min-width: 0;
2808    flex: 1;
2809  }
2810  
2811  .link-preview-button__title,
2812  .link-preview-button__hint {
2813    min-width: 0;
2814    display: block;
2815    width: 100%;
2816    text-align: right;
2817    overflow: hidden;
2818    text-overflow: ellipsis;
2819    white-space: nowrap;
2820  }
2821  
2822  .link-preview-button__title {
2823    margin-top: 4px;
2824    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2825    color: #1e1e1e;
2826    display: block;
2827  }
2828  
2829  .link-preview-button__hint {
2830    font-size: 12px;
2831    color: #757575;
2832    font-weight: 400;
2833  }
2834  
2835  .link-preview-button__icon {
2836    color: #1e1e1e;
2837  }
2838  
2839  .link-preview-button__badges {
2840    margin-top: 8px;
2841  }
2842  
2843  .block-editor-list-view-tree {
2844    width: 100%;
2845    border-collapse: collapse;
2846    padding: 0;
2847    margin: 0;
2848  }
2849  .components-modal__content .block-editor-list-view-tree {
2850    margin: -12px -6px 0;
2851    width: calc(100% + 12px);
2852  }
2853  .block-editor-list-view-tree.is-dragging tbody {
2854    pointer-events: none;
2855  }
2856  
2857  .block-editor-list-view-leaf {
2858    position: relative;
2859    transform: translateY(0);
2860  }
2861  .block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2862    z-index: 1;
2863  }
2864  .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2865    cursor: grab;
2866  }
2867  .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
2868    color: inherit;
2869  }
2870  .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
2871    color: var(--wp-admin-theme-color);
2872  }
2873  .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2874    fill: currentColor;
2875  }
2876  .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2877    color: inherit;
2878  }
2879  .block-editor-list-view-leaf.is-selected td {
2880    background: var(--wp-admin-theme-color);
2881  }
2882  .block-editor-list-view-leaf.is-selected.is-synced td {
2883    background: var(--wp-block-synced-color);
2884  }
2885  .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus,
2886  .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2887    color: var(--wp-block-synced-color);
2888  }
2889  .block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2890    --focus-color: var(--wp-block-synced-color);
2891  }
2892  .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2893    --focus-color: var(--wp-block-synced-color);
2894    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2895    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2896  }
2897  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2898    color: #fff;
2899  }
2900  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2901    --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2902    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2903    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2904    outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2905  }
2906  @media (forced-colors: active) {
2907    .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2908      background: SelectedItem;
2909    }
2910    .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2911      color: SelectedItemText;
2912    }
2913    .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2914      fill: SelectedItemText;
2915    }
2916    .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2917      forced-color-adjust: none;
2918    }
2919    .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2920      --focus-color: CanvasText;
2921    }
2922    .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2923      --focus-color: SelectedItemText;
2924    }
2925  }
2926  .block-editor-list-view-leaf.is-first-selected td:first-child {
2927    border-top-right-radius: 2px;
2928  }
2929  .block-editor-list-view-leaf.is-first-selected td:last-child {
2930    border-top-left-radius: 2px;
2931  }
2932  .block-editor-list-view-leaf.is-last-selected td:first-child {
2933    border-bottom-right-radius: 2px;
2934  }
2935  .block-editor-list-view-leaf.is-last-selected td:last-child {
2936    border-bottom-left-radius: 2px;
2937  }
2938  .block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
2939    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2940  }
2941  .block-editor-list-view-leaf.is-synced-branch.is-branch-selected {
2942    background: rgba(var(--wp-block-synced-color--rgb), 0.04);
2943  }
2944  .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
2945    border-top-right-radius: 2px;
2946  }
2947  .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
2948    border-top-left-radius: 2px;
2949  }
2950  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
2951    border-top-right-radius: 2px;
2952  }
2953  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
2954    border-top-left-radius: 2px;
2955  }
2956  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
2957    border-bottom-right-radius: 2px;
2958  }
2959  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
2960    border-bottom-left-radius: 2px;
2961  }
2962  .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
2963    border-radius: 0;
2964  }
2965  @media not (prefers-reduced-motion) {
2966    .block-editor-list-view-leaf.is-displacement-normal {
2967      transition: transform 0.2s;
2968    }
2969  }
2970  .block-editor-list-view-leaf.is-displacement-normal {
2971    transform: translateY(0);
2972  }
2973  @media not (prefers-reduced-motion) {
2974    .block-editor-list-view-leaf.is-displacement-up {
2975      transition: transform 0.2s;
2976    }
2977  }
2978  .block-editor-list-view-leaf.is-displacement-up {
2979    transform: translateY(-32px);
2980  }
2981  @media not (prefers-reduced-motion) {
2982    .block-editor-list-view-leaf.is-displacement-down {
2983      transition: transform 0.2s;
2984    }
2985  }
2986  .block-editor-list-view-leaf.is-displacement-down {
2987    transform: translateY(32px);
2988  }
2989  @media not (prefers-reduced-motion) {
2990    .block-editor-list-view-leaf.is-after-dragged-blocks {
2991      transition: transform 0.2s;
2992    }
2993  }
2994  .block-editor-list-view-leaf.is-after-dragged-blocks {
2995    transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2996  }
2997  @media not (prefers-reduced-motion) {
2998    .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2999      transition: transform 0.2s;
3000    }
3001  }
3002  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
3003    transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
3004  }
3005  @media not (prefers-reduced-motion) {
3006    .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
3007      transition: transform 0.2s;
3008    }
3009  }
3010  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
3011    transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
3012  }
3013  .block-editor-list-view-leaf.is-dragging {
3014    opacity: 0;
3015    right: 0;
3016    pointer-events: none;
3017    z-index: -9999;
3018  }
3019  .block-editor-list-view-leaf .block-editor-list-view-block-contents {
3020    display: flex;
3021    align-items: center;
3022    width: 100%;
3023    height: 32px;
3024    padding: 6px 0 6px 4px;
3025    text-align: right;
3026    position: relative;
3027    white-space: nowrap;
3028    border-radius: 2px;
3029    box-sizing: border-box;
3030    color: inherit;
3031    font-family: inherit;
3032    font-size: 13px;
3033    font-weight: 400;
3034    margin: 0;
3035    text-decoration: none;
3036  }
3037  @media not (prefers-reduced-motion) {
3038    .block-editor-list-view-leaf .block-editor-list-view-block-contents {
3039      transition: box-shadow 0.1s linear;
3040    }
3041  }
3042  .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
3043    padding-right: 0;
3044    padding-left: 0;
3045  }
3046  .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
3047  .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
3048    box-shadow: none;
3049    outline: none;
3050  }
3051  .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
3052  .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
3053    content: "";
3054    position: absolute;
3055    top: 0;
3056    left: -28px;
3057    bottom: 0;
3058    right: 0;
3059    border-radius: inherit;
3060    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3061    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3062    outline-offset: 1px;
3063    box-shadow: 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
3064    z-index: 2;
3065    pointer-events: none;
3066  }
3067  .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
3068    left: 0;
3069  }
3070  .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
3071    opacity: 1;
3072  }
3073  @keyframes __wp-base-styles-fade-in {
3074    from {
3075      opacity: 0;
3076    }
3077    to {
3078      opacity: 1;
3079    }
3080  }
3081  @media not (prefers-reduced-motion) {
3082    .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
3083      animation: __wp-base-styles-fade-in 0.08s linear 0s;
3084      animation-fill-mode: forwards;
3085    }
3086  }
3087  .block-editor-list-view-leaf .block-editor-block-icon {
3088    margin-left: 4px;
3089    flex: 0 0 24px;
3090  }
3091  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
3092  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
3093  .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
3094    padding: 0;
3095  }
3096  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
3097  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
3098    line-height: 0;
3099    width: 28px;
3100    vertical-align: middle;
3101  }
3102  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
3103  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
3104    opacity: 0;
3105  }
3106  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:focus-within > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
3107  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
3108  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
3109  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
3110    opacity: 1;
3111  }
3112  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
3113    display: flex;
3114    height: 100%;
3115    flex-direction: column;
3116    align-items: center;
3117  }
3118  .block-editor-list-view-leaf .block-editor-block-mover-button {
3119    position: relative;
3120    width: 36px;
3121    height: 24px;
3122  }
3123  .block-editor-list-view-leaf .block-editor-block-mover-button svg {
3124    position: relative;
3125    height: 24px;
3126  }
3127  .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button {
3128    margin-top: -6px;
3129    align-items: flex-end;
3130  }
3131  .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button svg {
3132    bottom: -4px;
3133  }
3134  .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button {
3135    margin-bottom: -6px;
3136    align-items: flex-start;
3137  }
3138  .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
3139    top: -4px;
3140  }
3141  .block-editor-list-view-leaf .block-editor-inserter__toggle {
3142    background: #1e1e1e;
3143    color: #fff;
3144    height: 24px;
3145    margin: 6px 1px 6px 6px;
3146    min-width: 24px;
3147  }
3148  .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
3149    color: #fff;
3150  }
3151  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
3152    width: 100%;
3153  }
3154  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * {
3155    min-width: 0;
3156  }
3157  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
3158    right: 2px;
3159    position: relative;
3160  }
3161  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
3162    flex: 1;
3163    position: relative;
3164  }
3165  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
3166    position: absolute;
3167    width: 100%;
3168    transform: translateY(-50%);
3169  }
3170  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
3171    position: relative;
3172    max-width: min(110px, 40%);
3173    width: 100%;
3174  }
3175  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
3176    position: absolute;
3177    left: 0;
3178    transform: translateY(-50%);
3179    box-sizing: border-box;
3180    max-width: 100%;
3181    padding: 2px 8px;
3182    border-radius: 2px;
3183    background: #f0f0f0;
3184    color: #2f2f2f;
3185    font-size: 12px;
3186    line-height: 20px;
3187    overflow: hidden;
3188    text-overflow: ellipsis;
3189    white-space: nowrap;
3190  }
3191  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
3192    background: rgba(0, 0, 0, 0.3);
3193    color: #fff;
3194  }
3195  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
3196  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
3197  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
3198    line-height: 0;
3199  }
3200  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
3201    display: flex;
3202  }
3203  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
3204    background-size: cover;
3205    width: 18px;
3206    height: 18px;
3207    border-radius: 1px;
3208  }
3209  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
3210    box-shadow: 0 0 0 2px #fff;
3211  }
3212  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
3213    margin-right: -6px;
3214  }
3215  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
3216    box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
3217  }
3218  .block-editor-list-view-leaf.is-disabled {
3219    opacity: 0.2;
3220  }
3221  @media not (prefers-reduced-motion) {
3222    .block-editor-list-view-leaf.is-disabled {
3223      transition: opacity 0.1s linear;
3224    }
3225  }
3226  .block-editor-list-view-leaf.is-disabled:hover {
3227    opacity: 0.2;
3228  }
3229  .block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander {
3230    cursor: default;
3231  }
3232  .block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover {
3233    color: inherit;
3234  }
3235  
3236  .block-editor-list-view-draggable-chip {
3237    opacity: 0.8;
3238  }
3239  
3240  .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
3241  .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
3242  .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
3243  .block-editor-list-view-appender__cell .block-editor-list-view-appender__container {
3244    display: flex;
3245  }
3246  
3247  .block-editor-list-view__expander {
3248    height: 24px;
3249    width: 24px;
3250    cursor: var(--wpds-cursor-control, pointer);
3251  }
3252  
3253  .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
3254    margin-right: 192px;
3255  }
3256  
3257  .block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander {
3258    margin-right: 0;
3259  }
3260  
3261  .block-editor-list-view-leaf[aria-level="2"] .block-editor-list-view__expander {
3262    margin-right: 24px;
3263  }
3264  
3265  .block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander {
3266    margin-right: 48px;
3267  }
3268  
3269  .block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander {
3270    margin-right: 72px;
3271  }
3272  
3273  .block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander {
3274    margin-right: 96px;
3275  }
3276  
3277  .block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander {
3278    margin-right: 120px;
3279  }
3280  
3281  .block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander {
3282    margin-right: 144px;
3283  }
3284  
3285  .block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander {
3286    margin-right: 168px;
3287  }
3288  
3289  .block-editor-list-view-leaf .block-editor-list-view__expander {
3290    visibility: hidden;
3291  }
3292  
3293  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3294    visibility: visible;
3295  }
3296  @media not (prefers-reduced-motion) {
3297    .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3298      transition: transform 0.2s ease;
3299    }
3300  }
3301  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3302    transform: rotate(-90deg);
3303  }
3304  
3305  .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
3306    visibility: visible;
3307    transform: rotate(0deg);
3308  }
3309  @media not (prefers-reduced-motion) {
3310    .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
3311      transition: transform 0.2s ease;
3312    }
3313  }
3314  
3315  .block-editor-list-view-drop-indicator {
3316    pointer-events: none;
3317  }
3318  .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
3319    background: var(--wp-admin-theme-color);
3320    height: 4px;
3321    border-radius: 4px;
3322  }
3323  
3324  .block-editor-list-view-drop-indicator--preview {
3325    pointer-events: none;
3326  }
3327  .block-editor-list-view-drop-indicator--preview .components-popover__content {
3328    overflow: hidden !important;
3329  }
3330  .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
3331    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3332    height: 32px;
3333    border-radius: 4px;
3334    overflow: hidden;
3335  }
3336  .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
3337    background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
3338  }
3339  
3340  .block-editor-list-view-placeholder {
3341    padding: 0;
3342    margin: 0;
3343    height: 32px;
3344  }
3345  
3346  .list-view-appender .block-editor-inserter__toggle {
3347    background-color: #1e1e1e;
3348    color: #fff;
3349    margin: 8px 24px 0 0;
3350    height: 24px;
3351    padding: 0;
3352  }
3353  .list-view-appender .block-editor-inserter__toggle.has-icon.is-next-40px-default-size {
3354    min-width: 24px;
3355  }
3356  .list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
3357    background: var(--wp-admin-theme-color);
3358    color: #fff;
3359  }
3360  
3361  .list-view-appender__description {
3362    display: none;
3363  }
3364  
3365  .block-editor-media-placeholder__url-input-form {
3366    min-width: 260px;
3367  }
3368  @media (min-width: 600px) {
3369    .block-editor-media-placeholder__url-input-form {
3370      width: 300px;
3371    }
3372  }
3373  .block-editor-media-placeholder__url-input-form input {
3374    direction: ltr;
3375  }
3376  
3377  .modal-open .block-editor-media-replace-flow__options {
3378    z-index: 99999;
3379  }
3380  
3381  .block-editor-media-replace-flow__indicator {
3382    margin-right: 4px;
3383  }
3384  
3385  .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
3386    border-top: 1px solid #ddd;
3387    margin-top: 8px;
3388    padding-bottom: 8px;
3389  }
3390  
3391  .block-editor-media-replace-flow__options.is-variant-toolbar .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
3392    border-top-color: #1e1e1e;
3393  }
3394  
3395  .block-editor-media-flow__url-input {
3396    margin-left: -8px;
3397    margin-right: -8px;
3398    padding: 16px;
3399  }
3400  .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
3401    display: block;
3402    top: 16px;
3403    margin-bottom: 8px;
3404  }
3405  .block-editor-media-flow__url-input .block-editor-link-control {
3406    width: 300px;
3407  }
3408  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
3409    padding: 0;
3410    margin: 0;
3411  }
3412  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__tools {
3413    justify-content: flex-end;
3414    padding: 16px var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
3415  }
3416  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__preview.is-current {
3417    width: auto;
3418    padding: 0;
3419  }
3420  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
3421    margin: 0;
3422    width: 100%;
3423  }
3424  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3425    padding: 8px 0 0;
3426  }
3427  
3428  .block-editor-multi-selection-inspector__card {
3429    padding: 16px;
3430  }
3431  
3432  .block-editor-multi-selection-inspector__card-title {
3433    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3434  }
3435  
3436  .block-editor-multi-selection-inspector__card-description {
3437    color: #757575;
3438  }
3439  
3440  .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3441    margin-right: -2px;
3442    padding: 0 3px;
3443    width: 36px;
3444    height: 24px;
3445  }
3446  
3447  .block-editor-plain-text {
3448    width: 100%;
3449    field-sizing: content;
3450  }
3451  
3452  .block-editor-responsive-block-control {
3453    margin-bottom: 28px;
3454    border-bottom: 1px solid #ccc;
3455    padding-bottom: 14px;
3456  }
3457  .block-editor-responsive-block-control:last-child {
3458    padding-bottom: 0;
3459    border-bottom: 0;
3460  }
3461  
3462  .block-editor-responsive-block-control__title {
3463    margin: 0;
3464    margin-bottom: 0.6em;
3465    margin-right: -3px;
3466  }
3467  
3468  .block-editor-responsive-block-control__label {
3469    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3470    margin-bottom: 0.6em;
3471    margin-right: -3px;
3472  }
3473  
3474  .block-editor-responsive-block-control__inner {
3475    margin-right: -1px;
3476  }
3477  
3478  .block-editor-responsive-block-control__toggle {
3479    margin-right: 1px;
3480  }
3481  
3482  .block-editor-responsive-block-control .components-base-control__help {
3483    border: 0;
3484    clip-path: inset(50%);
3485    height: 1px;
3486    margin: -1px;
3487    overflow: hidden;
3488    padding: 0;
3489    position: absolute;
3490    width: 1px;
3491    overflow-wrap: normal !important;
3492    word-break: normal !important;
3493  }
3494  
3495  .preset-input-control__wrapper > * {
3496    flex: 1;
3497  }
3498  .preset-input-control__wrapper > .preset-input-control__icon,
3499  .preset-input-control__wrapper > .preset-input-control__custom-toggle {
3500    flex: none;
3501  }
3502  
3503  .components-popover.block-editor-rich-text__inline-format-toolbar {
3504    z-index: 99998;
3505  }
3506  .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
3507    width: auto;
3508    min-width: auto;
3509    margin-bottom: 8px;
3510    box-shadow: none;
3511    outline: none;
3512    border-radius: 2px;
3513  }
3514  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
3515    border-radius: 2px;
3516  }
3517  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
3518    background: none;
3519  }
3520  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
3521  .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
3522    min-width: 48px;
3523    min-height: 48px;
3524    padding-right: 12px;
3525    padding-left: 12px;
3526  }
3527  
3528  .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
3529    justify-content: center;
3530  }
3531  
3532  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
3533    width: auto;
3534  }
3535  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
3536    display: none;
3537  }
3538  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
3539    content: attr(aria-label);
3540  }
3541  
3542  .block-editor-skip-to-selected-block {
3543    position: absolute;
3544    top: -9999em;
3545  }
3546  .block-editor-skip-to-selected-block:focus {
3547    font-size: 14px;
3548    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3549    background: #f1f1f1;
3550    z-index: 100000;
3551  }
3552  
3553  .block-editor-tabbed-sidebar {
3554    background-color: #fff;
3555    height: 100%;
3556    display: flex;
3557    flex-direction: column;
3558    flex-grow: 1;
3559    overflow: hidden;
3560  }
3561  
3562  .block-editor-tabbed-sidebar__tablist-and-close-button {
3563    border-bottom: 1px solid #ddd;
3564    display: flex;
3565    justify-content: space-between;
3566    padding-left: 8px;
3567  }
3568  
3569  .block-editor-tabbed-sidebar__close-button {
3570    background: #fff;
3571    /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
3572    order: 1;
3573    align-self: center;
3574  }
3575  
3576  .block-editor-tabbed-sidebar__tablist {
3577    margin-bottom: -1px;
3578  }
3579  
3580  .block-editor-tabbed-sidebar__tabpanel {
3581    display: flex;
3582    flex-grow: 1;
3583    flex-direction: column;
3584    overflow-y: auto;
3585    scrollbar-gutter: auto;
3586  }
3587  
3588  .block-editor-block-list__block .block-editor-url-input,
3589  .components-popover .block-editor-url-input,
3590  .block-editor-url-input {
3591    flex-grow: 1;
3592    position: relative;
3593    padding: 1px;
3594  }
3595  @media (min-width: 600px) {
3596    .block-editor-block-list__block .block-editor-url-input,
3597    .components-popover .block-editor-url-input,
3598    .block-editor-url-input {
3599      min-width: 300px;
3600      width: auto;
3601    }
3602  }
3603  .block-editor-block-list__block .block-editor-url-input.is-full-width,
3604  .components-popover .block-editor-url-input.is-full-width,
3605  .block-editor-url-input.is-full-width {
3606    width: 100%;
3607  }
3608  .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
3609  .components-popover .block-editor-url-input.is-full-width__suggestions,
3610  .block-editor-url-input.is-full-width__suggestions {
3611    width: 100%;
3612  }
3613  .block-editor-block-list__block .block-editor-url-input .components-spinner,
3614  .components-popover .block-editor-url-input .components-spinner,
3615  .block-editor-url-input .components-spinner {
3616    position: absolute;
3617    margin: 0;
3618    top: calc(50% - 16px / 2);
3619    left: 8px;
3620  }
3621  
3622  .block-editor-url-input__suggestions {
3623    max-height: 200px;
3624  }
3625  @media not (prefers-reduced-motion) {
3626    .block-editor-url-input__suggestions {
3627      transition: all 0.15s ease-in-out;
3628    }
3629  }
3630  .block-editor-url-input__suggestions {
3631    padding: 4px 0;
3632    width: 302px;
3633    overflow-y: auto;
3634  }
3635  
3636  .block-editor-url-input__suggestions,
3637  .block-editor-url-input .components-spinner {
3638    display: none;
3639  }
3640  @media (min-width: 600px) {
3641    .block-editor-url-input__suggestions,
3642    .block-editor-url-input .components-spinner {
3643      display: grid;
3644    }
3645  }
3646  
3647  .block-editor-url-input__suggestion.components-button {
3648    min-height: 36px;
3649    height: auto;
3650    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3651    display: block;
3652    font-size: 13px;
3653    cursor: var(--wpds-cursor-control, pointer);
3654    width: 100%;
3655    border: none;
3656    text-align: right;
3657    box-shadow: none;
3658  }
3659  .block-editor-url-input__suggestion.components-button:is(:focus, .is-selected):not(:disabled, [aria-disabled=true]) {
3660    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
3661    color: var(--wpds-color-foreground-interactive-brand-strong-active, #fff);
3662    outline: none;
3663  }
3664  @media (forced-colors: active) {
3665    .block-editor-url-input__suggestion.components-button:is(:focus, .is-selected):not(:disabled, [aria-disabled=true]) {
3666      forced-color-adjust: none;
3667      background: Highlight;
3668      color: HighlightText;
3669    }
3670  }
3671  
3672  .components-toolbar-group > .block-editor-url-input__button,
3673  .components-toolbar > .block-editor-url-input__button {
3674    position: inherit;
3675  }
3676  
3677  .block-editor-url-input__button .block-editor-url-input__back {
3678    margin-left: 4px;
3679    overflow: visible;
3680  }
3681  .block-editor-url-input__button .block-editor-url-input__back::after {
3682    content: "";
3683    position: absolute;
3684    display: block;
3685    width: 1px;
3686    height: 24px;
3687    left: -1px;
3688    background: #ddd;
3689  }
3690  
3691  .block-editor-url-input__button-modal {
3692    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);
3693    border: 1px solid #ddd;
3694    background: #fff;
3695  }
3696  
3697  .block-editor-url-input__button-modal-line {
3698    display: flex;
3699    flex-direction: row;
3700    flex-grow: 1;
3701    flex-shrink: 1;
3702    min-width: 0;
3703    align-items: flex-start;
3704  }
3705  
3706  .block-editor-url-popover__additional-controls {
3707    border-top: 1px solid #1e1e1e;
3708    padding: 8px 8px;
3709  }
3710  
3711  .block-editor-url-popover__input-container {
3712    padding: 8px;
3713  }
3714  
3715  .block-editor-url-popover__row {
3716    display: flex;
3717    gap: 4px;
3718    align-items: center;
3719  }
3720  
3721  .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
3722    flex-grow: 1;
3723    gap: 8px;
3724  }
3725  
3726  .block-editor-url-popover__additional-controls .components-button.has-icon {
3727    padding-right: 8px;
3728    padding-left: 8px;
3729    height: auto;
3730    text-align: right;
3731  }
3732  .block-editor-url-popover__additional-controls .components-button.has-icon > svg {
3733    margin-left: 8px;
3734  }
3735  
3736  .block-editor-url-popover__settings-toggle {
3737    flex-shrink: 0;
3738  }
3739  .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
3740    transform: rotate(-180deg);
3741  }
3742  
3743  .block-editor-url-popover__settings {
3744    display: block;
3745    padding: 16px;
3746    border-top: 1px solid #1e1e1e;
3747  }
3748  
3749  .block-editor-url-popover__link-container-content {
3750    display: flex;
3751    align-items: center;
3752  }
3753  
3754  .block-editor-url-popover__link-editor,
3755  .block-editor-url-popover__link-viewer {
3756    display: flex;
3757  }
3758  
3759  .block-editor-url-popover__link-viewer-url {
3760    display: flex;
3761    align-items: center;
3762    flex-grow: 1;
3763    flex-shrink: 1;
3764    overflow: hidden;
3765    text-overflow: ellipsis;
3766    white-space: nowrap;
3767    margin-left: 8px;
3768    min-width: 150px;
3769    max-width: 350px;
3770  }
3771  .block-editor-url-popover__link-viewer-url.has-invalid-link {
3772    color: #cc1818;
3773  }
3774  
3775  .block-editor-url-popover__expand-on-click {
3776    display: flex;
3777    align-items: center;
3778    min-width: 350px;
3779    white-space: nowrap;
3780  }
3781  .block-editor-url-popover__expand-on-click .text {
3782    flex-grow: 1;
3783  }
3784  .block-editor-url-popover__expand-on-click .text p {
3785    margin: 0;
3786    line-height: 16px;
3787  }
3788  .block-editor-url-popover__expand-on-click .text p.description {
3789    color: #757575;
3790    font-size: 12px;
3791  }
3792  
3793  .background-block-support-panel {
3794    /* Increased specificity required to remove the slot wrapper's row gap */
3795  }
3796  .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3797    row-gap: 0;
3798  }
3799  .background-block-support-panel.background-block-support-panel .block-editor-background-panel__clip-item:not(.first) {
3800    margin-top: 16px;
3801  }
3802  .background-block-support-panel.background-block-support-panel .block-editor-background-panel__clips-to-text-notice {
3803    grid-column: 1/-1;
3804    margin-top: 16px;
3805  }
3806  
3807  .block-editor-hooks__block-hooks {
3808    /**
3809     * Un-reverse the flex direction for the toggle's label.
3810     */
3811  }
3812  .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
3813    flex-direction: row;
3814  }
3815  .block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
3816    color: #757575;
3817    font-size: 12px;
3818    margin-bottom: 16px;
3819  }
3820  
3821  div.block-editor-bindings__panel {
3822    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3823  }
3824  div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
3825    color: inherit;
3826  }
3827  
3828  .border-block-support-panel .single-column {
3829    grid-column: span 1;
3830  }
3831  
3832  .color-block-support-panel .block-editor-contrast-checker {
3833    grid-column: span 2;
3834    margin-top: 16px;
3835  }
3836  .color-block-support-panel {
3837    /* Increased specificity required to remove the slot wrapper's row gap */
3838  }
3839  .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3840    row-gap: 0;
3841  }
3842  
3843  .elements-block-support-panel {
3844    /* Increased specificity required to remove the slot wrapper's row gap */
3845  }
3846  .elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3847    row-gap: 0;
3848  }
3849  
3850  .dimensions-block-support-panel .single-column {
3851    grid-column: span 1;
3852  }
3853  
3854  .block-editor-hooks__layout-constrained .components-base-control {
3855    margin-bottom: 0;
3856  }
3857  
3858  .block-editor-hooks__layout-constrained-helptext {
3859    color: #757575;
3860    font-size: 12px;
3861    margin-bottom: 0;
3862  }
3863  
3864  .layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3865    grid-column: 1/-1;
3866  }
3867  
3868  .block-editor-hooks__flex-layout-justification-controls,
3869  .block-editor-hooks__flex-layout-orientation-controls {
3870    margin-bottom: 12px;
3871  }
3872  .block-editor-hooks__flex-layout-justification-controls legend,
3873  .block-editor-hooks__flex-layout-orientation-controls legend {
3874    margin-bottom: 8px;
3875  }
3876  
3877  .block-editor-hooks__grid-layout-columns-and-rows-controls,
3878  .block-editor-hooks__grid-layout-minimum-width-control {
3879    border: 0;
3880    padding: 0;
3881    margin: 0;
3882  }
3883  
3884  .block-editor__spacing-visualizer {
3885    position: absolute;
3886    top: 0;
3887    bottom: 0;
3888    right: 0;
3889    left: 0;
3890    opacity: 0.5;
3891    border-color: var(--wp-admin-theme-color);
3892    border-style: solid;
3893    pointer-events: none;
3894    box-sizing: border-box;
3895  }
3896  
3897  .typography-block-support-panel .single-column {
3898    grid-column: span 1;
3899  }
3900  
3901  .typography-block-support-panel .block-editor-color-gradient-item + .block-editor-color-gradient-item,
3902  .block-editor-typography-panel--flush-color-items .block-editor-color-gradient-item + .block-editor-color-gradient-item {
3903    margin-top: -16px;
3904  }
3905  .typography-block-support-panel .block-editor-typography-panel__text-gradient-notice,
3906  .block-editor-typography-panel--flush-color-items .block-editor-typography-panel__text-gradient-notice {
3907    grid-column: 1/-1;
3908  }
3909  
3910  /**
3911   * Block Toolbar
3912   */
3913  .block-editor-block-toolbar {
3914    display: flex;
3915    flex-grow: 1;
3916    width: 100%;
3917    position: relative;
3918    overflow-y: hidden;
3919    overflow-x: auto;
3920  }
3921  @media not (prefers-reduced-motion) {
3922    .block-editor-block-toolbar {
3923      transition: border-color 0.1s linear, box-shadow 0.1s linear;
3924    }
3925  }
3926  @media (min-width: 600px) {
3927    .block-editor-block-toolbar {
3928      overflow: inherit;
3929    }
3930  }
3931  .block-editor-block-toolbar .components-toolbar-group,
3932  .block-editor-block-toolbar .components-toolbar {
3933    background: none;
3934    margin-top: -1px;
3935    margin-bottom: -1px;
3936    border: 0;
3937    border-left: 1px solid #ddd;
3938  }
3939  .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
3940    background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
3941    border-radius: 2px;
3942  }
3943  .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
3944    color: #1e1e1e;
3945  }
3946  .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
3947    color: #1e1e1e;
3948  }
3949  .is-placeholder .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true], .is-placeholder .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
3950    color: #949494;
3951  }
3952  .block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
3953    color: var(--wp-block-synced-color);
3954  }
3955  .block-editor-block-toolbar > :last-child,
3956  .block-editor-block-toolbar > :last-child .components-toolbar-group,
3957  .block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
3958    border-left: none;
3959  }
3960  .block-editor-block-toolbar .components-toolbar-group:empty {
3961    display: none;
3962  }
3963  
3964  .block-editor-block-contextual-toolbar {
3965    position: sticky;
3966    top: 0;
3967    z-index: 31;
3968    display: block;
3969    width: 100%;
3970    background-color: #fff;
3971    flex-shrink: 3;
3972  }
3973  .block-editor-block-contextual-toolbar.components-accessible-toolbar {
3974    border: none;
3975    border-radius: 0;
3976  }
3977  .block-editor-block-contextual-toolbar.is-unstyled {
3978    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
3979  }
3980  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3981    overflow: auto;
3982    overflow-y: hidden;
3983  }
3984  .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
3985    width: 12px;
3986    height: 12px;
3987  }
3988  .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
3989    background-color: transparent;
3990  }
3991  .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
3992    background-color: #e0e0e0;
3993    border-radius: 8px;
3994    border: 3px solid transparent;
3995    background-clip: padding-box;
3996  }
3997  .block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within::-webkit-scrollbar-thumb {
3998    background-color: #949494;
3999  }
4000  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
4001    scrollbar-width: thin;
4002    scrollbar-gutter: stable both-edges;
4003    scrollbar-color: #e0e0e0 transparent;
4004  }
4005  .block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within {
4006    scrollbar-color: #949494 transparent;
4007  }
4008  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
4009    will-change: transform;
4010  }
4011  @media (hover: none) {
4012    .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
4013      scrollbar-color: #949494 transparent;
4014    }
4015  }
4016  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
4017    scrollbar-gutter: auto;
4018  }
4019  .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
4020  .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
4021  .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
4022    display: none;
4023  }
4024  .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
4025    flex-grow: initial;
4026    width: initial;
4027  }
4028  .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
4029    position: relative;
4030    margin-top: -1px;
4031    margin-bottom: -1px;
4032  }
4033  .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
4034    align-items: center;
4035    background-color: #1e1e1e;
4036    border-radius: 100%;
4037    content: "";
4038    display: inline-flex;
4039    height: 2px;
4040    position: absolute;
4041    top: 15px;
4042    width: 2px;
4043  }
4044  
4045  .block-editor-block-toolbar__block-controls .components-toolbar-group {
4046    padding: 0;
4047  }
4048  
4049  .block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
4050    min-width: 260px;
4051    padding: 16px;
4052  }
4053  
4054  .block-editor-block-toolbar .components-toolbar-group,
4055  .block-editor-block-toolbar .components-toolbar,
4056  .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
4057  .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
4058    display: flex;
4059    flex-wrap: nowrap;
4060  }
4061  
4062  .block-editor-block-toolbar__slot {
4063    display: inline-flex;
4064  }
4065  
4066  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) {
4067    background-color: transparent;
4068    border: none;
4069  }
4070  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar {
4071    flex-wrap: wrap;
4072    overflow: visible;
4073    max-width: 100%;
4074  }
4075  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-toolbar__slot {
4076    flex-wrap: wrap;
4077  }
4078  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar-group {
4079    background-color: #fff;
4080  }
4081  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar-group,
4082  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar,
4083  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector:not(:has(.components-toolbar-group)) {
4084    border: 1px solid #1e1e1e;
4085    margin: 0 0 -1px -1px;
4086    padding: 0;
4087  }
4088  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar-group .components-toolbar-group,
4089  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar .components-toolbar-group,
4090  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector:not(:has(.components-toolbar-group)) .components-toolbar-group {
4091    border: none;
4092    margin: 0;
4093  }
4094  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar-group .components-toolbar-group + .components-toolbar-group,
4095  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .components-toolbar .components-toolbar-group + .components-toolbar-group,
4096  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector:not(:has(.components-toolbar-group)) .components-toolbar-group + .components-toolbar-group {
4097    border-right: 1px solid #1e1e1e;
4098  }
4099  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector,
4100  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector__button {
4101    border: none;
4102    margin: 0;
4103  }
4104  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector .components-toolbar-group:last-child,
4105  .show-icon-labels .block-editor-block-contextual-toolbar:not(.editor-header__toolbar *) .block-editor-block-toolbar .block-editor-block-parent-selector__button .components-toolbar-group:last-child {
4106    border-left: 1px solid #1e1e1e;
4107  }
4108  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) {
4109    width: auto;
4110  }
4111  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) svg {
4112    display: none;
4113  }
4114  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text))::after {
4115    content: attr(aria-label);
4116    font-size: 12px;
4117  }
4118  .show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
4119    width: 0 !important;
4120    height: 0 !important;
4121    min-width: 0 !important;
4122  }
4123  .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
4124    padding-right: 6px;
4125    padding-left: 6px;
4126  }
4127  .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
4128    border-top-left-radius: 0;
4129    border-bottom-left-radius: 0;
4130    padding-right: 12px;
4131    padding-left: 12px;
4132    text-wrap: nowrap;
4133  }
4134  .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button .block-editor-block-icon {
4135    width: 0;
4136  }
4137  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
4138    width: auto;
4139    position: relative;
4140  }
4141  @media (min-width: 600px) {
4142    .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
4143      content: "";
4144      height: 1px;
4145      width: 100%;
4146      background: #e0e0e0;
4147      position: absolute;
4148      top: 50%;
4149      right: 50%;
4150      transform: translate(50%, 0);
4151      margin-top: -0.5px;
4152    }
4153  }
4154  @media (min-width: 782px) {
4155    .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
4156      background: #1e1e1e;
4157    }
4158  }
4159  .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
4160  .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
4161    padding-right: 6px;
4162    padding-left: 6px;
4163  }
4164  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
4165    padding-right: 8px;
4166    padding-left: 8px;
4167  }
4168  .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
4169    border-right: 1px solid #ddd;
4170    margin-right: 6px;
4171    margin-left: -6px;
4172    white-space: nowrap;
4173  }
4174  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
4175    padding-right: 12px;
4176    padding-left: 12px;
4177  }
4178  .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
4179    width: auto;
4180  }
4181  .show-icon-labels .components-toolbar,
4182  .show-icon-labels .components-toolbar-group {
4183    flex-shrink: 1;
4184  }
4185  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
4186    margin-right: 6px;
4187  }
4188  
4189  .block-editor-block-toolbar-change-design-content-wrapper {
4190    padding: 12px;
4191    width: 320px;
4192  }
4193  .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
4194    display: grid;
4195    grid-template-columns: 1fr 1fr;
4196    gap: 12px;
4197  }
4198  .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4199    margin-bottom: 0;
4200  }
4201  
4202  .block-editor-inserter__tip kbd {
4203    padding: 0 4px;
4204    border: 1px solid var(--wpds-color-stroke-surface-neutral-strong, #8d8d8d);
4205    border-radius: var(--wpds-border-radius-xs, 1px);
4206    font-family: var(--wpds-typography-font-family-mono, "Menlo", "Consolas", monaco, monospace);
4207    white-space: nowrap;
4208  }
4209  
4210  .block-editor-inserter {
4211    display: inline-block;
4212    background: none;
4213    border: none;
4214    padding: 0;
4215    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4216    font-size: 13px;
4217    line-height: 0;
4218  }
4219  @media (min-width: 782px) {
4220    .block-editor-inserter {
4221      position: relative;
4222    }
4223  }
4224  
4225  .block-editor-inserter__main-area {
4226    height: 100%;
4227    gap: 16px;
4228    position: relative;
4229  }
4230  .block-editor-inserter__main-area.show-as-tabs {
4231    gap: 0;
4232  }
4233  @media (min-width: 782px) {
4234    .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
4235      width: 350px;
4236    }
4237  }
4238  
4239  .block-editor-inserter__popover.is-quick .components-popover__content {
4240    border: none;
4241    outline: none;
4242    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);
4243  }
4244  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
4245    border-right: 1px solid #ccc;
4246    border-left: 1px solid #ccc;
4247  }
4248  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
4249    border-top: 1px solid #ccc;
4250    border-radius: 4px 4px 0 0;
4251  }
4252  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
4253    border-bottom: 1px solid #ccc;
4254    border-radius: 0 0 4px 4px;
4255  }
4256  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
4257    border: 1px solid #1e1e1e;
4258  }
4259  
4260  .block-editor-inserter__popover .block-editor-inserter__menu {
4261    margin: -12px;
4262  }
4263  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tablist {
4264    top: 60px;
4265  }
4266  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
4267    overflow: visible;
4268    height: auto;
4269  }
4270  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
4271    display: none;
4272  }
4273  
4274  .block-editor-inserter__toggle.components-button {
4275    display: inline-flex;
4276    align-items: center;
4277    cursor: var(--wpds-cursor-control, pointer);
4278    border: none;
4279    padding: 0;
4280  }
4281  @media not (prefers-reduced-motion) {
4282    .block-editor-inserter__toggle.components-button {
4283      transition: color 0.2s ease;
4284    }
4285  }
4286  
4287  .block-editor-inserter__menu {
4288    height: 100%;
4289    position: relative;
4290    overflow: visible;
4291  }
4292  @media (min-width: 782px) {
4293    .block-editor-inserter__menu.show-panel {
4294      width: 630px;
4295    }
4296  }
4297  
4298  .block-editor-inserter__inline-elements {
4299    margin-top: -1px;
4300  }
4301  
4302  .block-editor-inserter__menu.is-bottom::after {
4303    border-bottom-color: #fff;
4304  }
4305  
4306  .components-popover.block-editor-inserter__popover {
4307    z-index: 99999;
4308  }
4309  
4310  .block-editor-inserter__search {
4311    padding: 16px;
4312    position: sticky;
4313    top: 0;
4314    z-index: 2;
4315    background-color: #fff;
4316    border-bottom: 1px solid transparent;
4317  }
4318  @media not (prefers-reduced-motion) {
4319    .block-editor-inserter__search {
4320      transition: border-bottom-color 0.1s linear;
4321    }
4322  }
4323  .block-editor-inserter__search.is-scrolled {
4324    border-bottom-color: #e0e0e0;
4325  }
4326  
4327  .block-editor-inserter__no-tab-container {
4328    overflow-y: auto;
4329    flex-grow: 1;
4330    position: relative;
4331  }
4332  
4333  .block-editor-inserter__panel-header {
4334    position: relative;
4335    display: inline-flex;
4336    align-items: center;
4337    padding: 0 16px;
4338  }
4339  
4340  .block-editor-inserter__panel-content {
4341    padding: 16px;
4342  }
4343  
4344  .block-editor-inserter__panel-title,
4345  .block-editor-inserter__panel-title button {
4346    margin: 0 0 0 12px;
4347    color: #757575;
4348    text-transform: uppercase;
4349    font-size: 11px;
4350    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4351  }
4352  
4353  .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4354    height: 36px;
4355    line-height: 36px;
4356  }
4357  
4358  .block-editor-inserter__panel-dropdown select {
4359    border: none;
4360  }
4361  
4362  .block-editor-inserter__reusable-blocks-panel {
4363    position: relative;
4364    text-align: left;
4365  }
4366  
4367  .block-editor-inserter__no-results,
4368  .block-editor-inserter__patterns-loading {
4369    padding: 32px;
4370    text-align: center;
4371  }
4372  
4373  .block-editor-inserter__child-blocks {
4374    padding: 0 16px;
4375  }
4376  
4377  .block-editor-inserter__parent-block-header {
4378    display: flex;
4379    align-items: center;
4380  }
4381  .block-editor-inserter__parent-block-header h2 {
4382    font-size: 13px;
4383  }
4384  .block-editor-inserter__parent-block-header .block-editor-block-icon {
4385    margin-left: 8px;
4386  }
4387  
4388  .block-editor-inserter__preview-container {
4389    display: none;
4390    width: 280px;
4391    padding: 16px;
4392    max-height: calc(100% - 32px);
4393    overflow-y: hidden;
4394  }
4395  @media (min-width: 782px) {
4396    .block-editor-inserter__preview-container {
4397      display: block;
4398    }
4399  }
4400  .block-editor-inserter__preview-container .block-editor-block-card {
4401    padding-right: 0;
4402    padding-left: 0;
4403    padding-bottom: 4px;
4404  }
4405  
4406  .block-editor-inserter__insertable-blocks-at-selection:not(:empty) + .block-editor-inserter__all-blocks:not(:empty) {
4407    border-top: 1px solid #e0e0e0;
4408  }
4409  
4410  .block-editor-inserter__block-patterns-tabs-container {
4411    flex-grow: 1;
4412    padding: 0 16px 16px;
4413    display: flex;
4414    flex-direction: column;
4415    justify-content: space-between;
4416  }
4417  
4418  .block-editor-inserter__category-tablist {
4419    margin-bottom: 8px;
4420  }
4421  
4422  .block-editor-inserter__category-panel {
4423    outline: 1px solid transparent;
4424    display: flex;
4425    flex-direction: column;
4426    padding: 0 16px;
4427  }
4428  @media (min-width: 782px) {
4429    .block-editor-inserter__category-panel {
4430      border-right: 1px solid #e0e0e0;
4431      padding: 0;
4432      right: 350px;
4433      width: 280px;
4434      position: absolute;
4435      top: -1px;
4436      height: calc(100% + 1px);
4437      background: #f0f0f0;
4438      border-top: 1px solid #e0e0e0;
4439    }
4440    .block-editor-inserter__category-panel .block-editor-block-patterns-list {
4441      padding: 0 24px 16px;
4442    }
4443  }
4444  
4445  .block-editor-inserter__patterns-category-panel-header {
4446    padding: 8px 0;
4447  }
4448  @media (min-width: 782px) {
4449    .block-editor-inserter__patterns-category-panel-header {
4450      padding: 8px 24px;
4451    }
4452  }
4453  
4454  .block-editor-inserter__patterns-category-no-results {
4455    margin-top: 24px;
4456  }
4457  
4458  .block-editor-inserter__patterns-filter-help {
4459    padding: 16px;
4460    border-top: 1px solid #ddd;
4461    color: #757575;
4462    min-width: 280px;
4463  }
4464  
4465  .block-editor-block-patterns-list {
4466    overflow-y: auto;
4467    flex-grow: 1;
4468    height: 100%;
4469  }
4470  
4471  .block-editor-inserter__preview-content {
4472    background: #f0f0f0;
4473    display: grid;
4474    flex-grow: 1;
4475    align-items: center;
4476  }
4477  
4478  .block-editor-inserter__preview-content-missing {
4479    flex: 1;
4480    display: flex;
4481    justify-content: center;
4482    align-items: center;
4483    min-height: 144px;
4484    color: #757575;
4485    background: #f0f0f0;
4486    border-radius: 2px;
4487  }
4488  
4489  .block-editor-inserter__tips {
4490    border-top: 1px solid #ddd;
4491    padding: 16px;
4492    flex-shrink: 0;
4493    position: relative;
4494  }
4495  
4496  .block-editor-inserter__quick-inserter {
4497    width: 100%;
4498    max-width: 100%;
4499  }
4500  @media (min-width: 782px) {
4501    .block-editor-inserter__quick-inserter {
4502      width: 350px;
4503    }
4504  }
4505  
4506  .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
4507    height: 0;
4508    padding: 0;
4509    float: right;
4510  }
4511  
4512  .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
4513  .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
4514    padding: 16px;
4515  }
4516  
4517  .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4518    display: grid;
4519    grid-template-columns: 1fr 1fr;
4520    gap: 8px;
4521  }
4522  .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4523    margin-bottom: 0;
4524  }
4525  
4526  .block-editor-inserter__quick-inserter-separator {
4527    border-top: 1px solid #ddd;
4528  }
4529  
4530  .block-editor-inserter__popover.is-quick > .components-popover__content {
4531    padding: 0;
4532  }
4533  
4534  .block-editor-inserter__quick-inserter-expand {
4535    padding: 0 16px 16px;
4536  }
4537  
4538  .block-editor-inserter__quick-inserter-expand-toggle {
4539    width: 100%;
4540    justify-content: center;
4541  }
4542  
4543  .block-editor-block-patterns-explorer__sidebar {
4544    padding-bottom: 24px;
4545  }
4546  @media (min-width: 782px) {
4547    .block-editor-block-patterns-explorer__sidebar {
4548      position: absolute;
4549      top: 72px;
4550      right: 0;
4551      bottom: 0;
4552      width: 280px;
4553      padding: 24px;
4554      overflow-x: visible;
4555      overflow-y: auto;
4556    }
4557  }
4558  
4559  @media (min-width: 782px) {
4560    .block-editor-block-patterns-explorer__panel {
4561      margin-inline-start: 280px;
4562    }
4563  }
4564  
4565  .block-editor-block-patterns-explorer__no-results {
4566    padding: 32px;
4567    text-align: center;
4568  }
4569  
4570  .block-editor-block-patterns-explorer__list {
4571    padding: 24px 0 32px;
4572  }
4573  .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4574    width: 380px;
4575  }
4576  
4577  .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4578    display: grid;
4579    gap: 32px;
4580    grid-template-columns: repeat(1, 1fr);
4581    margin-bottom: 16px;
4582  }
4583  @media (min-width: 1080px) {
4584    .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4585      grid-template-columns: repeat(2, 1fr);
4586    }
4587  }
4588  @media (min-width: 1440px) {
4589    .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4590      grid-template-columns: repeat(3, 1fr);
4591    }
4592  }
4593  .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4594    min-height: 240px;
4595  }
4596  
4597  .components-heading.block-editor-inserter__patterns-category-panel-title {
4598    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4599  }
4600  
4601  .block-editor-inserter__patterns-explore-button.components-button {
4602    padding: 16px;
4603    justify-content: center;
4604    margin-top: 16px;
4605    width: 100%;
4606  }
4607  
4608  .block-editor-inserter__media-panel {
4609    display: flex;
4610    flex-direction: column;
4611    flex: 1 0 auto;
4612    min-height: 320px;
4613  }
4614  .block-editor-inserter__media-panel .dataviews-wrapper {
4615    background-color: transparent;
4616  }
4617  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__search {
4618    flex-shrink: 0;
4619    padding: 16px;
4620  }
4621  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__search:has(+ .block-editor-inserter__media-grid__tabs) {
4622    padding-bottom: 0;
4623  }
4624  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__search .block-editor-inserter__media-grid__search-control {
4625    flex: 1;
4626    min-width: 0;
4627  }
4628  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__tabs {
4629    display: flex;
4630    flex-direction: column;
4631    flex: 1;
4632    min-height: 0;
4633  }
4634  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__tablist {
4635    flex-shrink: 0;
4636    padding: 0 16px;
4637    margin-bottom: 12px;
4638  }
4639  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__tabs [role=tabpanel] {
4640    display: flex;
4641    flex-direction: column;
4642    flex: 1;
4643    min-height: 0;
4644  }
4645  .block-editor-inserter__media-panel .dataviews-view-grid {
4646    padding: 0 16px 16px;
4647  }
4648  .block-editor-inserter__media-panel .dataviews-no-results,
4649  .block-editor-inserter__media-panel .dataviews-loading {
4650    padding: 0 16px;
4651  }
4652  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__loading {
4653    display: flex;
4654    align-items: center;
4655    justify-content: center;
4656    width: 100%;
4657  }
4658  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__loading.is-replacing-results {
4659    min-height: 500px;
4660  }
4661  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__footer {
4662    flex-shrink: 0;
4663    border-top: 1px solid #e0e0e0;
4664    padding: 16px;
4665  }
4666  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__range {
4667    color: #757575;
4668    font-size: 12px;
4669    white-space: nowrap;
4670  }
4671  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__preview {
4672    position: relative;
4673    width: 100%;
4674    height: 100%;
4675  }
4676  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__preview img,
4677  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__preview video {
4678    display: block;
4679    width: 100%;
4680    height: 100%;
4681    object-fit: contain;
4682  }
4683  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__file-preview {
4684    box-sizing: border-box;
4685    width: 100%;
4686    height: 100%;
4687    padding: 0 16px;
4688    color: #757575;
4689    text-align: center;
4690    container-type: inline-size;
4691  }
4692  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__file-preview__name {
4693    margin-top: 4px;
4694    max-width: 100%;
4695    overflow: hidden;
4696    text-overflow: ellipsis;
4697    white-space: nowrap;
4698    font-size: 12px;
4699  }
4700  @container (max-width: 90px) {
4701    .block-editor-inserter__media-panel .block-editor-inserter__media-grid__file-preview__name {
4702      display: none;
4703    }
4704  }
4705  .block-editor-inserter__media-panel .block-editor-inserter__media-grid__spinner {
4706    position: absolute;
4707    inset: 0;
4708    display: flex;
4709    align-items: center;
4710    justify-content: center;
4711    background-color: rgba(255, 255, 255, 0.6);
4712  }
4713  .block-editor-inserter__media-panel .block-editor-inserter__media-library-button.components-button {
4714    justify-content: center;
4715    padding: 16px;
4716  }
4717  
4718  .block-editor-inserter__media-panel-detach-actions {
4719    display: flex;
4720    justify-content: flex-end;
4721    gap: 8px;
4722    margin-top: 16px;
4723  }
4724  
4725  .block-editor-inserter__mobile-tab-navigation {
4726    padding: 16px;
4727    height: 100%;
4728  }
4729  .block-editor-inserter__mobile-tab-navigation > * {
4730    height: 100%;
4731  }
4732  
4733  @media (min-width: 600px) {
4734    .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
4735      max-width: 480px;
4736    }
4737  }
4738  .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
4739    margin: 0;
4740  }
4741  
4742  .block-editor-inserter__hint {
4743    margin: 16px 16px 0;
4744  }
4745  
4746  .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
4747    height: 40px;
4748  }
4749  
4750  .block-editor-inserter__pattern-panel-placeholder {
4751    display: none;
4752  }
4753  
4754  .block-editor-inserter__menu.is-zoom-out {
4755    display: flex;
4756  }
4757  @media (min-width: 782px) {
4758    .block-editor-inserter__menu.is-zoom-out.show-panel::after {
4759      content: "";
4760      display: block;
4761      width: 300px;
4762      height: 100%;
4763    }
4764  }
4765  
4766  @media (max-width: 959px) {
4767    .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
4768      flex-direction: column;
4769    }
4770    .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4771    .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4772      flex-direction: column;
4773    }
4774  }
4775  .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
4776    flex-direction: column;
4777  }
4778  .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4779  .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4780    flex-direction: column;
4781  }
4782  
4783  .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4784    display: none;
4785    padding: 0 24px 16px;
4786  }
4787  @media (min-width: 480px) {
4788    .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4789      display: block;
4790    }
4791  }
4792  
4793  .spacing-sizes-control {
4794    border: 0;
4795    padding: 0;
4796    margin: 0;
4797  }
4798  .spacing-sizes-control .spacing-sizes-control__unit-control,
4799  .spacing-sizes-control .spacing-sizes-control__label {
4800    margin-bottom: 0;
4801  }
4802  .spacing-sizes-control .spacing-sizes-control__preset-range,
4803  .spacing-sizes-control .spacing-sizes-control__custom-value-range {
4804    flex: 1;
4805    margin-bottom: 0;
4806  }
4807  
4808  .spacing-sizes-control__header {
4809    height: 16px;
4810    margin-bottom: 12px;
4811  }
4812  
4813  .spacing-sizes-control__wrapper {
4814    align-items: center;
4815  }
4816  
4817  .spacing-sizes-control__dropdown {
4818    height: 24px;
4819  }
4820  
4821  .spacing-sizes-control__wrapper .preset-input-control__icon {
4822    margin-right: -4px;
4823  }
4824  
4825  .block-editor-block-visibility-modal {
4826    z-index: 1000001;
4827  }
4828  .block-editor-block-visibility-modal__options {
4829    border: 0;
4830    padding: 0;
4831    list-style: none;
4832    margin: 24px 0;
4833  }
4834  .block-editor-block-visibility-modal__options-item {
4835    display: flex;
4836    align-items: center;
4837    justify-content: space-between;
4838    margin: 0 0 16px 0;
4839    gap: 24px;
4840  }
4841  .block-editor-block-visibility-modal__options-item:last-child {
4842    margin: 0;
4843  }
4844  .block-editor-block-visibility-modal__options-item--everywhere {
4845    flex-direction: column;
4846    align-items: start;
4847  }
4848  .block-editor-block-visibility-modal__options-checkbox--everywhere {
4849    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4850  }
4851  .block-editor-block-visibility-modal__options-icon--checked {
4852    color: #ddd;
4853  }
4854  .block-editor-block-visibility-modal__sub-options {
4855    width: 100%;
4856    padding-inline-start: 12px;
4857  }
4858  .block-editor-block-visibility-modal__description {
4859    font-size: 12px;
4860    color: #757575;
4861  }
4862  
4863  .block-editor-block-visibility-info {
4864    margin: 0 16px 16px;
4865  }
4866  
4867  /* The stop element is invisible, so its focus indication is drawn around the
4868     canvas it stands for. For the iframed canvas it is an overlay instead of
4869     an outline, because Safari paints an outline on an iframe element
4870     underneath the iframe's content. */
4871  .block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4872    content: "";
4873    position: absolute;
4874    inset: 0;
4875    z-index: 1;
4876    pointer-events: none;
4877    border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4878  }
4879  
4880  .block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4881    outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4882    outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4883  }
4884  
4885  /* Looks like a tooltip. Shown at the top of the canvas while the stop is
4886     focused. Sticky, because on the widgets screen the stop spans scrolling
4887     content and the hint must stay in view; anywhere else there is nothing
4888     to scroll and it stays at the top of the canvas. */
4889  .block-editor-writing-flow__canvas-stop-hint {
4890    display: none;
4891    position: sticky;
4892    top: 16px;
4893    margin-inline: auto;
4894    width: fit-content;
4895    z-index: 2;
4896    background: #000;
4897    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4898    border-radius: 4px;
4899    color: #f0f0f0;
4900    text-align: center;
4901    line-height: 1.4;
4902    font-size: 12px;
4903    padding: 4px 8px;
4904    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);
4905    white-space: nowrap;
4906    pointer-events: none;
4907  }
4908  
4909  .block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4910    display: block;
4911  }