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