[Summary view] [Print] [Text view]

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