[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/css/dist/block-editor/ -> style.css (source)

   1  @charset "UTF-8";
   2  /**
   3   * Colors
   4   */
   5  /**
   6   * Breakpoints & Media Queries
   7   */
   8  /**
   9   * SCSS Variables.
  10   *
  11   * Please use variables from this sheet to ensure consistency across the UI.
  12   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  13   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  14   */
  15  /**
  16   * Colors
  17   */
  18  /**
  19   * Fonts & basic variables.
  20   */
  21  /**
  22   * Grid System.
  23   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  24   */
  25  /**
  26   * Dimensions.
  27   */
  28  /**
  29   * Shadows.
  30   */
  31  /**
  32   * Editor widths.
  33   */
  34  /**
  35   * Block & Editor UI.
  36   */
  37  /**
  38   * Block paddings.
  39   */
  40  /**
  41   * React Native specific.
  42   * These variables do not appear to be used anywhere else.
  43   */
  44  /**
  45   * Breakpoint mixins
  46   */
  47  /**
  48   * Long content fade mixin
  49   *
  50   * Creates a fading overlay to signify that the content is longer
  51   * than the space allows.
  52   */
  53  /**
  54   * Focus styles.
  55   */
  56  /**
  57   * Applies editor left position to the selector passed as argument
  58   */
  59  /**
  60   * Styles that are reused verbatim in a few places
  61   */
  62  /**
  63   * Allows users to opt-out of animations via OS-level preferences.
  64   */
  65  /**
  66   * Reset default styles for JavaScript UI based pages.
  67   * This is a WP-admin agnostic reset
  68   */
  69  /**
  70   * Reset the WP Admin page styles for Gutenberg-like pages.
  71   */
  72  :root {
  73    --wp-admin-theme-color: #007cba;
  74    --wp-admin-theme-color-darker-10: #006ba1;
  75    --wp-admin-theme-color-darker-20: #005a87;
  76    --wp-admin-border-width-focus: 2px;
  77  }
  78  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  79    :root {
  80      --wp-admin-border-width-focus: 1.5px;
  81    }
  82  }
  83  
  84  #start-resizable-editor-section {
  85    display: none;
  86  }
  87  
  88  .block-editor-autocompleters__block {
  89    white-space: nowrap;
  90  }
  91  .block-editor-autocompleters__block .block-editor-block-icon {
  92    margin-right: 8px;
  93  }
  94  
  95  .block-editor-block-alignment-matrix-control__popover .components-popover__content {
  96    min-width: 0;
  97    width: auto;
  98  }
  99  .block-editor-block-alignment-matrix-control__popover .components-popover__content > div {
 100    padding: 8px;
 101  }
 102  
 103  .block-editor-block-icon {
 104    display: flex;
 105    align-items: center;
 106    justify-content: center;
 107    width: 24px;
 108    height: 24px;
 109  }
 110  .block-editor-block-icon.has-colors svg {
 111    fill: currentColor;
 112  }
 113  .block-editor-block-icon svg {
 114    min-width: 20px;
 115    min-height: 20px;
 116    max-width: 24px;
 117    max-height: 24px;
 118  }
 119  
 120  .block-editor-block-inspector p {
 121    margin-top: 0;
 122  }
 123  .block-editor-block-inspector h2,
 124  .block-editor-block-inspector h3 {
 125    font-size: 13px;
 126    color: #1e1e1e;
 127    margin-bottom: 1.5em;
 128  }
 129  .block-editor-block-inspector .components-base-control {
 130    margin-bottom: 24px;
 131  }
 132  .block-editor-block-inspector .components-base-control:last-child {
 133    margin-bottom: 8px;
 134  }
 135  .block-editor-block-inspector .components-panel__body {
 136    border: none;
 137    border-top: 1px solid #e0e0e0;
 138  }
 139  .block-editor-block-inspector .block-editor-block-card {
 140    padding: 16px;
 141  }
 142  
 143  .block-editor-block-inspector__no-blocks {
 144    display: block;
 145    font-size: 13px;
 146    background: #fff;
 147    padding: 32px 16px;
 148    text-align: center;
 149  }
 150  
 151  .block-editor-block-styles .block-editor-block-list__block {
 152    margin: 0;
 153  }
 154  
 155  /**
 156   * Notices & Block Selected/Hover Styles.
 157   */
 158  /**
 159   * Cross-Block Selection
 160   */
 161  .block-editor-block-list__layout {
 162    position: relative;
 163  }
 164  .block-editor-block-list__layout.is-navigate-mode {
 165    cursor: default;
 166  }
 167  .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
 168  .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 169  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
 170    position: absolute;
 171    z-index: 1;
 172    pointer-events: none;
 173    content: "";
 174    top: 1px;
 175    bottom: 1px;
 176    left: 1px;
 177    right: 1px;
 178    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 179    border-radius: 1px;
 180    outline: 2px solid transparent;
 181  }
 182  .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
 183  .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 184  .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
 185    box-shadow: 0 0 0 1px #fff;
 186  }
 187  .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
 188  .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
 189  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection {
 190    background: transparent;
 191  }
 192  .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
 193    box-shadow: 0 0 0 1px #949494;
 194  }
 195  .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 196  .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
 197    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 198    outline: var(--wp-admin-border-width-focus) solid transparent;
 199  }
 200  .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before {
 201    content: "";
 202    position: absolute;
 203    z-index: 0;
 204    pointer-events: none;
 205    transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
 206    right: 0;
 207    left: 0;
 208    top: -14px;
 209    border-radius: 2px;
 210    border-top: 4px solid #ccc;
 211  }
 212  .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
 213    content: none;
 214  }
 215  .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
 216    border-color: var(--wp-admin-theme-color);
 217  }
 218  
 219  .is-block-moving-mode.block-editor-block-list__block-selection-button {
 220    opacity: 0;
 221    font-size: 1px;
 222    height: 1px;
 223    padding: 0;
 224  }
 225  
 226  .block-editor-block-list__layout .block-editor-block-list__block {
 227    position: relative;
 228    overflow-wrap: break-word;
 229    /**
 230     * Notices
 231     */
 232    /**
 233     * Block Layout
 234     */
 235    /**
 236    * Block styles and alignments
 237    */
 238  }
 239  .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
 240    z-index: 1;
 241  }
 242  .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
 243    margin: -10px 0 12px 0;
 244  }
 245  .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
 246    margin: 0 0 12px 0;
 247    width: 100%;
 248  }
 249  .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice {
 250    margin-left: 0;
 251    margin-right: 0;
 252  }
 253  .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
 254    font-size: 13px;
 255  }
 256  .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
 257    outline: none;
 258  }
 259  .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
 260    position: absolute;
 261    z-index: 1;
 262    pointer-events: none;
 263    content: "";
 264    top: 1px;
 265    bottom: 1px;
 266    left: 1px;
 267    right: 1px;
 268    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 269    border-radius: 1px;
 270  }
 271  .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
 272    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
 273  }
 274  .block-editor-block-list__layout .block-editor-block-list__block::after {
 275    content: "";
 276    pointer-events: none;
 277    position: absolute;
 278    top: 0;
 279    right: 0;
 280    bottom: 0;
 281    left: 0;
 282    border-radius: 2px;
 283    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
 284  }
 285  .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
 286    min-height: 48px;
 287  }
 288  .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
 289    pointer-events: none;
 290    -webkit-user-select: none;
 291            user-select: none;
 292  }
 293  .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
 294    pointer-events: all;
 295  }
 296  .block-editor-block-list__layout .block-editor-block-list__block.has-warning::after {
 297    content: "";
 298    position: absolute;
 299    top: 0;
 300    right: 0;
 301    bottom: 0;
 302    left: 0;
 303    border-radius: 2px;
 304    background-color: rgba(255, 255, 255, 0.4);
 305  }
 306  .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
 307    background-color: transparent;
 308  }
 309  .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after {
 310    display: none;
 311  }
 312  .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay .block-editor-block-list__layout.has-overlay::after {
 313    display: block;
 314  }
 315  .block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after {
 316    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 317  }
 318  .block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
 319    float: none;
 320  }
 321  .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter {
 322    left: auto;
 323    right: 8px;
 324  }
 325  
 326  .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
 327    cursor: default;
 328  }
 329  .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
 330    top: 1px;
 331    left: 1px;
 332    right: 1px;
 333    bottom: 1px;
 334    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 335    border-radius: 1px;
 336  }
 337  .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
 338    cursor: unset;
 339  }
 340  .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
 341    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 342    top: 1px;
 343    left: 1px;
 344    right: 1px;
 345    bottom: 1px;
 346    border-radius: 1px;
 347  }
 348  .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus::after {
 349    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 350  }
 351  
 352  .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
 353    opacity: 0.5;
 354    transition: opacity 0.1s linear;
 355  }
 356  @media (prefers-reduced-motion: reduce) {
 357    .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
 358      transition-duration: 0s;
 359      transition-delay: 0s;
 360    }
 361  }
 362  .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) .block-editor-block-list__block, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-selected, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-multi-selected {
 363    opacity: 1;
 364  }
 365  
 366  .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
 367    opacity: 0.5;
 368    transition: opacity 0.1s linear;
 369  }
 370  @media (prefers-reduced-motion: reduce) {
 371    .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
 372      transition-duration: 0s;
 373      transition-delay: 0s;
 374    }
 375  }
 376  .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.has-child-selected, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity:not(.has-child-selected) .block-editor-block-list__block, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity .block-editor-block-list__block,
 377  .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity .is-active-entity .block-editor-block-list__block {
 378    opacity: 1;
 379  }
 380  
 381  .wp-block[data-align=left] > *,
 382  .wp-block[data-align=right] > * {
 383    z-index: 21;
 384  }
 385  
 386  /**
 387   * In-Canvas Inserter
 388   */
 389  .block-editor-block-list .block-editor-inserter {
 390    margin: 8px;
 391    cursor: move;
 392    cursor: grab;
 393  }
 394  
 395  @keyframes block-editor-inserter__toggle__fade-in-animation {
 396    from {
 397      opacity: 0;
 398    }
 399    to {
 400      opacity: 1;
 401    }
 402  }
 403  .wp-block .block-list-appender .block-editor-inserter__toggle {
 404    animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
 405    animation-fill-mode: forwards;
 406  }
 407  @media (prefers-reduced-motion: reduce) {
 408    .wp-block .block-list-appender .block-editor-inserter__toggle {
 409      animation-duration: 1ms;
 410      animation-delay: 0s;
 411    }
 412  }
 413  
 414  .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
 415    display: none;
 416  }
 417  .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle {
 418    opacity: 0;
 419    transform: scale(0);
 420  }
 421  
 422  .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
 423    display: block;
 424    margin: 0;
 425    padding: 12px;
 426    width: 100%;
 427    border: none;
 428    outline: none;
 429    border-radius: 2px;
 430    box-shadow: inset 0 0 0 1px #1e1e1e;
 431    resize: none;
 432    overflow: hidden;
 433    font-family: Menlo, Consolas, monaco, monospace;
 434    font-size: 15px;
 435    line-height: 1.5;
 436    transition: padding 0.2s linear;
 437  }
 438  @media (prefers-reduced-motion: reduce) {
 439    .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
 440      transition-duration: 0s;
 441      transition-delay: 0s;
 442    }
 443  }
 444  .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
 445    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 446  }
 447  
 448  /**
 449   * Warnings.
 450   */
 451  .block-editor-block-list__block .block-editor-warning {
 452    z-index: 5;
 453    position: relative;
 454  }
 455  .block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning {
 456    margin-bottom: auto;
 457  }
 458  
 459  /**
 460   * Insertion Point.
 461   */
 462  .block-editor-block-list__insertion-point {
 463    position: absolute;
 464  }
 465  
 466  .block-editor-block-list__insertion-point-indicator {
 467    position: absolute;
 468    background: var(--wp-admin-theme-color);
 469    animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
 470    animation-fill-mode: forwards;
 471  }
 472  @media (prefers-reduced-motion: reduce) {
 473    .block-editor-block-list__insertion-point-indicator {
 474      animation-duration: 1ms;
 475      animation-delay: 0s;
 476    }
 477  }
 478  .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
 479    top: 50%;
 480    right: 0;
 481    left: 0;
 482    height: 1px;
 483  }
 484  .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
 485    top: 0;
 486    right: 0;
 487    left: 50%;
 488    height: 100%;
 489    width: 1px;
 490  }
 491  
 492  .block-editor-block-list__insertion-point-inserter {
 493    display: none;
 494    position: absolute;
 495    justify-content: center;
 496    top: calc(50% - 12px);
 497    left: calc(50% - 12px);
 498  }
 499  @media (min-width: 480px) {
 500    .block-editor-block-list__insertion-point-inserter {
 501      display: flex;
 502    }
 503  }
 504  
 505  .block-editor-block-list__block-popover-inserter {
 506    position: absolute;
 507    top: -9999em;
 508    margin-bottom: 14px;
 509  }
 510  .block-editor-block-list__block-popover-inserter.is-visible {
 511    position: static;
 512  }
 513  
 514  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 515  .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
 516  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon,
 517  .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon {
 518    background: #1e1e1e;
 519    border-radius: 2px;
 520    color: #fff;
 521    padding: 0;
 522    min-width: 24px;
 523    height: 24px;
 524  }
 525  .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 526  .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
 527  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
 528  .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
 529    color: #fff;
 530    background: var(--wp-admin-theme-color);
 531  }
 532  
 533  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
 534    background: var(--wp-admin-theme-color);
 535  }
 536  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
 537    background: #1e1e1e;
 538  }
 539  
 540  .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
 541  .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
 542    animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
 543    animation-fill-mode: forwards;
 544  }
 545  @media (prefers-reduced-motion: reduce) {
 546    .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
 547  .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
 548      animation-duration: 1ms;
 549      animation-delay: 0s;
 550    }
 551  }
 552  
 553  @keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
 554    0% {
 555      opacity: 0;
 556    }
 557    60% {
 558      opacity: 0;
 559    }
 560    100% {
 561      opacity: 1;
 562    }
 563  }
 564  /**
 565   * Block Toolbar when contextual.
 566   */
 567  .block-editor-block-contextual-toolbar {
 568    display: inline-flex;
 569    border: 1px solid #1e1e1e;
 570    border-radius: 2px;
 571    background-color: #fff;
 572  }
 573  .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group,
 574  .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar {
 575    border-right-color: #1e1e1e;
 576  }
 577  .block-editor-block-contextual-toolbar.is-fixed {
 578    position: sticky;
 579    top: 0;
 580    width: 100%;
 581    z-index: 31;
 582    min-height: 48px;
 583    display: block;
 584    border: none;
 585    border-bottom: 1px solid #e0e0e0;
 586    border-radius: 0;
 587  }
 588  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
 589  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
 590    border-right-color: #e0e0e0;
 591  }
 592  .block-editor-block-contextual-toolbar .block-editor-block-mover-button {
 593    overflow: hidden;
 594  }
 595  .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
 596    min-width: 24px;
 597    width: 24px;
 598  }
 599  .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button svg {
 600    min-width: 24px;
 601  }
 602  
 603  .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button:focus::before {
 604    left: 0 !important;
 605    min-width: 0;
 606    width: 100%;
 607  }
 608  @media (min-width: 600px) {
 609    .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-up-button svg {
 610      top: 5px;
 611    }
 612    .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-down-button svg {
 613      bottom: 5px;
 614    }
 615  }
 616  
 617  /**
 618   * Block Label for Navigation/Selection Mode
 619   */
 620  .block-editor-block-list__block-selection-button {
 621    display: inline-flex;
 622    padding: 0 13px;
 623    z-index: 22;
 624    border-radius: 2px;
 625    background-color: #1e1e1e;
 626    font-size: 13px;
 627    height: 48px;
 628  }
 629  .block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content {
 630    margin: auto;
 631    display: inline-flex;
 632    align-items: center;
 633  }
 634  .block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content > .components-flex__item {
 635    margin-right: 6px;
 636  }
 637  .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle {
 638    cursor: grab;
 639    padding: 0;
 640    height: 24px;
 641    min-width: 24px;
 642  }
 643  .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg {
 644    min-width: 18px;
 645    min-height: 18px;
 646  }
 647  .block-editor-block-list__block-selection-button .block-editor-block-icon {
 648    font-size: 13px;
 649    color: #fff;
 650    height: 48px;
 651  }
 652  .block-editor-block-list__block-selection-button .components-button {
 653    min-width: 36px;
 654    color: #fff;
 655    height: 48px;
 656    display: flex;
 657  }
 658  .block-editor-block-list__block-selection-button .components-button:focus {
 659    box-shadow: none;
 660    border: none;
 661  }
 662  .block-editor-block-list__block-selection-button .components-button:active {
 663    color: #fff;
 664  }
 665  .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
 666    padding: 0;
 667  }
 668  
 669  /**
 670   * Popovers.
 671   */
 672  .block-editor-block-list__insertion-point-popover.is-without-arrow {
 673    z-index: 28;
 674    position: absolute;
 675    pointer-events: none;
 676  }
 677  .block-editor-block-list__insertion-point-popover.is-without-arrow * {
 678    pointer-events: none;
 679  }
 680  .block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter {
 681    pointer-events: all;
 682  }
 683  .block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter * {
 684    pointer-events: all;
 685  }
 686  .block-editor-block-list__insertion-point-popover.is-without-arrow .components-popover__content.components-popover__content {
 687    background: none;
 688    border: none;
 689    box-shadow: none;
 690    overflow-y: visible;
 691    margin-left: 0;
 692  }
 693  
 694  @keyframes hide-during-dragging {
 695    to {
 696      position: fixed;
 697      transform: translate(9999px, 9999px);
 698    }
 699  }
 700  .components-popover.block-editor-block-list__block-popover {
 701    z-index: 31;
 702    position: absolute;
 703  }
 704  .components-popover.block-editor-block-list__block-popover .components-popover__content {
 705    margin: 0 !important;
 706    min-width: auto;
 707    width: max-content;
 708    background: none;
 709    border: none;
 710    box-shadow: none;
 711    overflow-y: visible;
 712    pointer-events: none;
 713  }
 714  .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button,
 715  .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar,
 716  .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__empty-block-inserter {
 717    pointer-events: all;
 718  }
 719  .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button,
 720  .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar {
 721    margin-top: 12px;
 722    margin-bottom: 12px;
 723  }
 724  .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
 725    visibility: hidden;
 726  }
 727  .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover {
 728    opacity: 0;
 729    animation: hide-during-dragging 1ms linear forwards;
 730  }
 731  
 732  .is-dragging-components-draggable .components-tooltip {
 733    display: none;
 734  }
 735  
 736  .block-editor-block-list__block .block-list-appender {
 737    align-self: center;
 738    padding: 0;
 739    list-style: none;
 740    margin: 0 auto 0 0;
 741  }
 742  .block-editor-block-list__block .block-list-appender.wp-block {
 743    max-width: none;
 744  }
 745  .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
 746    margin: 8px 0;
 747  }
 748  .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
 749    padding: 0;
 750    opacity: 1;
 751    transform: scale(1);
 752    transition: all 0.1s ease;
 753    margin-left: 8px;
 754  }
 755  @media (prefers-reduced-motion: reduce) {
 756    .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
 757      transition-duration: 0s;
 758      transition-delay: 0s;
 759    }
 760  }
 761  .block-editor-block-list__block .block-list-appender:first-of-type .block-list-appender__toggle {
 762    margin-left: 0;
 763  }
 764  
 765  .is-vertical .block-list-appender {
 766    width: 24px;
 767    margin-right: auto;
 768    margin-top: 12px;
 769    margin-left: 12px;
 770  }
 771  
 772  .block-list-appender > .block-editor-inserter {
 773    display: block;
 774  }
 775  
 776  .block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle {
 777    opacity: 0;
 778    transform: scale(0);
 779  }
 780  
 781  .block-editor-block-breadcrumb {
 782    list-style: none;
 783    padding: 0;
 784    margin: 0;
 785  }
 786  .block-editor-block-breadcrumb li {
 787    display: inline-block;
 788    margin: 0;
 789  }
 790  .block-editor-block-breadcrumb li:not(:last-child)::after {
 791    content: "→" /*rtl:"←"*/;
 792  }
 793  
 794  .block-editor-block-breadcrumb__button.components-button {
 795    height: 24px;
 796    line-height: 24px;
 797    padding: 0;
 798    position: relative;
 799  }
 800  .block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) {
 801    text-decoration: underline;
 802    box-shadow: none;
 803  }
 804  .block-editor-block-breadcrumb__button.components-button:focus {
 805    box-shadow: none;
 806  }
 807  .block-editor-block-breadcrumb__button.components-button:focus::before {
 808    content: "";
 809    display: block;
 810    position: absolute;
 811    border-radius: 2px;
 812    top: 1px;
 813    right: 1px;
 814    bottom: 1px;
 815    left: 1px;
 816    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 817  }
 818  
 819  .block-editor-block-breadcrumb__current {
 820    cursor: default;
 821  }
 822  
 823  .block-editor-block-breadcrumb__button.components-button,
 824  .block-editor-block-breadcrumb__current {
 825    color: #1e1e1e;
 826    padding: 0 8px;
 827    font-size: inherit;
 828  }
 829  
 830  .block-editor-block-card {
 831    display: flex;
 832    align-items: flex-start;
 833  }
 834  
 835  .block-editor-block-card__content {
 836    flex-grow: 1;
 837    margin-bottom: 4px;
 838  }
 839  
 840  .block-editor-block-card__title {
 841    font-weight: 500;
 842  }
 843  .block-editor-block-card__title.block-editor-block-card__title {
 844    line-height: 24px;
 845    margin: 0 0 4px;
 846  }
 847  
 848  .block-editor-block-card__description {
 849    font-size: 13px;
 850  }
 851  
 852  .block-editor-block-card .block-editor-block-icon {
 853    flex: 0 0 24px;
 854    margin-left: 0;
 855    margin-right: 12px;
 856    width: 24px;
 857    height: 24px;
 858  }
 859  
 860  /**
 861   * Invalid block comparison
 862   */
 863  .block-editor-block-compare {
 864    overflow: auto;
 865    height: auto;
 866  }
 867  @media (min-width: 600px) {
 868    .block-editor-block-compare {
 869      max-height: 70%;
 870    }
 871  }
 872  
 873  .block-editor-block-compare__wrapper {
 874    display: flex;
 875    padding-bottom: 16px;
 876  }
 877  .block-editor-block-compare__wrapper > div {
 878    display: flex;
 879    justify-content: space-between;
 880    flex-direction: column;
 881    width: 50%;
 882    padding: 0 16px 0 0;
 883    min-width: 200px;
 884  }
 885  .block-editor-block-compare__wrapper > div button {
 886    float: right;
 887  }
 888  .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
 889    border-left: 1px solid #ddd;
 890    padding-left: 15px;
 891    padding-right: 0;
 892  }
 893  .block-editor-block-compare__wrapper .block-editor-block-compare__html {
 894    font-family: Menlo, Consolas, monaco, monospace;
 895    font-size: 12px;
 896    color: #1e1e1e;
 897    border-bottom: 1px solid #ddd;
 898    padding-bottom: 15px;
 899    line-height: 1.7;
 900  }
 901  .block-editor-block-compare__wrapper .block-editor-block-compare__html span {
 902    background-color: #e6ffed;
 903    padding-top: 3px;
 904    padding-bottom: 3px;
 905  }
 906  .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added {
 907    background-color: #acf2bd;
 908  }
 909  .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed {
 910    background-color: #cc1818;
 911  }
 912  .block-editor-block-compare__wrapper .block-editor-block-compare__preview {
 913    padding: 0;
 914    padding-top: 16px;
 915  }
 916  .block-editor-block-compare__wrapper .block-editor-block-compare__preview p {
 917    font-size: 12px;
 918    margin-top: 0;
 919  }
 920  .block-editor-block-compare__wrapper .block-editor-block-compare__action {
 921    margin-top: 16px;
 922  }
 923  .block-editor-block-compare__wrapper .block-editor-block-compare__heading {
 924    font-size: 1em;
 925    font-weight: 400;
 926    margin: 0.67em 0;
 927  }
 928  
 929  .block-editor-block-draggable-chip-wrapper {
 930    position: absolute;
 931    top: -24px;
 932    left: 0;
 933  }
 934  
 935  .block-editor-block-draggable-chip {
 936    background-color: #1e1e1e;
 937    border-radius: 2px;
 938    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
 939    color: #fff;
 940    cursor: grabbing;
 941    display: inline-flex;
 942    height: 48px;
 943    padding: 0 13px;
 944    -webkit-user-select: none;
 945            user-select: none;
 946  }
 947  .block-editor-block-draggable-chip svg {
 948    fill: currentColor;
 949  }
 950  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content {
 951    margin: auto;
 952    justify-content: flex-start;
 953  }
 954  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item {
 955    margin-right: 6px;
 956  }
 957  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child {
 958    margin-right: 0;
 959  }
 960  .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content .block-editor-block-icon svg {
 961    min-width: 18px;
 962    min-height: 18px;
 963  }
 964  .block-editor-block-draggable-chip .components-flex__item {
 965    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 966    font-size: 13px;
 967  }
 968  
 969  .is-dragging {
 970    display: none !important;
 971  }
 972  
 973  .block-editor-block-mobile-toolbar {
 974    display: flex;
 975    flex-direction: row;
 976    border-right: 1px solid #ddd;
 977  }
 978  .block-editor-block-mobile-toolbar .block-editor-block-mover-button {
 979    width: 36px;
 980    height: 36px;
 981    border-radius: 2px;
 982    padding: 3px;
 983    margin: 0;
 984    justify-content: center;
 985    align-items: center;
 986  }
 987  .block-editor-block-mobile-toolbar .block-editor-block-mover-button .dashicon {
 988    margin: auto;
 989  }
 990  .block-editor-block-mobile-toolbar .block-editor-block-mover {
 991    display: flex;
 992    margin-right: auto;
 993  }
 994  .block-editor-block-mobile-toolbar .block-editor-block-mover .block-editor-block-mover-button {
 995    float: left;
 996  }
 997  
 998  .block-editor-block-mover-button__description {
 999    display: none;
1000  }
1001  
1002  .block-editor-block-mover-button.has-icon {
1003    padding: 0;
1004  }
1005  
1006  .block-editor-block-mover {
1007    display: inline-flex;
1008    flex-direction: row;
1009  }
1010  .block-editor-block-mover .block-editor-block-mover__move-button-container,
1011  .block-editor-block-mover .components-toolbar {
1012    flex: 1;
1013    flex-direction: row;
1014    border-right: none !important;
1015  }
1016  @media (min-width: 600px) {
1017    .block-editor-block-mover .block-editor-block-mover__move-button-container,
1018  .block-editor-block-mover .components-toolbar {
1019      flex-direction: column;
1020    }
1021  }
1022  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container, .block-editor-block-mover.is-horizontal .components-toolbar {
1023    flex-direction: row;
1024  }
1025  .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button {
1026    padding-right: 0;
1027    padding-left: 0;
1028    min-width: 36px;
1029  }
1030  @media (min-width: 600px) {
1031    .block-editor-block-mover .block-editor-block-mover-button {
1032      height: 24px;
1033      width: 42px;
1034      padding-right: 11px !important;
1035      padding-left: 6px !important;
1036    }
1037    .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button {
1038      min-width: 42px;
1039    }
1040  }
1041  @media (min-width: 600px) {
1042    .block-editor-block-mover .block-editor-block-mover-button::before {
1043      left: 8px !important;
1044      right: 8px !important;
1045    }
1046  }
1047  .block-editor-block-mover .block-editor-block-mover__drag-handle {
1048    width: 24px;
1049    cursor: grab;
1050    min-width: 24px !important;
1051    padding: 0 !important;
1052  }
1053  .block-editor-block-mover .block-editor-block-mover__drag-handle:focus::before {
1054    left: 0 !important;
1055    right: 0 !important;
1056  }
1057  @media (min-width: 600px) {
1058    .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button,
1059  .block-editor-block-mover .components-toolbar .block-editor-block-mover-button {
1060      margin: 0 auto 0 0;
1061    }
1062    .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-up-button::before,
1063  .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-up-button::before {
1064      bottom: 0;
1065      height: calc(100% - 1px);
1066    }
1067    .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-down-button::before,
1068  .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-down-button::before {
1069      top: 0;
1070      height: calc(100% - 1px);
1071    }
1072  }
1073  .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon {
1074    height: 48px;
1075    width: 24px;
1076    padding-left: 0;
1077    padding-right: 0;
1078  }
1079  .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon::before {
1080    top: 1px;
1081    bottom: 1px;
1082    min-width: 0;
1083    width: auto;
1084    height: auto;
1085  }
1086  .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon svg {
1087    margin-left: 0;
1088    margin-right: -8px;
1089    margin-bottom: 0;
1090  }
1091  .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon::before {
1092    left: 0 !important;
1093    right: 0 !important;
1094  }
1095  .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon svg {
1096    margin-left: -8px;
1097    margin-right: 0;
1098    margin-top: 0;
1099  }
1100  .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon::before {
1101    left: 0 !important;
1102    right: 0 !important;
1103    width: calc(100% + 1px);
1104  }
1105  
1106  .block-editor-block-navigation__label {
1107    margin: 0 0 12px;
1108    color: #757575;
1109    text-transform: uppercase;
1110    font-size: 11px;
1111    font-weight: 500;
1112  }
1113  
1114  .block-editor-block-navigation__container {
1115    min-width: 280px;
1116  }
1117  
1118  .block-editor-block-navigation-tree {
1119    width: 100%;
1120    border-collapse: collapse;
1121    padding: 0;
1122    margin: 0;
1123  }
1124  .components-modal__content .block-editor-block-navigation-tree {
1125    margin: -12px -6px 0;
1126    width: calc(100% + 12px);
1127  }
1128  
1129  .block-editor-block-navigation-leaf {
1130    position: relative;
1131  }
1132  .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents {
1133    background: var(--wp-admin-theme-color);
1134    color: #fff;
1135  }
1136  .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents:focus {
1137    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1138  }
1139  .block-editor-block-navigation-leaf.is-branch-selected.is-selected .block-editor-block-navigation-block-contents {
1140    border-radius: 2px 2px 0 0;
1141  }
1142  .block-editor-block-navigation-leaf.is-branch-selected:not(.is-selected) .block-editor-block-navigation-block-contents {
1143    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
1144    border-radius: 0;
1145  }
1146  .block-editor-block-navigation-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-block-navigation-block-contents {
1147    border-radius: 0 0 2px 2px;
1148  }
1149  .block-editor-block-navigation-leaf.is-dragging {
1150    display: none;
1151  }
1152  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents {
1153    display: flex;
1154    align-items: center;
1155    width: 100%;
1156    height: auto;
1157    padding: 6px 12px;
1158    text-align: left;
1159    color: #1e1e1e;
1160    border-radius: 2px;
1161    position: relative;
1162    white-space: nowrap;
1163  }
1164  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus {
1165    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1166  }
1167  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus {
1168    z-index: 1;
1169  }
1170  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-before::before {
1171    content: "";
1172    position: absolute;
1173    pointer-events: none;
1174    transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
1175    top: -2px;
1176    right: 0;
1177    left: 0;
1178    border-top: 4px solid var(--wp-admin-theme-color);
1179  }
1180  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-after::before {
1181    content: "";
1182    position: absolute;
1183    pointer-events: none;
1184    transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
1185    bottom: -2px;
1186    right: 0;
1187    left: 0;
1188    border-bottom: 4px solid var(--wp-admin-theme-color);
1189  }
1190  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-to-inner-blocks::before {
1191    content: "";
1192    position: absolute;
1193    pointer-events: none;
1194    transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
1195    bottom: -2px;
1196    right: 0;
1197    left: 24px;
1198    border-bottom: 4px solid var(--wp-admin-theme-color);
1199  }
1200  .components-modal__content .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents {
1201    padding-left: 0;
1202    padding-right: 0;
1203  }
1204  .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents {
1205    opacity: 1;
1206    animation: edit-post__fade-in-animation 0.2s ease-out 0s;
1207    animation-fill-mode: forwards;
1208  }
1209  @media (prefers-reduced-motion: reduce) {
1210    .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents {
1211      animation-duration: 1ms;
1212      animation-delay: 0s;
1213    }
1214  }
1215  .block-editor-block-navigation-leaf .block-editor-block-icon {
1216    align-self: flex-start;
1217    margin-right: 10px;
1218    width: 20px;
1219  }
1220  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
1221  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell,
1222  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__contents-cell {
1223    padding-top: 0;
1224    padding-bottom: 0;
1225  }
1226  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
1227  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell {
1228    line-height: 0;
1229    width: 36px;
1230    opacity: 0;
1231    vertical-align: top;
1232  }
1233  @media (prefers-reduced-motion: reduce) {
1234    .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
1235  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell {
1236      transition-duration: 0s;
1237      transition-delay: 0s;
1238    }
1239  }
1240  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible,
1241  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover,
1242  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible {
1243    position: relative;
1244    z-index: 1;
1245    opacity: 1;
1246    animation: edit-post__fade-in-animation 0.2s ease-out 0s;
1247    animation-fill-mode: forwards;
1248  }
1249  @media (prefers-reduced-motion: reduce) {
1250    .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible,
1251  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover,
1252  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible {
1253      animation-duration: 1ms;
1254      animation-delay: 0s;
1255    }
1256  }
1257  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
1258  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell .components-button.has-icon,
1259  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell,
1260  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell .components-button.has-icon {
1261    width: 24px;
1262    min-width: 24px;
1263    padding: 0;
1264  }
1265  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell {
1266    padding-top: 8px;
1267  }
1268  .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell-alignment-wrapper {
1269    display: flex;
1270    height: 100%;
1271    flex-direction: column;
1272    align-items: center;
1273  }
1274  .block-editor-block-navigation-leaf .block-editor-block-mover-button {
1275    position: relative;
1276    width: 36px;
1277    height: 24px;
1278  }
1279  .block-editor-block-navigation-leaf .block-editor-block-mover-button svg {
1280    position: relative;
1281    height: 24px;
1282  }
1283  .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button {
1284    margin-top: -6px;
1285    align-items: flex-end;
1286  }
1287  .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button svg {
1288    bottom: -4px;
1289  }
1290  .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button {
1291    margin-bottom: -6px;
1292    align-items: flex-start;
1293  }
1294  .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button svg {
1295    top: -4px;
1296  }
1297  .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus:enabled {
1298    box-shadow: none;
1299    outline: none;
1300  }
1301  .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus {
1302    box-shadow: none;
1303    outline: none;
1304  }
1305  .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus::before {
1306    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
1307    outline: 2px solid transparent;
1308  }
1309  .block-editor-block-navigation-leaf .block-editor-block-mover-button::before {
1310    content: "";
1311    position: absolute;
1312    display: block;
1313    border-radius: 2px;
1314    height: 16px;
1315    min-width: 100%;
1316    left: 0;
1317    right: 0;
1318    animation: components-button__appear-animation 0.1s ease;
1319    animation-fill-mode: forwards;
1320  }
1321  @media (prefers-reduced-motion: reduce) {
1322    .block-editor-block-navigation-leaf .block-editor-block-mover-button::before {
1323      animation-duration: 1ms;
1324      animation-delay: 0s;
1325    }
1326  }
1327  .block-editor-block-navigation-leaf .block-editor-inserter__toggle {
1328    background: #1e1e1e;
1329    color: #fff;
1330    height: 24px;
1331    margin: 6px 6px 6px 1px;
1332    min-width: 24px;
1333  }
1334  .block-editor-block-navigation-leaf .block-editor-inserter__toggle:active {
1335    color: #fff;
1336  }
1337  .block-editor-block-navigation-leaf .block-editor-block-navigation-block-select-button__anchor {
1338    background: rgba(0, 0, 0, 0.1);
1339    border-radius: 2px;
1340    display: inline-block;
1341    padding: 2px 6px;
1342    margin: 0 8px;
1343    max-width: 120px;
1344    overflow: hidden;
1345    text-overflow: ellipsis;
1346  }
1347  .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-select-button__anchor {
1348    background: rgba(0, 0, 0, 0.3);
1349  }
1350  
1351  .block-editor-block-navigation-block-slot__description,
1352  .block-editor-block-navigation-block-select-button__description,
1353  .block-editor-block-navigation-appender__description {
1354    display: none;
1355  }
1356  
1357  .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-block__contents-container,
1358  .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-appender__container,
1359  .block-editor-block-navigation-appender__cell .block-editor-block-navigation-block__contents-container,
1360  .block-editor-block-navigation-appender__cell .block-editor-block-navigation-appender__container {
1361    display: flex;
1362  }
1363  
1364  .block-editor-block-navigation-leaf[aria-level] .block-editor-block-icon {
1365    margin-left: 224px;
1366  }
1367  
1368  .block-editor-block-navigation-leaf[aria-level="1"] .block-editor-block-icon {
1369    margin-left: 0px;
1370  }
1371  
1372  .block-editor-block-navigation-leaf[aria-level="2"] .block-editor-block-icon {
1373    margin-left: 28px;
1374  }
1375  
1376  .block-editor-block-navigation-leaf[aria-level="3"] .block-editor-block-icon {
1377    margin-left: 56px;
1378  }
1379  
1380  .block-editor-block-navigation-leaf[aria-level="4"] .block-editor-block-icon {
1381    margin-left: 84px;
1382  }
1383  
1384  .block-editor-block-navigation-leaf[aria-level="5"] .block-editor-block-icon {
1385    margin-left: 112px;
1386  }
1387  
1388  .block-editor-block-navigation-leaf[aria-level="6"] .block-editor-block-icon {
1389    margin-left: 140px;
1390  }
1391  
1392  .block-editor-block-navigation-leaf[aria-level="7"] .block-editor-block-icon {
1393    margin-left: 168px;
1394  }
1395  
1396  .block-editor-block-navigation-leaf[aria-level="8"] .block-editor-block-icon {
1397    margin-left: 196px;
1398  }
1399  
1400  .block-editor-block-navigation-leaf[aria-level="9"] .block-editor-block-icon {
1401    margin-left: 224px;
1402  }
1403  
1404  .block-editor-block-parent-selector {
1405    background: #fff;
1406    border-radius: 2px;
1407  }
1408  .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
1409    width: 48px;
1410    height: 48px;
1411    border: 1px solid #1e1e1e;
1412    border-radius: 2px;
1413  }
1414  
1415  .block-editor-block-patterns-list__list-item {
1416    cursor: pointer;
1417    margin-top: 16px;
1418  }
1419  .block-editor-block-patterns-list__list-item.is-placeholder {
1420    min-height: 100px;
1421  }
1422  .block-editor-block-patterns-list__list-item[draggable=true] .block-editor-block-preview__container {
1423    cursor: grab;
1424  }
1425  
1426  .block-editor-block-patterns-list__item {
1427    height: 100%;
1428    border-radius: 2px;
1429    transition: all 0.05s ease-in-out;
1430    position: relative;
1431    border: 1px solid transparent;
1432  }
1433  .block-editor-block-patterns-list__item:hover {
1434    border: 1px solid var(--wp-admin-theme-color);
1435  }
1436  .block-editor-block-patterns-list__item:focus {
1437    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1438    outline: 2px solid transparent;
1439  }
1440  
1441  .block-editor-block-patterns-list__item-title {
1442    padding: 4px;
1443    font-size: 12px;
1444    text-align: center;
1445  }
1446  
1447  .block-editor-block-preview__container {
1448    position: relative;
1449    width: 100%;
1450    overflow: hidden;
1451  }
1452  .block-editor-block-preview__container.editor-styles-wrapper {
1453    padding: 0;
1454    margin: 0;
1455  }
1456  .block-editor-block-preview__container .block-editor-block-preview__content {
1457    position: absolute;
1458    top: 0;
1459    left: 0;
1460    transform-origin: top left;
1461    text-align: initial;
1462    margin: 0;
1463    overflow: visible;
1464    min-height: auto;
1465  }
1466  .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point,
1467  .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-drop-zone,
1468  .block-editor-block-preview__container .block-editor-block-preview__content .reusable-block-indicator,
1469  .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
1470    display: none;
1471  }
1472  .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container {
1473    padding-left: 0;
1474    padding-right: 0;
1475  }
1476  .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
1477    margin-left: 0;
1478    margin-right: 0;
1479  }
1480  
1481  .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
1482    padding: 0;
1483  }
1484  
1485  .block-editor-block-styles {
1486    display: flex;
1487    flex-wrap: wrap;
1488    justify-content: space-between;
1489  }
1490  
1491  .block-editor-block-styles__item {
1492    width: calc(50% - 4px);
1493    margin: 4px 0;
1494    flex-shrink: 0;
1495    cursor: pointer;
1496    overflow: hidden;
1497    border-radius: 2px;
1498    padding: 6px;
1499    display: flex;
1500    flex-direction: column;
1501  }
1502  .block-editor-block-styles__item:focus {
1503    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1504    outline: 2px solid transparent;
1505  }
1506  .block-editor-block-styles__item:hover .block-editor-block-styles__item-preview {
1507    border-color: var(--wp-admin-theme-color);
1508  }
1509  .block-editor-block-styles__item.is-active .block-editor-block-styles__item-label {
1510    font-weight: bold;
1511  }
1512  .block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview {
1513    margin: 0;
1514    border: 2px solid #1e1e1e;
1515  }
1516  .block-editor-block-styles__item .block-editor-block-preview__container {
1517    cursor: inherit;
1518  }
1519  
1520  .block-editor-block-styles__item-preview {
1521    outline: 1px solid transparent;
1522    padding: 0;
1523    margin: 2px;
1524    border-radius: 2px;
1525    display: flex;
1526    overflow: hidden;
1527    background: #fff;
1528    align-items: center;
1529    flex-grow: 1;
1530    min-height: 80px;
1531    max-height: 160px;
1532  }
1533  
1534  .block-editor-block-switcher__styles__menugroup {
1535    position: relative;
1536  }
1537  
1538  .block-editor-block-styles__item-label {
1539    text-align: center;
1540    padding: 4px 0;
1541  }
1542  
1543  .block-editor-block-switcher {
1544    position: relative;
1545  }
1546  
1547  .block-editor-block-switcher__no-switcher-icon,
1548  .block-editor-block-switcher__toggle {
1549    position: relative;
1550  }
1551  
1552  .components-button.block-editor-block-switcher__toggle,
1553  .components-button.block-editor-block-switcher__no-switcher-icon {
1554    margin: 0;
1555    display: block;
1556    height: 48px;
1557  }
1558  .components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
1559  .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
1560    margin: auto;
1561  }
1562  
1563  .block-editor-block-switcher__toggle-text {
1564    margin-left: 8px;
1565  }
1566  .show-icon-labels .block-editor-block-switcher__toggle-text {
1567    display: none;
1568  }
1569  
1570  .show-icon-labels .block-editor-block-toolbar .block-editor-block-switcher .components-button.has-icon::after {
1571    font-size: 14px;
1572  }
1573  
1574  .block-editor-block-switcher__popover {
1575    margin-left: 6px;
1576  }
1577  
1578  .components-button.block-editor-block-switcher__no-switcher-icon {
1579    width: 48px;
1580  }
1581  .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon {
1582    margin-right: auto;
1583    margin-left: auto;
1584  }
1585  
1586  .components-button.block-editor-block-switcher__no-switcher-icon:disabled {
1587    opacity: 1;
1588  }
1589  .components-button.block-editor-block-switcher__no-switcher-icon:disabled,
1590  .components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
1591    color: #1e1e1e;
1592  }
1593  
1594  .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
1595  .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
1596  .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon,
1597  .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon {
1598    height: 100%;
1599    position: relative;
1600    margin: 0 auto;
1601    display: flex;
1602    align-items: center;
1603    min-width: 100%;
1604  }
1605  .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
1606  .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
1607  .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before,
1608  .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before {
1609    top: 8px;
1610    right: 8px;
1611    bottom: 8px;
1612    left: 8px;
1613  }
1614  
1615  .components-popover.block-editor-block-switcher__popover .components-popover__content {
1616    min-width: 300px;
1617  }
1618  
1619  .components-popover.block-editor-block-switcher__popover .components-popover__content > div {
1620    min-width: auto;
1621    display: flex;
1622    background: #fff;
1623    padding: 0;
1624  }
1625  .components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group {
1626    margin: 0;
1627  }
1628  
1629  .block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles {
1630    margin: 0 -3px;
1631  }
1632  .block-editor-block-switcher__popover .components-popover__content .components-panel__body {
1633    border: 0;
1634    position: relative;
1635    z-index: 1;
1636  }
1637  .block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body {
1638    border-top: 1px solid #e0e0e0;
1639  }
1640  
1641  .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
1642    position: absolute;
1643    top: -12px;
1644    left: calc(100% + 32px);
1645  }
1646  
1647  .block-editor-block-switcher__preview__popover {
1648    display: none;
1649  }
1650  .block-editor-block-switcher__preview__popover.components-popover {
1651    margin-left: 4px;
1652    margin-top: 11px;
1653  }
1654  @media (min-width: 782px) {
1655    .block-editor-block-switcher__preview__popover {
1656      display: block;
1657    }
1658  }
1659  .block-editor-block-switcher__preview__popover .components-popover__content {
1660    box-shadow: none;
1661    border: 1px solid #1e1e1e;
1662    background: #fff;
1663    border-radius: 2px;
1664  }
1665  .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
1666    width: 300px;
1667    height: auto;
1668    max-height: 500px;
1669    padding: 16px;
1670  }
1671  
1672  .block-editor-block-switcher__preview-title {
1673    margin-bottom: 12px;
1674    color: #757575;
1675    text-transform: uppercase;
1676    font-size: 11px;
1677    font-weight: 500;
1678  }
1679  
1680  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
1681    width: 48px;
1682  }
1683  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon,
1684  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle {
1685    height: 48px;
1686  }
1687  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon,
1688  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
1689  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
1690  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
1691    width: 48px;
1692    height: 48px;
1693  }
1694  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
1695  .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
1696    padding: 12px;
1697  }
1698  
1699  .block-editor-block-switcher__preview-patterns-container {
1700    padding-bottom: 16px;
1701  }
1702  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item {
1703    margin-top: 16px;
1704  }
1705  .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
1706    cursor: pointer;
1707  }
1708  .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 {
1709    height: 100%;
1710    border-radius: 2px;
1711    transition: all 0.05s ease-in-out;
1712    position: relative;
1713    border: 1px solid transparent;
1714  }
1715  .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 {
1716    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1717    outline: 2px solid transparent;
1718  }
1719  .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 {
1720    box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
1721  }
1722  .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 {
1723    padding: 4px;
1724    font-size: 12px;
1725    text-align: center;
1726    cursor: pointer;
1727  }
1728  
1729  .block-editor-block-types-list > [role=presentation] {
1730    padding: 4px;
1731    margin-left: -4px;
1732    margin-right: -4px;
1733    overflow: hidden;
1734    display: flex;
1735    flex-wrap: wrap;
1736  }
1737  
1738  .block-editor-block-variation-picker .components-placeholder__instructions {
1739    margin-bottom: 0;
1740  }
1741  .block-editor-block-variation-picker .components-placeholder__fieldset {
1742    flex-direction: column;
1743  }
1744  .block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset {
1745    max-width: 90%;
1746  }
1747  
1748  .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
1749    display: flex;
1750    justify-content: flex-start;
1751    flex-direction: row;
1752    flex-wrap: wrap;
1753    width: 100%;
1754    margin: 16px 0;
1755    padding: 0;
1756    list-style: none;
1757  }
1758  .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li {
1759    list-style: none;
1760    margin: 8px 20px 0 0;
1761    flex-shrink: 1;
1762    width: 75px;
1763    text-align: center;
1764  }
1765  .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button {
1766    display: inline-flex;
1767    margin-right: 0;
1768  }
1769  .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation {
1770    padding: 8px;
1771  }
1772  .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label {
1773    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1774    font-size: 12px;
1775    display: block;
1776    line-height: 1.4;
1777  }
1778  
1779  .block-editor-block-variation-picker__variation {
1780    width: 100%;
1781  }
1782  .block-editor-block-variation-picker__variation.components-button.has-icon {
1783    justify-content: center;
1784    width: auto;
1785  }
1786  .block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary {
1787    background-color: #fff;
1788  }
1789  .block-editor-block-variation-picker__variation.components-button {
1790    height: auto;
1791    padding: 0;
1792  }
1793  .block-editor-block-variation-picker__variation::before {
1794    content: "";
1795    padding-bottom: 100%;
1796  }
1797  .block-editor-block-variation-picker__variation:first-child {
1798    margin-left: 0;
1799  }
1800  .block-editor-block-variation-picker__variation:last-child {
1801    margin-right: 0;
1802  }
1803  
1804  .block-editor-block-pattern-setup {
1805    display: flex;
1806    flex-direction: column;
1807    justify-content: center;
1808    align-items: flex-start;
1809    width: 100%;
1810    border-radius: 2px;
1811    box-shadow: inset 0 0 0 1px #1e1e1e;
1812    outline: 1px solid transparent;
1813  }
1814  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
1815    justify-content: center;
1816  }
1817  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1818    display: grid;
1819    grid-template-columns: 1fr 1fr;
1820    grid-gap: 16px;
1821    padding: 16px;
1822    max-height: 550px;
1823    overflow: auto;
1824    margin: 0 1px 1px 1px;
1825    width: calc(100% - 2px);
1826    background: #fff;
1827  }
1828  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
1829  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
1830    cursor: pointer;
1831  }
1832  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item-title {
1833    padding: 4px;
1834    font-size: 12px;
1835    text-align: center;
1836  }
1837  .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container {
1838    border-radius: 2px;
1839    border: 1px solid #ddd;
1840  }
1841  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar {
1842    box-sizing: border-box;
1843    position: relative;
1844    padding: 16px;
1845    width: 100%;
1846    text-align: left;
1847    margin: 0;
1848    color: #1e1e1e;
1849    border-radius: 2px 2px 0 0;
1850    background-color: #fff;
1851    box-shadow: inset 0 0 0 1px #1e1e1e;
1852    outline: 1px solid transparent;
1853    display: flex;
1854    flex-direction: row;
1855    align-items: center;
1856    justify-content: space-between;
1857  }
1858  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
1859    display: flex;
1860  }
1861  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__navigation,
1862  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
1863    width: calc(50% - 36px);
1864    display: flex;
1865  }
1866  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
1867    justify-content: flex-end;
1868  }
1869  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container {
1870    display: flex;
1871    flex-direction: column;
1872    width: 100%;
1873    box-sizing: border-box;
1874  }
1875  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
1876    overflow: hidden;
1877    position: relative;
1878    padding: 0;
1879    margin: 0;
1880    list-style: none;
1881    transform-style: preserve-3d;
1882  }
1883  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container * {
1884    box-sizing: border-box;
1885  }
1886  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
1887    opacity: 0;
1888    position: absolute;
1889    top: 0;
1890    width: 100%;
1891    margin: auto;
1892    padding: 16px;
1893    transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
1894    z-index: 100;
1895  }
1896  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
1897    opacity: 1;
1898    position: relative;
1899    z-index: 102;
1900  }
1901  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.previous-slide {
1902    transform: translateX(-100%);
1903    z-index: 101;
1904  }
1905  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.next-slide {
1906    transform: translateX(100%);
1907    z-index: 101;
1908  }
1909  .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .block-list-appender {
1910    display: none;
1911  }
1912  
1913  .block-editor-block-variation-transforms {
1914    padding: 0 16px 16px 56px;
1915    width: 100%;
1916  }
1917  .block-editor-block-variation-transforms .components-dropdown-menu__toggle {
1918    border: 1px solid #757575;
1919    border-radius: 2px;
1920    min-height: 30px;
1921    width: 100%;
1922    position: relative;
1923    text-align: left;
1924    justify-content: left;
1925    padding: 6px 12px;
1926  }
1927  .block-editor-block-variation-transforms .components-dropdown-menu__toggle.components-dropdown-menu__toggle {
1928    padding-right: 24px;
1929  }
1930  .block-editor-block-variation-transforms .components-dropdown-menu__toggle:focus:not(:disabled) {
1931    border-color: var(--wp-admin-theme-color);
1932    box-shadow: 0 0 0 calc(var(--wp-admin-border-width-focus) - 1px) var(--wp-admin-theme-color);
1933  }
1934  .block-editor-block-variation-transforms .components-dropdown-menu__toggle svg {
1935    height: 100%;
1936    padding: 0;
1937    position: absolute;
1938    right: 0;
1939    top: 0;
1940  }
1941  
1942  .block-editor-block-variation-transforms__popover .components-popover__content {
1943    min-width: 230px;
1944  }
1945  
1946  .components-border-style-control__select {
1947    margin-bottom: 24px;
1948  }
1949  .components-border-style-control__select button {
1950    width: 100%;
1951  }
1952  .components-border-style-control__select ul li,
1953  .components-border-style-control__select ul li:last-child {
1954    margin: 6px;
1955  }
1956  
1957  .block-editor-button-block-appender {
1958    display: flex;
1959    flex-direction: column;
1960    align-items: center;
1961    justify-content: center;
1962    padding: 8px;
1963    width: 100%;
1964    height: auto;
1965    color: #1e1e1e;
1966    box-shadow: inset 0 0 0 1px #1e1e1e;
1967  }
1968  .is-dark-theme .block-editor-button-block-appender {
1969    color: rgba(255, 255, 255, 0.65);
1970    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
1971  }
1972  .block-editor-button-block-appender:hover {
1973    color: var(--wp-admin-theme-color);
1974    box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
1975  }
1976  .block-editor-button-block-appender:focus {
1977    box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
1978  }
1979  .block-editor-button-block-appender:active {
1980    color: #000;
1981  }
1982  .block-editor-button-block-appender.block-list-appender__toggle {
1983    display: flex;
1984    flex-direction: row;
1985    box-shadow: none;
1986    height: 24px;
1987    width: 24px;
1988  }
1989  .block-editor-button-block-appender.block-list-appender__toggle > svg {
1990    width: 24px;
1991    background-color: #1e1e1e;
1992    color: #fff;
1993    border-radius: 2px;
1994    flex: 1 0 auto;
1995  }
1996  
1997  .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
1998    margin-bottom: 12px;
1999  }
2000  .block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs {
2001    display: block;
2002    margin-bottom: 12px;
2003  }
2004  
2005  .block-editor-panel-color-gradient-settings .component-color-indicator {
2006    vertical-align: text-bottom;
2007  }
2008  .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
2009    display: inline-block;
2010  }
2011  .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
2012    display: none;
2013  }
2014  @media screen and (min-width: 782px) {
2015    .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
2016      margin-right: 0;
2017    }
2018    .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper {
2019      margin-right: calc((100% - (28px * 6)) / 5);
2020    }
2021    .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(6n+6) {
2022      margin-right: 0;
2023    }
2024  }
2025  
2026  .block-editor-contrast-checker > .components-notice {
2027    margin: 0;
2028  }
2029  
2030  .block-editor-default-block-appender {
2031    clear: both;
2032    margin-left: auto;
2033    margin-right: auto;
2034    position: relative;
2035  }
2036  .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
2037    outline: 1px solid transparent;
2038  }
2039  .block-editor-default-block-appender .block-editor-default-block-appender__content {
2040    opacity: 0.62;
2041  }
2042  .block-editor-default-block-appender .components-drop-zone__content-icon {
2043    display: none;
2044  }
2045  
2046  .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
2047  .block-editor-default-block-appender .block-editor-inserter {
2048    position: absolute;
2049    top: 0;
2050    height: 32px;
2051  }
2052  .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle,
2053  .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle {
2054    margin-right: 0;
2055  }
2056  
2057  .block-editor-block-list__empty-block-inserter,
2058  .block-editor-default-block-appender .block-editor-inserter {
2059    right: 8px;
2060  }
2061  @media (min-width: 600px) {
2062    .block-editor-block-list__empty-block-inserter,
2063  .block-editor-default-block-appender .block-editor-inserter {
2064      display: flex;
2065      height: 100%;
2066    }
2067  }
2068  .block-editor-block-list__empty-block-inserter:disabled,
2069  .block-editor-default-block-appender .block-editor-inserter:disabled {
2070    display: none;
2071  }
2072  
2073  .block-editor-duotone-control__popover .components-popover__content {
2074    border: 1px solid #1e1e1e;
2075    min-width: 214px;
2076  }
2077  .block-editor-duotone-control__popover .components-circular-option-picker {
2078    padding: 12px;
2079  }
2080  .block-editor-duotone-control__popover .components-menu-group__label {
2081    padding: 12px 12px 0 12px;
2082    width: 100%;
2083    box-sizing: border-box;
2084  }
2085  
2086  .block-editor-duotone-control__popover > .components-popover__content {
2087    width: 334px;
2088  }
2089  
2090  .block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
2091    margin-left: -14px;
2092  }
2093  
2094  .components-font-appearance-control__select {
2095    margin-bottom: 24px;
2096  }
2097  .components-font-appearance-control__select ul li {
2098    color: #1e1e1e;
2099    text-transform: capitalize;
2100  }
2101  
2102  .items-justified-left {
2103    justify-content: flex-start;
2104  }
2105  
2106  .items-justified-center {
2107    justify-content: center;
2108  }
2109  
2110  .items-justified-right {
2111    justify-content: flex-end;
2112  }
2113  
2114  .items-justified-space-between {
2115    justify-content: space-between;
2116  }
2117  
2118  .block-editor-link-control {
2119    position: relative;
2120    min-width: 360px;
2121  }
2122  .components-popover__content .block-editor-link-control {
2123    min-width: auto;
2124    width: 90vw;
2125    max-width: 360px;
2126  }
2127  
2128  .block-editor-link-control__search-input-wrapper {
2129    position: relative;
2130  }
2131  
2132  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
2133    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2134    padding: 6px 8px;
2135    box-shadow: 0 0 0 transparent;
2136    transition: box-shadow 0.1s linear;
2137    border-radius: 2px;
2138    border: 1px solid #757575;
2139    /* Fonts smaller than 16px causes mobile safari to zoom. */
2140    font-size: 16px;
2141    /* Override core line-height. To be reviewed. */
2142    line-height: normal;
2143    width: calc(100% - 32px);
2144    display: block;
2145    padding: 11px 16px;
2146    padding-right: 36px;
2147    margin: 16px;
2148    position: relative;
2149    border: 1px solid #ddd;
2150    border-radius: 2px;
2151  }
2152  @media (prefers-reduced-motion: reduce) {
2153    .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
2154      transition-duration: 0s;
2155      transition-delay: 0s;
2156    }
2157  }
2158  @media (min-width: 600px) {
2159    .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
2160      font-size: 13px;
2161      /* Override core line-height. To be reviewed. */
2162      line-height: normal;
2163    }
2164  }
2165  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:focus {
2166    border-color: var(--wp-admin-theme-color);
2167    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
2168    outline: 2px solid transparent;
2169  }
2170  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-webkit-input-placeholder {
2171    color: rgba(30, 30, 30, 0.62);
2172  }
2173  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-moz-placeholder {
2174    opacity: 1;
2175    color: rgba(30, 30, 30, 0.62);
2176  }
2177  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:-ms-input-placeholder {
2178    color: rgba(30, 30, 30, 0.62);
2179  }
2180  .block-editor-link-control .block-editor-link-control__search-input .components-base-control__field {
2181    margin-bottom: 0;
2182  }
2183  
2184  .block-editor-link-control__search-error {
2185    margin: -8px 16px 16px;
2186  }
2187  
2188  .block-editor-link-control__search-actions {
2189    position: absolute;
2190    /*
2191     * Actions must be positioned on top of URLInput, since the input will grow
2192     * when suggestions are rendered.
2193     *
2194     * Compensate for:
2195     *  - Input margin ($grid-unit-20)
2196     *  - Border (1px)
2197     *  - Vertically, for the difference in height between the input (40px) and
2198     *    the icon buttons.
2199     *  - Horizontally, pad to the minimum of: default input padding, or the
2200     *    equivalent of the vertical padding.
2201     */
2202    top: 19px;
2203    right: 19px;
2204  }
2205  
2206  .components-button .block-editor-link-control__search-submit .has-icon {
2207    margin: -1px;
2208  }
2209  
2210  .block-editor-link-control__search-results-wrapper {
2211    position: relative;
2212    margin-top: -15px;
2213  }
2214  .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
2215    content: "";
2216    position: absolute;
2217    left: -1px;
2218    right: 16px;
2219    display: block;
2220    pointer-events: none;
2221    z-index: 100;
2222  }
2223  .block-editor-link-control__search-results-wrapper::before {
2224    height: 8px;
2225    top: 0;
2226    bottom: auto;
2227  }
2228  .block-editor-link-control__search-results-wrapper::after {
2229    height: 16px;
2230    bottom: 0;
2231    top: auto;
2232  }
2233  
2234  .block-editor-link-control__search-results-label {
2235    padding: 16px 32px 0;
2236    display: block;
2237    font-weight: 600;
2238  }
2239  
2240  .block-editor-link-control__search-results {
2241    margin: 0;
2242    padding: 8px 16px 8px;
2243    max-height: 200px;
2244    overflow-y: auto;
2245  }
2246  .block-editor-link-control__search-results.is-loading {
2247    opacity: 0.2;
2248  }
2249  
2250  .block-editor-link-control__search-item {
2251    position: relative;
2252    display: flex;
2253    align-items: center;
2254    font-size: 13px;
2255    cursor: pointer;
2256    background: #fff;
2257    width: 100%;
2258    border: none;
2259    text-align: left;
2260    padding: 12px 16px;
2261    border-radius: 5px;
2262    height: auto;
2263  }
2264  .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
2265    background-color: #ddd;
2266  }
2267  .block-editor-link-control__search-item:focus:not(:disabled) {
2268    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
2269  }
2270  .block-editor-link-control__search-item.is-selected {
2271    background: #f0f0f0;
2272  }
2273  .block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type {
2274    background: #fff;
2275  }
2276  .block-editor-link-control__search-item.is-current {
2277    background: transparent;
2278    border: 0;
2279    width: 100%;
2280    cursor: default;
2281    padding: 16px;
2282    padding-left: 24px;
2283  }
2284  .block-editor-link-control__search-item .block-editor-link-control__search-item-header {
2285    display: block;
2286    margin-right: 8px;
2287    overflow: hidden;
2288    white-space: nowrap;
2289  }
2290  .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
2291    margin-right: 1em;
2292    min-width: 24px;
2293  }
2294  .block-editor-link-control__search-item .block-editor-link-control__search-item-info,
2295  .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
2296    overflow: hidden;
2297    text-overflow: ellipsis;
2298    padding-right: 24px;
2299  }
2300  .block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon,
2301  .block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
2302    position: absolute;
2303    right: 0;
2304    margin-top: 0;
2305  }
2306  .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
2307    display: block;
2308    margin-bottom: 0.2em;
2309    font-weight: 500;
2310    position: relative;
2311  }
2312  .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
2313    font-weight: 700;
2314    color: #000;
2315    background-color: transparent;
2316  }
2317  .block-editor-link-control__search-item .block-editor-link-control__search-item-title span {
2318    font-weight: normal;
2319  }
2320  .block-editor-link-control__search-item .block-editor-link-control__search-item-info {
2321    display: block;
2322    color: #757575;
2323    font-size: 0.9em;
2324    line-height: 1.3;
2325  }
2326  .block-editor-link-control__search-item .block-editor-link-control__search-item-type {
2327    display: block;
2328    padding: 3px 8px;
2329    margin-left: auto;
2330    font-size: 0.9em;
2331    background-color: #f0f0f0;
2332    border-radius: 2px;
2333  }
2334  
2335  .block-editor-link-control__loading {
2336    margin: 16px;
2337    display: flex;
2338    align-items: center;
2339  }
2340  .block-editor-link-control__loading .components-spinner {
2341    margin-top: 0;
2342  }
2343  
2344  .components-button + .block-editor-link-control__search-create {
2345    overflow: visible;
2346    padding: 12px 16px;
2347  }
2348  .components-button + .block-editor-link-control__search-create::before {
2349    content: "";
2350    position: absolute;
2351    top: -10px;
2352    left: 0;
2353    display: block;
2354    width: 100%;
2355  }
2356  
2357  .block-editor-link-control__search-results div[role=menu] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
2358    padding: 10px;
2359  }
2360  
2361  .block-editor-link-control__settings {
2362    border-top: 1px solid #ddd;
2363    margin: 0;
2364    padding: 16px 24px;
2365  }
2366  .block-editor-link-control__settings :last-child {
2367    margin-bottom: 0;
2368  }
2369  .is-alternate .block-editor-link-control__settings {
2370    border-top: 1px solid #1e1e1e;
2371  }
2372  
2373  .block-editor-link-control__setting {
2374    margin-bottom: 16px;
2375  }
2376  .block-editor-link-control__setting :last-child {
2377    margin-bottom: 0;
2378  }
2379  
2380  .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
2381    display: block;
2382  }
2383  .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
2384    position: absolute;
2385    left: auto;
2386    bottom: auto;
2387    /*
2388     * Position spinner to the left of the actions.
2389     *
2390     * Compensate for:
2391     *  - Input margin ($grid-unit-20)
2392     *  - Border (1px)
2393     *  - Vertically, for the difference in height between the input (40px)
2394     *    and the spinner.
2395     *  - Horizontally, adjust for the width occupied by the icon buttons,
2396     *    then artificially create spacing that mimics as if the spinner
2397     *    were center-padded to the same width as an icon button.
2398     */
2399    top: 28px;
2400    right: 62px;
2401  }
2402  
2403  .block-editor-link-control__search-item-action {
2404    margin-left: auto;
2405    flex-shrink: 0;
2406  }
2407  
2408  .block-editor-line-height-control {
2409    margin-bottom: 24px;
2410  }
2411  .block-editor-line-height-control input {
2412    display: block;
2413    max-width: 60px;
2414  }
2415  
2416  .block-editor-image-size-control {
2417    margin-bottom: 1em;
2418  }
2419  .block-editor-image-size-control .block-editor-image-size-control__row {
2420    display: flex;
2421    justify-content: space-between;
2422  }
2423  .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
2424  .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
2425    margin-bottom: 0.5em;
2426  }
2427  .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
2428  .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
2429    line-height: 1.25;
2430  }
2431  .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
2432    margin-right: 5px;
2433  }
2434  .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
2435    margin-left: 5px;
2436  }
2437  
2438  .block-editor-block-list__layout.has-overlay::after {
2439    content: "";
2440    position: absolute;
2441    top: -14px;
2442    right: -14px;
2443    bottom: -14px;
2444    left: -14px;
2445    z-index: 60;
2446  }
2447  
2448  [data-align=full] .has-overlay::after {
2449    right: 0;
2450    left: 0;
2451  }
2452  
2453  .block-editor-block-types-list__list-item {
2454    display: block;
2455    width: 33.33%;
2456    padding: 0;
2457    margin: 0;
2458  }
2459  
2460  .components-button.block-editor-block-types-list__item {
2461    display: flex;
2462    flex-direction: column;
2463    width: 100%;
2464    font-size: 13px;
2465    color: #1e1e1e;
2466    padding: 8px;
2467    align-items: stretch;
2468    justify-content: center;
2469    cursor: pointer;
2470    background: transparent;
2471    word-break: break-word;
2472    border-radius: 2px;
2473    border: 1px solid transparent;
2474    transition: all 0.05s ease-in-out;
2475    position: relative;
2476    height: auto;
2477  }
2478  @media (prefers-reduced-motion: reduce) {
2479    .components-button.block-editor-block-types-list__item {
2480      transition-duration: 0s;
2481      transition-delay: 0s;
2482    }
2483  }
2484  .components-button.block-editor-block-types-list__item:disabled {
2485    opacity: 0.6;
2486    cursor: default;
2487  }
2488  .components-button.block-editor-block-types-list__item:not(:disabled):hover {
2489    border-color: var(--wp-admin-theme-color);
2490    color: var(--wp-admin-theme-color) !important;
2491  }
2492  .components-button.block-editor-block-types-list__item:not(:disabled).is-active {
2493    color: #fff;
2494    background: #1e1e1e;
2495    outline: 2px solid transparent;
2496    outline-offset: -2px;
2497  }
2498  
2499  .block-editor-block-types-list__item-icon {
2500    padding: 12px 20px;
2501    border-radius: 2px;
2502    color: #1e1e1e;
2503    transition: all 0.05s ease-in-out;
2504  }
2505  @media (prefers-reduced-motion: reduce) {
2506    .block-editor-block-types-list__item-icon {
2507      transition-duration: 0s;
2508      transition-delay: 0s;
2509    }
2510  }
2511  .block-editor-block-types-list__item-icon .block-editor-block-icon {
2512    margin-left: auto;
2513    margin-right: auto;
2514  }
2515  .block-editor-block-types-list__item-icon svg {
2516    transition: all 0.15s ease-out;
2517  }
2518  @media (prefers-reduced-motion: reduce) {
2519    .block-editor-block-types-list__item-icon svg {
2520      transition-duration: 0s;
2521      transition-delay: 0s;
2522    }
2523  }
2524  .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
2525    cursor: grab;
2526  }
2527  
2528  .block-editor-block-types-list__item-title {
2529    padding: 4px 2px 8px;
2530    font-size: 12px;
2531  }
2532  
2533  .modal-open .block-editor-media-replace-flow__options {
2534    display: none;
2535  }
2536  
2537  .block-editor-media-replace-flow__options .components-popover__content > div {
2538    padding-top: 16px;
2539  }
2540  
2541  .block-editor-media-replace-flow__indicator {
2542    margin-left: 4px;
2543  }
2544  
2545  .block-editor-media-flow__url-input {
2546    border-top: 1px solid #1e1e1e;
2547    margin-top: 12px;
2548    margin-right: -12px;
2549    margin-left: -12px;
2550    padding: 12px 24px 0;
2551  }
2552  .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
2553    top: 16px;
2554  }
2555  .block-editor-media-flow__url-input .block-editor-link-control {
2556    margin-top: -16px;
2557    width: auto;
2558  }
2559  .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
2560    margin-bottom: 0;
2561  }
2562  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item-title {
2563    max-width: 180px;
2564    margin-top: 16px;
2565  }
2566  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item.is-current {
2567    width: auto;
2568    padding: 0;
2569  }
2570  .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] {
2571    margin: 16px 0 0 0;
2572    width: 100%;
2573  }
2574  .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
2575    right: 4px;
2576  }
2577  
2578  .block-editor-media-flow__error {
2579    padding: 0 20px 20px 20px;
2580    max-width: 255px;
2581  }
2582  .block-editor-media-flow__error .components-with-notices-ui {
2583    max-width: 255px;
2584  }
2585  .block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
2586    overflow: hidden;
2587    word-wrap: break-word;
2588  }
2589  .block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
2590    position: absolute;
2591    right: 10px;
2592  }
2593  
2594  .block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button {
2595    margin-bottom: 0;
2596  }
2597  
2598  .block-editor-media-placeholder__url-input-form {
2599    display: flex;
2600  }
2601  .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field {
2602    width: 100%;
2603    flex-grow: 1;
2604    border: none;
2605    border-radius: 0;
2606    margin: 2px;
2607  }
2608  @media (min-width: 600px) {
2609    .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field {
2610      width: 300px;
2611    }
2612  }
2613  
2614  .block-editor-media-placeholder__url-input-submit-button {
2615    flex-shrink: 1;
2616  }
2617  
2618  .block-editor-media-placeholder__button {
2619    margin-bottom: 0.5rem;
2620  }
2621  
2622  .block-editor-media-placeholder__cancel-button.is-link {
2623    margin: 1em;
2624    display: block;
2625  }
2626  
2627  .block-editor-media-placeholder.is-appender {
2628    min-height: 0;
2629  }
2630  .block-editor-media-placeholder.is-appender:hover {
2631    cursor: pointer;
2632    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
2633  }
2634  
2635  .block-editor-multi-selection-inspector__card {
2636    display: flex;
2637    align-items: flex-start;
2638    padding: 16px;
2639  }
2640  
2641  .block-editor-multi-selection-inspector__card-content {
2642    flex-grow: 1;
2643  }
2644  
2645  .block-editor-multi-selection-inspector__card-title {
2646    font-weight: 500;
2647    margin-bottom: 5px;
2648  }
2649  
2650  .block-editor-multi-selection-inspector__card-description {
2651    font-size: 13px;
2652  }
2653  
2654  .block-editor-multi-selection-inspector__card .block-editor-block-icon {
2655    margin-left: -2px;
2656    margin-right: 10px;
2657    padding: 0 3px;
2658    width: 36px;
2659    height: 24px;
2660  }
2661  
2662  .block-editor-plain-text {
2663    box-shadow: none;
2664    font-family: inherit;
2665    font-size: inherit;
2666    color: inherit;
2667    line-height: inherit;
2668    border: none;
2669    padding: 0;
2670    margin: 0;
2671    width: 100%;
2672  }
2673  
2674  .block-editor-responsive-block-control {
2675    margin-bottom: 28px;
2676    border-bottom: 1px solid #ccc;
2677    padding-bottom: 14px;
2678  }
2679  .block-editor-responsive-block-control:last-child {
2680    padding-bottom: 0;
2681    border-bottom: 0;
2682  }
2683  
2684  .block-editor-responsive-block-control__title {
2685    margin: 0;
2686    margin-bottom: 0.6em;
2687    margin-left: -3px;
2688  }
2689  
2690  .block-editor-responsive-block-control__label {
2691    font-weight: 600;
2692    margin-bottom: 0.6em;
2693    margin-left: -3px;
2694  }
2695  
2696  .block-editor-responsive-block-control__inner {
2697    margin-left: -1px;
2698  }
2699  
2700  .block-editor-responsive-block-control__toggle {
2701    margin-left: 1px;
2702  }
2703  
2704  .block-editor-responsive-block-control .components-base-control__help {
2705    border: 0;
2706    clip: rect(1px, 1px, 1px, 1px);
2707    -webkit-clip-path: inset(50%);
2708            clip-path: inset(50%);
2709    height: 1px;
2710    margin: -1px;
2711    overflow: hidden;
2712    padding: 0;
2713    position: absolute;
2714    width: 1px;
2715    word-wrap: normal !important;
2716  }
2717  
2718  .block-editor-rich-text__editable > p:first-child {
2719    margin-top: 0;
2720  }
2721  .block-editor-rich-text__editable [data-rich-text-placeholder] {
2722    pointer-events: none;
2723  }
2724  .block-editor-rich-text__editable [data-rich-text-placeholder]::after {
2725    content: attr(data-rich-text-placeholder);
2726    opacity: 0.62;
2727  }
2728  .block-editor-rich-text__editable:focus {
2729    outline: none;
2730  }
2731  .block-editor-rich-text__editable:focus [data-rich-text-format-boundary] {
2732    border-radius: 2px;
2733  }
2734  
2735  figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
2736    opacity: 0.8;
2737  }
2738  
2739  .components-popover.block-editor-rich-text__inline-format-toolbar {
2740    z-index: 99998;
2741  }
2742  .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
2743    width: auto;
2744    min-width: auto;
2745    margin-bottom: 8px;
2746    box-shadow: none;
2747    border: 1px solid #1e1e1e;
2748    border-radius: 2px;
2749    background-color: #fff;
2750  }
2751  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group,
2752  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
2753    border: none;
2754  }
2755  .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
2756  .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
2757    min-width: 48px;
2758    min-height: 48px;
2759    padding-left: 12px;
2760    padding-right: 12px;
2761  }
2762  
2763  .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
2764    justify-content: center;
2765  }
2766  
2767  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
2768    width: auto;
2769  }
2770  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
2771    display: none;
2772  }
2773  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
2774    content: attr(aria-label);
2775  }
2776  
2777  [data-rich-text-script] {
2778    display: inline;
2779  }
2780  [data-rich-text-script]::before {
2781    content: "</>";
2782    background: yellow;
2783  }
2784  
2785  .block-editor-skip-to-selected-block {
2786    position: absolute;
2787    top: -9999em;
2788  }
2789  .block-editor-skip-to-selected-block:focus {
2790    height: auto;
2791    width: auto;
2792    display: block;
2793    font-size: 14px;
2794    font-weight: 600;
2795    padding: 15px 23px 14px;
2796    background: #f1f1f1;
2797    color: var(--wp-admin-theme-color);
2798    line-height: normal;
2799    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
2800    text-decoration: none;
2801    outline: none;
2802    z-index: 100000;
2803  }
2804  
2805  .block-editor-text-decoration-and-transform {
2806    display: flex;
2807  }
2808  
2809  .block-editor-text-transform-control {
2810    flex: 0 0 50%;
2811  }
2812  .block-editor-text-transform-control legend {
2813    margin-bottom: 8px;
2814  }
2815  .block-editor-text-transform-control .block-editor-text-transform-control__buttons {
2816    display: inline-flex;
2817    margin-bottom: 24px;
2818  }
2819  .block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon {
2820    min-width: 24px;
2821    padding: 0;
2822    margin-right: 4px;
2823  }
2824  
2825  .block-editor-text-decoration-control {
2826    flex: 0 0 50%;
2827  }
2828  .block-editor-text-decoration-control legend {
2829    margin-bottom: 8px;
2830  }
2831  .block-editor-text-decoration-control .block-editor-text-decoration-control__buttons {
2832    display: inline-flex;
2833    margin-bottom: 24px;
2834  }
2835  .block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon {
2836    min-width: 24px;
2837    padding: 0;
2838    margin-right: 4px;
2839  }
2840  
2841  .block-editor-tool-selector__help {
2842    margin-top: 8px;
2843    margin-left: -12px;
2844    margin-right: -12px;
2845    margin-bottom: -12px;
2846    padding: 12px 20px;
2847    border-top: 1px solid #ddd;
2848    color: #757575;
2849    min-width: 280px;
2850  }
2851  
2852  .block-editor-block-list__block .block-editor-url-input,
2853  .components-popover .block-editor-url-input,
2854  .block-editor-url-input {
2855    flex-grow: 1;
2856    position: relative;
2857    padding: 1px;
2858  }
2859  .block-editor-block-list__block .block-editor-url-input input[type=text],
2860  .components-popover .block-editor-url-input input[type=text],
2861  .block-editor-url-input input[type=text] {
2862    width: 100%;
2863    padding: 8px 8px 8px 12px;
2864    border: none;
2865    border-radius: 0;
2866    margin-left: 0;
2867    margin-right: 0;
2868    /* Fonts smaller than 16px causes mobile safari to zoom. */
2869    font-size: 16px;
2870  }
2871  @media (min-width: 600px) {
2872    .block-editor-block-list__block .block-editor-url-input input[type=text],
2873  .components-popover .block-editor-url-input input[type=text],
2874  .block-editor-url-input input[type=text] {
2875      width: 300px;
2876    }
2877  }
2878  @media (min-width: 600px) {
2879    .block-editor-block-list__block .block-editor-url-input input[type=text],
2880  .components-popover .block-editor-url-input input[type=text],
2881  .block-editor-url-input input[type=text] {
2882      font-size: 13px;
2883    }
2884  }
2885  .block-editor-block-list__block .block-editor-url-input input[type=text]::-ms-clear,
2886  .components-popover .block-editor-url-input input[type=text]::-ms-clear,
2887  .block-editor-url-input input[type=text]::-ms-clear {
2888    display: none;
2889  }
2890  .block-editor-block-list__block .block-editor-url-input.is-full-width,
2891  .components-popover .block-editor-url-input.is-full-width,
2892  .block-editor-url-input.is-full-width {
2893    width: 100%;
2894  }
2895  .block-editor-block-list__block .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],
2896  .components-popover .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],
2897  .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text] {
2898    width: 100%;
2899  }
2900  .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
2901  .components-popover .block-editor-url-input.is-full-width__suggestions,
2902  .block-editor-url-input.is-full-width__suggestions {
2903    width: 100%;
2904  }
2905  .block-editor-block-list__block .block-editor-url-input .components-spinner,
2906  .components-popover .block-editor-url-input .components-spinner,
2907  .block-editor-url-input .components-spinner {
2908    position: absolute;
2909    right: 8px 8px 8px 12px;
2910    bottom: 8px 8px 8px 12px8px1;
2911    margin: 0;
2912  }
2913  
2914  .block-editor-url-input__input[type=text] {
2915    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2916    padding: 6px 8px;
2917    box-shadow: 0 0 0 transparent;
2918    transition: box-shadow 0.1s linear;
2919    border-radius: 2px;
2920    border: 1px solid #757575;
2921    /* Fonts smaller than 16px causes mobile safari to zoom. */
2922    font-size: 16px;
2923    /* Override core line-height. To be reviewed. */
2924    line-height: normal;
2925  }
2926  @media (prefers-reduced-motion: reduce) {
2927    .block-editor-url-input__input[type=text] {
2928      transition-duration: 0s;
2929      transition-delay: 0s;
2930    }
2931  }
2932  @media (min-width: 600px) {
2933    .block-editor-url-input__input[type=text] {
2934      font-size: 13px;
2935      /* Override core line-height. To be reviewed. */
2936      line-height: normal;
2937    }
2938  }
2939  .block-editor-url-input__input[type=text]:focus {
2940    border-color: var(--wp-admin-theme-color);
2941    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
2942    outline: 2px solid transparent;
2943  }
2944  .block-editor-url-input__input[type=text]::-webkit-input-placeholder {
2945    color: rgba(30, 30, 30, 0.62);
2946  }
2947  .block-editor-url-input__input[type=text]::-moz-placeholder {
2948    opacity: 1;
2949    color: rgba(30, 30, 30, 0.62);
2950  }
2951  .block-editor-url-input__input[type=text]:-ms-input-placeholder {
2952    color: rgba(30, 30, 30, 0.62);
2953  }
2954  
2955  .block-editor-url-input__suggestions {
2956    max-height: 200px;
2957    transition: all 0.15s ease-in-out;
2958    padding: 4px 0;
2959    width: 302px;
2960    overflow-y: auto;
2961  }
2962  @media (prefers-reduced-motion: reduce) {
2963    .block-editor-url-input__suggestions {
2964      transition-duration: 0s;
2965      transition-delay: 0s;
2966    }
2967  }
2968  
2969  .block-editor-url-input__suggestions,
2970  .block-editor-url-input .components-spinner {
2971    display: none;
2972  }
2973  @media (min-width: 600px) {
2974    .block-editor-url-input__suggestions,
2975  .block-editor-url-input .components-spinner {
2976      display: inherit;
2977    }
2978  }
2979  
2980  .block-editor-url-input__suggestion {
2981    padding: 4px 8px 8px 8px 12px;
2982    color: #757575;
2983    display: block;
2984    font-size: 13px;
2985    cursor: pointer;
2986    background: #fff;
2987    width: 100%;
2988    border: none;
2989    text-align: left;
2990    box-shadow: none;
2991  }
2992  .block-editor-url-input__suggestion:hover {
2993    background: #ddd;
2994  }
2995  .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
2996    background: var(--wp-admin-theme-color-darker-20);
2997    color: #fff;
2998    outline: none;
2999  }
3000  
3001  .components-toolbar-group > .block-editor-url-input__button,
3002  .components-toolbar > .block-editor-url-input__button {
3003    position: inherit;
3004  }
3005  
3006  .block-editor-url-input__button .block-editor-url-input__back {
3007    margin-right: 4px;
3008    overflow: visible;
3009  }
3010  .block-editor-url-input__button .block-editor-url-input__back::after {
3011    content: "";
3012    position: absolute;
3013    display: block;
3014    width: 1px;
3015    height: 24px;
3016    right: -1px;
3017    background: #ddd;
3018  }
3019  
3020  .block-editor-url-input__button-modal {
3021    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
3022    border: 1px solid #ddd;
3023    background: #fff;
3024  }
3025  
3026  .block-editor-url-input__button-modal-line {
3027    display: flex;
3028    flex-direction: row;
3029    flex-grow: 1;
3030    flex-shrink: 1;
3031    min-width: 0;
3032    align-items: flex-start;
3033  }
3034  .block-editor-url-input__button-modal-line .components-button {
3035    flex-shrink: 0;
3036    width: 36px;
3037    height: 36px;
3038  }
3039  
3040  .block-editor-url-popover__additional-controls {
3041    border-top: 1px solid #ddd;
3042  }
3043  
3044  .block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg {
3045    box-shadow: none;
3046  }
3047  
3048  .block-editor-url-popover__additional-controls div[role=menu] > .components-button {
3049    padding-left: 12px;
3050  }
3051  
3052  .block-editor-url-popover__row {
3053    display: flex;
3054  }
3055  
3056  .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
3057    flex-grow: 1;
3058  }
3059  
3060  .block-editor-url-popover .components-button.has-icon {
3061    padding: 3px;
3062  }
3063  .block-editor-url-popover .components-button.has-icon > svg {
3064    padding: 5px;
3065    border-radius: 2px;
3066    height: 30px;
3067    width: 30px;
3068  }
3069  .block-editor-url-popover .components-button.has-icon:not(:disabled):focus {
3070    box-shadow: none;
3071  }
3072  .block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
3073    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
3074    outline: 2px solid transparent;
3075  }
3076  
3077  .block-editor-url-popover__settings-toggle {
3078    flex-shrink: 0;
3079    border-radius: 0;
3080    border-left: 1px solid #ddd;
3081    margin-left: 1px;
3082  }
3083  .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
3084    transform: rotate(180deg);
3085  }
3086  
3087  .block-editor-url-popover__input-container .components-base-control:last-child,
3088  .block-editor-url-popover__input-container .components-base-control:last-child .components-base-control__field {
3089    margin-bottom: 0;
3090  }
3091  
3092  .block-editor-url-popover__settings {
3093    display: block;
3094    padding: 16px;
3095    border-top: 1px solid #ddd;
3096  }
3097  
3098  .block-editor-url-popover__link-editor,
3099  .block-editor-url-popover__link-viewer {
3100    display: flex;
3101  }
3102  .block-editor-url-popover__link-editor .block-editor-url-input .components-base-control__field,
3103  .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
3104    margin-bottom: 0;
3105  }
3106  .block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
3107  .block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
3108    bottom: 8px 8px 8px 12px1;
3109  }
3110  
3111  .block-editor-url-popover__link-viewer-url {
3112    margin: 7px;
3113    flex-grow: 1;
3114    flex-shrink: 1;
3115    overflow: hidden;
3116    text-overflow: ellipsis;
3117    white-space: nowrap;
3118    min-width: 150px;
3119    max-width: 500px;
3120  }
3121  .block-editor-url-popover__link-viewer-url.has-invalid-link {
3122    color: #cc1818;
3123  }
3124  
3125  .block-editor-warning {
3126    align-items: center;
3127    display: flex;
3128    flex-wrap: wrap;
3129    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3130    padding: 1em;
3131    border: 1px solid #1e1e1e;
3132    border-radius: 2px;
3133    background-color: #fff;
3134  }
3135  .block-editor-warning .block-editor-warning__message {
3136    line-height: 1.4;
3137    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3138    font-size: 13px;
3139    color: #1e1e1e;
3140    margin: 0;
3141  }
3142  .block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
3143    min-height: auto;
3144  }
3145  .block-editor-warning .block-editor-warning__contents {
3146    display: flex;
3147    flex-direction: row;
3148    justify-content: space-between;
3149    flex-wrap: wrap;
3150    align-items: baseline;
3151    width: 100%;
3152  }
3153  .block-editor-warning .block-editor-warning__actions {
3154    display: flex;
3155    margin-top: 1em;
3156  }
3157  .block-editor-warning .block-editor-warning__action {
3158    margin: 0 8px 0 0;
3159  }
3160  
3161  .block-editor-warning__secondary {
3162    margin: auto 0 auto 8px;
3163  }
3164  
3165  .components-popover.block-editor-warning__dropdown {
3166    z-index: 99998;
3167  }
3168  
3169  .html-anchor-control .components-external-link {
3170    display: block;
3171    margin-top: 8px;
3172  }
3173  
3174  .block-editor-hooks__layout-controls {
3175    display: flex;
3176    margin-bottom: 16px;
3177  }
3178  .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit {
3179    display: flex;
3180    margin-right: 24px;
3181  }
3182  .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg {
3183    margin: auto 0 4px 8px;
3184  }
3185  
3186  .block-editor-hooks__layout-controls-reset {
3187    display: flex;
3188    justify-content: flex-end;
3189    margin-bottom: 24px;
3190  }
3191  
3192  .block-editor-hooks__layout-controls-helptext {
3193    font-size: 12px;
3194  }
3195  
3196  #end-resizable-editor-section {
3197    display: none;
3198  }
3199  
3200  /**
3201   * Block Toolbar
3202   */
3203  .block-editor-block-toolbar {
3204    display: flex;
3205    flex-grow: 1;
3206    width: 100%;
3207    overflow: auto;
3208    position: relative;
3209    transition: border-color 0.1s linear, box-shadow 0.1s linear;
3210  }
3211  @media (prefers-reduced-motion: reduce) {
3212    .block-editor-block-toolbar {
3213      transition-duration: 0s;
3214      transition-delay: 0s;
3215    }
3216  }
3217  @media (min-width: 600px) {
3218    .block-editor-block-toolbar {
3219      overflow: inherit;
3220    }
3221  }
3222  .block-editor-block-toolbar .components-toolbar-group,
3223  .block-editor-block-toolbar .components-toolbar {
3224    background: none;
3225    line-height: 0;
3226    margin-top: -1px;
3227    margin-bottom: -1px;
3228    border: 0;
3229    border-right: 1px solid #ddd;
3230  }
3231  .block-editor-block-toolbar > :last-child,
3232  .block-editor-block-toolbar > :last-child .components-toolbar-group,
3233  .block-editor-block-toolbar > :last-child .components-toolbar {
3234    border-right: none;
3235  }
3236  
3237  .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
3238    margin-left: calc(48px + 8px);
3239  }
3240  .show-icon-labels .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
3241    margin-left: 0;
3242  }
3243  
3244  .block-editor-block-parent-selector {
3245    position: absolute;
3246    top: -1px;
3247    left: calc(-48px - 8px - 1px);
3248  }
3249  .show-icon-labels .block-editor-block-parent-selector {
3250    position: relative;
3251    left: auto;
3252    top: auto;
3253    margin-top: -1px;
3254    margin-left: -1px;
3255    margin-bottom: -1px;
3256  }
3257  
3258  .block-editor-block-toolbar__block-controls {
3259    height: auto !important;
3260    padding: 0 !important;
3261    margin-left: -1px;
3262  }
3263  .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
3264  .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
3265    width: 24px !important;
3266    margin: 0 !important;
3267  }
3268  .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before,
3269  .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon:focus::before {
3270    right: 4px !important;
3271  }
3272  .block-editor-block-toolbar__block-controls .block-editor-block-mover {
3273    margin-left: -6px;
3274  }
3275  
3276  .block-editor-block-toolbar .components-toolbar-group,
3277  .block-editor-block-toolbar .components-toolbar,
3278  .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
3279  .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
3280    display: flex;
3281    flex-wrap: nowrap;
3282  }
3283  
3284  .block-editor-block-toolbar__slot {
3285    display: inline-block;
3286    line-height: 0;
3287  }
3288  @supports (position: sticky) {
3289    .block-editor-block-toolbar__slot {
3290      display: inline-flex;
3291    }
3292  }
3293  
3294  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon {
3295    width: auto;
3296  }
3297  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon svg {
3298    display: none;
3299  }
3300  .show-icon-labels .block-editor-block-toolbar .components-button.has-icon::after {
3301    content: attr(aria-label);
3302    font-size: 12px;
3303  }
3304  .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
3305    padding-left: 6px;
3306    padding-right: 6px;
3307  }
3308  .show-icon-labels .block-editor-block-switcher {
3309    border-right: 1px solid #1e1e1e;
3310  }
3311  .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle {
3312    margin-left: 0;
3313  }
3314  .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
3315  .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
3316    width: 0 !important;
3317    height: 0 !important;
3318  }
3319  .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before,
3320  .show-icon-labels .block-editor-block-switcher__no-switcher-icon:focus::before {
3321    right: 4px !important;
3322  }
3323  .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
3324    width: 0;
3325  }
3326  .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
3327    margin-left: 0;
3328    white-space: nowrap;
3329  }
3330  .show-icon-labels .block-editor-block-mover-button {
3331    padding-left: 8px !important;
3332    padding-right: 8px !important;
3333  }
3334  .show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
3335    padding-left: 6px !important;
3336    padding-right: 6px !important;
3337    border-right: 1px solid #1e1e1e;
3338  }
3339  @media (min-width: 600px) {
3340    .show-icon-labels .is-up-button.is-up-button.is-up-button {
3341      border-bottom: 1px solid #1e1e1e;
3342      margin-right: 0;
3343      border-radius: 0;
3344    }
3345  }
3346  .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
3347    width: auto;
3348  }
3349  .show-icon-labels .components-toolbar,
3350  .show-icon-labels .components-toolbar-group {
3351    flex-shrink: 1;
3352  }
3353  .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
3354    margin-left: 6px;
3355  }
3356  
3357  .block-editor-inserter {
3358    display: inline-block;
3359    background: none;
3360    border: none;
3361    padding: 0;
3362    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3363    font-size: 13px;
3364    line-height: 0;
3365  }
3366  @media (min-width: 782px) {
3367    .block-editor-inserter {
3368      position: relative;
3369    }
3370  }
3371  
3372  .block-editor-inserter__popover.is-quick .components-popover__content {
3373    border: none;
3374  }
3375  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
3376    border-left: 1px solid #ccc;
3377    border-right: 1px solid #ccc;
3378  }
3379  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
3380    border-top: 1px solid #ccc;
3381  }
3382  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
3383    border-bottom: 1px solid #ccc;
3384  }
3385  .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
3386    border: 1px solid #1e1e1e;
3387  }
3388  
3389  .block-editor-inserter__popover .block-editor-inserter__menu {
3390    margin: -12px;
3391  }
3392  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tabs .components-tab-panel__tabs {
3393    top: 60px;
3394  }
3395  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
3396    overflow: visible;
3397    height: auto;
3398  }
3399  .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
3400    display: none;
3401  }
3402  
3403  .block-editor-inserter__toggle.components-button {
3404    display: inline-flex;
3405    align-items: center;
3406    cursor: pointer;
3407    border: none;
3408    outline: none;
3409    padding: 0;
3410    transition: color 0.2s ease;
3411  }
3412  @media (prefers-reduced-motion: reduce) {
3413    .block-editor-inserter__toggle.components-button {
3414      transition-duration: 0s;
3415      transition-delay: 0s;
3416    }
3417  }
3418  
3419  .block-editor-inserter__menu {
3420    height: 100%;
3421    position: relative;
3422    overflow: visible;
3423  }
3424  
3425  .block-editor-inserter__main-area {
3426    width: auto;
3427    overflow-y: auto;
3428    height: 100%;
3429  }
3430  @media (min-width: 782px) {
3431    .block-editor-inserter__main-area {
3432      width: 350px;
3433    }
3434  }
3435  
3436  .block-editor-inserter__inline-elements {
3437    margin-top: -1px;
3438  }
3439  
3440  .block-editor-inserter__menu.is-bottom::after {
3441    border-bottom-color: #fff;
3442  }
3443  
3444  .components-popover.block-editor-inserter__popover {
3445    z-index: 99999;
3446  }
3447  
3448  .block-editor-inserter__search {
3449    padding: 16px;
3450    position: sticky;
3451    top: 0;
3452    background: #fff;
3453    z-index: 1;
3454  }
3455  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
3456    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3457    padding: 6px 8px;
3458    box-shadow: 0 0 0 transparent;
3459    transition: box-shadow 0.1s linear;
3460    border-radius: 2px;
3461    border: 1px solid #757575;
3462    /* Fonts smaller than 16px causes mobile safari to zoom. */
3463    font-size: 16px;
3464    /* Override core line-height. To be reviewed. */
3465    line-height: normal;
3466    display: block;
3467    padding: 16px 48px 16px 16px;
3468    background: #f0f0f0;
3469    border: none;
3470    width: 100%;
3471    height: 48px;
3472    /* Fonts smaller than 16px causes mobile safari to zoom. */
3473    font-size: 16px;
3474  }
3475  @media (prefers-reduced-motion: reduce) {
3476    .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
3477      transition-duration: 0s;
3478      transition-delay: 0s;
3479    }
3480  }
3481  @media (min-width: 600px) {
3482    .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
3483      font-size: 13px;
3484      /* Override core line-height. To be reviewed. */
3485      line-height: normal;
3486    }
3487  }
3488  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus {
3489    border-color: var(--wp-admin-theme-color);
3490    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
3491    outline: 2px solid transparent;
3492  }
3493  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-input-placeholder {
3494    color: rgba(30, 30, 30, 0.62);
3495  }
3496  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-moz-placeholder {
3497    opacity: 1;
3498    color: rgba(30, 30, 30, 0.62);
3499  }
3500  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:-ms-input-placeholder {
3501    color: rgba(30, 30, 30, 0.62);
3502  }
3503  @media (min-width: 600px) {
3504    .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
3505      font-size: 13px;
3506    }
3507  }
3508  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus {
3509    background: #fff;
3510    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3511  }
3512  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::placeholder {
3513    color: #757575;
3514  }
3515  .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-decoration, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-cancel-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-decoration {
3516    -webkit-appearance: none;
3517  }
3518  
3519  .block-editor-inserter__search-icon {
3520    position: absolute;
3521    top: 0;
3522    right: 20px;
3523    bottom: 0;
3524    display: flex;
3525    align-items: center;
3526  }
3527  .block-editor-inserter__search-icon > svg {
3528    margin: 8px;
3529  }
3530  
3531  .block-editor-inserter__tabs {
3532    display: flex;
3533    flex-direction: column;
3534    margin-top: -8px;
3535  }
3536  .block-editor-inserter__tabs .components-tab-panel__tabs {
3537    position: sticky;
3538    top: 72px;
3539    background: #fff;
3540    z-index: 1;
3541    border-bottom: 1px solid #ddd;
3542  }
3543  .block-editor-inserter__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
3544    flex-grow: 1;
3545    margin-bottom: -1px;
3546  }
3547  .block-editor-inserter__tabs .components-tab-panel__tab-content {
3548    display: flex;
3549    flex-grow: 1;
3550    flex-direction: column;
3551    position: relative;
3552    z-index: 0;
3553  }
3554  
3555  .block-editor-inserter__panel-header {
3556    display: inline-flex;
3557    align-items: center;
3558    padding: 16px 16px 0;
3559  }
3560  
3561  .block-editor-inserter__panel-header-patterns {
3562    padding: 16px 16px 0;
3563  }
3564  
3565  .block-editor-inserter__panel-content {
3566    padding: 16px;
3567  }
3568  
3569  .block-editor-inserter__panel-title,
3570  .block-editor-inserter__panel-title button {
3571    margin: 0 12px 0 0;
3572    color: #757575;
3573    text-transform: uppercase;
3574    font-size: 11px;
3575    font-weight: 500;
3576  }
3577  
3578  .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
3579    line-height: 1.2;
3580  }
3581  
3582  .block-editor-inserter__panel-dropdown select {
3583    border: none;
3584  }
3585  
3586  .block-editor-inserter__block-list {
3587    flex-grow: 1;
3588    position: relative;
3589  }
3590  
3591  .block-editor-inserter__popover .block-editor-block-types-list {
3592    margin: -8px;
3593  }
3594  
3595  .block-editor-inserter__reusable-blocks-panel {
3596    position: relative;
3597    text-align: right;
3598  }
3599  
3600  .block-editor-inserter__manage-reusable-blocks {
3601    display: inline-block;
3602    margin: 16px;
3603  }
3604  
3605  .block-editor-inserter__no-results {
3606    padding: 32px;
3607    margin-top: 64px;
3608    text-align: center;
3609  }
3610  
3611  .block-editor-inserter__no-results-icon {
3612    fill: #949494;
3613  }
3614  
3615  .block-editor-inserter__child-blocks {
3616    padding: 0 16px;
3617  }
3618  
3619  .block-editor-inserter__parent-block-header {
3620    display: flex;
3621    align-items: center;
3622  }
3623  .block-editor-inserter__parent-block-header h2 {
3624    font-size: 13px;
3625  }
3626  .block-editor-inserter__parent-block-header .block-editor-block-icon {
3627    margin-right: 8px;
3628  }
3629  
3630  .block-editor-inserter__preview-container {
3631    display: none;
3632    width: 300px;
3633    background: #fff;
3634    border-radius: 2px;
3635    border: 1px solid #ddd;
3636    position: absolute;
3637    top: 16px;
3638    left: calc(100% + 16px);
3639    max-height: calc(100% - 32px);
3640    overflow-y: hidden;
3641  }
3642  @media (min-width: 782px) {
3643    .block-editor-inserter__preview-container {
3644      display: block;
3645    }
3646  }
3647  .block-editor-inserter__preview-container .block-editor-block-card {
3648    padding: 16px;
3649  }
3650  .block-editor-inserter__preview-container .block-editor-block-card__title {
3651    font-size: 13px;
3652  }
3653  
3654  .block-editor-inserter__preview-content {
3655    min-height: 144px;
3656    background: #f0f0f0;
3657    display: grid;
3658    flex-grow: 1;
3659    align-items: center;
3660  }
3661  
3662  .block-editor-inserter__preview-content-missing {
3663    flex: 1;
3664    display: flex;
3665    justify-content: center;
3666    align-items: center;
3667    min-height: 144px;
3668    color: #757575;
3669    background: #f0f0f0;
3670  }
3671  
3672  .block-editor-inserter__tips {
3673    border-top: 1px solid #ddd;
3674    padding: 16px;
3675    flex-shrink: 0;
3676    position: relative;
3677  }
3678  
3679  .block-editor-inserter__manage-reusable-blocks-container {
3680    padding: 16px;
3681  }
3682  
3683  .block-editor-inserter__quick-inserter {
3684    width: 100%;
3685    max-width: 100%;
3686  }
3687  @media (min-width: 782px) {
3688    .block-editor-inserter__quick-inserter {
3689      width: 350px;
3690    }
3691  }
3692  
3693  .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
3694    height: 0;
3695    padding: 0;
3696    float: left;
3697  }
3698  
3699  .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
3700  .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
3701    padding: 16px;
3702  }
3703  
3704  .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
3705    display: grid;
3706    grid-template-columns: 1fr 1fr;
3707    grid-gap: 8px;
3708  }
3709  
3710  .block-editor-inserter__quick-inserter-separator {
3711    border-top: 1px solid #ddd;
3712  }
3713  
3714  .block-editor-inserter__popover.is-quick > .components-popover__content > div {
3715    padding: 0;
3716  }
3717  
3718  .block-editor-inserter__quick-inserter-expand.components-button {
3719    display: block;
3720    background: #1e1e1e;
3721    color: #fff;
3722    width: 100%;
3723    height: 44px;
3724    border-radius: 0;
3725  }
3726  .block-editor-inserter__quick-inserter-expand.components-button:hover {
3727    color: #fff;
3728  }
3729  .block-editor-inserter__quick-inserter-expand.components-button:active {
3730    color: #ccc;
3731  }
3732  .block-editor-inserter__quick-inserter-expand.components-button:focus:not(:disabled) {
3733    box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
3734  }
3735  
3736  .block-editor-post-preview__dropdown {
3737    padding: 0;
3738  }
3739  
3740  .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize {
3741    padding-left: 40px;
3742  }
3743  .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize.has-icon {
3744    padding-left: 8px;
3745  }
3746  
3747  .block-editor-post-preview__dropdown-content .components-popover__content {
3748    overflow-y: visible;
3749  }
3750  .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child {
3751    padding-bottom: 8px;
3752  }
3753  .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:last-child {
3754    margin-bottom: 0;
3755  }
3756  .block-editor-post-preview__dropdown-content .components-menu-group + .components-menu-group {
3757    padding: 8px;
3758  }
3759  
3760  @media (min-width: 600px) {
3761    .edit-post-header__settings .editor-post-preview,
3762  .edit-site-header__actions .editor-post-preview {
3763      display: none;
3764    }
3765  }
3766  
3767  @media (min-width: 600px) {
3768    .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft,
3769  .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state,
3770  .edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle {
3771      transition: opacity 0.1s linear;
3772    }
3773  }
3774  @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
3775    .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft,
3776  .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state,
3777  .edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle {
3778      transition-duration: 0s;
3779      transition-delay: 0s;
3780    }
3781  }
3782  @media (min-width: 600px) {
3783    .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-save-draft,
3784  .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-saved-state,
3785  .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle {
3786      opacity: 0;
3787    }
3788    .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle.is-opened {
3789      opacity: 1;
3790    }
3791  }
3792  
3793  body.admin-color-light {
3794    --wp-admin-theme-color: #0085ba;
3795    --wp-admin-theme-color-darker-10: #0073a1;
3796    --wp-admin-theme-color-darker-20: #006187;
3797    --wp-admin-border-width-focus: 2px;
3798  }
3799  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3800    body.admin-color-light {
3801      --wp-admin-border-width-focus: 1.5px;
3802    }
3803  }
3804  
3805  body.admin-color-modern {
3806    --wp-admin-theme-color: #3858e9;
3807    --wp-admin-theme-color-darker-10: #2145e6;
3808    --wp-admin-theme-color-darker-20: #183ad6;
3809    --wp-admin-border-width-focus: 2px;
3810  }
3811  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3812    body.admin-color-modern {
3813      --wp-admin-border-width-focus: 1.5px;
3814    }
3815  }
3816  
3817  body.admin-color-blue {
3818    --wp-admin-theme-color: #096484;
3819    --wp-admin-theme-color-darker-10: #07526c;
3820    --wp-admin-theme-color-darker-20: #064054;
3821    --wp-admin-border-width-focus: 2px;
3822  }
3823  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3824    body.admin-color-blue {
3825      --wp-admin-border-width-focus: 1.5px;
3826    }
3827  }
3828  
3829  body.admin-color-coffee {
3830    --wp-admin-theme-color: #46403c;
3831    --wp-admin-theme-color-darker-10: #383330;
3832    --wp-admin-theme-color-darker-20: #2b2724;
3833    --wp-admin-border-width-focus: 2px;
3834  }
3835  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3836    body.admin-color-coffee {
3837      --wp-admin-border-width-focus: 1.5px;
3838    }
3839  }
3840  
3841  body.admin-color-ectoplasm {
3842    --wp-admin-theme-color: #523f6d;
3843    --wp-admin-theme-color-darker-10: #46365d;
3844    --wp-admin-theme-color-darker-20: #3a2c4d;
3845    --wp-admin-border-width-focus: 2px;
3846  }
3847  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3848    body.admin-color-ectoplasm {
3849      --wp-admin-border-width-focus: 1.5px;
3850    }
3851  }
3852  
3853  body.admin-color-midnight {
3854    --wp-admin-theme-color: #e14d43;
3855    --wp-admin-theme-color-darker-10: #dd382d;
3856    --wp-admin-theme-color-darker-20: #d02c21;
3857    --wp-admin-border-width-focus: 2px;
3858  }
3859  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3860    body.admin-color-midnight {
3861      --wp-admin-border-width-focus: 1.5px;
3862    }
3863  }
3864  
3865  body.admin-color-ocean {
3866    --wp-admin-theme-color: #627c83;
3867    --wp-admin-theme-color-darker-10: #576e74;
3868    --wp-admin-theme-color-darker-20: #4c6066;
3869    --wp-admin-border-width-focus: 2px;
3870  }
3871  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3872    body.admin-color-ocean {
3873      --wp-admin-border-width-focus: 1.5px;
3874    }
3875  }
3876  
3877  body.admin-color-sunrise {
3878    --wp-admin-theme-color: #dd823b;
3879    --wp-admin-theme-color-darker-10: #d97426;
3880    --wp-admin-theme-color-darker-20: #c36922;
3881    --wp-admin-border-width-focus: 2px;
3882  }
3883  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
3884    body.admin-color-sunrise {
3885      --wp-admin-border-width-focus: 1.5px;
3886    }
3887  }


Generated : Thu Nov 21 08:20:01 2024 Cross-referenced by PHPXref