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