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