[Summary view] [Print] [Text view]

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