[Summary view] [Print] [Text view]

   1  /**
   2   * Typography
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Colors
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Standard focus rings for the WordPress Design System.
  72   *
  73   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  74   * e.g. `&:focus { @include outset-ring__focus(); }`.
  75   */
  76  /**
  77   * Applies editor left position to the selector passed as argument
  78   */
  79  /**
  80   * Styles that are reused verbatim in a few places
  81   */
  82  /**
  83   * Allows users to opt-out of animations via OS-level preferences.
  84   */
  85  /**
  86   * Reset default styles for JavaScript UI based pages.
  87   * This is a WP-admin agnostic reset
  88   */
  89  /**
  90   * Reset the WP Admin page styles for Gutenberg-like pages.
  91   */
  92  /**
  93   * Creates a checkerboard pattern background to indicate transparency.
  94   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  95   */
  96  :root {
  97    --wp-block-synced-color: #7a00df;
  98    --wp-block-synced-color--rgb: 122, 0, 223;
  99    --wp-bound-block-color: var(--wp-block-synced-color);
 100    --wp-editor-canvas-background: #ddd;
 101    --wp-admin-theme-color: #007cba;
 102    --wp-admin-theme-color--rgb: 0, 124, 186;
 103    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
 104    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
 105    --wp-admin-theme-color-darker-20: #005a87;
 106    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
 107    --wp-admin-border-width-focus: 2px;
 108  }
 109  @media (min-resolution: 192dpi) {
 110    :root {
 111      --wp-admin-border-width-focus: 1.5px;
 112    }
 113  }
 114  
 115  .block-editor-autocompleters__block {
 116    white-space: nowrap;
 117  }
 118  .block-editor-autocompleters__block .block-editor-block-icon {
 119    margin-right: 8px;
 120  }
 121  .block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
 122    color: inherit !important;
 123  }
 124  
 125  .block-editor-global-styles-background-panel__inspector-media-replace-container {
 126    position: relative;
 127  }
 128  .block-editor-global-styles-background-panel__inspector-media-replace-container.is-open {
 129    background-color: #f0f0f0;
 130  }
 131  .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item {
 132    flex-grow: 1;
 133    border: 0;
 134  }
 135  .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
 136    display: block;
 137  }
 138  .block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner {
 139    height: 100%;
 140  }
 141  .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown {
 142    display: block;
 143  }
 144  .block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown .block-editor-global-styles-background-panel__dropdown-toggle {
 145    height: 40px;
 146  }
 147  
 148  .block-editor-global-styles-background-panel__image-tools-panel-item {
 149    border: 1px solid #ddd;
 150    grid-column: 1/-1;
 151    position: relative;
 152  }
 153  .block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon {
 154    display: none;
 155  }
 156  .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown {
 157    display: block;
 158  }
 159  .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button {
 160    color: #1e1e1e;
 161    width: 100%;
 162    display: block;
 163  }
 164  .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
 165    color: var(--wp-admin-theme-color);
 166  }
 167  .block-editor-global-styles-background-panel__image-tools-panel-item .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-left: 12px;
 185    padding-right: 32px;
 186  }
 187  
 188  .block-editor-global-styles-background-panel__reset {
 189    position: absolute;
 190    right: 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-left: 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    left: 0;
 367    right: 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    left: 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    left: 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    right: 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-left: 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-left: 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-right-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    left: 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-right: 6px;
 507    padding-left: 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-right: 12px;
 512    padding-left: 12px;
 513  }
 514  .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
 515    position: relative;
 516    left: auto;
 517    margin-left: -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-left: 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    left: 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 0 12px 32px;
 575  }
 576  .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
 577    flex-shrink: 0;
 578    margin-right: 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-left: -6px !important;
 602  }
 603  
 604  .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
 605    border-left: 1px solid #1e1e1e;
 606    margin-left: 6px !important;
 607    margin-right: -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    left: 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-left: -4px;
 647    margin-right: -4px;
 648    transform: scaleX(1) /*rtl: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-left: 0;
 704    margin-right: 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 16px 0 0;
 730    min-width: 200px;
 731    max-width: 600px;
 732  }
 733  .block-editor-block-compare__wrapper > div button {
 734    float: right;
 735  }
 736  .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
 737    border-left: 1px solid #ddd;
 738    padding-left: 15px;
 739    padding-right: 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    left: 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-right: 6px;
 808  }
 809  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child {
 810    margin-right: 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    right: 0;
 826    left: 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 0 8px 16px;
 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-right: 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-left: 0;
 944      padding-right: 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      left: 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      right: 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-left: 0;
 965      padding-right: 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    left: 8px;
 979    right: 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: left;
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    left: 0;
1138    transform-origin: top left;
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    left: 0;
1154    right: 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    left: 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: left;
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-right: 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-left: 1px solid #ddd;
1561    border-right: 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-left-radius: 2px;
1566    border-top-right-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-left-radius: 2px;
1571    border-bottom-right-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: left;
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    right: 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    right: 28px;
1634  }
1635  
1636  .block-editor-panel-color-gradient-settings__contrast-warning {
1637    position: absolute;
1638    right: 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: right;
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    right: 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    /*rtl:ignore*/
1802    direction: ltr;
1803  }
1804  
1805  .block-editor-panel-duotone-settings__reset {
1806    position: absolute;
1807    right: 0;
1808    top: 8px;
1809    margin: auto 8px auto;
1810    opacity: 0;
1811  }
1812  @media not (prefers-reduced-motion) {
1813    .block-editor-panel-duotone-settings__reset {
1814      transition: opacity 0.1s ease-in-out;
1815    }
1816  }
1817  .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 {
1818    opacity: 1;
1819  }
1820  @media (hover: none) {
1821    .block-editor-panel-duotone-settings__reset {
1822      opacity: 1;
1823    }
1824  }
1825  
1826  .is-inherited-from-global-styles .components-base-control__label,
1827  .is-inherited-from-global-styles .components-input-control__label {
1828    text-decoration-line: underline;
1829    text-decoration-style: dotted;
1830    text-decoration-thickness: 1px;
1831    text-underline-offset: 0.2em;
1832  }
1833  .is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name,
1834  .is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title,
1835  .is-inherited-from-global-styles .block-editor-panel-duotone-settings__label {
1836    border-bottom: 1px dotted currentColor;
1837  }
1838  
1839  .has-local-override-from-global-styles {
1840    position: relative;
1841  }
1842  
1843  .global-styles-inheritance-affordance {
1844    position: absolute;
1845    inset-block-start: 0;
1846    inset-inline-end: 0;
1847    z-index: 1;
1848    display: flex;
1849    align-items: center;
1850    justify-content: center;
1851    pointer-events: none;
1852    height: 16px;
1853  }
1854  .global-styles-inheritance-affordance--offset-toggle {
1855    inset-inline-end: 32px;
1856  }
1857  .global-styles-inheritance-affordance .has-local-override-from-global-styles__reset {
1858    pointer-events: auto;
1859    margin-inline-start: 0 !important;
1860  }
1861  
1862  .has-local-override-from-global-styles__reset {
1863    display: inline-flex !important;
1864    align-items: center;
1865    justify-content: center;
1866    vertical-align: middle;
1867    position: relative;
1868    margin-inline-start: 6px;
1869    min-width: 14px !important;
1870    width: 14px !important;
1871    height: 14px !important;
1872    padding: 0 !important;
1873    border-radius: 50% !important;
1874    background: transparent !important;
1875    box-shadow: none !important;
1876    overflow: hidden;
1877    text-transform: none;
1878    letter-spacing: normal;
1879    cursor: var(--wpds-cursor-control, pointer);
1880  }
1881  .has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus {
1882    background: transparent !important;
1883  }
1884  .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 {
1885    display: none;
1886  }
1887  .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 {
1888    display: block;
1889  }
1890  .has-local-override-from-global-styles__reset:focus-visible {
1891    outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
1892    outline-offset: 1px;
1893  }
1894  .has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset {
1895    position: absolute;
1896    justify-content: center;
1897    top: 50%;
1898    transform: translateY(-50%);
1899    margin-block: 0;
1900    margin-inline-start: 0;
1901    opacity: 1;
1902  }
1903  .has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button {
1904    position: absolute;
1905    justify-content: center;
1906    inset-inline-end: 8px;
1907    top: 50%;
1908    transform: translateY(-50%);
1909    margin-block: 0;
1910    margin-inline-start: 0;
1911    opacity: 1;
1912  }
1913  .has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset {
1914    position: absolute;
1915    justify-content: center;
1916    inset-inline-end: 8px;
1917    top: 50%;
1918    transform: translateY(-50%);
1919    margin-block: 0;
1920    margin-inline-start: 0;
1921    opacity: 1;
1922  }
1923  
1924  .has-local-override-from-global-styles__dot {
1925    display: block;
1926    width: 8px;
1927    height: 8px;
1928    background-color: var(--wp-admin-theme-color, #007cba);
1929    border-radius: 50%;
1930  }
1931  
1932  .has-local-override-from-global-styles__reset-icon {
1933    display: none;
1934    position: absolute;
1935    top: 50%;
1936    left: 50%;
1937    transform: translate(-50%, -50%);
1938    color: var(--wp-admin-theme-color, #007cba);
1939  }
1940  
1941  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1942    z-index: 30;
1943  }
1944  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
1945    pointer-events: none;
1946  }
1947  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone {
1948    pointer-events: all;
1949  }
1950  .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter * {
1951    pointer-events: auto;
1952  }
1953  
1954  .block-editor-grid-visualizer__grid {
1955    display: grid;
1956    position: absolute;
1957  }
1958  
1959  .block-editor-grid-visualizer__cell {
1960    display: grid;
1961    position: relative;
1962  }
1963  .block-editor-grid-visualizer__cell .block-editor-inserter {
1964    color: inherit;
1965    z-index: 32;
1966    position: absolute;
1967    top: 0;
1968    bottom: 0;
1969    left: 0;
1970    right: 0;
1971    overflow: hidden;
1972  }
1973  .block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender {
1974    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
1975    color: inherit;
1976    overflow: hidden;
1977    height: 100%;
1978    width: 100%;
1979    padding: 0 !important;
1980    opacity: 0;
1981  }
1982  .block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter,
1983  .block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone {
1984    background: var(--wp-admin-theme-color);
1985  }
1986  .block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender,
1987  .block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus {
1988    opacity: 1;
1989    background-color: color-mix(in srgb, currentColor 20%, rgba(0, 0, 0, 0));
1990  }
1991  
1992  .block-editor-grid-visualizer__drop-zone {
1993    background: rgba(204, 204, 204, 0.1);
1994    width: 100%;
1995    height: 100%;
1996    grid-column: 1;
1997    grid-row: 1;
1998    min-width: 8px;
1999    min-height: 8px;
2000  }
2001  
2002  .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
2003    z-index: 30;
2004  }
2005  .block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content * {
2006    pointer-events: none;
2007  }
2008  
2009  .block-editor-grid-item-resizer__box {
2010    border: 1px solid var(--wp-admin-theme-color);
2011  }
2012  .block-editor-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle {
2013    pointer-events: all;
2014  }
2015  
2016  .block-editor-grid-item-mover__move-button-container {
2017    display: flex;
2018    padding: 0;
2019    border: none;
2020    justify-content: center;
2021  }
2022  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
2023    width: 24px;
2024    min-width: 0 !important;
2025    padding-left: 0;
2026    padding-right: 0;
2027  }
2028  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg {
2029    min-width: 24px;
2030  }
2031  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
2032    content: "";
2033    position: absolute;
2034    display: block;
2035    border-radius: 2px;
2036    height: 32px;
2037    left: 8px;
2038    right: 8px;
2039    z-index: -1;
2040  }
2041  @media not (prefers-reduced-motion) {
2042    .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button::before {
2043      animation: components-button__appear-animation 0.1s ease;
2044      animation-fill-mode: forwards;
2045    }
2046  }
2047  .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 {
2048    box-shadow: none;
2049    outline: none;
2050  }
2051  .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
2052    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2053    outline: 2px solid transparent;
2054  }
2055  
2056  .block-editor-grid-item-mover__move-vertical-button-container {
2057    display: flex;
2058    position: relative;
2059  }
2060  @media (min-width: 600px) {
2061    .block-editor-grid-item-mover__move-vertical-button-container {
2062      flex-direction: column;
2063      justify-content: space-around;
2064    }
2065    .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
2066      height: 20px !important;
2067      width: 100%;
2068      min-width: 0 !important;
2069    }
2070    .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button::before {
2071      height: calc(100% - 4px);
2072    }
2073    .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg,
2074    .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg {
2075      flex-shrink: 0;
2076      height: 20px;
2077    }
2078  }
2079  
2080  @media (min-width: 600px) {
2081    .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
2082      height: 40px;
2083      position: relative;
2084      top: -4px;
2085    }
2086  }
2087  
2088  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
2089    position: relative;
2090  }
2091  @media (min-width: 600px) {
2092    .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
2093      content: "";
2094      height: 100%;
2095      width: 1px;
2096      background: #e0e0e0;
2097      position: absolute;
2098      top: 0;
2099    }
2100  }
2101  @media (min-width: 782px) {
2102    .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
2103      background: #1e1e1e;
2104    }
2105  }
2106  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
2107    padding-right: 6px;
2108  }
2109  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
2110    right: 0;
2111  }
2112  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
2113    padding-left: 6px;
2114  }
2115  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
2116    left: 0;
2117  }
2118  @media (min-width: 600px) {
2119    .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
2120      content: "";
2121      height: 1px;
2122      width: 100%;
2123      background: #e0e0e0;
2124      position: absolute;
2125      top: 50%;
2126      left: 50%;
2127      transform: translate(-50%, 0);
2128      margin-top: -0.5px;
2129    }
2130  }
2131  @media (min-width: 782px) {
2132    .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
2133      background: #1e1e1e;
2134    }
2135  }
2136  .show-icon-labels .block-editor-grid-item-mover-button {
2137    white-space: nowrap;
2138  }
2139  .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
2140    height: 24px;
2141    background: #ddd;
2142    top: 4px;
2143  }
2144  .show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
2145    background: #ddd;
2146    width: calc(100% - 24px);
2147  }
2148  
2149  .block-editor-height-control {
2150    border: 0;
2151    margin: 0;
2152    padding: 0;
2153  }
2154  
2155  .block-editor-iframe__container {
2156    width: 100%;
2157    height: 100%;
2158  }
2159  
2160  .block-editor-iframe__scale-container {
2161    height: 100%;
2162  }
2163  
2164  .block-editor-iframe__scale-container.is-zoomed-out {
2165    width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
2166    position: absolute;
2167    right: 0;
2168  }
2169  
2170  .block-editor-block-types-list__list-item {
2171    display: block;
2172    width: 33.33%;
2173    padding: 0;
2174    margin: 0;
2175  }
2176  .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 {
2177    color: var(--wp-block-synced-color);
2178  }
2179  .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 {
2180    color: var(--wp-block-synced-color) !important;
2181    filter: brightness(0.95);
2182  }
2183  .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled):hover svg {
2184    color: var(--wp-block-synced-color) !important;
2185  }
2186  .block-editor-block-types-list__list-item.is-synced .components-button.block-editor-block-types-list__item:not(:disabled)::after {
2187    background: var(--wp-block-synced-color);
2188  }
2189  
2190  .components-button.block-editor-block-types-list__item {
2191    display: flex;
2192    flex-direction: column;
2193    width: 100%;
2194    font-size: 13px;
2195    color: #1e1e1e;
2196    padding: 8px;
2197    align-items: stretch;
2198    justify-content: center;
2199    cursor: var(--wpds-cursor-control, pointer);
2200    background: transparent;
2201    word-break: break-word;
2202  }
2203  @media not (prefers-reduced-motion) {
2204    .components-button.block-editor-block-types-list__item {
2205      transition: all 0.05s ease-in-out;
2206    }
2207  }
2208  .components-button.block-editor-block-types-list__item {
2209    position: relative;
2210    height: auto;
2211  }
2212  .components-button.block-editor-block-types-list__item:disabled, .components-button.block-editor-block-types-list__item[aria-disabled=true] {
2213    opacity: 0.6;
2214    cursor: default;
2215  }
2216  .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover .block-editor-block-types-list__item-title {
2217    color: var(--wp-admin-theme-color) !important;
2218    filter: brightness(0.95);
2219  }
2220  .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover svg {
2221    color: var(--wp-admin-theme-color) !important;
2222  }
2223  .components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]):hover::after {
2224    content: "";
2225    position: absolute;
2226    top: 0;
2227    bottom: 0;
2228    left: 0;
2229    right: 0;
2230    border-radius: 2px;
2231    opacity: 0.04;
2232    background: var(--wp-admin-theme-color);
2233    pointer-events: none;
2234  }
2235  
2236  .block-editor-block-types-list__item-icon {
2237    padding: 12px 20px;
2238    color: #1e1e1e;
2239  }
2240  @media not (prefers-reduced-motion) {
2241    .block-editor-block-types-list__item-icon {
2242      transition: all 0.05s ease-in-out;
2243    }
2244  }
2245  .block-editor-block-types-list__item-icon .block-editor-block-icon {
2246    margin-left: auto;
2247    margin-right: auto;
2248  }
2249  @media not (prefers-reduced-motion) {
2250    .block-editor-block-types-list__item-icon svg {
2251      transition: all 0.15s ease-out;
2252    }
2253  }
2254  .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2255    cursor: grab;
2256  }
2257  
2258  .block-editor-block-types-list__item-title {
2259    padding: 4px 2px 8px;
2260    font-size: 12px;
2261    hyphens: auto;
2262  }
2263  
2264  .modal-open .block-editor-inspector-list-view-content-popover {
2265    z-index: 99999;
2266  }
2267  
2268  .block-editor-block-inspector__tabs [role=tablist] {
2269    width: 100%;
2270  }
2271  
2272  .block-editor-inspector-popover-header {
2273    margin-bottom: 16px;
2274  }
2275  
2276  .items-justified-left {
2277    justify-content: flex-start;
2278  }
2279  
2280  .items-justified-center {
2281    justify-content: center;
2282  }
2283  
2284  .items-justified-right {
2285    justify-content: flex-end;
2286  }
2287  
2288  .items-justified-space-between {
2289    justify-content: space-between;
2290  }
2291  
2292  @keyframes loadingpulse {
2293    0% {
2294      opacity: 1;
2295    }
2296    50% {
2297      opacity: 0;
2298    }
2299    100% {
2300      opacity: 1;
2301    }
2302  }
2303  .block-editor-link-control {
2304    position: relative;
2305    min-width: 350px;
2306  }
2307  .components-popover__content .block-editor-link-control {
2308    min-width: auto;
2309    width: 90vw;
2310    max-width: 350px;
2311  }
2312  .show-icon-labels .block-editor-link-control .components-button.has-icon svg {
2313    display: none;
2314  }
2315  .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
2316    content: attr(aria-label);
2317  }
2318  .show-icon-labels .block-editor-link-control .block-editor-link-control__preview {
2319    gap: 4px;
2320    flex-wrap: wrap;
2321  }
2322  .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .components-button.has-icon {
2323    width: auto;
2324    padding: 4px;
2325  }
2326  .show-icon-labels .block-editor-link-control .block-editor-link-control__preview .block-editor-link-control_link-information {
2327    min-width: 100%;
2328    margin-right: 0;
2329  }
2330  
2331  .block-editor-link-control__search-input-wrapper {
2332    margin-bottom: 8px;
2333    position: relative;
2334  }
2335  
2336  .block-editor-link-control__help {
2337    padding: 0 16px;
2338    margin-top: -8px;
2339    margin-bottom: 0;
2340    font-size: 12px;
2341    font-style: normal;
2342    color: #757575;
2343  }
2344  
2345  .block-editor-link-control__search-input-container,
2346  .block-editor-link-control__search-input-wrapper {
2347    position: relative;
2348  }
2349  
2350  .block-editor-link-control__field {
2351    margin: 16px;
2352  }
2353  .block-editor-link-control__field .components-base-control__label {
2354    color: #1e1e1e;
2355  }
2356  
2357  .block-editor-link-control__search-error {
2358    margin: -8px 16px 16px;
2359  }
2360  
2361  .block-editor-link-control__search-actions {
2362    padding: 8px 16px 16px;
2363  }
2364  
2365  .block-editor-link-control__search-results-wrapper {
2366    position: relative;
2367  }
2368  .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
2369    content: "";
2370    position: absolute;
2371    left: -1px;
2372    right: 16px;
2373    display: block;
2374    pointer-events: none;
2375    z-index: 100;
2376  }
2377  .block-editor-link-control__search-results-wrapper::before {
2378    height: 8px;
2379    top: 0;
2380    bottom: auto;
2381  }
2382  .block-editor-link-control__search-results-wrapper::after {
2383    height: 16px;
2384    bottom: 0;
2385    top: auto;
2386  }
2387  
2388  .block-editor-link-control__search-results {
2389    margin-top: -16px;
2390    padding: 8px;
2391    max-height: 200px;
2392    overflow-y: auto;
2393  }
2394  .block-editor-link-control__search-results.is-loading {
2395    opacity: 0.2;
2396  }
2397  
2398  .block-editor-link-control__search-item.components-button.components-menu-item__button {
2399    height: auto;
2400    text-align: left;
2401  }
2402  .block-editor-link-control__search-item .components-menu-item__item {
2403    overflow: hidden;
2404    text-overflow: ellipsis;
2405    display: inline-block;
2406    width: 100%;
2407  }
2408  .block-editor-link-control__search-item .components-menu-item__item mark {
2409    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2410    color: inherit;
2411    background-color: transparent;
2412  }
2413  .block-editor-link-control__search-item .components-menu-item__shortcut {
2414    color: #757575;
2415    white-space: nowrap;
2416  }
2417  .block-editor-link-control__search-item[aria-selected] {
2418    background: #f0f0f0;
2419  }
2420  
2421  .block-editor-link-control__preview {
2422    background: transparent;
2423    border: 0;
2424    padding: 16px;
2425  }
2426  .block-editor-link-control__preview .block-editor-link-control__link-information {
2427    margin-right: 8px;
2428    white-space: pre-wrap;
2429    overflow-wrap: break-word;
2430  }
2431  .block-editor-link-control__preview .block-editor-link-control__link-information .block-editor-link-control__preview-info {
2432    color: #757575;
2433    line-height: 1.1;
2434    font-size: 12px;
2435    word-break: break-all;
2436  }
2437  .block-editor-link-control__preview.is-url-title .block-editor-link-control__preview-title {
2438    word-break: break-all;
2439  }
2440  .block-editor-link-control__preview .block-editor-link-control__preview-image,
2441  .block-editor-link-control__preview .block-editor-link-control__preview-icon {
2442    position: relative;
2443    flex-shrink: 0;
2444    background-color: #f0f0f0;
2445    width: 32px;
2446    height: 32px;
2447    border-radius: 2px;
2448  }
2449  .block-editor-link-control__preview .block-editor-link-control__preview-icon img {
2450    width: 16px;
2451  }
2452  .block-editor-link-control__preview.is-error .block-editor-link-control__preview-icon {
2453    top: 0;
2454    width: 32px;
2455    max-height: 32px;
2456  }
2457  .block-editor-link-control__preview .block-editor-link-control__preview-title {
2458    line-height: var(--wpds-typography-line-height-sm, 20px);
2459  }
2460  .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2461    box-shadow: none;
2462  }
2463  .block-editor-link-control__preview .block-editor-link-control__preview-title:focus-visible {
2464    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2465    outline: 2px solid transparent;
2466    text-decoration: none;
2467  }
2468  .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2469    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2470    color: inherit;
2471    background-color: transparent;
2472  }
2473  .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2474    font-weight: normal;
2475  }
2476  .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2477    position: absolute;
2478    width: 1px;
2479    height: 1px;
2480    padding: 0;
2481    margin: -1px;
2482    overflow: hidden;
2483    clip: rect(0, 0, 0, 0);
2484    border: 0;
2485  }
2486  
2487  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
2488  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon img {
2489    opacity: 0;
2490  }
2491  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2492    content: "";
2493    display: block;
2494    background-color: #f0f0f0;
2495    position: absolute;
2496    top: 0;
2497    left: 0;
2498    right: 0;
2499    bottom: 0;
2500    border-radius: 100%;
2501  }
2502  @media not (prefers-reduced-motion) {
2503    .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
2504      animation: loadingpulse 1s linear infinite;
2505      animation-delay: 0.5s;
2506    }
2507  }
2508  
2509  .block-editor-link-control__loading {
2510    margin: 16px;
2511    display: flex;
2512    align-items: center;
2513  }
2514  .block-editor-link-control__loading .components-spinner {
2515    margin-top: 0;
2516  }
2517  
2518  .components-button + .block-editor-link-control__search-create {
2519    overflow: visible;
2520    padding: 12px 16px;
2521  }
2522  .components-button + .block-editor-link-control__search-create::before {
2523    content: "";
2524    position: absolute;
2525    top: -10px;
2526    left: 0;
2527    display: block;
2528    width: 100%;
2529  }
2530  
2531  .block-editor-link-control__search-create {
2532    align-items: center;
2533  }
2534  .block-editor-link-control__search-create .block-editor-link-control__preview-title {
2535    margin-bottom: 0;
2536  }
2537  .block-editor-link-control__search-create .block-editor-link-control__search-item-icon {
2538    top: 0;
2539  }
2540  
2541  .block-editor-link-control__drawer-inner {
2542    display: flex;
2543    flex-direction: column;
2544    flex-basis: 100%;
2545    position: relative;
2546  }
2547  
2548  .block-editor-link-control__settings {
2549    border: 0;
2550    padding: 0;
2551    margin: 0;
2552  }
2553  
2554  .block-editor-link-control__setting {
2555    margin-bottom: 0;
2556    flex: 1;
2557    padding: 8px 24px;
2558  }
2559  .block-editor-link-control__setting .components-base-control:not(.components-input-control) .components-base-control__field {
2560    display: flex;
2561  }
2562  .block-editor-link-control__setting .components-base-control__field .components-checkbox-control__label {
2563    color: #1e1e1e;
2564  }
2565  .block-editor-link-control__setting input {
2566    margin-left: 0;
2567  }
2568  .is-preview .block-editor-link-control__setting {
2569    padding: 20px 8px 8px 0;
2570  }
2571  
2572  .block-editor-link-control__tools {
2573    padding: 8px 8px 0 8px;
2574    margin-top: -16px;
2575  }
2576  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
2577    padding-left: 0;
2578    gap: 0;
2579  }
2580  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
2581    color: #1e1e1e;
2582  }
2583  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2584    visibility: visible;
2585  }
2586  @media not (prefers-reduced-motion) {
2587    .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2588      transition: transform 0.1s ease;
2589    }
2590  }
2591  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
2592    transform: rotate(90deg);
2593  }
2594  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2595    visibility: visible;
2596    transform: rotate(0deg);
2597  }
2598  @media not (prefers-reduced-motion) {
2599    .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
2600      transition: transform 0.1s ease;
2601    }
2602  }
2603  
2604  .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
2605    display: block;
2606  }
2607  .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
2608    position: absolute;
2609    left: auto;
2610    bottom: auto;
2611    top: calc(50% - 16px / 2);
2612    right: 40px;
2613  }
2614  
2615  .block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
2616    top: calc(50% + 16px / 4);
2617    right: 12px;
2618  }
2619  
2620  /**
2621   * Link Picker Styles
2622   */
2623  .link-preview-button.components-button {
2624    width: 100%;
2625    height: auto;
2626    padding: 12px;
2627    border-color: #949494;
2628  }
2629  
2630  .link-preview-button__image-container {
2631    width: 24px;
2632    height: 24px;
2633    flex-shrink: 0;
2634  }
2635  
2636  .link-preview-button__image {
2637    width: 100%;
2638    height: 100%;
2639    -o-object-fit: cover;
2640       object-fit: cover;
2641    border-radius: 2px;
2642  }
2643  
2644  .link-preview-button__content {
2645    min-width: 0;
2646    flex: 1;
2647  }
2648  
2649  .link-preview-button__details {
2650    min-width: 0;
2651    flex: 1;
2652  }
2653  
2654  .link-preview-button__title,
2655  .link-preview-button__hint {
2656    min-width: 0;
2657    display: block;
2658    width: 100%;
2659    text-align: left;
2660    overflow: hidden;
2661    text-overflow: ellipsis;
2662    white-space: nowrap;
2663  }
2664  
2665  .link-preview-button__title {
2666    margin-top: 4px;
2667    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2668    color: #1e1e1e;
2669    display: block;
2670  }
2671  
2672  .link-preview-button__hint {
2673    font-size: 12px;
2674    color: #757575;
2675    font-weight: 400;
2676  }
2677  
2678  .link-preview-button__icon {
2679    color: #1e1e1e;
2680  }
2681  
2682  .link-preview-button__badges {
2683    margin-top: 8px;
2684  }
2685  
2686  .block-editor-list-view-tree {
2687    width: 100%;
2688    border-collapse: collapse;
2689    padding: 0;
2690    margin: 0;
2691  }
2692  .components-modal__content .block-editor-list-view-tree {
2693    margin: -12px -6px 0;
2694    width: calc(100% + 12px);
2695  }
2696  .block-editor-list-view-tree.is-dragging tbody {
2697    pointer-events: none;
2698  }
2699  
2700  .block-editor-list-view-leaf {
2701    position: relative;
2702    transform: translateY(0);
2703  }
2704  .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2705    cursor: grab;
2706  }
2707  .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
2708    color: inherit;
2709  }
2710  .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
2711    color: var(--wp-admin-theme-color);
2712  }
2713  .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2714    fill: currentColor;
2715  }
2716  @media (forced-colors: active) {
2717    .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2718      fill: CanvasText;
2719    }
2720  }
2721  .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2722    color: inherit;
2723  }
2724  .block-editor-list-view-leaf.is-selected td {
2725    background: var(--wp-admin-theme-color);
2726  }
2727  .block-editor-list-view-leaf.is-selected.is-synced td {
2728    background: var(--wp-block-synced-color);
2729  }
2730  .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,
2731  .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2732    color: var(--wp-block-synced-color);
2733  }
2734  .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2735    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2736  }
2737  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2738    color: #fff;
2739  }
2740  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2741    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));
2742  }
2743  .block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2744    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2745  }
2746  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2747    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2748  }
2749  .block-editor-list-view-leaf.is-first-selected td:first-child {
2750    border-top-left-radius: 2px;
2751  }
2752  .block-editor-list-view-leaf.is-first-selected td:last-child {
2753    border-top-right-radius: 2px;
2754  }
2755  .block-editor-list-view-leaf.is-last-selected td:first-child {
2756    border-bottom-left-radius: 2px;
2757  }
2758  .block-editor-list-view-leaf.is-last-selected td:last-child {
2759    border-bottom-right-radius: 2px;
2760  }
2761  .block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
2762    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
2763  }
2764  .block-editor-list-view-leaf.is-synced-branch.is-branch-selected {
2765    background: rgba(var(--wp-block-synced-color--rgb), 0.04);
2766  }
2767  .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
2768    border-top-left-radius: 2px;
2769  }
2770  .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
2771    border-top-right-radius: 2px;
2772  }
2773  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
2774    border-top-left-radius: 2px;
2775  }
2776  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
2777    border-top-right-radius: 2px;
2778  }
2779  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
2780    border-bottom-left-radius: 2px;
2781  }
2782  .block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
2783    border-bottom-right-radius: 2px;
2784  }
2785  .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
2786    border-radius: 0;
2787  }
2788  @media not (prefers-reduced-motion) {
2789    .block-editor-list-view-leaf.is-displacement-normal {
2790      transition: transform 0.2s;
2791    }
2792  }
2793  .block-editor-list-view-leaf.is-displacement-normal {
2794    transform: translateY(0);
2795  }
2796  @media not (prefers-reduced-motion) {
2797    .block-editor-list-view-leaf.is-displacement-up {
2798      transition: transform 0.2s;
2799    }
2800  }
2801  .block-editor-list-view-leaf.is-displacement-up {
2802    transform: translateY(-32px);
2803  }
2804  @media not (prefers-reduced-motion) {
2805    .block-editor-list-view-leaf.is-displacement-down {
2806      transition: transform 0.2s;
2807    }
2808  }
2809  .block-editor-list-view-leaf.is-displacement-down {
2810    transform: translateY(32px);
2811  }
2812  @media not (prefers-reduced-motion) {
2813    .block-editor-list-view-leaf.is-after-dragged-blocks {
2814      transition: transform 0.2s;
2815    }
2816  }
2817  .block-editor-list-view-leaf.is-after-dragged-blocks {
2818    transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2819  }
2820  @media not (prefers-reduced-motion) {
2821    .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2822      transition: transform 0.2s;
2823    }
2824  }
2825  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
2826    transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2827  }
2828  @media not (prefers-reduced-motion) {
2829    .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2830      transition: transform 0.2s;
2831    }
2832  }
2833  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
2834    transform: translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
2835  }
2836  .block-editor-list-view-leaf.is-dragging {
2837    opacity: 0;
2838    left: 0;
2839    pointer-events: none;
2840    z-index: -9999;
2841  }
2842  .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2843    display: flex;
2844    align-items: center;
2845    width: 100%;
2846    height: 32px;
2847    padding: 6px 4px 6px 0;
2848    text-align: left;
2849    position: relative;
2850    white-space: nowrap;
2851    border-radius: 2px;
2852    box-sizing: border-box;
2853    color: inherit;
2854    font-family: inherit;
2855    font-size: 13px;
2856    font-weight: 400;
2857    margin: 0;
2858    text-decoration: none;
2859  }
2860  @media not (prefers-reduced-motion) {
2861    .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2862      transition: box-shadow 0.1s linear;
2863    }
2864  }
2865  .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
2866    padding-left: 0;
2867    padding-right: 0;
2868  }
2869  .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2870  .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2871    box-shadow: none;
2872  }
2873  .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2874  .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2875    content: "";
2876    position: absolute;
2877    top: 0;
2878    right: -29px;
2879    bottom: 0;
2880    left: 0;
2881    border-radius: inherit;
2882    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2883    z-index: 2;
2884    pointer-events: none;
2885  }
2886  .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2887    right: 0;
2888  }
2889  .block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu {
2890    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2891    z-index: 1;
2892  }
2893  .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2894    opacity: 1;
2895  }
2896  @keyframes __wp-base-styles-fade-in {
2897    from {
2898      opacity: 0;
2899    }
2900    to {
2901      opacity: 1;
2902    }
2903  }
2904  @media not (prefers-reduced-motion) {
2905    .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2906      animation: __wp-base-styles-fade-in 0.08s linear 0s;
2907      animation-fill-mode: forwards;
2908    }
2909  }
2910  .block-editor-list-view-leaf .block-editor-block-icon {
2911    margin-right: 4px;
2912    flex: 0 0 24px;
2913  }
2914  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
2915  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
2916  .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
2917    padding: 0;
2918  }
2919  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
2920  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
2921    line-height: 0;
2922    width: 28px;
2923    vertical-align: middle;
2924  }
2925  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
2926  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
2927    opacity: 0;
2928  }
2929  .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 > *,
2930  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
2931  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
2932  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
2933    opacity: 1;
2934  }
2935  .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper {
2936    display: flex;
2937    height: 100%;
2938    flex-direction: column;
2939    align-items: center;
2940  }
2941  .block-editor-list-view-leaf .block-editor-block-mover-button {
2942    position: relative;
2943    width: 36px;
2944    height: 24px;
2945  }
2946  .block-editor-list-view-leaf .block-editor-block-mover-button svg {
2947    position: relative;
2948    height: 24px;
2949  }
2950  .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button {
2951    margin-top: -6px;
2952    align-items: flex-end;
2953  }
2954  .block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button svg {
2955    bottom: -4px;
2956  }
2957  .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button {
2958    margin-bottom: -6px;
2959    align-items: flex-start;
2960  }
2961  .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2962    top: -4px;
2963  }
2964  .block-editor-list-view-leaf .block-editor-block-mover-button::before {
2965    height: 16px;
2966    min-width: 100%;
2967    left: 0;
2968    right: 0;
2969  }
2970  .block-editor-list-view-leaf .block-editor-inserter__toggle {
2971    background: #1e1e1e;
2972    color: #fff;
2973    height: 24px;
2974    margin: 6px 6px 6px 1px;
2975    min-width: 24px;
2976  }
2977  .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2978    color: #fff;
2979  }
2980  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2981    left: 2px;
2982    position: relative;
2983  }
2984  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
2985    flex: 1;
2986    position: relative;
2987  }
2988  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
2989    position: absolute;
2990    width: 100%;
2991    transform: translateY(-50%);
2992  }
2993  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
2994    position: relative;
2995    max-width: min(110px, 40%);
2996    width: 100%;
2997  }
2998  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2999    position: absolute;
3000    right: 0;
3001    transform: translateY(-50%);
3002  }
3003  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
3004    background: rgba(0, 0, 0, 0.3);
3005    color: #fff;
3006  }
3007  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__block-visibility,
3008  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
3009  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
3010    line-height: 0;
3011  }
3012  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
3013    display: flex;
3014  }
3015  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image {
3016    background-size: cover;
3017    width: 18px;
3018    height: 18px;
3019    border-radius: 1px;
3020  }
3021  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
3022    box-shadow: 0 0 0 2px #fff;
3023  }
3024  .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:first-child) {
3025    margin-left: -6px;
3026  }
3027  .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
3028    box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
3029  }
3030  .block-editor-list-view-leaf.is-disabled {
3031    opacity: 0.2;
3032  }
3033  @media not (prefers-reduced-motion) {
3034    .block-editor-list-view-leaf.is-disabled {
3035      transition: opacity 0.1s linear;
3036    }
3037  }
3038  .block-editor-list-view-leaf.is-disabled:hover {
3039    opacity: 0.2;
3040  }
3041  .block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander {
3042    cursor: default;
3043  }
3044  .block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover {
3045    color: inherit;
3046  }
3047  
3048  .block-editor-list-view-draggable-chip {
3049    opacity: 0.8;
3050  }
3051  
3052  .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
3053  .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
3054  .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
3055  .block-editor-list-view-appender__cell .block-editor-list-view-appender__container {
3056    display: flex;
3057  }
3058  
3059  .block-editor-list-view__expander {
3060    height: 24px;
3061    width: 24px;
3062    cursor: var(--wpds-cursor-control, pointer);
3063  }
3064  
3065  .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
3066    margin-left: 192px;
3067  }
3068  
3069  .block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander {
3070    margin-left: 0;
3071  }
3072  
3073  .block-editor-list-view-leaf[aria-level="2"] .block-editor-list-view__expander {
3074    margin-left: 24px;
3075  }
3076  
3077  .block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander {
3078    margin-left: 48px;
3079  }
3080  
3081  .block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander {
3082    margin-left: 72px;
3083  }
3084  
3085  .block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander {
3086    margin-left: 96px;
3087  }
3088  
3089  .block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander {
3090    margin-left: 120px;
3091  }
3092  
3093  .block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander {
3094    margin-left: 144px;
3095  }
3096  
3097  .block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander {
3098    margin-left: 168px;
3099  }
3100  
3101  .block-editor-list-view-leaf .block-editor-list-view__expander {
3102    visibility: hidden;
3103  }
3104  
3105  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3106    visibility: visible;
3107  }
3108  @media not (prefers-reduced-motion) {
3109    .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3110      transition: transform 0.2s ease;
3111    }
3112  }
3113  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
3114    transform: rotate(90deg);
3115  }
3116  
3117  .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
3118    visibility: visible;
3119    transform: rotate(0deg);
3120  }
3121  @media not (prefers-reduced-motion) {
3122    .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
3123      transition: transform 0.2s ease;
3124    }
3125  }
3126  
3127  .block-editor-list-view-drop-indicator {
3128    pointer-events: none;
3129  }
3130  .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
3131    background: var(--wp-admin-theme-color);
3132    height: 4px;
3133    border-radius: 4px;
3134  }
3135  
3136  .block-editor-list-view-drop-indicator--preview {
3137    pointer-events: none;
3138  }
3139  .block-editor-list-view-drop-indicator--preview .components-popover__content {
3140    overflow: hidden !important;
3141  }
3142  .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
3143    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3144    height: 32px;
3145    border-radius: 4px;
3146    overflow: hidden;
3147  }
3148  .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
3149    background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
3150  }
3151  
3152  .block-editor-list-view-placeholder {
3153    padding: 0;
3154    margin: 0;
3155    height: 32px;
3156  }
3157  
3158  .list-view-appender .block-editor-inserter__toggle {
3159    background-color: #1e1e1e;
3160    color: #fff;
3161    margin: 8px 0 0 24px;
3162    height: 24px;
3163    padding: 0;
3164  }
3165  .list-view-appender .block-editor-inserter__toggle.has-icon.is-next-40px-default-size {
3166    min-width: 24px;
3167  }
3168  .list-view-appender .block-editor-inserter__toggle:hover, .list-view-appender .block-editor-inserter__toggle:focus {
3169    background: var(--wp-admin-theme-color);
3170    color: #fff;
3171  }
3172  
3173  .list-view-appender__description {
3174    display: none;
3175  }
3176  
3177  .block-editor-media-placeholder__url-input-form {
3178    min-width: 260px;
3179  }
3180  @media (min-width: 600px) {
3181    .block-editor-media-placeholder__url-input-form {
3182      width: 300px;
3183    }
3184  }
3185  .block-editor-media-placeholder__url-input-form input {
3186    /* rtl:ignore */
3187    direction: ltr;
3188  }
3189  
3190  .modal-open .block-editor-media-replace-flow__options {
3191    z-index: 99999;
3192  }
3193  
3194  .block-editor-media-replace-flow__indicator {
3195    margin-left: 4px;
3196  }
3197  
3198  .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
3199    border-top: 1px solid #ddd;
3200    margin-top: 8px;
3201    padding-bottom: 8px;
3202  }
3203  
3204  .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 {
3205    border-top-color: #1e1e1e;
3206  }
3207  
3208  .block-editor-media-flow__url-input {
3209    margin-right: -8px;
3210    margin-left: -8px;
3211    padding: 16px;
3212  }
3213  .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
3214    display: block;
3215    top: 16px;
3216    margin-bottom: 8px;
3217  }
3218  .block-editor-media-flow__url-input .block-editor-link-control {
3219    width: 300px;
3220  }
3221  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
3222    padding: 0;
3223    margin: 0;
3224  }
3225  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__tools {
3226    justify-content: flex-end;
3227    padding: 16px var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
3228  }
3229  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__preview.is-current {
3230    width: auto;
3231    padding: 0;
3232  }
3233  .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] {
3234    margin: 0;
3235    width: 100%;
3236  }
3237  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3238    padding: 8px 0 0;
3239  }
3240  
3241  .block-editor-multi-selection-inspector__card {
3242    padding: 16px;
3243  }
3244  
3245  .block-editor-multi-selection-inspector__card-title {
3246    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3247  }
3248  
3249  .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3250    margin-left: -2px;
3251    padding: 0 3px;
3252    width: 36px;
3253    height: 24px;
3254  }
3255  
3256  .block-editor-responsive-block-control {
3257    margin-bottom: 28px;
3258    border-bottom: 1px solid #ccc;
3259    padding-bottom: 14px;
3260  }
3261  .block-editor-responsive-block-control:last-child {
3262    padding-bottom: 0;
3263    border-bottom: 0;
3264  }
3265  
3266  .block-editor-responsive-block-control__title {
3267    margin: 0;
3268    margin-bottom: 0.6em;
3269    margin-left: -3px;
3270  }
3271  
3272  .block-editor-responsive-block-control__label {
3273    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3274    margin-bottom: 0.6em;
3275    margin-left: -3px;
3276  }
3277  
3278  .block-editor-responsive-block-control__inner {
3279    margin-left: -1px;
3280  }
3281  
3282  .block-editor-responsive-block-control__toggle {
3283    margin-left: 1px;
3284  }
3285  
3286  .block-editor-responsive-block-control .components-base-control__help {
3287    border: 0;
3288    clip-path: inset(50%);
3289    height: 1px;
3290    margin: -1px;
3291    overflow: hidden;
3292    padding: 0;
3293    position: absolute;
3294    width: 1px;
3295    word-wrap: normal !important;
3296    word-break: normal !important;
3297  }
3298  
3299  .preset-input-control__wrapper > * {
3300    flex: 1;
3301  }
3302  .preset-input-control__wrapper > .preset-input-control__icon,
3303  .preset-input-control__wrapper > .preset-input-control__custom-toggle {
3304    flex: none;
3305  }
3306  
3307  .components-popover.block-editor-rich-text__inline-format-toolbar {
3308    z-index: 99998;
3309  }
3310  .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
3311    width: auto;
3312    min-width: auto;
3313    margin-bottom: 8px;
3314    box-shadow: none;
3315    outline: none;
3316    border-radius: 2px;
3317  }
3318  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
3319    border-radius: 2px;
3320  }
3321  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
3322    background: none;
3323  }
3324  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
3325  .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
3326    min-width: 48px;
3327    min-height: 48px;
3328    padding-left: 12px;
3329    padding-right: 12px;
3330  }
3331  
3332  .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
3333    justify-content: center;
3334  }
3335  
3336  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
3337    width: auto;
3338  }
3339  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
3340    display: none;
3341  }
3342  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
3343    content: attr(aria-label);
3344  }
3345  
3346  .block-editor-skip-to-selected-block {
3347    position: absolute;
3348    top: -9999em;
3349  }
3350  .block-editor-skip-to-selected-block:focus {
3351    font-size: 14px;
3352    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3353    background: #f1f1f1;
3354    z-index: 100000;
3355  }
3356  
3357  .block-editor-tabbed-sidebar {
3358    background-color: #fff;
3359    height: 100%;
3360    display: flex;
3361    flex-direction: column;
3362    flex-grow: 1;
3363    overflow: hidden;
3364  }
3365  
3366  .block-editor-tabbed-sidebar__tablist-and-close-button {
3367    border-bottom: 1px solid #ddd;
3368    display: flex;
3369    justify-content: space-between;
3370    padding-right: 8px;
3371  }
3372  
3373  .block-editor-tabbed-sidebar__close-button {
3374    background: #fff;
3375    /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
3376    order: 1;
3377    align-self: center;
3378  }
3379  
3380  .block-editor-tabbed-sidebar__tablist {
3381    margin-bottom: -1px;
3382  }
3383  
3384  .block-editor-tabbed-sidebar__tabpanel {
3385    display: flex;
3386    flex-grow: 1;
3387    flex-direction: column;
3388    overflow-y: auto;
3389    scrollbar-gutter: auto;
3390  }
3391  
3392  .block-editor-block-list__block .block-editor-url-input,
3393  .components-popover .block-editor-url-input,
3394  .block-editor-url-input {
3395    flex-grow: 1;
3396    position: relative;
3397    padding: 1px;
3398  }
3399  @media (min-width: 600px) {
3400    .block-editor-block-list__block .block-editor-url-input,
3401    .components-popover .block-editor-url-input,
3402    .block-editor-url-input {
3403      min-width: 300px;
3404      width: auto;
3405    }
3406  }
3407  .block-editor-block-list__block .block-editor-url-input.is-full-width,
3408  .components-popover .block-editor-url-input.is-full-width,
3409  .block-editor-url-input.is-full-width {
3410    width: 100%;
3411  }
3412  .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
3413  .components-popover .block-editor-url-input.is-full-width__suggestions,
3414  .block-editor-url-input.is-full-width__suggestions {
3415    width: 100%;
3416  }
3417  .block-editor-block-list__block .block-editor-url-input .components-spinner,
3418  .components-popover .block-editor-url-input .components-spinner,
3419  .block-editor-url-input .components-spinner {
3420    position: absolute;
3421    margin: 0;
3422    top: calc(50% - 16px / 2);
3423    right: 8px;
3424  }
3425  
3426  .block-editor-url-input__suggestions {
3427    max-height: 200px;
3428  }
3429  @media not (prefers-reduced-motion) {
3430    .block-editor-url-input__suggestions {
3431      transition: all 0.15s ease-in-out;
3432    }
3433  }
3434  .block-editor-url-input__suggestions {
3435    padding: 4px 0;
3436    width: 302px;
3437    overflow-y: auto;
3438  }
3439  
3440  .block-editor-url-input__suggestions,
3441  .block-editor-url-input .components-spinner {
3442    display: none;
3443  }
3444  @media (min-width: 600px) {
3445    .block-editor-url-input__suggestions,
3446    .block-editor-url-input .components-spinner {
3447      display: grid;
3448    }
3449  }
3450  
3451  .block-editor-url-input__suggestion {
3452    min-height: 36px;
3453    height: auto;
3454    color: #757575;
3455    display: block;
3456    font-size: 13px;
3457    cursor: var(--wpds-cursor-control, pointer);
3458    background: #fff;
3459    width: 100%;
3460    border: none;
3461    text-align: left;
3462    box-shadow: none;
3463  }
3464  .block-editor-url-input__suggestion:hover {
3465    background: #ddd;
3466  }
3467  .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
3468    background: var(--wp-admin-theme-color-darker-20);
3469    color: #fff;
3470    outline: none;
3471  }
3472  
3473  .components-toolbar-group > .block-editor-url-input__button,
3474  .components-toolbar > .block-editor-url-input__button {
3475    position: inherit;
3476  }
3477  
3478  .block-editor-url-input__button .block-editor-url-input__back {
3479    margin-right: 4px;
3480    overflow: visible;
3481  }
3482  .block-editor-url-input__button .block-editor-url-input__back::after {
3483    content: "";
3484    position: absolute;
3485    display: block;
3486    width: 1px;
3487    height: 24px;
3488    right: -1px;
3489    background: #ddd;
3490  }
3491  
3492  .block-editor-url-input__button-modal {
3493    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);
3494    border: 1px solid #ddd;
3495    background: #fff;
3496  }
3497  
3498  .block-editor-url-input__button-modal-line {
3499    display: flex;
3500    flex-direction: row;
3501    flex-grow: 1;
3502    flex-shrink: 1;
3503    min-width: 0;
3504    align-items: flex-start;
3505  }
3506  
3507  .block-editor-url-popover__additional-controls {
3508    border-top: 1px solid #1e1e1e;
3509    padding: 8px 8px;
3510  }
3511  
3512  .block-editor-url-popover__input-container {
3513    padding: 8px;
3514  }
3515  
3516  .block-editor-url-popover__row {
3517    display: flex;
3518    gap: 4px;
3519    align-items: center;
3520  }
3521  
3522  .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
3523    flex-grow: 1;
3524    gap: 8px;
3525  }
3526  
3527  .block-editor-url-popover__additional-controls .components-button.has-icon {
3528    padding-left: 8px;
3529    padding-right: 8px;
3530    height: auto;
3531    text-align: left;
3532  }
3533  .block-editor-url-popover__additional-controls .components-button.has-icon > svg {
3534    margin-right: 8px;
3535  }
3536  
3537  .block-editor-url-popover__settings-toggle {
3538    flex-shrink: 0;
3539  }
3540  .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
3541    transform: rotate(180deg);
3542  }
3543  
3544  .block-editor-url-popover__settings {
3545    display: block;
3546    padding: 16px;
3547    border-top: 1px solid #1e1e1e;
3548  }
3549  
3550  .block-editor-url-popover__link-editor,
3551  .block-editor-url-popover__link-viewer {
3552    display: flex;
3553  }
3554  
3555  .block-editor-url-popover__link-viewer-url {
3556    display: flex;
3557    align-items: center;
3558    flex-grow: 1;
3559    flex-shrink: 1;
3560    overflow: hidden;
3561    text-overflow: ellipsis;
3562    white-space: nowrap;
3563    margin-right: 8px;
3564    min-width: 150px;
3565    max-width: 350px;
3566  }
3567  .block-editor-url-popover__link-viewer-url.has-invalid-link {
3568    color: #cc1818;
3569  }
3570  
3571  .block-editor-url-popover__expand-on-click {
3572    display: flex;
3573    align-items: center;
3574    min-width: 350px;
3575    white-space: nowrap;
3576  }
3577  .block-editor-url-popover__expand-on-click .text {
3578    flex-grow: 1;
3579  }
3580  .block-editor-url-popover__expand-on-click .text p {
3581    margin: 0;
3582    line-height: 16px;
3583  }
3584  .block-editor-url-popover__expand-on-click .text p.description {
3585    color: #757575;
3586    font-size: 12px;
3587  }
3588  
3589  .background-block-support-panel {
3590    /* Increased specificity required to remove the slot wrapper's row gap */
3591  }
3592  .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3593    row-gap: 0;
3594  }
3595  
3596  .block-editor-content-only-controls__link {
3597    width: 100%;
3598    border-color: #ccc;
3599  }
3600  
3601  .block-editor-content-only-controls__link-row {
3602    align-items: center;
3603  }
3604  
3605  .block-editor-content-only-controls__link-title {
3606    width: 100%;
3607    white-space: nowrap;
3608    text-overflow: ellipsis;
3609    overflow: hidden;
3610  }
3611  
3612  .block-editor-content-only-controls__media {
3613    width: 100%;
3614    border-color: #ccc;
3615    padding-right: 32px;
3616  }
3617  
3618  .block-editor-content-only-controls__media-replace-flow {
3619    display: block;
3620  }
3621  
3622  .block-editor-content-only-controls__media-row {
3623    align-items: center;
3624  }
3625  
3626  .block-editor-content-only-controls__media-placeholder {
3627    width: 24px;
3628    height: 24px;
3629    border-radius: 2px;
3630    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3631    display: inline-block;
3632    padding: 0;
3633    background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3634  }
3635  
3636  .block-editor-content-only-controls__media-title {
3637    width: 100%;
3638    white-space: nowrap;
3639    text-overflow: ellipsis;
3640    overflow: hidden;
3641  }
3642  
3643  .block-editor-content-only-controls__media-thumbnail {
3644    width: 20px;
3645    height: 20px;
3646    border-radius: 2px;
3647    align-self: center;
3648    overflow: hidden;
3649  }
3650  .block-editor-content-only-controls__media-thumbnail img {
3651    width: 100% !important;
3652    height: 100% !important;
3653    -o-object-fit: cover;
3654       object-fit: cover;
3655  }
3656  
3657  .block-editor-content-only-controls {
3658    position: relative;
3659  }
3660  
3661  .block-editor-content-only-controls__media-reset {
3662    position: absolute;
3663    right: 0;
3664    top: 8px;
3665    margin: auto 8px auto;
3666    opacity: 0;
3667    border-radius: 2px;
3668  }
3669  @media not (prefers-reduced-motion) {
3670    .block-editor-content-only-controls__media-reset {
3671      transition: opacity 0.1s ease-in-out;
3672    }
3673  }
3674  .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 {
3675    opacity: 1;
3676  }
3677  @media (hover: none) {
3678    .block-editor-content-only-controls__media-reset {
3679      opacity: 1;
3680    }
3681  }
3682  
3683  .block-editor-content-only-controls__rich-text {
3684    width: 100%;
3685    margin: 0;
3686    background: #fff;
3687    color: #1e1e1e;
3688    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3689    padding: 6px 8px;
3690    /* Fonts smaller than 16px causes mobile safari to zoom. */
3691    font-size: 16px;
3692    /* Override core line-height. To be reviewed. */
3693    line-height: normal;
3694    box-shadow: 0 0 0 transparent;
3695    border-radius: 2px;
3696    border: 1px solid #949494;
3697  }
3698  @media not (prefers-reduced-motion) {
3699    .block-editor-content-only-controls__rich-text {
3700      transition: box-shadow 0.1s linear;
3701    }
3702  }
3703  @media (min-width: 600px) {
3704    .block-editor-content-only-controls__rich-text {
3705      font-size: 13px;
3706      /* Override core line-height. To be reviewed. */
3707      line-height: normal;
3708    }
3709  }
3710  .block-editor-content-only-controls__rich-text:focus {
3711    border-color: var(--wp-admin-theme-color, #3858e9);
3712    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3713    outline: 2px solid transparent;
3714  }
3715  .block-editor-content-only-controls__rich-text::-moz-placeholder {
3716    color: rgba(30, 30, 30, 0.62);
3717  }
3718  .block-editor-content-only-controls__rich-text::placeholder {
3719    color: rgba(30, 30, 30, 0.62);
3720  }
3721  .block-editor-content-only-controls__rich-text {
3722    border-color: #949494;
3723  }
3724  .block-editor-content-only-controls__rich-text::-moz-placeholder {
3725    color: color-mix(in srgb, #1e1e1e, transparent 38%);
3726  }
3727  .block-editor-content-only-controls__rich-text::placeholder {
3728    color: color-mix(in srgb, #1e1e1e, transparent 38%);
3729  }
3730  .block-editor-content-only-controls__rich-text {
3731    min-height: 40px;
3732    padding: 12px;
3733  }
3734  
3735  .block-editor-block-fields__container {
3736    padding: 0 16px 16px;
3737  }
3738  .block-editor-block-fields__container:first-of-type {
3739    padding-block-start: 8px;
3740    /*
3741     * Add border for the entire content controls and remove the similar border
3742     * for tools panel.
3743     */
3744    border-block-start: 1px solid #e0e0e0;
3745  }
3746  
3747  .block-editor-block-fields__header {
3748    padding: 8px 0;
3749    margin-bottom: 4px;
3750  }
3751  
3752  .block-editor-block-fields__header-icon {
3753    flex: 0 0 24px;
3754  }
3755  
3756  .block-editor-block-fields__header-title {
3757    flex: 1;
3758    /* Override the default margin on a h2 element. */
3759    margin: 0 !important;
3760  }
3761  
3762  .block-editor-hooks__block-hooks {
3763    /**
3764     * Un-reverse the flex direction for the toggle's label.
3765     */
3766  }
3767  .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
3768    flex-direction: row;
3769  }
3770  .block-editor-hooks__block-hooks .block-editor-hooks__block-hooks-helptext {
3771    color: #757575;
3772    font-size: 12px;
3773    margin-bottom: 16px;
3774  }
3775  
3776  .block-editor-hooks__position-control-item {
3777    /**
3778     * Try to make items match the width of the anchor, subtract any margin on
3779     * items to calculate the correct inner width.
3780     */
3781    max-inline-size: max(var(--anchor-width) - 2 * var(--wp-ui-popup-padding), 223px);
3782  }
3783  
3784  .block-editor-hooks__position-control-item-hint {
3785    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3786    margin-block-start: 4px;
3787  }
3788  
3789  div.block-editor-bindings__panel {
3790    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
3791  }
3792  div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
3793    color: inherit;
3794  }
3795  
3796  .border-block-support-panel .single-column {
3797    grid-column: span 1;
3798  }
3799  
3800  .color-block-support-panel .block-editor-contrast-checker {
3801    grid-column: span 2;
3802    margin-top: 16px;
3803  }
3804  .color-block-support-panel {
3805    /* Increased specificity required to remove the slot wrapper's row gap */
3806  }
3807  .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3808    row-gap: 0;
3809  }
3810  
3811  .elements-block-support-panel {
3812    /* Increased specificity required to remove the slot wrapper's row gap */
3813  }
3814  .elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3815    row-gap: 0;
3816  }
3817  
3818  .dimensions-block-support-panel .single-column {
3819    grid-column: span 1;
3820  }
3821  
3822  .block-editor-hooks__layout-constrained .components-base-control {
3823    margin-bottom: 0;
3824  }
3825  
3826  .block-editor-hooks__layout-constrained-helptext {
3827    color: #757575;
3828    font-size: 12px;
3829    margin-bottom: 0;
3830  }
3831  
3832  .layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3833    grid-column: 1/-1;
3834  }
3835  
3836  .block-editor-hooks__flex-layout-justification-controls,
3837  .block-editor-hooks__flex-layout-orientation-controls {
3838    margin-bottom: 12px;
3839  }
3840  .block-editor-hooks__flex-layout-justification-controls legend,
3841  .block-editor-hooks__flex-layout-orientation-controls legend {
3842    margin-bottom: 8px;
3843  }
3844  
3845  .block-editor-hooks__grid-layout-columns-and-rows-controls,
3846  .block-editor-hooks__grid-layout-minimum-width-control {
3847    border: 0;
3848    padding: 0;
3849    margin: 0;
3850  }
3851  
3852  .block-editor__spacing-visualizer {
3853    position: absolute;
3854    top: 0;
3855    bottom: 0;
3856    left: 0;
3857    right: 0;
3858    opacity: 0.5;
3859    border-color: var(--wp-admin-theme-color);
3860    border-style: solid;
3861    pointer-events: none;
3862    box-sizing: border-box;
3863  }
3864  
3865  .typography-block-support-panel .single-column {
3866    grid-column: span 1;
3867  }
3868  
3869  /**
3870   * Block Toolbar
3871   */
3872  .block-editor-block-toolbar {
3873    display: flex;
3874    flex-grow: 1;
3875    width: 100%;
3876    position: relative;
3877    overflow-y: hidden;
3878    overflow-x: auto;
3879  }
3880  @media not (prefers-reduced-motion) {
3881    .block-editor-block-toolbar {
3882      transition: border-color 0.1s linear, box-shadow 0.1s linear;
3883    }
3884  }
3885  @media (min-width: 600px) {
3886    .block-editor-block-toolbar {
3887      overflow: inherit;
3888    }
3889  }
3890  .block-editor-block-toolbar .components-toolbar-group,
3891  .block-editor-block-toolbar .components-toolbar {
3892    background: none;
3893    margin-top: -1px;
3894    margin-bottom: -1px;
3895    border: 0;
3896    border-right: 1px solid #ddd;
3897  }
3898  .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
3899    background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
3900    border-radius: 2px;
3901  }
3902  .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true] {
3903    color: #1e1e1e;
3904  }
3905  .block-editor-block-toolbar .components-button.block-editor-block-toolbar__block-icon-button[aria-disabled=true]:hover {
3906    color: #1e1e1e;
3907  }
3908  .block-editor-block-toolbar.is-synced .block-editor-block-toolbar__block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-toolbar__block-icon {
3909    color: var(--wp-block-synced-color);
3910  }
3911  .block-editor-block-toolbar > :last-child,
3912  .block-editor-block-toolbar > :last-child .components-toolbar-group,
3913  .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 {
3914    border-right: none;
3915  }
3916  .block-editor-block-toolbar .components-toolbar-group:empty {
3917    display: none;
3918  }
3919  
3920  .block-editor-block-contextual-toolbar {
3921    position: sticky;
3922    top: 0;
3923    z-index: 31;
3924    display: block;
3925    width: 100%;
3926    background-color: #fff;
3927    flex-shrink: 3;
3928  }
3929  .block-editor-block-contextual-toolbar.components-accessible-toolbar {
3930    border: none;
3931    border-radius: 0;
3932  }
3933  .block-editor-block-contextual-toolbar.is-unstyled {
3934    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
3935  }
3936  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3937    overflow: auto;
3938    overflow-y: hidden;
3939  }
3940  .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
3941    width: 12px;
3942    height: 12px;
3943  }
3944  .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
3945    background-color: transparent;
3946  }
3947  .block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
3948    background-color: #e0e0e0;
3949    border-radius: 8px;
3950    border: 3px solid transparent;
3951    background-clip: padding-box;
3952  }
3953  .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 {
3954    background-color: #949494;
3955  }
3956  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3957    scrollbar-width: thin;
3958    scrollbar-gutter: stable both-edges;
3959    scrollbar-color: #e0e0e0 transparent;
3960  }
3961  .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 {
3962    scrollbar-color: #949494 transparent;
3963  }
3964  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3965    will-change: transform;
3966  }
3967  @media (hover: none) {
3968    .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3969      scrollbar-color: #949494 transparent;
3970    }
3971  }
3972  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
3973    scrollbar-gutter: auto;
3974  }
3975  .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
3976  .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
3977  .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar::after {
3978    display: none;
3979  }
3980  .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
3981    flex-grow: initial;
3982    width: initial;
3983  }
3984  .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
3985    position: relative;
3986    margin-top: -1px;
3987    margin-bottom: -1px;
3988  }
3989  .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
3990    align-items: center;
3991    background-color: #1e1e1e;
3992    border-radius: 100%;
3993    content: "";
3994    display: inline-flex;
3995    height: 2px;
3996    position: absolute;
3997    top: 15px;
3998    width: 2px;
3999  }
4000  
4001  .block-editor-block-toolbar__block-controls .components-toolbar-group {
4002    padding: 0;
4003  }
4004  
4005  .block-editor-block-toolbar__pattern-overrides-popover .components-popover__content {
4006    min-width: 260px;
4007    padding: 16px;
4008  }
4009  
4010  .block-editor-block-toolbar .components-toolbar-group,
4011  .block-editor-block-toolbar .components-toolbar,
4012  .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
4013  .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
4014    display: flex;
4015    flex-wrap: nowrap;
4016  }
4017  
4018  .block-editor-block-toolbar__slot {
4019    display: inline-flex;
4020  }
4021  
4022  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) {
4023    width: auto;
4024  }
4025  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text)) svg {
4026    display: none;
4027  }
4028  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon:where(:not(.has-text))::after {
4029    content: attr(aria-label);
4030    font-size: 12px;
4031  }
4032  .show-icon-labels .block-editor-block-toolbar .block-editor-block-icon {
4033    width: 0 !important;
4034    height: 0 !important;
4035    min-width: 0 !important;
4036  }
4037  .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
4038    padding-left: 6px;
4039    padding-right: 6px;
4040  }
4041  .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
4042    border-top-right-radius: 0;
4043    border-bottom-right-radius: 0;
4044    padding-left: 12px;
4045    padding-right: 12px;
4046    text-wrap: nowrap;
4047  }
4048  .show-icon-labels .block-editor-block-parent-selector .block-editor-block-parent-selector__button .block-editor-block-icon {
4049    width: 0;
4050  }
4051  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
4052    width: auto;
4053    position: relative;
4054  }
4055  @media (min-width: 600px) {
4056    .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
4057      content: "";
4058      height: 1px;
4059      width: 100%;
4060      background: #e0e0e0;
4061      position: absolute;
4062      top: 50%;
4063      left: 50%;
4064      transform: translate(-50%, 0);
4065      margin-top: -0.5px;
4066    }
4067  }
4068  @media (min-width: 782px) {
4069    .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
4070      background: #1e1e1e;
4071    }
4072  }
4073  .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
4074  .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
4075    padding-left: 6px;
4076    padding-right: 6px;
4077  }
4078  .show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
4079    padding-left: 8px;
4080    padding-right: 8px;
4081  }
4082  .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
4083    border-left: 1px solid #ddd;
4084    margin-left: 6px;
4085    margin-right: -6px;
4086    white-space: nowrap;
4087  }
4088  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
4089    padding-left: 12px;
4090    padding-right: 12px;
4091  }
4092  .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
4093    width: auto;
4094  }
4095  .show-icon-labels .components-toolbar,
4096  .show-icon-labels .components-toolbar-group {
4097    flex-shrink: 1;
4098  }
4099  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
4100    margin-left: 6px;
4101  }
4102  
4103  .block-editor-block-toolbar-change-design-content-wrapper {
4104    padding: 12px;
4105    width: 320px;
4106  }
4107  .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
4108    display: grid;
4109    grid-template-columns: 1fr 1fr;
4110    grid-gap: 12px;
4111  }
4112  .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4113    margin-bottom: 0;
4114  }
4115  .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4116    min-height: 100px;
4117  }
4118  
4119  .block-editor-inserter {
4120    display: inline-block;
4121    background: none;
4122    border: none;
4123    padding: 0;
4124    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4125    font-size: 13px;
4126    line-height: 0;
4127  }
4128  @media (min-width: 782px) {
4129    .block-editor-inserter {
4130      position: relative;
4131    }
4132  }
4133  
4134  .block-editor-inserter__main-area {
4135    height: 100%;
4136    gap: 16px;
4137    position: relative;
4138  }
4139  .block-editor-inserter__main-area.show-as-tabs {
4140    gap: 0;
4141  }
4142  @media (min-width: 782px) {
4143    .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
4144      width: 350px;
4145    }
4146  }
4147  
4148  .block-editor-inserter__popover.is-quick .components-popover__content {
4149    border: none;
4150    outline: none;
4151    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);
4152  }
4153  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
4154    border-left: 1px solid #ccc;
4155    border-right: 1px solid #ccc;
4156  }
4157  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
4158    border-top: 1px solid #ccc;
4159    border-radius: 4px 4px 0 0;
4160  }
4161  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
4162    border-bottom: 1px solid #ccc;
4163    border-radius: 0 0 4px 4px;
4164  }
4165  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
4166    border: 1px solid #1e1e1e;
4167  }
4168  
4169  .block-editor-inserter__popover .block-editor-inserter__menu {
4170    margin: -12px;
4171  }
4172  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tablist {
4173    top: 60px;
4174  }
4175  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
4176    overflow: visible;
4177    height: auto;
4178  }
4179  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
4180    display: none;
4181  }
4182  
4183  .block-editor-inserter__toggle.components-button {
4184    display: inline-flex;
4185    align-items: center;
4186    cursor: var(--wpds-cursor-control, pointer);
4187    border: none;
4188    outline: none;
4189    padding: 0;
4190  }
4191  @media not (prefers-reduced-motion) {
4192    .block-editor-inserter__toggle.components-button {
4193      transition: color 0.2s ease;
4194    }
4195  }
4196  
4197  .block-editor-inserter__menu {
4198    height: 100%;
4199    position: relative;
4200    overflow: visible;
4201  }
4202  @media (min-width: 782px) {
4203    .block-editor-inserter__menu.show-panel {
4204      width: 630px;
4205    }
4206  }
4207  
4208  .block-editor-inserter__inline-elements {
4209    margin-top: -1px;
4210  }
4211  
4212  .block-editor-inserter__menu.is-bottom::after {
4213    border-bottom-color: #fff;
4214  }
4215  
4216  .components-popover.block-editor-inserter__popover {
4217    z-index: 99999;
4218  }
4219  
4220  .block-editor-inserter__search {
4221    padding: 16px;
4222    position: sticky;
4223    top: 0;
4224    z-index: 2;
4225    background-color: #fff;
4226    border-bottom: 1px solid transparent;
4227  }
4228  @media not (prefers-reduced-motion) {
4229    .block-editor-inserter__search {
4230      transition: border-bottom-color 0.1s linear;
4231    }
4232  }
4233  .block-editor-inserter__search.is-scrolled {
4234    border-bottom-color: #e0e0e0;
4235  }
4236  
4237  .block-editor-inserter__no-tab-container {
4238    overflow-y: auto;
4239    flex-grow: 1;
4240    position: relative;
4241  }
4242  
4243  .block-editor-inserter__panel-header {
4244    position: relative;
4245    display: inline-flex;
4246    align-items: center;
4247    padding: 0 16px;
4248  }
4249  
4250  .block-editor-inserter__panel-content {
4251    padding: 16px;
4252  }
4253  
4254  .block-editor-inserter__panel-title,
4255  .block-editor-inserter__panel-title button {
4256    margin: 0 12px 0 0;
4257    color: #757575;
4258    text-transform: uppercase;
4259    font-size: 11px;
4260    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4261  }
4262  
4263  .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4264    height: 36px;
4265    line-height: 36px;
4266  }
4267  
4268  .block-editor-inserter__panel-dropdown select {
4269    border: none;
4270  }
4271  
4272  .block-editor-inserter__reusable-blocks-panel {
4273    position: relative;
4274    text-align: right;
4275  }
4276  
4277  .block-editor-inserter__no-results,
4278  .block-editor-inserter__patterns-loading {
4279    padding: 32px;
4280    text-align: center;
4281  }
4282  
4283  .block-editor-inserter__child-blocks {
4284    padding: 0 16px;
4285  }
4286  
4287  .block-editor-inserter__parent-block-header {
4288    display: flex;
4289    align-items: center;
4290  }
4291  .block-editor-inserter__parent-block-header h2 {
4292    font-size: 13px;
4293  }
4294  .block-editor-inserter__parent-block-header .block-editor-block-icon {
4295    margin-right: 8px;
4296  }
4297  
4298  .block-editor-inserter__preview-container__popover {
4299    top: 16px !important;
4300  }
4301  
4302  .block-editor-inserter__preview-container {
4303    display: none;
4304    width: 280px;
4305    padding: 16px;
4306    max-height: calc(100% - 32px);
4307    overflow-y: hidden;
4308  }
4309  @media (min-width: 782px) {
4310    .block-editor-inserter__preview-container {
4311      display: block;
4312    }
4313  }
4314  .block-editor-inserter__preview-container .block-editor-inserter__media-list__list-item {
4315    height: 100%;
4316  }
4317  .block-editor-inserter__preview-container .block-editor-block-card {
4318    padding-left: 0;
4319    padding-right: 0;
4320    padding-bottom: 4px;
4321  }
4322  
4323  .block-editor-inserter__insertable-blocks-at-selection {
4324    border-bottom: 1px solid #e0e0e0;
4325  }
4326  
4327  .block-editor-inserter__media-tabs-container,
4328  .block-editor-inserter__block-patterns-tabs-container {
4329    flex-grow: 1;
4330    padding: 0 16px 16px;
4331    display: flex;
4332    flex-direction: column;
4333    justify-content: space-between;
4334  }
4335  
4336  .block-editor-inserter__media-tabs-container {
4337    padding-top: 16px;
4338  }
4339  
4340  .block-editor-inserter__category-tablist {
4341    margin-bottom: 8px;
4342  }
4343  
4344  .block-editor-inserter__category-panel {
4345    outline: 1px solid transparent;
4346    display: flex;
4347    flex-direction: column;
4348    padding: 0 16px;
4349  }
4350  @media (min-width: 782px) {
4351    .block-editor-inserter__category-panel {
4352      border-left: 1px solid #e0e0e0;
4353      padding: 0;
4354      left: 350px;
4355      width: 280px;
4356      position: absolute;
4357      top: -1px;
4358      height: calc(100% + 1px);
4359      background: #f0f0f0;
4360      border-top: 1px solid #e0e0e0;
4361    }
4362    .block-editor-inserter__category-panel .block-editor-inserter__media-list,
4363    .block-editor-inserter__category-panel .block-editor-block-patterns-list {
4364      padding: 0 24px 16px;
4365    }
4366  }
4367  
4368  .block-editor-inserter__patterns-category-panel-header {
4369    padding: 8px 0;
4370  }
4371  @media (min-width: 782px) {
4372    .block-editor-inserter__patterns-category-panel-header {
4373      padding: 8px 24px;
4374    }
4375  }
4376  
4377  .block-editor-inserter__patterns-category-no-results {
4378    margin-top: 24px;
4379  }
4380  
4381  .block-editor-inserter__patterns-filter-help {
4382    padding: 16px;
4383    border-top: 1px solid #ddd;
4384    color: #757575;
4385    min-width: 280px;
4386  }
4387  
4388  .block-editor-inserter__media-list,
4389  .block-editor-block-patterns-list {
4390    overflow-y: auto;
4391    flex-grow: 1;
4392    height: 100%;
4393  }
4394  
4395  .block-editor-inserter__preview-content {
4396    background: #f0f0f0;
4397    display: grid;
4398    flex-grow: 1;
4399    align-items: center;
4400  }
4401  
4402  .block-editor-inserter__preview-content-missing {
4403    flex: 1;
4404    display: flex;
4405    justify-content: center;
4406    align-items: center;
4407    min-height: 144px;
4408    color: #757575;
4409    background: #f0f0f0;
4410    border-radius: 2px;
4411  }
4412  
4413  .block-editor-inserter__tips {
4414    border-top: 1px solid #ddd;
4415    padding: 16px;
4416    flex-shrink: 0;
4417    position: relative;
4418  }
4419  
4420  .block-editor-inserter__quick-inserter {
4421    width: 100%;
4422    max-width: 100%;
4423  }
4424  @media (min-width: 782px) {
4425    .block-editor-inserter__quick-inserter {
4426      width: 350px;
4427    }
4428  }
4429  
4430  .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
4431    height: 0;
4432    padding: 0;
4433    float: left;
4434  }
4435  
4436  .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
4437  .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
4438    padding: 16px;
4439  }
4440  
4441  .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4442    display: grid;
4443    grid-template-columns: 1fr 1fr;
4444    grid-gap: 8px;
4445  }
4446  .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4447    margin-bottom: 0;
4448  }
4449  .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4450    min-height: 100px;
4451  }
4452  
4453  .block-editor-inserter__quick-inserter-separator {
4454    border-top: 1px solid #ddd;
4455  }
4456  
4457  .block-editor-inserter__popover.is-quick > .components-popover__content {
4458    padding: 0;
4459  }
4460  
4461  .block-editor-inserter__quick-inserter-expand.components-button {
4462    display: block;
4463    background: #1e1e1e;
4464    color: #fff;
4465    width: 100%;
4466    border-radius: 0;
4467  }
4468  .block-editor-inserter__quick-inserter-expand.components-button:hover {
4469    color: #fff;
4470  }
4471  .block-editor-inserter__quick-inserter-expand.components-button:active {
4472    color: #ccc;
4473  }
4474  .block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4475    box-shadow: none;
4476    background: var(--wp-admin-theme-color);
4477    border-color: var(--wp-admin-theme-color);
4478  }
4479  
4480  .block-editor-block-patterns-explorer__sidebar {
4481    position: absolute;
4482    top: 72px;
4483    left: 0;
4484    bottom: 0;
4485    width: 280px;
4486    padding: 24px 24px 24px;
4487    overflow-x: visible;
4488    overflow-y: auto;
4489  }
4490  .block-editor-block-patterns-explorer__sidebar__categories-list__item {
4491    display: block;
4492    width: 100%;
4493    height: 48px;
4494    text-align: left;
4495  }
4496  .block-editor-block-patterns-explorer__search {
4497    margin-bottom: 32px;
4498  }
4499  .block-editor-block-patterns-explorer__search-results-count {
4500    padding-bottom: 32px;
4501  }
4502  .block-editor-block-patterns-explorer__list {
4503    margin-left: 280px;
4504    padding: 24px 0 32px;
4505  }
4506  .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4507    width: 380px;
4508  }
4509  .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4510    display: grid;
4511    grid-gap: 32px;
4512    grid-template-columns: repeat(1, 1fr);
4513    margin-bottom: 16px;
4514  }
4515  @media (min-width: 1080px) {
4516    .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4517      grid-template-columns: repeat(2, 1fr);
4518    }
4519  }
4520  @media (min-width: 1440px) {
4521    .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4522      grid-template-columns: repeat(3, 1fr);
4523    }
4524  }
4525  .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4526    min-height: 240px;
4527  }
4528  .block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item {
4529    height: inherit;
4530    min-height: 100px;
4531    max-height: 800px;
4532  }
4533  
4534  .components-heading.block-editor-inserter__patterns-category-panel-title {
4535    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4536  }
4537  
4538  .block-editor-inserter__patterns-explore-button.components-button,
4539  .block-editor-inserter__media-library-button.components-button {
4540    padding: 16px;
4541    justify-content: center;
4542    margin-top: 16px;
4543    width: 100%;
4544  }
4545  
4546  .block-editor-inserter__media-mobile-screen {
4547    display: flex;
4548    flex-direction: column;
4549    align-self: stretch;
4550  }
4551  
4552  .block-editor-inserter__media-panel {
4553    padding: 0 16px;
4554    display: flex;
4555    flex-direction: column;
4556    flex: 1;
4557    min-height: 0;
4558  }
4559  @media (min-width: 782px) {
4560    .block-editor-inserter__media-panel {
4561      padding: 0;
4562      flex: 0 1 auto;
4563      min-height: 100%;
4564    }
4565  }
4566  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4567    height: 100%;
4568    display: flex;
4569    align-items: center;
4570    justify-content: center;
4571    flex: 1;
4572  }
4573  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4574    margin-bottom: 24px;
4575  }
4576  @media (min-width: 782px) {
4577    .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search {
4578      margin-bottom: 0;
4579      padding: 16px 24px 16px;
4580    }
4581  }
4582  .block-editor-inserter__media-panel .block-editor-inserter__no-results {
4583    flex-grow: 1;
4584  }
4585  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4586    flex-shrink: 0;
4587    padding-top: 16px;
4588    padding-bottom: 16px;
4589  }
4590  @media (min-width: 782px) {
4591    .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4592      padding-left: 24px;
4593      padding-right: 24px;
4594    }
4595  }
4596  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-attach.components-button {
4597    justify-content: center;
4598    padding: 16px;
4599  }
4600  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results {
4601    display: flex;
4602    flex-direction: column;
4603    flex-grow: 1;
4604    min-height: 0;
4605  }
4606  .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4607    opacity: 0.5;
4608    pointer-events: none;
4609  }
4610  @media not (prefers-reduced-motion) {
4611    .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4612      opacity: 1;
4613      animation: inserter-media-panel-pulse 1s ease-in-out infinite;
4614    }
4615  }
4616  .block-editor-inserter__media-panel.has-footer .block-editor-inserter__media-list {
4617    padding-bottom: 0;
4618  }
4619  
4620  @keyframes inserter-media-panel-pulse {
4621    0%, 100% {
4622      opacity: 1;
4623    }
4624    50% {
4625      opacity: 0.5;
4626    }
4627  }
4628  .block-editor-inserter__media-panel-detach-modal {
4629    z-index: 1000001;
4630  }
4631  .block-editor-inserter__media-panel-detach-modal p {
4632    margin-top: 0;
4633  }
4634  
4635  .block-editor-inserter__media-panel-detach-actions {
4636    display: flex;
4637    justify-content: flex-end;
4638    gap: 8px;
4639    margin-top: 16px;
4640  }
4641  
4642  .block-editor-inserter__media-list__list-item {
4643    position: relative;
4644    cursor: var(--wpds-cursor-control, pointer);
4645    margin-bottom: 24px;
4646  }
4647  .block-editor-inserter__media-list__list-item.is-placeholder {
4648    min-height: 100px;
4649  }
4650  .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-inserter__media-list__list-item {
4651    cursor: grab;
4652  }
4653  .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4654    outline-color: rgba(0, 0, 0, 0.3);
4655  }
4656  .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 {
4657    display: block;
4658  }
4659  .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4660    position: absolute;
4661    right: 8px;
4662    top: 8px;
4663  }
4664  .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
4665    background: #fff;
4666    display: none;
4667  }
4668  .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 {
4669    display: block;
4670  }
4671  .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:hover {
4672    box-shadow: inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4673    outline: 2px solid transparent;
4674  }
4675  
4676  .block-editor-inserter__media-list__item {
4677    height: 100%;
4678  }
4679  .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview {
4680    display: flex;
4681    align-items: center;
4682    overflow: hidden;
4683    border-radius: 2px;
4684  }
4685  .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview > * {
4686    margin: 0 auto;
4687    max-width: 100%;
4688    outline: 1px solid rgba(0, 0, 0, 0.1);
4689    outline-offset: -1px;
4690  }
4691  .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
4692    display: flex;
4693    height: 100%;
4694    width: 100%;
4695    position: absolute;
4696    justify-content: center;
4697    background: rgba(255, 255, 255, 0.7);
4698    align-items: center;
4699    pointer-events: none;
4700  }
4701  .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4702    outline-color: var(--wp-admin-theme-color);
4703    outline-width: var(--wp-admin-border-width-focus);
4704    outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4705  }
4706  @media not (prefers-reduced-motion) {
4707    .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview > * {
4708      transition: outline 0.1s linear;
4709    }
4710  }
4711  
4712  .block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item {
4713    min-width: auto;
4714  }
4715  
4716  .block-editor-inserter__mobile-tab-navigation {
4717    padding: 16px;
4718    height: 100%;
4719  }
4720  .block-editor-inserter__mobile-tab-navigation > * {
4721    height: 100%;
4722  }
4723  
4724  @media (min-width: 600px) {
4725    .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
4726      max-width: 480px;
4727    }
4728  }
4729  .block-editor-inserter-media-tab-media-preview-inserter-external-image-modal p {
4730    margin: 0;
4731  }
4732  
4733  .block-editor-inserter__hint {
4734    margin: 16px 16px 0;
4735  }
4736  
4737  .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
4738    height: 40px;
4739  }
4740  
4741  .block-editor-inserter__pattern-panel-placeholder {
4742    display: none;
4743  }
4744  
4745  .block-editor-inserter__menu.is-zoom-out {
4746    display: flex;
4747  }
4748  @media (min-width: 782px) {
4749    .block-editor-inserter__menu.is-zoom-out.show-panel::after {
4750      content: "";
4751      display: block;
4752      width: 300px;
4753      height: 100%;
4754    }
4755  }
4756  
4757  @media (max-width: 959px) {
4758    .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
4759      flex-direction: column;
4760    }
4761    .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4762    .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4763      flex-direction: column;
4764    }
4765  }
4766  .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
4767    flex-direction: column;
4768  }
4769  .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
4770  .show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
4771    flex-direction: column;
4772  }
4773  
4774  .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4775    display: none;
4776    padding: 0 24px 16px;
4777  }
4778  @media (min-width: 480px) {
4779    .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
4780      display: block;
4781    }
4782  }
4783  
4784  .spacing-sizes-control {
4785    border: 0;
4786    padding: 0;
4787    margin: 0;
4788  }
4789  .spacing-sizes-control .spacing-sizes-control__unit-control,
4790  .spacing-sizes-control .spacing-sizes-control__label {
4791    margin-bottom: 0;
4792  }
4793  .spacing-sizes-control .spacing-sizes-control__preset-range,
4794  .spacing-sizes-control .spacing-sizes-control__custom-value-range {
4795    flex: 1;
4796    margin-bottom: 0;
4797  }
4798  
4799  .spacing-sizes-control__header {
4800    height: 16px;
4801    margin-bottom: 12px;
4802  }
4803  
4804  .spacing-sizes-control__wrapper {
4805    align-items: center;
4806  }
4807  
4808  .spacing-sizes-control__dropdown {
4809    height: 24px;
4810  }
4811  
4812  .spacing-sizes-control__wrapper .preset-input-control__icon {
4813    margin-left: -4px;
4814  }
4815  
4816  .block-editor-block-visibility-modal {
4817    z-index: 1000001;
4818  }
4819  .block-editor-block-visibility-modal__options {
4820    border: 0;
4821    padding: 0;
4822    list-style: none;
4823    margin: 24px 0;
4824  }
4825  .block-editor-block-visibility-modal__options-item {
4826    display: flex;
4827    align-items: center;
4828    justify-content: space-between;
4829    margin: 0 0 16px 0;
4830    gap: 24px;
4831  }
4832  .block-editor-block-visibility-modal__options-item:last-child {
4833    margin: 0;
4834  }
4835  .block-editor-block-visibility-modal__options-item--everywhere {
4836    flex-direction: column;
4837    align-items: start;
4838  }
4839  .block-editor-block-visibility-modal__options-checkbox--everywhere {
4840    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4841  }
4842  .block-editor-block-visibility-modal__options-icon--checked {
4843    fill: #ddd;
4844  }
4845  .block-editor-block-visibility-modal__sub-options {
4846    width: 100%;
4847    padding-inline-start: 12px;
4848  }
4849  .block-editor-block-visibility-modal__description {
4850    font-size: 12px;
4851    color: #757575;
4852  }
4853  
4854  .block-editor-block-visibility-info {
4855    padding-top: 4px;
4856    padding-bottom: 4px;
4857    margin: 0 16px 16px;
4858    display: flex;
4859    align-items: center;
4860    justify-content: start;
4861  }