[Summary view] [Print] [Text view]

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