[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

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

   1  @charset "UTF-8";
   2  /**
   3   * Typography
   4   */
   5  /**
   6   * SCSS Variables.
   7   *
   8   * Please use variables from this sheet to ensure consistency across the UI.
   9   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  10   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  11   */
  12  /**
  13   * Colors
  14   */
  15  /**
  16   * Fonts & basic variables.
  17   */
  18  /**
  19   * Typography
  20   */
  21  /**
  22   * Grid System.
  23   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  24   */
  25  /**
  26   * Radius scale.
  27   */
  28  /**
  29   * Elevation scale.
  30   */
  31  /**
  32   * Dimensions.
  33   */
  34  /**
  35   * Mobile specific styles
  36   */
  37  /**
  38   * Editor styles.
  39   */
  40  /**
  41   * Block & Editor UI.
  42   */
  43  /**
  44   * Block paddings.
  45   */
  46  /**
  47   * React Native specific.
  48   * These variables do not appear to be used anywhere else.
  49   */
  50  /**
  51   * Breakpoints & Media Queries
  52   */
  53  /**
  54  *  Converts a hex value into the rgb equivalent.
  55  *
  56  * @param {string} hex - the hexadecimal value to convert
  57  * @return {string} comma separated rgb values
  58  */
  59  /**
  60   * Long content fade mixin
  61   *
  62   * Creates a fading overlay to signify that the content is longer
  63   * than the space allows.
  64   */
  65  /**
  66   * Breakpoint mixins
  67   */
  68  /**
  69   * Focus styles.
  70   */
  71  /**
  72   * Standard focus rings for the WordPress Design System.
  73   *
  74   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  75   * e.g. `&:focus { @include outset-ring__focus(); }`.
  76   */
  77  /**
  78   * Applies editor left position to the selector passed as argument
  79   */
  80  /**
  81   * Styles that are reused verbatim in a few places
  82   */
  83  /**
  84   * Allows users to opt-out of animations via OS-level preferences.
  85   */
  86  /**
  87   * Reset default styles for JavaScript UI based pages.
  88   * This is a WP-admin agnostic reset
  89   */
  90  /**
  91   * Reset the WP Admin page styles for Gutenberg-like pages.
  92   */
  93  /**
  94   * Creates a checkerboard pattern background to indicate transparency.
  95   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  96   */
  97  :root {
  98    --wp-block-synced-color: #7a00df;
  99    --wp-block-synced-color--rgb: 122, 0, 223;
 100    --wp-bound-block-color: var(--wp-block-synced-color);
 101    --wp-editor-canvas-background: #ddd;
 102    --wp-admin-theme-color: #007cba;
 103    --wp-admin-theme-color--rgb: 0, 124, 186;
 104    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
 105    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
 106    --wp-admin-theme-color-darker-20: #005a87;
 107    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
 108    --wp-admin-border-width-focus: 2px;
 109  }
 110  @media (min-resolution: 192dpi) {
 111    :root {
 112      --wp-admin-border-width-focus: 1.5px;
 113    }
 114  }
 115  
 116  /**
 117   * Colors
 118   */
 119  /**
 120   * SCSS Variables.
 121   *
 122   * Please use variables from this sheet to ensure consistency across the UI.
 123   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 124   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 125   */
 126  /**
 127   * Fonts & basic variables.
 128   */
 129  /**
 130   * Typography
 131   */
 132  /**
 133   * Grid System.
 134   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 135   */
 136  /**
 137   * Radius scale.
 138   */
 139  /**
 140   * Elevation scale.
 141   */
 142  /**
 143   * Dimensions.
 144   */
 145  /**
 146   * Mobile specific styles
 147   */
 148  /**
 149   * Editor styles.
 150   */
 151  /**
 152   * Block & Editor UI.
 153   */
 154  /**
 155   * Block paddings.
 156   */
 157  /**
 158   * React Native specific.
 159   * These variables do not appear to be used anywhere else.
 160   */
 161  .interface-complementary-area-header {
 162    background: #fff;
 163    padding-left: 8px;
 164    gap: 4px;
 165  }
 166  
 167  .interface-complementary-area-header .interface-complementary-area-header__title {
 168    margin: 0 0 0 auto;
 169  }
 170  
 171  /**
 172   * Typography
 173   */
 174  /**
 175   * Breakpoints & Media Queries
 176   */
 177  /**
 178  *  Converts a hex value into the rgb equivalent.
 179  *
 180  * @param {string} hex - the hexadecimal value to convert
 181  * @return {string} comma separated rgb values
 182  */
 183  /**
 184   * Long content fade mixin
 185   *
 186   * Creates a fading overlay to signify that the content is longer
 187   * than the space allows.
 188   */
 189  /**
 190   * Breakpoint mixins
 191   */
 192  /**
 193   * Focus styles.
 194   */
 195  /**
 196   * Standard focus rings for the WordPress Design System.
 197   *
 198   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
 199   * e.g. `&:focus { @include outset-ring__focus(); }`.
 200   */
 201  /**
 202   * Applies editor left position to the selector passed as argument
 203   */
 204  /**
 205   * Styles that are reused verbatim in a few places
 206   */
 207  /**
 208   * Allows users to opt-out of animations via OS-level preferences.
 209   */
 210  /**
 211   * Reset default styles for JavaScript UI based pages.
 212   * This is a WP-admin agnostic reset
 213   */
 214  /**
 215   * Reset the WP Admin page styles for Gutenberg-like pages.
 216   */
 217  /**
 218   * Creates a checkerboard pattern background to indicate transparency.
 219   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 220   */
 221  .interface-complementary-area {
 222    background: #fff;
 223    color: #1e1e1e;
 224    height: 100%;
 225    overflow: auto;
 226  }
 227  
 228  @media (min-width: 782px) {
 229    .interface-complementary-area {
 230      width: 280px;
 231    }
 232  }
 233  .interface-complementary-area .components-panel {
 234    border: none;
 235    position: relative;
 236    z-index: 0;
 237  }
 238  
 239  .interface-complementary-area .components-panel__header {
 240    position: sticky;
 241    top: 0;
 242    z-index: 1;
 243  }
 244  
 245  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
 246    top: 0;
 247  }
 248  
 249  .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
 250    margin-top: 0;
 251  }
 252  
 253  .interface-complementary-area h2 {
 254    font-size: 13px;
 255    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 256    color: #1e1e1e;
 257    margin-bottom: 1.5em;
 258  }
 259  
 260  .interface-complementary-area h3 {
 261    font-size: 11px;
 262    text-transform: uppercase;
 263    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 264    color: #1e1e1e;
 265    margin-bottom: 1.5em;
 266  }
 267  
 268  .interface-complementary-area hr {
 269    border-top: none;
 270    border-bottom: 1px solid #f0f0f0;
 271    margin: 1.5em 0;
 272  }
 273  
 274  .interface-complementary-area div.components-toolbar-group,
 275  .interface-complementary-area div.components-toolbar {
 276    box-shadow: none;
 277    margin-bottom: 1.5em;
 278  }
 279  
 280  .interface-complementary-area div.components-toolbar-group:last-child,
 281  .interface-complementary-area div.components-toolbar:last-child {
 282    margin-bottom: 0;
 283  }
 284  
 285  .interface-complementary-area .block-editor-skip-to-selected-block:focus {
 286    top: auto;
 287    left: 10px;
 288    bottom: 10px;
 289    right: auto;
 290  }
 291  
 292  .interface-complementary-area__fill {
 293    height: 100%;
 294  }
 295  
 296  @media (min-width: 782px) {
 297    body.js.is-fullscreen-mode #adminmenumain {
 298      display: none;
 299    }
 300    body.js.is-fullscreen-mode #wpcontent,
 301    body.js.is-fullscreen-mode #wpfooter {
 302      margin-right: 0;
 303    }
 304  }
 305  html.interface-interface-skeleton__html-container {
 306    position: fixed;
 307    width: 100%;
 308  }
 309  
 310  @media (min-width: 782px) {
 311    html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
 312      position: initial;
 313      width: initial;
 314    }
 315  }
 316  .interface-interface-skeleton {
 317    display: flex;
 318    flex-direction: row;
 319    height: auto;
 320    max-height: 100%;
 321    position: fixed;
 322    top: 46px;
 323    right: 0;
 324    left: 0;
 325    bottom: 0;
 326  }
 327  
 328  @media (min-width: 783px) {
 329    .interface-interface-skeleton {
 330      top: 32px;
 331    }
 332    .is-fullscreen-mode .interface-interface-skeleton {
 333      top: var(--wp-admin--admin-bar--height, 0);
 334    }
 335  }
 336  .interface-interface-skeleton__editor {
 337    display: flex;
 338    flex-direction: column;
 339    flex: 0 1 100%;
 340    overflow: hidden;
 341  }
 342  
 343  .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */
 344    right: 0;
 345  }
 346  
 347  @media (min-width: 783px) {
 348    .interface-interface-skeleton {
 349      right: 160px;
 350    }
 351  }
 352  .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }
 353  
 354  @media (min-width: 783px) {
 355    .auto-fold .interface-interface-skeleton {
 356      right: 36px;
 357    }
 358  }
 359  @media (min-width: 961px) {
 360    .auto-fold .interface-interface-skeleton {
 361      right: 160px;
 362    }
 363  }
 364  /* Sidebar manually collapsed. */
 365  .folded .interface-interface-skeleton {
 366    right: 0;
 367  }
 368  
 369  @media (min-width: 783px) {
 370    .folded .interface-interface-skeleton {
 371      right: 36px;
 372    }
 373  }
 374  body.is-fullscreen-mode .interface-interface-skeleton {
 375    right: 0 !important;
 376  }
 377  
 378  .interface-interface-skeleton__body {
 379    position: relative;
 380    flex-grow: 1;
 381    display: flex;
 382    overflow: auto;
 383    overscroll-behavior-y: none;
 384  }
 385  
 386  @media (min-width: 782px) {
 387    .has-footer .interface-interface-skeleton__body {
 388      padding-bottom: 25px;
 389    }
 390  }
 391  .interface-interface-skeleton__content {
 392    flex-grow: 1;
 393    display: flex;
 394    flex-direction: column;
 395    overflow: auto;
 396    z-index: 20;
 397  }
 398  
 399  @media (min-width: 782px) {
 400    .interface-interface-skeleton__content {
 401      z-index: auto;
 402    }
 403  }
 404  .interface-interface-skeleton__secondary-sidebar,
 405  .interface-interface-skeleton__sidebar {
 406    flex-shrink: 0;
 407    position: absolute;
 408    z-index: 100000;
 409    top: 0;
 410    right: 0;
 411    bottom: 0;
 412    background: #fff;
 413    color: #1e1e1e;
 414    width: auto;
 415  }
 416  
 417  @media (min-width: 782px) {
 418    .interface-interface-skeleton__secondary-sidebar,
 419    .interface-interface-skeleton__sidebar {
 420      position: relative !important;
 421    }
 422  }
 423  .interface-interface-skeleton__sidebar {
 424    border-top: 1px solid #e0e0e0;
 425    overflow: hidden;
 426  }
 427  
 428  @media (min-width: 782px) {
 429    .interface-interface-skeleton__sidebar {
 430      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133);
 431      outline: 1px solid transparent;
 432    }
 433  }
 434  .interface-interface-skeleton__secondary-sidebar {
 435    border-top: 1px solid #e0e0e0;
 436    left: 0;
 437  }
 438  
 439  @media (min-width: 782px) {
 440    .interface-interface-skeleton__secondary-sidebar {
 441      box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133);
 442      outline: 1px solid transparent;
 443    }
 444  }
 445  .interface-interface-skeleton__header {
 446    flex-shrink: 0;
 447    height: auto;
 448    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
 449    z-index: 30;
 450    color: #1e1e1e;
 451    outline: 1px solid transparent;
 452  }
 453  
 454  .interface-interface-skeleton__footer {
 455    height: auto;
 456    flex-shrink: 0;
 457    border-top: 1px solid #e0e0e0;
 458    color: #1e1e1e;
 459    position: absolute;
 460    bottom: 0;
 461    right: 0;
 462    width: 100%;
 463    background-color: #fff;
 464    z-index: 90;
 465    display: none;
 466  }
 467  
 468  @media (min-width: 782px) {
 469    .interface-interface-skeleton__footer {
 470      display: flex;
 471    }
 472  }
 473  .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
 474    z-index: 30;
 475    display: flex;
 476    background: #fff;
 477    height: 24px;
 478    align-items: center;
 479    font-size: 13px;
 480    padding: 0 18px;
 481  }
 482  
 483  .interface-interface-skeleton__actions {
 484    z-index: 100000;
 485    position: fixed !important;
 486    top: -9999em;
 487    bottom: auto;
 488    right: auto;
 489    left: 0;
 490    color: #1e1e1e;
 491    background: #fff;
 492    width: 100vw;
 493  }
 494  
 495  @media (min-width: 782px) {
 496    .interface-interface-skeleton__actions {
 497      width: 280px;
 498    }
 499  }
 500  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
 501    top: auto;
 502    bottom: 0;
 503  }
 504  
 505  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
 506    top: 46px;
 507  }
 508  
 509  @media (min-width: 782px) {
 510    .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
 511      border-right: 1px solid #ddd;
 512      top: 32px;
 513    }
 514    .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
 515      top: var(--wp-admin--admin-bar--height, 0);
 516    }
 517  }
 518  .interface-pinned-items {
 519    display: flex;
 520  }
 521  
 522  .interface-pinned-items .components-button {
 523    display: none;
 524    margin: 0;
 525  }
 526  
 527  .interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"] {
 528    display: flex;
 529  }
 530  
 531  .interface-pinned-items .components-button svg {
 532    max-width: 24px;
 533    max-height: 24px;
 534  }
 535  
 536  @media (min-width: 600px) {
 537    .interface-pinned-items .components-button {
 538      display: flex;
 539    }
 540  }
 541  .interface-pinned-items {
 542    gap: 8px;
 543  }
 544  
 545  /**
 546   * SCSS Variables.
 547   *
 548   * Please use variables from this sheet to ensure consistency across the UI.
 549   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 550   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 551   */
 552  /**
 553   * Colors
 554   */
 555  /**
 556   * Fonts & basic variables.
 557   */
 558  /**
 559   * Typography
 560   */
 561  /**
 562   * Grid System.
 563   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 564   */
 565  /**
 566   * Radius scale.
 567   */
 568  /**
 569   * Elevation scale.
 570   */
 571  /**
 572   * Dimensions.
 573   */
 574  /**
 575   * Mobile specific styles
 576   */
 577  /**
 578   * Editor styles.
 579   */
 580  /**
 581   * Block & Editor UI.
 582   */
 583  /**
 584   * Block paddings.
 585   */
 586  /**
 587   * React Native specific.
 588   * These variables do not appear to be used anywhere else.
 589   */
 590  /**
 591   * Typography
 592   */
 593  /**
 594   * Breakpoints & Media Queries
 595   */
 596  /**
 597  *  Converts a hex value into the rgb equivalent.
 598  *
 599  * @param {string} hex - the hexadecimal value to convert
 600  * @return {string} comma separated rgb values
 601  */
 602  /**
 603   * Long content fade mixin
 604   *
 605   * Creates a fading overlay to signify that the content is longer
 606   * than the space allows.
 607   */
 608  /**
 609   * Breakpoint mixins
 610   */
 611  /**
 612   * Focus styles.
 613   */
 614  /**
 615   * Standard focus rings for the WordPress Design System.
 616   *
 617   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
 618   * e.g. `&:focus { @include outset-ring__focus(); }`.
 619   */
 620  /**
 621   * Applies editor left position to the selector passed as argument
 622   */
 623  /**
 624   * Styles that are reused verbatim in a few places
 625   */
 626  /**
 627   * Allows users to opt-out of animations via OS-level preferences.
 628   */
 629  /**
 630   * Reset default styles for JavaScript UI based pages.
 631   * This is a WP-admin agnostic reset
 632   */
 633  /**
 634   * Reset the WP Admin page styles for Gutenberg-like pages.
 635   */
 636  /**
 637   * Creates a checkerboard pattern background to indicate transparency.
 638   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 639   */
 640  @media (min-width: 782px) {
 641    .font-library-modal.font-library-modal {
 642      width: 65vw;
 643    }
 644  }
 645  .font-library-modal .components-modal__header {
 646    border-bottom: none;
 647  }
 648  
 649  .font-library-modal .components-modal__content {
 650    padding: 0;
 651    margin-bottom: 90px;
 652  }
 653  
 654  .font-library-modal .font-library__subtitle {
 655    text-transform: uppercase;
 656    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 657    font-size: 11px;
 658  }
 659  
 660  .font-library-modal__tab-panel {
 661    height: calc(100% - 50px);
 662  }
 663  
 664  .font-library__tabpanel-layout {
 665    height: 100%;
 666    display: flex;
 667    flex-direction: column;
 668  }
 669  
 670  .font-library__tabpanel-layout > div {
 671    flex-grow: 1;
 672  }
 673  
 674  .font-library__tabpanel-layout .font-library__loading {
 675    width: 100%;
 676    height: 100%;
 677    display: flex;
 678    position: absolute;
 679    right: 0;
 680    top: 0;
 681    align-items: center;
 682    justify-content: center;
 683    padding-top: 124px;
 684    box-sizing: border-box;
 685  }
 686  
 687  .font-library__tabpanel-layout .components-navigator-screen {
 688    padding: 24px;
 689    width: 100%;
 690  }
 691  
 692  .font-library__footer {
 693    position: absolute;
 694    width: 100%;
 695    bottom: 0;
 696    border-top: 1px solid #ddd;
 697    padding: 24px;
 698    background-color: #fff;
 699    box-sizing: border-box;
 700    flex-grow: 0 !important;
 701    flex-shrink: 0;
 702    height: 90px;
 703  }
 704  
 705  .font-library__page-selection {
 706    font-size: 11px;
 707    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 708    text-transform: uppercase;
 709  }
 710  
 711  @media (min-width: 600px) {
 712    .font-library__page-selection .font-library__page-selection-trigger {
 713      font-size: 11px !important;
 714      font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 715    }
 716  }
 717  .font-library__fonts-title {
 718    text-transform: uppercase;
 719    font-size: 11px;
 720    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 721    margin-top: 0;
 722    margin-bottom: 0;
 723  }
 724  
 725  .font-library__fonts-list {
 726    list-style: none;
 727    padding: 0;
 728    margin-top: 0;
 729    margin-bottom: 0;
 730  }
 731  
 732  .font-library__fonts-list-item {
 733    margin-bottom: 0;
 734  }
 735  
 736  .font-library__font-card {
 737    box-sizing: border-box;
 738    border: 1px solid #ddd;
 739    width: 100%;
 740    height: auto !important;
 741    padding: 16px;
 742    margin-top: -1px; /* To collapse the margin with the previous element */
 743  }
 744  
 745  .font-library__font-card:hover {
 746    background-color: #f0f0f0;
 747  }
 748  
 749  .font-library__font-card:focus {
 750    position: relative;
 751  }
 752  
 753  .font-library__font-card .font-library__font-card__name {
 754    font-weight: bold;
 755  }
 756  
 757  .font-library__font-card .font-library__font-card__count {
 758    color: #757575;
 759  }
 760  
 761  .font-library__font-card .font-library__font-variant_demo-image {
 762    display: block;
 763    height: 24px;
 764    width: auto;
 765  }
 766  
 767  .font-library__font-card .font-library__font-variant_demo-text {
 768    white-space: nowrap;
 769    flex-shrink: 0;
 770  }
 771  
 772  @media not (prefers-reduced-motion) {
 773    .font-library__font-card .font-library__font-variant_demo-text {
 774      transition: opacity 0.3s ease-in-out;
 775    }
 776  }
 777  .font-library-modal__tablist-container {
 778    position: sticky;
 779    top: 0;
 780    border-bottom: 1px solid #ddd;
 781    background: #fff;
 782    z-index: 1;
 783  }
 784  
 785  .font-library__upload-area {
 786    align-items: center;
 787    display: flex;
 788    justify-content: center;
 789    height: 256px !important;
 790    width: 100%;
 791  }
 792  
 793  button.font-library__upload-area {
 794    background-color: #f0f0f0;
 795  }
 796  
 797  .font-library__local-fonts {
 798    margin: 24px auto;
 799    width: 80%;
 800  }
 801  
 802  .font-library__local-fonts .font-library__upload-area__text {
 803    color: #757575;
 804  }
 805  
 806  .font-library__google-fonts-confirm {
 807    display: flex;
 808    justify-content: center;
 809    align-items: center;
 810    margin-top: 64px;
 811  }
 812  
 813  .font-library__google-fonts-confirm p {
 814    line-height: 1.4;
 815  }
 816  
 817  .font-library__google-fonts-confirm h2 {
 818    font-size: 1.2rem;
 819    font-weight: 400;
 820  }
 821  
 822  .font-library__google-fonts-confirm .components-card {
 823    padding: 16px;
 824    width: 400px;
 825  }
 826  
 827  .font-library__google-fonts-confirm .components-button {
 828    width: 100%;
 829    justify-content: center;
 830  }
 831  
 832  .font-library__select-all {
 833    padding: 16px 17px 16px 16px;
 834  }
 835  
 836  .font-library__select-all .components-checkbox-control__label {
 837    padding-right: 16px;
 838  }
 839  
 840  .global-styles-ui-pagination .components-button.is-tertiary {
 841    width: 32px;
 842    height: 32px;
 843    justify-content: center;
 844  }
 845  
 846  .global-styles-ui-screen-revisions__revisions-list {
 847    list-style: none;
 848    margin: 0 16px 16px 16px;
 849    flex-grow: 1;
 850  }
 851  
 852  .global-styles-ui-screen-revisions__revisions-list li {
 853    margin-bottom: 0;
 854  }
 855  
 856  .global-styles-ui-screen-revisions__revision-item {
 857    position: relative;
 858    cursor: var(--wpds-cursor-control, pointer);
 859    display: flex;
 860    flex-direction: column;
 861  }
 862  
 863  .global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
 864    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 865    outline: 2px solid transparent;
 866  }
 867  
 868  .global-styles-ui-screen-revisions__revision-item:hover {
 869    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 870  }
 871  
 872  .global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
 873    color: var(--wp-admin-theme-color);
 874  }
 875  
 876  .global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
 877    position: absolute;
 878    content: "\a";
 879    display: block;
 880  }
 881  
 882  .global-styles-ui-screen-revisions__revision-item::before {
 883    background: #ddd;
 884    border-radius: 50%;
 885    height: 8px;
 886    width: 8px;
 887    top: 18px;
 888    right: 17px;
 889    transform: translate(50%, -50%);
 890    z-index: 1;
 891    border: 4px solid transparent;
 892  }
 893  
 894  .global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
 895    border-radius: 2px;
 896    outline: 3px solid transparent;
 897    outline-offset: -2px;
 898    color: var(--wp-admin-theme-color);
 899    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 900  }
 901  
 902  .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
 903    color: var(--wp-admin-theme-color);
 904  }
 905  
 906  .global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
 907    background: var(--wp-admin-theme-color);
 908  }
 909  
 910  .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
 911  .global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
 912    color: #1e1e1e;
 913  }
 914  
 915  .global-styles-ui-screen-revisions__revision-item::after {
 916    height: 100%;
 917    right: 16px;
 918    top: 0;
 919    width: 0;
 920    border: 0.5px solid #ddd;
 921  }
 922  
 923  .global-styles-ui-screen-revisions__revision-item:first-child::after {
 924    top: 18px;
 925  }
 926  
 927  .global-styles-ui-screen-revisions__revision-item:last-child::after {
 928    height: 18px;
 929  }
 930  
 931  .global-styles-ui-screen-revisions__revision-item-wrapper {
 932    display: block;
 933    padding: 12px 40px 4px 12px;
 934  }
 935  
 936  .global-styles-ui-screen-revisions__apply-button.is-primary,
 937  .global-styles-ui-screen-revisions__active-badge {
 938    align-self: flex-start;
 939    margin: 0 40px 12px 12px;
 940  }
 941  
 942  .global-styles-ui-screen-revisions__changes,
 943  .global-styles-ui-screen-revisions__meta {
 944    color: #757575;
 945    font-size: 12px;
 946  }
 947  
 948  .global-styles-ui-screen-revisions__description {
 949    display: flex;
 950    flex-direction: column;
 951    align-items: flex-start;
 952    gap: 8px;
 953  }
 954  
 955  .global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
 956    text-transform: uppercase;
 957    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 958    font-size: 12px;
 959  }
 960  
 961  .global-styles-ui-screen-revisions__meta {
 962    display: flex;
 963    justify-content: start;
 964    width: 100%;
 965    align-items: flex-start;
 966    text-align: right;
 967    margin-bottom: 4px;
 968  }
 969  
 970  .global-styles-ui-screen-revisions__meta img {
 971    width: 16px;
 972    height: 16px;
 973    border-radius: 100%;
 974    margin-left: 8px;
 975  }
 976  
 977  .global-styles-ui-screen-revisions__loading {
 978    margin: 24px auto !important;
 979  }
 980  
 981  .global-styles-ui-screen-revisions__changes {
 982    text-align: right;
 983    line-height: 1.4;
 984    margin-right: 12px;
 985    list-style: disc;
 986  }
 987  
 988  .global-styles-ui-screen-revisions__changes li {
 989    margin-bottom: 4px;
 990  }
 991  
 992  .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
 993    justify-content: space-between;
 994    gap: 2px;
 995  }
 996  
 997  .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
 998    position: absolute;
 999    right: -1000px;
1000    height: 1px;
1001    margin: -1px;
1002    overflow: hidden;
1003  }
1004  
1005  .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
1006    font-size: 12px;
1007    will-change: opacity;
1008  }
1009  
1010  .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1011    color: #1e1e1e;
1012  }
1013  
1014  .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1015  .global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1016    color: #949494;
1017  }
1018  
1019  .global-styles-ui-screen-revisions__footer {
1020    height: 56px;
1021    z-index: 1;
1022    position: sticky;
1023    min-width: 100%;
1024    bottom: 0;
1025    background: #fff;
1026    padding: 12px;
1027    border-top: 1px solid #ddd;
1028    box-sizing: border-box;
1029  }
1030  
1031  .global-styles-ui-variations_item {
1032    box-sizing: border-box;
1033    cursor: var(--wpds-cursor-control, pointer);
1034  }
1035  
1036  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1037    border-radius: 2px;
1038    outline: 1px solid rgba(0, 0, 0, 0.1);
1039    outline-offset: -1px;
1040    overflow: hidden;
1041    position: relative;
1042  }
1043  
1044  @media not (prefers-reduced-motion) {
1045    .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
1046      transition: outline 0.1s linear;
1047    }
1048  }
1049  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
1050    height: 32px;
1051  }
1052  
1053  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
1054    overflow: hidden;
1055  }
1056  
1057  .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
1058    outline-color: rgba(0, 0, 0, 0.3);
1059  }
1060  
1061  .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview, .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1062    outline-color: #1e1e1e;
1063    outline-offset: 1px;
1064    outline-width: var(--wp-admin-border-width-focus);
1065  }
1066  
1067  .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
1068    outline-color: var(--wp-admin-theme-color);
1069  }
1070  
1071  .global-styles-ui-preview__wrapper {
1072    max-width: 100%;
1073    display: block;
1074    width: 100%;
1075  }
1076  
1077  .global-styles-ui-preview__wrapper.is-hoverable {
1078    cursor: var(--wpds-cursor-control, pointer);
1079  }
1080  
1081  .global-styles-ui-typography-preview {
1082    display: flex;
1083    align-items: center;
1084    justify-content: center;
1085    min-height: 100px;
1086    margin-bottom: 20px;
1087    background: #f0f0f0;
1088    border-radius: 2px;
1089    overflow: hidden;
1090  }
1091  
1092  .global-styles-ui-font-size__item {
1093    white-space: nowrap;
1094    text-overflow: ellipsis;
1095    overflow: hidden;
1096    line-break: anywhere;
1097  }
1098  
1099  .global-styles-ui-font-size__item-value {
1100    color: #757575;
1101  }
1102  
1103  .global-styles-ui-screen-typography__indicator {
1104    height: 24px;
1105    width: 24px;
1106    font-size: 14px;
1107    display: flex !important;
1108    align-items: center;
1109    justify-content: center;
1110    border-radius: 2px;
1111  }
1112  
1113  .global-styles-ui-block-types-search {
1114    margin-bottom: 10px;
1115    padding: 0 16px;
1116  }
1117  
1118  .global-styles-ui-screen-typography__font-variants-count {
1119    color: #757575;
1120  }
1121  
1122  .global-styles-ui-font-families__manage-fonts {
1123    justify-content: center;
1124  }
1125  
1126  .global-styles-ui-screen .color-block-support-panel {
1127    padding-right: 0;
1128    padding-left: 0;
1129    padding-top: 0;
1130    border-top: none;
1131    row-gap: 12px;
1132  }
1133  
1134  .global-styles-ui-header {
1135    margin-bottom: 0 !important;
1136    line-height: 1.9 !important;
1137  }
1138  
1139  .global-styles-ui-subtitle {
1140    margin-bottom: 0 !important;
1141    text-transform: uppercase;
1142    font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important;
1143    font-size: 11px !important;
1144  }
1145  
1146  .global-styles-ui-section-title {
1147    color: #2f2f2f;
1148    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1149    line-height: 1.2;
1150    padding: 16px 16px 0;
1151    margin: 0;
1152  }
1153  
1154  .global-styles-ui-icon-with-current-color {
1155    fill: currentColor;
1156  }
1157  
1158  .global-styles-ui__color-indicator-wrapper {
1159    height: 24px;
1160    flex-shrink: 0;
1161  }
1162  
1163  .global-styles-ui__shadows-panel__options-container,
1164  .global-styles-ui__typography-panel__options-container {
1165    height: 24px;
1166  }
1167  
1168  .global-styles-ui__block-preview-panel {
1169    position: relative;
1170    width: 100%;
1171    border: #ddd 1px solid;
1172    border-radius: 2px;
1173    overflow: hidden;
1174  }
1175  
1176  .global-styles-ui__shadow-preview-panel {
1177    height: 144px;
1178    border: #ddd 1px solid;
1179    border-radius: 2px;
1180    overflow: auto;
1181    background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
1182    background-position: 0 0, 8px 8px;
1183    background-size: 16px 16px;
1184  }
1185  
1186  .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1187    border: #ddd 1px solid;
1188    border-radius: 2px;
1189    background-color: #fff;
1190    width: 60%;
1191    height: 60px;
1192  }
1193  
1194  .global-styles-ui__shadow-editor__dropdown-content {
1195    width: 280px;
1196  }
1197  
1198  .global-styles-ui__shadow-editor-panel {
1199    margin-bottom: 4px;
1200  }
1201  
1202  .global-styles-ui__shadow-editor__dropdown {
1203    width: 100%;
1204    position: relative;
1205  }
1206  
1207  .global-styles-ui__shadow-editor__dropdown-toggle {
1208    width: 100%;
1209    height: auto;
1210    padding-top: 8px;
1211    padding-bottom: 8px;
1212    text-align: right;
1213    border-radius: inherit;
1214  }
1215  
1216  .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
1217    background: #f0f0f0;
1218    color: var(--wp-admin-theme-color);
1219  }
1220  
1221  .global-styles-ui__shadow-editor__remove-button {
1222    position: absolute;
1223    left: 8px;
1224    top: 8px;
1225    opacity: 0;
1226  }
1227  
1228  .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
1229    border: none;
1230  }
1231  
1232  .global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
1233    opacity: 1;
1234  }
1235  
1236  @media (hover: none) {
1237    .global-styles-ui__shadow-editor__remove-button {
1238      opacity: 1;
1239    }
1240  }
1241  .global-styles-ui-screen-css {
1242    flex: 1 1 auto;
1243    display: flex;
1244    flex-direction: column;
1245    margin: 16px;
1246  }
1247  
1248  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
1249    flex: 1 1 auto;
1250  }
1251  
1252  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
1253    flex: 1 1 auto;
1254    display: flex;
1255    flex-direction: column;
1256  }
1257  
1258  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
1259    flex: 1 1 auto;
1260    display: flex;
1261    flex-direction: column;
1262  }
1263  
1264  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
1265    flex: 1 1 auto;
1266  }
1267  
1268  .global-styles-ui-screen-css-help-link {
1269    display: inline-block;
1270    margin-top: 8px;
1271  }
1272  
1273  .global-styles-ui-screen-variations {
1274    margin-top: 16px;
1275    border-top: 1px solid #ddd;
1276  }
1277  
1278  .global-styles-ui-screen-variations > * {
1279    margin: 24px 16px;
1280  }
1281  
1282  .global-styles-ui-sidebar__navigator-provider {
1283    height: 100%;
1284  }
1285  
1286  .global-styles-ui-sidebar__navigator-screen {
1287    display: flex;
1288    flex-direction: column;
1289    height: 100%;
1290  }
1291  
1292  .global-styles-ui-color-palette__tablist-container {
1293    border-bottom: 1px solid #ddd;
1294  }
1295  
1296  .global-styles-ui-color-palette__tablist {
1297    margin-bottom: -1px;
1298  }
1299  
1300  .global-styles-ui-sidebar__navigator-screen .single-column {
1301    grid-column: span 1;
1302  }
1303  
1304  .global-styles-ui-screen-root.global-styles-ui-screen-root,
1305  .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
1306    background: unset;
1307    color: inherit;
1308  }
1309  
1310  .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
1311    fill: currentColor;
1312  }
1313  
1314  .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile, .global-styles-ui-screen-root__active-style-tile.global-styles-ui-screen-root__active-style-tile .global-styles-ui-screen-root__active-style-tile-preview {
1315    border-radius: 2px;
1316  }
1317  
1318  .global-styles-ui-screen-root__active-style-tile-preview {
1319    clip-path: border-box;
1320  }
1321  
1322  .global-styles-ui-color-palette-panel,
1323  .global-styles-ui-gradient-palette-panel {
1324    padding: 16px;
1325  }
1326  
1327  /**
1328   * Typography
1329   */
1330  /**
1331   * SCSS Variables.
1332   *
1333   * Please use variables from this sheet to ensure consistency across the UI.
1334   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
1335   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
1336   */
1337  /**
1338   * Colors
1339   */
1340  /**
1341   * Fonts & basic variables.
1342   */
1343  /**
1344   * Typography
1345   */
1346  /**
1347   * Grid System.
1348   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
1349   */
1350  /**
1351   * Radius scale.
1352   */
1353  /**
1354   * Elevation scale.
1355   */
1356  /**
1357   * Dimensions.
1358   */
1359  /**
1360   * Mobile specific styles
1361   */
1362  /**
1363   * Editor styles.
1364   */
1365  /**
1366   * Block & Editor UI.
1367   */
1368  /**
1369   * Block paddings.
1370   */
1371  /**
1372   * React Native specific.
1373   * These variables do not appear to be used anywhere else.
1374   */
1375  /**
1376   * Breakpoints & Media Queries
1377   */
1378  /**
1379  *  Converts a hex value into the rgb equivalent.
1380  *
1381  * @param {string} hex - the hexadecimal value to convert
1382  * @return {string} comma separated rgb values
1383  */
1384  /**
1385   * Long content fade mixin
1386   *
1387   * Creates a fading overlay to signify that the content is longer
1388   * than the space allows.
1389   */
1390  /**
1391   * Breakpoint mixins
1392   */
1393  /**
1394   * Focus styles.
1395   */
1396  /**
1397   * Standard focus rings for the WordPress Design System.
1398   *
1399   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
1400   * e.g. `&:focus { @include outset-ring__focus(); }`.
1401   */
1402  /**
1403   * Applies editor left position to the selector passed as argument
1404   */
1405  /**
1406   * Styles that are reused verbatim in a few places
1407   */
1408  /**
1409   * Allows users to opt-out of animations via OS-level preferences.
1410   */
1411  /**
1412   * Reset default styles for JavaScript UI based pages.
1413   * This is a WP-admin agnostic reset
1414   */
1415  /**
1416   * Reset the WP Admin page styles for Gutenberg-like pages.
1417   */
1418  /**
1419   * Creates a checkerboard pattern background to indicate transparency.
1420   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
1421   */
1422  .dataviews-wrapper,
1423  .dataviews-picker-wrapper {
1424    height: 100%;
1425    flex-grow: 1;
1426    min-height: 0;
1427    box-sizing: border-box;
1428    scroll-padding-bottom: 64px;
1429    container: dataviews-wrapper/inline-size;
1430    display: flex;
1431    flex-direction: column;
1432    font-size: var(--wpds-typography-font-size-md, 13px);
1433    line-height: var(--wpds-typography-line-height-sm, 20px);
1434    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1435  }
1436  
1437  .dataviews__view-actions,
1438  .dataviews-filters__container {
1439    box-sizing: border-box;
1440    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
1441    flex-shrink: 0;
1442    position: sticky;
1443    right: 0;
1444    background-color: inherit;
1445  }
1446  
1447  @media not (prefers-reduced-motion) {
1448    .dataviews__view-actions,
1449    .dataviews-filters__container {
1450      transition: padding ease-out 0.1s;
1451    }
1452  }
1453  .dataviews-no-results,
1454  .dataviews-loading {
1455    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1456    flex-grow: 1;
1457    display: flex;
1458    align-items: center;
1459    justify-content: center;
1460  }
1461  
1462  @media not (prefers-reduced-motion) {
1463    .dataviews-no-results,
1464    .dataviews-loading {
1465      transition: padding ease-out 0.1s;
1466    }
1467  }
1468  .dataviews-no-results.is-refreshing {
1469    opacity: 0.5;
1470    pointer-events: none;
1471  }
1472  
1473  @media not (prefers-reduced-motion) {
1474    .dataviews-no-results.is-refreshing {
1475      opacity: 1;
1476      animation: dataviews-pulse 1s ease-in-out infinite;
1477    }
1478  }
1479  @keyframes dataviews-pulse {
1480    0%, 100% {
1481      opacity: 1;
1482    }
1483    50% {
1484      opacity: 0.5;
1485    }
1486  }
1487  .dataviews-loading-more {
1488    text-align: center;
1489  }
1490  
1491  .dataviews-loading-more[aria-hidden=true] {
1492    visibility: hidden;
1493  }
1494  
1495  @container (max-width: 430px) {
1496    .dataviews__view-actions,
1497    .dataviews-filters__container {
1498      padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1499    }
1500  }
1501  .dataviews-title-field {
1502    font-size: var(--wpds-typography-font-size-md, 13px);
1503    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1504    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1505    text-overflow: ellipsis;
1506    white-space: nowrap;
1507    width: 100%;
1508  }
1509  
1510  .dataviews-title-field a {
1511    text-decoration: none;
1512    text-overflow: ellipsis;
1513    white-space: nowrap;
1514    overflow: hidden;
1515    display: block;
1516    flex-grow: 0;
1517    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1518  }
1519  
1520  .dataviews-title-field a:hover {
1521    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1522  }
1523  
1524  .dataviews-title-field a:focus {
1525    color: var(--wp-admin-theme-color--rgb);
1526    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1527    border-radius: 2px;
1528  }
1529  
1530  .dataviews-title-field button.components-button.is-link {
1531    text-decoration: none;
1532    font-weight: inherit;
1533    text-overflow: ellipsis;
1534    white-space: nowrap;
1535    overflow: hidden;
1536    display: block;
1537    width: 100%;
1538    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1539  }
1540  
1541  .dataviews-title-field button.components-button.is-link:hover {
1542    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1543  }
1544  
1545  .dataviews-title-field--clickable {
1546    cursor: var(--wpds-cursor-control, pointer);
1547    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1548  }
1549  
1550  .dataviews-title-field--clickable:hover {
1551    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1552  }
1553  
1554  .dataviews-title-field--clickable:focus {
1555    color: var(--wp-admin-theme-color--rgb);
1556    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
1557    border-radius: 2px;
1558  }
1559  
1560  .dataviews__view-actions--infinite-scroll {
1561    position: sticky;
1562    top: 0;
1563    z-index: 2;
1564    background-color: #fff;
1565  }
1566  
1567  /**
1568   * When DataViews are placed within cards, apply a consistent top padding.
1569   */
1570  .components-card__body:has(> .dataviews-wrapper),
1571  .components-card__body:has(> .dataviews-picker-wrapper) {
1572    padding: var(--wpds-dimension-padding-sm, 8px) 0 0;
1573    overflow: hidden;
1574  }
1575  
1576  .dataviews-bulk-actions-footer__item-count {
1577    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1578  }
1579  
1580  .dataviews-bulk-actions-footer__container {
1581    margin-left: auto;
1582    min-height: var(--wpds-dimension-size-md, 32px);
1583  }
1584  
1585  .dataviews-layout__container {
1586    flex: 1;
1587    min-height: 0;
1588    overflow: auto;
1589    display: flex;
1590    flex-direction: column;
1591    background-color: inherit;
1592  }
1593  
1594  .dataviews-filters__button {
1595    position: relative;
1596  }
1597  
1598  .dataviews-filters__container {
1599    padding-top: 0;
1600  }
1601  
1602  .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
1603    opacity: 0;
1604  }
1605  
1606  .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
1607    opacity: 1;
1608  }
1609  
1610  .dataviews-filters__summary-popover {
1611    font-size: var(--wpds-typography-font-size-md, 13px);
1612    line-height: var(--wpds-typography-line-height-sm, 20px);
1613  }
1614  
1615  .dataviews-filters__summary-popover .components-popover__content {
1616    width: 100%;
1617    min-width: 230px;
1618    max-width: 250px;
1619    border-radius: var(--wpds-border-radius-md, 4px);
1620  }
1621  
1622  .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
1623    padding: 0;
1624  }
1625  
1626  .dataviews-filters__summary-operators-container {
1627    padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px);
1628  }
1629  
1630  .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-no-elements), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
1631    border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1632  }
1633  
1634  .dataviews-filters__summary-operators-container:empty {
1635    display: none;
1636  }
1637  
1638  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
1639    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1640    white-space: nowrap;
1641    overflow: hidden;
1642    text-overflow: ellipsis;
1643    flex-shrink: 0; /* Prevents this element from shrinking */
1644    max-width: calc(100% - 55px);
1645  }
1646  
1647  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
1648    width: 100%;
1649    white-space: nowrap;
1650    overflow: hidden;
1651  }
1652  
1653  .dataviews-filters__summary-chip-container {
1654    position: relative;
1655    white-space: pre-wrap;
1656  }
1657  
1658  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
1659    border-radius: var(--wpds-border-radius-lg, 8px);
1660    border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1661    cursor: var(--wpds-cursor-control, pointer);
1662    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
1663    min-height: var(--wpds-dimension-size-md, 32px);
1664    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1665    position: relative;
1666    display: flex;
1667    align-items: center;
1668    box-sizing: border-box;
1669  }
1670  
1671  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
1672    cursor: default;
1673  }
1674  
1675  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
1676    padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px));
1677  }
1678  
1679  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip[aria-expanded=true] {
1680    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1681    border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1682    background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1683  }
1684  
1685  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
1686    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1687    background: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
1688    border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1689  }
1690  
1691  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values:hover:not(.dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values.is-not-clickable), .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values[aria-expanded=true] {
1692    color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
1693    background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1694    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1695  }
1696  
1697  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
1698    outline: none;
1699    box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1700  }
1701  
1702  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
1703    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1704  }
1705  
1706  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
1707    width: var(--wpds-dimension-size-sm, 24px);
1708    height: var(--wpds-dimension-size-sm, 24px);
1709    border-radius: var(--wpds-border-radius-md, 4px);
1710    border: 0;
1711    padding: 0;
1712    position: absolute;
1713    left: var(--wpds-dimension-padding-xs, 4px);
1714    top: 50%;
1715    transform: translateY(-50%);
1716    display: flex;
1717    align-items: center;
1718    justify-content: center;
1719    background: transparent;
1720    cursor: var(--wpds-cursor-control, pointer);
1721  }
1722  
1723  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1724    fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1725  }
1726  
1727  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1728    background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1729  }
1730  
1731  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1732    fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1733  }
1734  
1735  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1736    fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1737  }
1738  
1739  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1740    background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1741  }
1742  
1743  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
1744    outline: none;
1745    box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1746  }
1747  
1748  .dataviews-filters__search-widget-filter-combobox-list {
1749    max-height: 184px;
1750    padding: var(--wpds-dimension-padding-xs, 4px);
1751    overflow: auto;
1752    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1753  }
1754  
1755  .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
1756    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1757  }
1758  
1759  .dataviews-filters__search-widget-listbox {
1760    padding: var(--wpds-dimension-padding-xs, 4px);
1761    overflow: auto;
1762  }
1763  
1764  .dataviews-filters__search-widget-listitem {
1765    display: flex;
1766    align-items: center;
1767    gap: var(--wpds-dimension-gap-md, 12px);
1768    border-radius: var(--wpds-border-radius-sm, 2px);
1769    box-sizing: border-box;
1770    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
1771    cursor: default;
1772    min-height: var(--wpds-dimension-size-md, 32px);
1773    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1774    font-weight: var(--wpds-typography-font-weight-default, 400);
1775    font-size: 13px;
1776    line-height: 20px;
1777  }
1778  
1779  .dataviews-filters__search-widget-listitem:last-child {
1780    margin-block-end: 0;
1781  }
1782  
1783  .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
1784    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1785  }
1786  
1787  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
1788    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1789    background: var(--wpds-color-background-surface-neutral-strong, #fff);
1790  }
1791  
1792  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1793    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1794    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1795  }
1796  
1797  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
1798    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1799    background: var(--wpds-color-background-surface-neutral-strong, #fff);
1800  }
1801  
1802  .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
1803    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1804    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1805  }
1806  
1807  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
1808    overflow: hidden;
1809    text-overflow: ellipsis;
1810    white-space: nowrap;
1811    min-width: 0;
1812  }
1813  
1814  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
1815    display: block;
1816    overflow: hidden;
1817    text-overflow: ellipsis;
1818    font-size: var(--wpds-typography-font-size-sm, 12px);
1819    line-height: 16px;
1820    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1821  }
1822  
1823  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1824    border: 1px solid #1e1e1e;
1825    margin-left: 12px;
1826    transition: none;
1827    border-radius: 50%;
1828    width: 24px;
1829    height: 24px;
1830    min-width: 24px;
1831    max-width: 24px;
1832    position: relative;
1833  }
1834  
1835  @media not (prefers-reduced-motion) {
1836    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1837      transition: box-shadow 0.1s linear;
1838    }
1839  }
1840  @media (min-width: 600px) {
1841    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1842      height: 16px;
1843      width: 16px;
1844      min-width: 16px;
1845      max-width: 16px;
1846    }
1847  }
1848  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
1849    box-sizing: inherit;
1850    width: 12px;
1851    height: 12px;
1852    position: absolute;
1853    top: 50%;
1854    right: 50%;
1855    transform: translate(50%, -50%);
1856    margin: 0;
1857    background-color: #fff;
1858    border: 4px solid #fff;
1859  }
1860  
1861  @media (min-width: 600px) {
1862    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
1863      width: 8px;
1864      height: 8px;
1865    }
1866  }
1867  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
1868    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
1869    outline: 2px solid transparent;
1870  }
1871  
1872  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
1873    background: var(--wp-admin-theme-color);
1874    border: none;
1875  }
1876  
1877  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
1878    margin: 0;
1879    padding: 0;
1880  }
1881  
1882  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
1883    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1884    border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1885  }
1886  
1887  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
1888    content: "";
1889    border-radius: 50%;
1890    box-sizing: inherit;
1891    width: 12px;
1892    height: 12px;
1893    position: absolute;
1894    top: 50%;
1895    right: 50%;
1896    transform: translate(50%, -50%);
1897    margin: 0;
1898    background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
1899    border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff);
1900  }
1901  
1902  @media (min-width: 600px) {
1903    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
1904      width: 8px;
1905      height: 8px;
1906    }
1907  }
1908  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1909    --checkbox-size: 24px;
1910    flex-shrink: 0;
1911    border: 1px solid #1e1e1e;
1912    margin-left: 12px;
1913    transition: none;
1914    border-radius: 2px;
1915    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1916    padding: 6px 8px;
1917    /* Fonts smaller than 16px causes mobile safari to zoom. */
1918    font-size: 16px;
1919    /* Override core line-height. To be reviewed. */
1920    line-height: normal;
1921    box-shadow: 0 0 0 transparent;
1922    border-radius: 2px;
1923    border: 1px solid #949494;
1924  }
1925  
1926  @media not (prefers-reduced-motion) {
1927    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1928      transition: box-shadow 0.1s linear;
1929    }
1930  }
1931  @media (min-width: 600px) {
1932    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1933      font-size: 13px;
1934      /* Override core line-height. To be reviewed. */
1935      line-height: normal;
1936    }
1937  }
1938  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1939    border-color: var(--wp-admin-theme-color);
1940    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
1941    outline: 2px solid transparent;
1942  }
1943  
1944  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
1945    color: rgba(30, 30, 30, 0.62);
1946  }
1947  
1948  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1949    color: rgba(30, 30, 30, 0.62);
1950  }
1951  
1952  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1953    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
1954    outline: 2px solid transparent;
1955  }
1956  
1957  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
1958    background: var(--wp-admin-theme-color);
1959    border-color: var(--wp-admin-theme-color);
1960  }
1961  
1962  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1963    margin: -3px -5px;
1964    color: #fff;
1965  }
1966  
1967  @media (min-width: 782px) {
1968    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1969      margin: -4px -5px 0 0;
1970    }
1971  }
1972  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
1973    background: var(--wp-admin-theme-color);
1974    border-color: var(--wp-admin-theme-color);
1975  }
1976  
1977  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1978    content: "\f460";
1979    float: right;
1980    display: inline-block;
1981    vertical-align: middle;
1982    width: 16px;
1983    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1984    font: normal 30px/1 dashicons;
1985    speak: none;
1986    -webkit-font-smoothing: antialiased;
1987    -moz-osx-font-smoothing: grayscale;
1988  }
1989  
1990  @media (min-width: 782px) {
1991    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
1992      float: none;
1993      font-size: 21px;
1994    }
1995  }
1996  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
1997    background: #f0f0f0;
1998    border-color: #ddd;
1999    cursor: default;
2000    opacity: 1;
2001  }
2002  
2003  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2004    position: relative;
2005    background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
2006    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2007    margin: 0;
2008    padding: 0;
2009    width: var(--checkbox-size);
2010    height: var(--checkbox-size);
2011  }
2012  
2013  @media (min-width: 600px) {
2014    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2015      --checkbox-size: 16px;
2016    }
2017  }
2018  @media not (prefers-reduced-motion) {
2019    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2020      transition: 0.1s border-color ease-in-out;
2021    }
2022  }
2023  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
2024    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2025    border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2026  }
2027  
2028  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2029    --checkmark-size: var(--checkbox-size);
2030    fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2031    position: absolute;
2032    right: 50%;
2033    top: 50%;
2034    transform: translate(50%, -50%);
2035    width: var(--checkmark-size);
2036    height: var(--checkmark-size);
2037  }
2038  
2039  @media (min-width: 600px) {
2040    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2041      --checkmark-size: calc(var(--checkbox-size) + 4px);
2042    }
2043  }
2044  .dataviews-filters__search-widget-filter-combobox__wrapper {
2045    position: relative;
2046    padding: var(--wpds-dimension-padding-sm, 8px);
2047  }
2048  
2049  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2050    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2051    padding: 6px 8px;
2052    /* Fonts smaller than 16px causes mobile safari to zoom. */
2053    font-size: 16px;
2054    /* Override core line-height. To be reviewed. */
2055    line-height: normal;
2056    box-shadow: 0 0 0 transparent;
2057    border-radius: 2px;
2058    border: 1px solid #949494;
2059  }
2060  
2061  @media not (prefers-reduced-motion) {
2062    .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2063      transition: box-shadow 0.1s linear;
2064    }
2065  }
2066  @media (min-width: 600px) {
2067    .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2068      font-size: 13px;
2069      /* Override core line-height. To be reviewed. */
2070      line-height: normal;
2071    }
2072  }
2073  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2074    border-color: var(--wp-admin-theme-color);
2075    box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2076    outline: 2px solid transparent;
2077  }
2078  
2079  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2080    color: rgba(30, 30, 30, 0.62);
2081  }
2082  
2083  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2084    color: rgba(30, 30, 30, 0.62);
2085  }
2086  
2087  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2088    display: block;
2089    padding: 0 var(--wpds-dimension-size-md, 32px) 0 var(--wpds-dimension-padding-sm, 8px);
2090    width: 100%;
2091    height: var(--wpds-dimension-size-md, 32px);
2092    margin-right: 0;
2093    margin-left: 0;
2094    /* Fonts smaller than 16px causes mobile safari to zoom. */
2095    font-size: 16px;
2096  }
2097  
2098  @media (min-width: 600px) {
2099    .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2100      font-size: var(--wpds-typography-font-size-md, 13px);
2101    }
2102  }
2103  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2104    background: var(--wpds-color-background-surface-neutral-strong, #fff);
2105    box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2106  }
2107  
2108  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2109    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2110  }
2111  
2112  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2113    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2114  }
2115  
2116  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-decoration, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-cancel-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-button, .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-webkit-search-results-decoration {
2117    -webkit-appearance: none;
2118  }
2119  
2120  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
2121    position: absolute;
2122    inset-inline-start: var(--wpds-dimension-gap-md, 12px);
2123    top: 0;
2124    bottom: 0;
2125    display: flex;
2126    align-items: center;
2127    justify-content: center;
2128    width: var(--wpds-dimension-size-sm, 24px);
2129  }
2130  
2131  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
2132    transform: scaleX(-1);
2133  }
2134  
2135  .dataviews-filters__container-visibility-toggle {
2136    position: relative;
2137    flex-shrink: 0;
2138  }
2139  
2140  .dataviews-filters-toggle__count {
2141    position: absolute;
2142    top: 0;
2143    left: 0;
2144    transform: translate(-50%, -50%);
2145    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2146    height: var(--wpds-dimension-size-2xs, 16px);
2147    min-width: var(--wpds-dimension-size-2xs, 16px);
2148    line-height: var(--wpds-typography-line-height-xs, 16px);
2149    padding: 0 var(--wpds-dimension-padding-xs, 4px);
2150    text-align: center;
2151    border-radius: var(--wpds-border-radius-lg, 8px);
2152    font-size: 11px;
2153    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff);
2154    color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2155    box-sizing: border-box;
2156  }
2157  
2158  .dataviews-search {
2159    width: -moz-fit-content;
2160    width: fit-content;
2161  }
2162  
2163  .dataviews-filters__user-input-widget {
2164    padding: var(--wpds-dimension-padding-lg, 16px);
2165  }
2166  
2167  .dataviews-filters__user-input-widget .components-input-control__prefix {
2168    padding-right: var(--wpds-dimension-padding-sm, 8px);
2169  }
2170  
2171  .dataviews-filters__search-widget-no-elements {
2172    display: flex;
2173    align-items: center;
2174    justify-content: center;
2175    padding: var(--wpds-dimension-padding-lg, 16px);
2176  }
2177  
2178  .dataviews-footer {
2179    position: sticky;
2180    bottom: 0;
2181    right: 0;
2182    background-color: inherit;
2183    padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
2184    border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2185    flex-shrink: 0;
2186  }
2187  
2188  @media not (prefers-reduced-motion) {
2189    .dataviews-footer {
2190      transition: padding ease-out 0.1s;
2191    }
2192  }
2193  .dataviews-footer {
2194    z-index: 1;
2195  }
2196  
2197  .dataviews-footer .is-refreshing {
2198    opacity: 0.5;
2199    pointer-events: none;
2200  }
2201  
2202  @media not (prefers-reduced-motion) {
2203    .dataviews-footer .is-refreshing {
2204      opacity: 1;
2205      animation: dataviews-pulse 1s ease-in-out infinite;
2206    }
2207  }
2208  @container (max-width: 560px) {
2209    .dataviews-footer__content {
2210      flex-direction: column !important;
2211    }
2212    .dataviews-footer__content .dataviews-bulk-actions-footer__container {
2213      width: 100%;
2214    }
2215    .dataviews-footer__content .dataviews-bulk-actions-footer__item-count {
2216      flex-grow: 1;
2217    }
2218    .dataviews-footer__content .dataviews-pagination {
2219      width: 100%;
2220      justify-content: space-between;
2221    }
2222  }
2223  .dataviews-pagination__page-select {
2224    font-size: 11px;
2225    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2226    text-transform: uppercase;
2227  }
2228  
2229  @media (min-width: 600px) {
2230    .dataviews-pagination__page-select .components-select-control__input {
2231      font-size: 11px !important;
2232      font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2233    }
2234  }
2235  .dataviews-action-modal {
2236    z-index: 1000001;
2237  }
2238  
2239  .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
2240    padding: 0 var(--wpds-dimension-padding-xs, 4px);
2241  }
2242  
2243  .dataviews-selection-checkbox {
2244    --checkbox-input-size: 24px;
2245  }
2246  
2247  @media (min-width: 600px) {
2248    .dataviews-selection-checkbox {
2249      --checkbox-input-size: 16px;
2250    }
2251  }
2252  .dataviews-selection-checkbox {
2253    line-height: 0;
2254    flex-shrink: 0;
2255  }
2256  
2257  .dataviews-selection-checkbox .components-checkbox-control__input-container {
2258    margin: 0;
2259  }
2260  
2261  .dataviews-view-config {
2262    width: 320px;
2263    container-type: inline-size;
2264    font-size: var(--wpds-typography-font-size-md, 13px);
2265    line-height: var(--wpds-typography-line-height-sm, 20px);
2266  }
2267  
2268  .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
2269    overflow-y: scroll;
2270    height: 100%;
2271  }
2272  
2273  .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
2274    width: auto;
2275  }
2276  
2277  .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
2278    text-transform: uppercase;
2279  }
2280  
2281  .dataviews-settings-section__title.dataviews-settings-section__title {
2282    line-height: var(--wpds-typography-line-height-md, 24px);
2283    font-size: 15px;
2284  }
2285  
2286  .dataviews-settings-section__sidebar {
2287    grid-column: span 4;
2288  }
2289  
2290  .dataviews-settings-section__content,
2291  .dataviews-settings-section__content > * {
2292    grid-column: span 8;
2293  }
2294  
2295  .dataviews-settings-section__content .is-divided-in-two {
2296    display: contents;
2297  }
2298  
2299  .dataviews-settings-section__content .is-divided-in-two > * {
2300    grid-column: span 4;
2301  }
2302  
2303  .dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
2304    display: none;
2305  }
2306  
2307  @container (max-width: 500px) {
2308    .dataviews-settings-section.dataviews-settings-section {
2309      grid-template-columns: repeat(2, 1fr);
2310    }
2311    .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
2312      grid-column: span 2;
2313    }
2314    .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
2315      grid-column: span 2;
2316    }
2317  }
2318  .dataviews-view-config__sort-controls > * {
2319    flex: 1;
2320  }
2321  
2322  .dataviews-view-config__label {
2323    text-wrap: nowrap;
2324  }
2325  
2326  .dataviews-view-config__toggle-wrapper {
2327    position: relative;
2328    display: inline-flex;
2329  }
2330  
2331  .dataviews-view-config__modified-indicator {
2332    position: absolute;
2333    top: var(--wpds-dimension-gap-xs, 4px);
2334    left: var(--wpds-dimension-gap-xs, 4px);
2335    width: var(--wpds-dimension-gap-xs, 4px);
2336    height: var(--wpds-dimension-gap-xs, 4px);
2337    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
2338    border-radius: 50%;
2339    pointer-events: none;
2340  }
2341  
2342  .dataviews-view-grid-items {
2343    margin-bottom: auto;
2344    display: grid;
2345    gap: var(--wpds-dimension-gap-xl, 24px);
2346    grid-template-rows: max-content;
2347    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
2348    padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2349    container-type: inline-size;
2350  }
2351  
2352  @media not (prefers-reduced-motion) {
2353    .dataviews-view-grid-items {
2354      transition: padding ease-out 0.1s;
2355    }
2356  }
2357  .dataviews-view-grid-items.has-compact-density {
2358    gap: var(--wpds-dimension-gap-lg, 16px);
2359  }
2360  
2361  .dataviews-view-grid-items.has-comfortable-density {
2362    gap: var(--wpds-dimension-gap-2xl, 32px);
2363  }
2364  
2365  .dataviews-view-grid {
2366    padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2367    display: flex;
2368    flex-direction: column;
2369    gap: var(--wpds-dimension-gap-xl, 24px);
2370    container-type: inline-size;
2371    margin-bottom: auto;
2372  }
2373  
2374  @media not (prefers-reduced-motion) {
2375    .dataviews-view-grid {
2376      transition: padding ease-out 0.1s;
2377    }
2378  }
2379  .dataviews-view-grid.has-compact-density {
2380    gap: var(--wpds-dimension-gap-lg, 16px);
2381  }
2382  
2383  .dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
2384    gap: var(--wpds-dimension-gap-lg, 16px);
2385  }
2386  
2387  .dataviews-view-grid.has-comfortable-density {
2388    gap: var(--wpds-dimension-gap-2xl, 32px);
2389  }
2390  
2391  .dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
2392    gap: var(--wpds-dimension-gap-2xl, 32px);
2393  }
2394  
2395  .dataviews-view-grid .dataviews-view-grid__row {
2396    display: grid;
2397    gap: var(--wpds-dimension-gap-xl, 24px);
2398  }
2399  
2400  .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
2401    border-radius: var(--wpds-border-radius-md, 4px);
2402    position: relative;
2403  }
2404  
2405  .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
2406    content: "";
2407    position: absolute;
2408    top: 0;
2409    right: 0;
2410    width: 100%;
2411    height: 100%;
2412    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2413    border-radius: var(--wpds-border-radius-md, 4px);
2414    pointer-events: none;
2415    outline: 2px solid transparent;
2416  }
2417  
2418  .dataviews-view-grid .dataviews-view-grid__card,
2419  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
2420    height: 100%;
2421    justify-content: flex-start;
2422    position: relative;
2423    isolation: isolate;
2424  }
2425  
2426  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions,
2427  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-actions {
2428    padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
2429  }
2430  
2431  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
2432  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
2433    min-height: var(--wpds-dimension-size-sm, 24px);
2434    overflow: hidden;
2435    align-content: center;
2436    text-align: start;
2437  }
2438  
2439  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2440  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2441    width: -moz-fit-content;
2442    width: fit-content;
2443  }
2444  
2445  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
2446  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2447    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2448  }
2449  
2450  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
2451  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
2452    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
2453  }
2454  
2455  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
2456  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
2457    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2458  }
2459  
2460  .dataviews-view-grid .dataviews-view-grid__media,
2461  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
2462    width: 100%;
2463    aspect-ratio: 1/1;
2464    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2465    border-radius: var(--wpds-border-radius-md, 4px);
2466    overflow: hidden;
2467    position: relative;
2468  }
2469  
2470  .dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
2471  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
2472    aspect-ratio: 3/1;
2473  }
2474  
2475  .dataviews-view-grid .dataviews-view-grid__media img,
2476  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2477    -o-object-fit: cover;
2478    object-fit: cover;
2479    width: 100%;
2480    height: 100%;
2481  }
2482  
2483  .dataviews-view-grid .dataviews-view-grid__media::after,
2484  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
2485    content: "";
2486    position: absolute;
2487    top: 0;
2488    right: 0;
2489    width: 100%;
2490    height: 100%;
2491    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2492    border-radius: var(--wpds-border-radius-md, 4px);
2493    pointer-events: none;
2494  }
2495  
2496  .dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
2497  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
2498    width: 100%;
2499    height: 100%;
2500    display: block;
2501    border-radius: var(--wpds-border-radius-md, 4px);
2502    box-shadow: none;
2503    background: var(--wpds-color-background-surface-neutral, #fcfcfc);
2504  }
2505  
2506  .dataviews-view-grid .dataviews-view-grid__fields,
2507  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
2508    position: relative;
2509    font-size: 12px;
2510    line-height: 16px;
2511  }
2512  
2513  .dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
2514  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
2515    padding: 0 0 var(--wpds-dimension-padding-md, 12px);
2516  }
2517  
2518  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
2519  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
2520    min-height: var(--wpds-dimension-size-sm, 24px);
2521    line-height: var(--wpds-typography-line-height-sm, 20px);
2522    padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
2523  }
2524  
2525  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
2526  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
2527    min-height: var(--wpds-dimension-size-sm, 24px);
2528    align-items: center;
2529  }
2530  
2531  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
2532  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
2533    width: 35%;
2534    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2535    overflow: hidden;
2536    text-overflow: ellipsis;
2537    white-space: nowrap;
2538  }
2539  
2540  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
2541  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
2542    width: 65%;
2543    overflow: hidden;
2544    text-overflow: ellipsis;
2545    white-space: nowrap;
2546  }
2547  
2548  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
2549  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
2550    display: none;
2551  }
2552  
2553  .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
2554  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
2555    padding-bottom: var(--wpds-dimension-padding-md, 12px);
2556  }
2557  
2558  .dataviews-view-grid.is-refreshing,
2559  .dataviews-view-grid-infinite-scroll.is-refreshing {
2560    opacity: 0.5;
2561    pointer-events: none;
2562  }
2563  
2564  @media not (prefers-reduced-motion) {
2565    .dataviews-view-grid.is-refreshing,
2566    .dataviews-view-grid-infinite-scroll.is-refreshing {
2567      opacity: 1;
2568      animation: dataviews-pulse 1s ease-in-out infinite;
2569    }
2570  }
2571  .dataviews-view-grid__field-value:empty,
2572  .dataviews-view-grid__field:empty {
2573    display: none;
2574  }
2575  
2576  .dataviews-view-grid__card .dataviews-selection-checkbox {
2577    position: absolute;
2578    top: -9999em;
2579    right: var(--wpds-dimension-padding-sm, 8px);
2580    z-index: 1;
2581    opacity: 0;
2582  }
2583  
2584  @media not (prefers-reduced-motion) {
2585    .dataviews-view-grid__card .dataviews-selection-checkbox {
2586      transition: opacity 0.1s linear;
2587    }
2588  }
2589  @media (hover: none) {
2590    .dataviews-view-grid__card .dataviews-selection-checkbox {
2591      opacity: 1;
2592      top: var(--wpds-dimension-padding-sm, 8px);
2593    }
2594  }
2595  .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
2596  .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
2597  .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
2598    opacity: 1;
2599    top: var(--wpds-dimension-padding-sm, 8px);
2600  }
2601  
2602  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2603    position: absolute;
2604    z-index: 1;
2605    top: var(--wpds-dimension-padding-xs, 4px);
2606    opacity: 0;
2607    left: var(--wpds-dimension-padding-xs, 4px);
2608  }
2609  
2610  .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
2611    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2612  }
2613  
2614  @media not (prefers-reduced-motion) {
2615    .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2616      transition: opacity 0.1s linear;
2617    }
2618  }
2619  @media (hover: none) {
2620    .dataviews-view-grid__card .dataviews-view-grid__media-actions {
2621      opacity: 1;
2622      top: var(--wpds-dimension-padding-xs, 4px);
2623    }
2624  }
2625  .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
2626  .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
2627  .dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
2628    opacity: 1;
2629  }
2630  
2631  .dataviews-view-grid__media--clickable {
2632    cursor: var(--wpds-cursor-control, pointer);
2633  }
2634  
2635  .dataviews-view-grid__group-header {
2636    font-size: var(--wpds-typography-font-size-lg, 15px);
2637    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2638    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2639    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2640    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2641    container-type: inline-size;
2642  }
2643  
2644  div.dataviews-view-list {
2645    list-style-type: none;
2646  }
2647  
2648  .dataviews-view-list {
2649    margin: 0 0 auto;
2650  }
2651  
2652  .dataviews-view-list div[role=row],
2653  .dataviews-view-list div[role=article] {
2654    margin: 0;
2655    border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2656  }
2657  
2658  .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
2659  .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
2660    position: relative;
2661    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
2662    box-sizing: border-box;
2663  }
2664  
2665  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2666  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2667    display: flex;
2668    width: -moz-max-content;
2669    width: max-content;
2670    flex: 0 0 auto;
2671    gap: var(--wpds-dimension-gap-xs, 4px);
2672    white-space: nowrap;
2673  }
2674  
2675  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
2676  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button {
2677    position: relative;
2678    z-index: 1;
2679  }
2680  
2681  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
2682  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
2683    height: var(--wpds-dimension-size-sm, 24px);
2684  }
2685  
2686  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2687  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
2688    flex: 0;
2689    overflow: hidden;
2690    width: 0;
2691  }
2692  
2693  .dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child),
2694  .dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) {
2695    flex-basis: min-content;
2696    width: auto;
2697    overflow: unset;
2698  }
2699  
2700  @media (hover: none) {
2701    .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
2702    .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
2703      flex-basis: min-content;
2704      width: auto;
2705      overflow: unset;
2706    }
2707  }
2708  .dataviews-view-list div[role=row].is-selected.is-selected,
2709  .dataviews-view-list div[role=article].is-selected.is-selected {
2710    border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
2711  }
2712  
2713  .dataviews-view-list div[role=row].is-selected.is-selected + div[role=row], .dataviews-view-list div[role=row].is-selected.is-selected + div[role=article],
2714  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
2715  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
2716    border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
2717  }
2718  
2719  .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
2720  .dataviews-view-list div[role=article]:not(.is-selected):hover,
2721  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2722  .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2723    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2724    background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
2725  }
2726  
2727  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
2728  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
2729  .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-title-field,
2730  .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
2731  .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field,
2732  .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field,
2733  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
2734  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
2735  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
2736  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
2737    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2738  }
2739  
2740  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2741  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2742  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2743  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2744    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2745    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2746  }
2747  
2748  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2749  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2750  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2751  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2752  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2753  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2754  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2755  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
2756    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2757  }
2758  
2759  .dataviews-view-list .dataviews-view-list__item {
2760    position: absolute;
2761    z-index: 1;
2762    inset: 0;
2763    scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2764    -webkit-appearance: none;
2765    -moz-appearance: none;
2766    appearance: none;
2767    border: none;
2768    background: none;
2769    padding: 0;
2770    cursor: var(--wpds-cursor-control, pointer);
2771  }
2772  
2773  .dataviews-view-list .dataviews-view-list__item:focus-visible {
2774    outline: none;
2775  }
2776  
2777  .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
2778    position: absolute;
2779    content: "";
2780    inset: var(--wp-admin-border-width-focus);
2781    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2782    border-radius: var(--wpds-border-radius-sm, 2px);
2783    outline: 2px solid transparent;
2784  }
2785  
2786  .dataviews-view-list .dataviews-view-list__title-field {
2787    flex: 1;
2788    min-height: var(--wpds-dimension-size-sm, 24px);
2789    line-height: var(--wpds-typography-line-height-md, 24px);
2790    overflow: hidden;
2791  }
2792  
2793  .dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
2794    z-index: 1;
2795  }
2796  
2797  .dataviews-view-list .dataviews-view-list__media-wrapper {
2798    width: 48px;
2799    height: 48px;
2800    overflow: hidden;
2801    position: relative;
2802    flex-shrink: 0;
2803    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2804    border-radius: var(--wpds-border-radius-md, 4px);
2805  }
2806  
2807  .dataviews-view-list .dataviews-view-list__media-wrapper img {
2808    width: 100%;
2809    height: 100%;
2810    -o-object-fit: cover;
2811    object-fit: cover;
2812  }
2813  
2814  .dataviews-view-list .dataviews-view-list__media-wrapper::after {
2815    content: "";
2816    position: absolute;
2817    top: 0;
2818    right: 0;
2819    width: 100%;
2820    height: 100%;
2821    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2822    border-radius: var(--wpds-border-radius-md, 4px);
2823  }
2824  
2825  .dataviews-view-list .dataviews-view-list__field-wrapper {
2826    min-height: 48px;
2827    flex-grow: 1;
2828    min-width: 0;
2829  }
2830  
2831  .dataviews-view-list .dataviews-view-list__field {
2832    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
2833  }
2834  
2835  .dataviews-view-list .dataviews-view-list__fields {
2836    display: flex;
2837    gap: var(--wpds-dimension-gap-md, 12px);
2838    row-gap: var(--wpds-dimension-gap-xs, 4px);
2839    flex-wrap: wrap;
2840    font-size: 12px;
2841  }
2842  
2843  .dataviews-view-list .dataviews-view-list__fields:empty {
2844    display: none;
2845  }
2846  
2847  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
2848    display: none;
2849  }
2850  
2851  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
2852    min-height: var(--wpds-dimension-size-sm, 24px);
2853    line-height: var(--wpds-typography-line-height-sm, 20px);
2854    display: flex;
2855    align-items: center;
2856  }
2857  
2858  .dataviews-view-list + .dataviews-pagination {
2859    justify-content: space-between;
2860  }
2861  
2862  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
2863    padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
2864  }
2865  
2866  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
2867    min-height: var(--wpds-dimension-size-2xs, 16px);
2868    line-height: var(--wpds-typography-line-height-xs, 16px);
2869  }
2870  
2871  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
2872    width: var(--wpds-dimension-size-md, 32px);
2873    height: var(--wpds-dimension-size-md, 32px);
2874  }
2875  
2876  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
2877    min-height: var(--wpds-dimension-size-md, 32px);
2878  }
2879  
2880  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
2881    gap: var(--wpds-dimension-gap-sm, 8px);
2882    row-gap: var(--wpds-dimension-gap-xs, 4px);
2883  }
2884  
2885  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
2886    min-height: var(--wpds-dimension-size-2xs, 16px);
2887    line-height: var(--wpds-typography-line-height-xs, 16px);
2888  }
2889  
2890  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
2891    padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
2892  }
2893  
2894  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
2895    min-height: var(--wpds-dimension-size-md, 32px);
2896    line-height: var(--wpds-typography-line-height-xl, 32px);
2897  }
2898  
2899  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
2900    width: 64px;
2901    height: 64px;
2902  }
2903  
2904  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
2905    min-height: 64px;
2906  }
2907  
2908  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
2909    gap: var(--wpds-dimension-gap-lg, 16px);
2910    row-gap: var(--wpds-dimension-gap-sm, 8px);
2911  }
2912  
2913  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
2914    min-height: var(--wpds-dimension-size-md, 32px);
2915    line-height: var(--wpds-typography-line-height-md, 24px);
2916  }
2917  
2918  .dataviews-view-list.is-refreshing {
2919    opacity: 0.5;
2920    pointer-events: none;
2921  }
2922  
2923  @media not (prefers-reduced-motion) {
2924    .dataviews-view-list.is-refreshing {
2925      opacity: 1;
2926      animation: dataviews-pulse 1s ease-in-out infinite;
2927    }
2928  }
2929  .dataviews-view-list__group-header {
2930    font-size: var(--wpds-typography-font-size-lg, 15px);
2931    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2932    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2933    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2934    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2935  }
2936  
2937  .dataviews-view-table {
2938    width: 100%;
2939    text-indent: 0;
2940    border-color: inherit;
2941    border-collapse: collapse;
2942    position: relative;
2943    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2944    margin-bottom: auto;
2945    background-color: inherit;
2946  }
2947  
2948  .dataviews-view-table th {
2949    text-align: right;
2950    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2951    font-weight: normal;
2952    font-size: var(--wpds-typography-font-size-md, 13px);
2953  }
2954  
2955  .dataviews-view-table td,
2956  .dataviews-view-table th {
2957    padding: var(--wpds-dimension-padding-md, 12px);
2958  }
2959  
2960  .dataviews-view-table td.dataviews-view-table__actions-column,
2961  .dataviews-view-table th.dataviews-view-table__actions-column {
2962    text-align: left;
2963  }
2964  
2965  .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
2966  .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
2967    position: sticky;
2968    left: 0;
2969    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
2970  }
2971  
2972  .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
2973  .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
2974    display: block;
2975    content: "";
2976    position: absolute;
2977    top: 0;
2978    bottom: 0;
2979    right: 0;
2980    width: 1px;
2981    background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2982  }
2983  
2984  .dataviews-view-table td.dataviews-view-table__checkbox-column,
2985  .dataviews-view-table th.dataviews-view-table__checkbox-column {
2986    padding-left: 0;
2987  }
2988  
2989  .dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
2990  .dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
2991    max-width: auto;
2992    min-width: auto;
2993  }
2994  
2995  .dataviews-view-table tr {
2996    border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2997    background-color: inherit;
2998  }
2999  
3000  .dataviews-view-table tr td:first-child,
3001  .dataviews-view-table tr th:first-child {
3002    padding-right: var(--wpds-dimension-padding-2xl, 24px);
3003  }
3004  
3005  .dataviews-view-table tr td:last-child,
3006  .dataviews-view-table tr th:last-child {
3007    padding-left: var(--wpds-dimension-padding-2xl, 24px);
3008  }
3009  
3010  .dataviews-view-table tr:last-child {
3011    border-bottom: 0;
3012  }
3013  
3014  .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3015    opacity: 0;
3016  }
3017  
3018  @media (hover: none) {
3019    .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3020      opacity: 1;
3021    }
3022  }
3023  .dataviews-view-table tr.is-selected {
3024    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3025    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3026  }
3027  
3028  .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
3029    border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
3030  }
3031  
3032  .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
3033    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3034  }
3035  
3036  .dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
3037    opacity: 1;
3038  }
3039  
3040  .dataviews-view-table.has-bulk-actions tr:focus-within .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr:hover .dataviews-view-table__actions-column--sticky {
3041    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3042  }
3043  
3044  .dataviews-view-table.has-bulk-actions tr.is-selected .dataviews-view-table__actions-column--sticky, .dataviews-view-table.has-bulk-actions tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
3045    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3046  }
3047  
3048  .dataviews-view-table thead {
3049    position: sticky;
3050    inset-block-start: 0;
3051    z-index: 1;
3052    background-color: inherit;
3053  }
3054  
3055  .dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
3056    display: block;
3057    content: "";
3058    position: absolute;
3059    bottom: 0;
3060    right: 0;
3061    left: 0;
3062    height: 1px;
3063    background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
3064  }
3065  
3066  .dataviews-view-table thead tr {
3067    border: 0;
3068  }
3069  
3070  .dataviews-view-table thead th {
3071    background-color: inherit;
3072    padding-top: var(--wpds-dimension-padding-sm, 8px);
3073    padding-bottom: var(--wpds-dimension-padding-sm, 8px);
3074    font-size: 11px;
3075    text-transform: uppercase;
3076    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3077  }
3078  
3079  .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
3080    padding-right: var(--wpds-dimension-padding-xs, 4px);
3081    padding-left: var(--wpds-dimension-padding-xs, 4px);
3082  }
3083  
3084  .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
3085    gap: var(--wpds-dimension-gap-xs, 4px);
3086  }
3087  
3088  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
3089    padding-right: var(--wpds-dimension-padding-lg, 16px);
3090  }
3091  
3092  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
3093    padding-left: var(--wpds-dimension-padding-lg, 16px);
3094  }
3095  
3096  .dataviews-view-table tbody td {
3097    vertical-align: top;
3098  }
3099  
3100  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
3101    min-height: var(--wpds-dimension-size-md, 32px);
3102    display: flex;
3103    align-items: center;
3104    white-space: nowrap;
3105  }
3106  
3107  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
3108    justify-content: flex-end;
3109    font-variant-numeric: tabular-nums;
3110  }
3111  
3112  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
3113    justify-content: center;
3114  }
3115  
3116  .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
3117    min-height: 0;
3118  }
3119  
3120  .dataviews-view-table .dataviews-view-table-header-button {
3121    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
3122    font-size: 11px;
3123    text-transform: uppercase;
3124    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3125  }
3126  
3127  .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
3128    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3129  }
3130  
3131  .dataviews-view-table .dataviews-view-table-header-button span {
3132    speak: none;
3133  }
3134  
3135  .dataviews-view-table .dataviews-view-table-header-button span:empty {
3136    display: none;
3137  }
3138  
3139  .dataviews-view-table .dataviews-view-table-header {
3140    padding-right: var(--wpds-dimension-padding-xs, 4px);
3141  }
3142  
3143  .dataviews-view-table .dataviews-view-table__actions-column {
3144    width: auto;
3145    white-space: nowrap;
3146  }
3147  
3148  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
3149    padding-right: 0;
3150  }
3151  
3152  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
3153    padding-left: 0;
3154  }
3155  
3156  .dataviews-view-table.has-compact-density td,
3157  .dataviews-view-table.has-compact-density th {
3158    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
3159  }
3160  
3161  .dataviews-view-table.has-comfortable-density td,
3162  .dataviews-view-table.has-comfortable-density th {
3163    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-md, 12px);
3164  }
3165  
3166  .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
3167  .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
3168  .dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column {
3169    padding-left: 0;
3170  }
3171  
3172  .dataviews-view-table-selection-checkbox {
3173    --checkbox-input-size: 24px;
3174  }
3175  
3176  @media (min-width: 600px) {
3177    .dataviews-view-table-selection-checkbox {
3178      --checkbox-input-size: 16px;
3179    }
3180  }
3181  .dataviews-column-primary__media {
3182    max-width: 60px;
3183    min-width: var(--wpds-dimension-size-md, 32px);
3184    min-height: var(--wpds-dimension-size-md, 32px);
3185    overflow: hidden;
3186    position: relative;
3187    flex-shrink: 0;
3188    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3189    border-radius: var(--wpds-border-radius-md, 4px);
3190  }
3191  
3192  .dataviews-column-primary__media img {
3193    width: var(--wpds-dimension-size-md, 32px);
3194    height: var(--wpds-dimension-size-md, 32px);
3195    -o-object-fit: cover;
3196    object-fit: cover;
3197  }
3198  
3199  .dataviews-column-primary__media::after {
3200    content: "";
3201    position: absolute;
3202    top: 0;
3203    right: 0;
3204    width: 100%;
3205    height: 100%;
3206    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3207    border-radius: var(--wpds-border-radius-md, 4px);
3208  }
3209  
3210  .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
3211  .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
3212    min-width: 15ch;
3213    max-width: 80ch;
3214  }
3215  
3216  .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
3217    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3218    padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
3219    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3220  }
3221  
3222  /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
3223  .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
3224    width: 1%;
3225  }
3226  
3227  .dataviews-view-table.is-refreshing {
3228    opacity: 0.5;
3229    pointer-events: none;
3230  }
3231  
3232  @media not (prefers-reduced-motion) {
3233    .dataviews-view-table.is-refreshing {
3234      opacity: 1;
3235      animation: dataviews-pulse 1s ease-in-out infinite;
3236    }
3237  }
3238  .dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
3239    gap: var(--wpds-dimension-gap-lg, 16px);
3240  }
3241  
3242  .dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
3243    gap: var(--wpds-dimension-gap-2xl, 32px);
3244  }
3245  
3246  .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
3247    height: 100%;
3248    justify-content: flex-start;
3249    position: relative;
3250    isolation: isolate;
3251  }
3252  
3253  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
3254    padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
3255  }
3256  
3257  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
3258    min-height: var(--wpds-dimension-size-sm, 24px);
3259    overflow: hidden;
3260    align-content: center;
3261    text-align: start;
3262  }
3263  
3264  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3265    width: -moz-fit-content;
3266    width: fit-content;
3267  }
3268  
3269  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
3270    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3271  }
3272  
3273  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
3274    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9)), inset 0 0 0 var(--wpds-border-width-sm, 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
3275  }
3276  
3277  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
3278    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3279  }
3280  
3281  .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
3282    outline: none;
3283  }
3284  
3285  .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
3286    outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3287  }
3288  
3289  .dataviews-view-picker-grid .dataviews-selection-checkbox {
3290    top: var(--wpds-dimension-padding-sm, 8px) !important;
3291  }
3292  
3293  .dataviews-view-picker-grid .dataviews-selection-checkbox input {
3294    pointer-events: none;
3295  }
3296  
3297  .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
3298    width: 100%;
3299    aspect-ratio: 1/1;
3300    min-height: 0;
3301    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3302    border-radius: var(--wpds-border-radius-md, 4px);
3303    position: relative;
3304  }
3305  
3306  .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3307    -o-object-fit: cover;
3308    object-fit: cover;
3309    width: 100%;
3310    height: 100%;
3311  }
3312  
3313  .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
3314    content: "";
3315    position: absolute;
3316    top: 0;
3317    right: 0;
3318    width: 100%;
3319    height: 100%;
3320    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3321    border-radius: var(--wpds-border-radius-md, 4px);
3322    pointer-events: none;
3323  }
3324  
3325  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
3326    position: relative;
3327    font-size: 12px;
3328    line-height: 16px;
3329  }
3330  
3331  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
3332    padding: 0 0 var(--wpds-dimension-padding-md, 12px);
3333  }
3334  
3335  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
3336    min-height: var(--wpds-dimension-size-sm, 24px);
3337    line-height: var(--wpds-typography-line-height-sm, 20px);
3338    padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
3339  }
3340  
3341  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
3342    min-height: var(--wpds-dimension-size-sm, 24px);
3343    align-items: center;
3344  }
3345  
3346  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
3347    width: 35%;
3348    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3349    overflow: hidden;
3350    text-overflow: ellipsis;
3351    white-space: nowrap;
3352  }
3353  
3354  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
3355    width: 65%;
3356    overflow: hidden;
3357    text-overflow: ellipsis;
3358    white-space: nowrap;
3359  }
3360  
3361  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
3362    display: none;
3363  }
3364  
3365  .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
3366    padding-bottom: var(--wpds-dimension-padding-md, 12px);
3367  }
3368  
3369  .dataviews-view-picker-grid__field-value:empty,
3370  .dataviews-view-picker-grid__field:empty {
3371    display: none;
3372  }
3373  
3374  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3375    position: absolute;
3376    top: -9999em;
3377    right: var(--wpds-dimension-padding-sm, 8px);
3378    z-index: 1;
3379  }
3380  
3381  @media (hover: none) {
3382    .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
3383      top: var(--wpds-dimension-padding-sm, 8px);
3384    }
3385  }
3386  .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
3387  .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
3388  .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
3389    top: var(--wpds-dimension-padding-sm, 8px);
3390  }
3391  
3392  .dataviews-view-picker-grid__media--clickable {
3393    cursor: var(--wpds-cursor-control, pointer);
3394  }
3395  
3396  .dataviews-view-picker-grid-group__header {
3397    font-size: var(--wpds-typography-font-size-lg, 15px);
3398    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3399    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3400    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3401    padding: 0 48px;
3402  }
3403  
3404  .dataviews-view-picker-table {
3405    background-color: inherit;
3406  }
3407  
3408  .dataviews-view-picker-table .dataviews-view-table__checkbox-column {
3409    width: 48px;
3410  }
3411  
3412  .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
3413    outline: none;
3414  }
3415  
3416  .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
3417    outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3418  }
3419  
3420  .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
3421    pointer-events: none;
3422    opacity: 1;
3423  }
3424  
3425  .dataviews-view-picker-table .dataviews-view-table__row {
3426    cursor: var(--wpds-cursor-control, pointer);
3427  }
3428  
3429  .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
3430    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3431  }
3432  
3433  .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
3434    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3435  }
3436  
3437  .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
3438    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3439  }
3440  
3441  .dataviews-view-activity {
3442    margin: 0 0 auto;
3443    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
3444  }
3445  
3446  .dataviews-view-activity .dataviews-view-activity__group-header {
3447    font-size: var(--wpds-typography-font-size-lg, 15px);
3448    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3449    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3450    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3451    padding: 0;
3452  }
3453  
3454  .dataviews-view-activity .dataviews-view-activity__item-actions {
3455    min-width: var(--wpds-dimension-size-sm, 24px);
3456  }
3457  
3458  .dataviews-view-activity .dataviews-view-activity__item-content {
3459    flex-grow: 1;
3460  }
3461  
3462  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
3463  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
3464  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
3465    min-height: var(--wpds-dimension-size-2xs, 16px);
3466  }
3467  
3468  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
3469    position: relative;
3470    display: flex;
3471    align-items: center;
3472    flex: 1;
3473    overflow: hidden;
3474  }
3475  
3476  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
3477    cursor: var(--wpds-cursor-control, pointer);
3478  }
3479  
3480  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
3481    outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3482    outline-offset: var(--wp-admin-border-width-focus);
3483    border-radius: var(--wpds-border-radius-sm, 2px);
3484  }
3485  
3486  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3487    display: flex;
3488    width: -moz-max-content;
3489    width: max-content;
3490    flex: 0 0 auto;
3491  }
3492  
3493  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button {
3494    position: relative;
3495    z-index: 1;
3496  }
3497  
3498  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
3499    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3500    display: flex;
3501    gap: var(--wpds-dimension-gap-md, 12px);
3502    row-gap: var(--wpds-dimension-gap-xs, 4px);
3503    flex-wrap: wrap;
3504  }
3505  
3506  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
3507    display: none;
3508  }
3509  
3510  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field:has(.dataviews-view-activity__item-field-value:empty) {
3511    display: none;
3512  }
3513  
3514  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value {
3515    display: flex;
3516    align-items: center;
3517  }
3518  
3519  .dataviews-view-activity .dataviews-view-activity__item-type {
3520    align-self: stretch;
3521    flex-shrink: 0;
3522  }
3523  
3524  .dataviews-view-activity .dataviews-view-activity__item-type::after {
3525    content: "";
3526    flex: 1 1 auto;
3527    width: 1px;
3528    margin: 0 auto;
3529    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3530  }
3531  
3532  .dataviews-view-activity .dataviews-view-activity__item-type::before {
3533    content: "";
3534    flex: 0 0 auto;
3535    width: 1px;
3536    margin: 0 auto;
3537    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3538  }
3539  
3540  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
3541    width: var(--wpds-dimension-padding-md, 12px);
3542  }
3543  
3544  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
3545    height: var(--wpds-dimension-size-3xs, 12px);
3546  }
3547  
3548  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
3549    width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3550    height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3551  }
3552  
3553  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
3554    margin: var(--wpds-dimension-gap-md, 12px) 0;
3555  }
3556  
3557  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
3558    width: var(--wpds-dimension-size-sm, 24px);
3559  }
3560  
3561  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
3562    height: var(--wpds-dimension-size-3xs, 12px);
3563  }
3564  
3565  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
3566    width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3567    height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3568  }
3569  
3570  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
3571    margin: var(--wpds-dimension-gap-md, 12px) 0;
3572    padding-top: var(--wpds-dimension-padding-sm, 8px);
3573  }
3574  
3575  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
3576    width: var(--wpds-dimension-size-md, 32px);
3577  }
3578  
3579  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
3580    height: var(--wpds-dimension-size-4xs, 8px);
3581  }
3582  
3583  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
3584    width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3585    height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3586  }
3587  
3588  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
3589    margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
3590    padding-top: var(--wpds-dimension-padding-md, 12px);
3591  }
3592  
3593  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
3594    width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3595    height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3596    position: relative;
3597    top: 50%;
3598    transform: translateY(-50%);
3599  }
3600  
3601  .dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before {
3602    visibility: hidden;
3603  }
3604  
3605  .dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after {
3606    background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
3607  }
3608  
3609  .dataviews-view-activity .dataviews-view-activity__item-type-icon {
3610    overflow: hidden;
3611    flex-shrink: 0;
3612    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3613  }
3614  
3615  .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
3616  .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
3617  .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
3618    display: block;
3619    width: 100%;
3620    height: 100%;
3621    margin: 0 auto;
3622    -o-object-fit: cover;
3623    object-fit: cover;
3624    border-radius: 50%;
3625    box-sizing: border-box;
3626    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3627  }
3628  
3629  .dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
3630    padding: var(--wpds-dimension-padding-xs, 4px);
3631  }
3632  
3633  .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
3634    content: "";
3635    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3636  }
3637  
3638  .dataviews-view-activity.is-refreshing {
3639    opacity: 0.5;
3640    pointer-events: none;
3641  }
3642  
3643  @media not (prefers-reduced-motion) {
3644    .dataviews-view-activity.is-refreshing {
3645      opacity: 1;
3646      animation: dataviews-pulse 1s ease-in-out infinite;
3647    }
3648  }
3649  .dataviews-view-activity + .dataviews-pagination {
3650    justify-content: space-between;
3651  }
3652  
3653  .dataviews-view-picker-activity {
3654    margin: 0;
3655    padding: 0;
3656    flex-grow: 1;
3657  }
3658  
3659  .dataviews-view-picker-activity:focus-visible[aria-activedescendant] {
3660    outline: none;
3661  }
3662  
3663  .dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] {
3664    outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3665    outline-offset: -2px;
3666  }
3667  
3668  .dataviews-view-picker-activity .dataviews-view-picker-activity__item {
3669    cursor: var(--wpds-cursor-control, pointer);
3670    border-radius: var(--wpds-border-radius-sm, 2px);
3671    padding-inline: var(--wpds-dimension-padding-2xl, 24px);
3672    transition: background-color 0.1s ease;
3673  }
3674  
3675  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover {
3676    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
3677  }
3678  
3679  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
3680    outline: 3px solid transparent;
3681    outline-offset: -2px;
3682  }
3683  
3684  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type {
3685    width: var(--wpds-dimension-padding-md, 12px);
3686  }
3687  
3688  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
3689    height: var(--wpds-dimension-size-3xs, 12px);
3690  }
3691  
3692  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
3693    width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3694    height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
3695  }
3696  
3697  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-content {
3698    margin: var(--wpds-dimension-gap-md, 12px) 0;
3699  }
3700  
3701  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
3702    width: var(--wpds-dimension-size-sm, 24px);
3703  }
3704  
3705  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
3706    height: var(--wpds-dimension-size-3xs, 12px);
3707  }
3708  
3709  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
3710    width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3711    height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
3712  }
3713  
3714  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-content {
3715    margin: var(--wpds-dimension-gap-md, 12px) 0;
3716    padding-top: var(--wpds-dimension-padding-sm, 8px);
3717  }
3718  
3719  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
3720    width: var(--wpds-dimension-size-md, 32px);
3721  }
3722  
3723  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
3724    height: var(--wpds-dimension-size-4xs, 8px);
3725  }
3726  
3727  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
3728    width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3729    height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
3730  }
3731  
3732  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-content {
3733    margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
3734    padding-top: var(--wpds-dimension-padding-md, 12px);
3735  }
3736  
3737  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-bullet, .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-bullet {
3738    width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3739    height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
3740    position: relative;
3741    top: 50%;
3742    transform: translateY(-50%);
3743  }
3744  
3745  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content {
3746    flex-grow: 1;
3747  }
3748  
3749  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
3750  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
3751  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
3752    min-height: var(--wpds-dimension-size-2xs, 16px);
3753  }
3754  
3755  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
3756    position: relative;
3757    display: flex;
3758    align-items: center;
3759    flex: 1;
3760    overflow: hidden;
3761  }
3762  
3763  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description:empty {
3764    display: none;
3765  }
3766  
3767  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
3768    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3769    display: flex;
3770    gap: var(--wpds-dimension-gap-md, 12px);
3771    row-gap: var(--wpds-dimension-gap-xs, 4px);
3772    flex-wrap: wrap;
3773  }
3774  
3775  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields:empty {
3776    display: none;
3777  }
3778  
3779  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field:has(.dataviews-view-picker-activity__item-field-value:empty) {
3780    display: none;
3781  }
3782  
3783  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field-value {
3784    display: flex;
3785    align-items: center;
3786  }
3787  
3788  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type {
3789    align-self: stretch;
3790    flex-shrink: 0;
3791  }
3792  
3793  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::after {
3794    content: "";
3795    flex: 1 1 auto;
3796    width: 1px;
3797    margin: 0 auto;
3798    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3799  }
3800  
3801  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::before {
3802    content: "";
3803    flex: 0 0 auto;
3804    width: 1px;
3805    margin: 0 auto;
3806    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3807  }
3808  
3809  .dataviews-view-picker-activity .dataviews-view-picker-activity__item:first-child .dataviews-view-picker-activity__item-type::before {
3810    visibility: hidden;
3811  }
3812  
3813  .dataviews-view-picker-activity .dataviews-view-picker-activity-group:last-of-type > .dataviews-view-picker-activity__item:last-of-type .dataviews-view-picker-activity__item-type::after, .dataviews-view-picker-activity > .dataviews-view-picker-activity__item:last-child .dataviews-view-picker-activity__item-type::after {
3814    background: linear-gradient(to bottom, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 0%, color-mix(in srgb, var(--wpds-color-stroke-surface-neutral, #dbdbdb) 20%, transparent) 60%, transparent 100%);
3815  }
3816  
3817  .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
3818    font-size: var(--wpds-typography-font-size-lg, 15px);
3819    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3820    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3821    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
3822    padding: 0;
3823    padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
3824  }
3825  
3826  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon {
3827    overflow: hidden;
3828    flex-shrink: 0;
3829    background-color: transparent;
3830  }
3831  
3832  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon img,
3833  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg,
3834  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
3835    display: block;
3836    width: 100%;
3837    height: 100%;
3838    margin: 0 auto;
3839    -o-object-fit: cover;
3840    object-fit: cover;
3841    border-radius: 50%;
3842    box-sizing: border-box;
3843    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3844  }
3845  
3846  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg {
3847    padding: var(--wpds-dimension-padding-xs, 4px);
3848  }
3849  
3850  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
3851    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3852  }
3853  
3854  .dataviews-picker-footer__bulk-selection {
3855    align-self: flex-start;
3856    height: var(--wpds-dimension-size-md, 32px);
3857  }
3858  
3859  .dataviews-picker-footer__actions {
3860    align-self: flex-end;
3861  }
3862  
3863  .dataviews-controls__richtext [data-rich-text-placeholder]::after {
3864    content: attr(data-rich-text-placeholder);
3865    color: color-mix(in srgb, currentColor, transparent 38%);
3866  }
3867  
3868  .dataviews-controls__datetime {
3869    border: none;
3870    padding: 0;
3871  }
3872  
3873  .dataviews-controls__relative-date-number,
3874  .dataviews-controls__relative-date-unit {
3875    flex: 1 1 50%;
3876  }
3877  
3878  .dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
3879  .dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
3880    display: none;
3881    -webkit-appearance: none;
3882  }
3883  
3884  .dataviews-controls__date-range-inputs > * {
3885    min-width: 0;
3886  }
3887  
3888  .dataviews-controls__color-picker-dropdown {
3889    display: flex;
3890  }
3891  
3892  .dataviews-controls__date-preset {
3893    border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3894  }
3895  
3896  .dataviews-controls__date-preset:active {
3897    background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3898  }
3899  
3900  .dataforms-layouts-panel__field-trigger {
3901    position: relative;
3902    color: inherit;
3903    display: flex;
3904    width: 100%;
3905    min-height: var(--wpds-dimension-size-sm, 24px);
3906    cursor: var(--wpds-cursor-control, pointer);
3907    align-items: flex-start;
3908    border-radius: var(--wpds-border-radius-sm, 2px);
3909    isolation: isolate;
3910  }
3911  
3912  .dataforms-layouts-panel__field-trigger--label-side {
3913    flex-direction: row;
3914    gap: var(--wpds-dimension-gap-sm, 8px);
3915  }
3916  
3917  .dataforms-layouts-panel__field-trigger--label-top {
3918    display: grid;
3919    grid-template-columns: 1fr auto;
3920  }
3921  
3922  .dataforms-layouts-panel__field-trigger--label-none {
3923    align-items: center;
3924  }
3925  
3926  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
3927    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3928  }
3929  
3930  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
3931    opacity: 1;
3932  }
3933  
3934  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
3935    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3936  }
3937  
3938  .dataforms-layouts-panel__field-trigger.is-disabled {
3939    cursor: default;
3940  }
3941  
3942  .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
3943    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3944    font-weight: var(--wpds-typography-font-weight-default, 400);
3945  }
3946  
3947  .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
3948    opacity: 1;
3949    fill: currentColor;
3950  }
3951  
3952  .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:hover, .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3953    fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3954  }
3955  
3956  .dataforms-layouts-panel__field-trigger-icon {
3957    padding: 0;
3958    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
3959    flex: 0 0 auto;
3960    opacity: 0;
3961    border-radius: var(--wpds-border-radius-xs, 1px);
3962  }
3963  
3964  .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3965    opacity: 1;
3966    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
3967  }
3968  
3969  .dataforms-layouts-panel__field-dropdown-anchor {
3970    width: 100%;
3971  }
3972  
3973  .dataforms-layouts-panel__field-dropdown-anchor .components-dropdown {
3974    width: 100%;
3975  }
3976  
3977  .dataforms-layouts-panel__field-label {
3978    width: 38%;
3979    flex-shrink: 0;
3980    min-height: var(--wpds-dimension-size-sm, 24px);
3981    display: flex;
3982    align-items: center;
3983    line-height: var(--wpds-typography-line-height-sm, 20px);
3984    hyphens: auto;
3985    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3986  }
3987  
3988  .dataforms-layouts-panel__field-label .components-base-control__label {
3989    display: inline;
3990    margin-bottom: 0;
3991    line-height: inherit;
3992  }
3993  
3994  .dataforms-layouts-panel__field-label.has-error {
3995    color: var(--wpds-color-foreground-content-error-weak, #cc1818);
3996  }
3997  
3998  .dataforms-layouts-panel__field-label-error-content {
3999    position: relative;
4000    z-index: 1;
4001    cursor: help;
4002    color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4003    display: inline-flex;
4004    flex-direction: row;
4005    align-items: center;
4006    gap: var(--wpds-dimension-gap-xs, 4px);
4007  }
4008  
4009  .dataforms-layouts-panel__field-control {
4010    flex-grow: 1;
4011    min-width: 0;
4012    min-height: var(--wpds-dimension-size-sm, 24px);
4013    line-height: var(--wpds-typography-line-height-md, 24px);
4014    display: flex;
4015    align-items: center;
4016    overflow: clip;
4017    padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4018    margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4019    word-break: break-word;
4020    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4021  }
4022  
4023  .dataforms-layouts-panel__field-control > * {
4024    min-width: 0;
4025  }
4026  
4027  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
4028    width: 100%;
4029  }
4030  
4031  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
4032    grid-column: 1/-1;
4033  }
4034  
4035  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
4036    grid-row: 1;
4037    grid-column: 2;
4038  }
4039  
4040  .dataforms-layouts-panel__field-dropdown .components-popover__content {
4041    min-width: 320px;
4042    padding: var(--wpds-dimension-padding-lg, 16px);
4043  }
4044  
4045  .dataforms-layouts-panel__dropdown-header {
4046    margin-bottom: var(--wpds-dimension-gap-lg, 16px);
4047  }
4048  
4049  .dataforms-layouts-panel__modal-footer {
4050    margin-top: var(--wpds-dimension-gap-lg, 16px);
4051  }
4052  
4053  .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
4054    z-index: 159990;
4055  }
4056  
4057  .dataforms-layouts-panel__summary-button:empty {
4058    min-width: 160px;
4059  }
4060  
4061  .dataforms-layouts-regular__field {
4062    width: 100%;
4063    min-height: var(--wpds-dimension-size-md, 32px);
4064    justify-content: flex-start !important;
4065    align-items: flex-start !important;
4066  }
4067  
4068  .dataforms-layouts-regular__field .components-base-control__label,
4069  .dataforms-layouts-regular__field .components-input-control__label,
4070  .dataforms-layouts-regular__field .components-form-token-field__label {
4071    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4072  }
4073  
4074  .dataforms-layouts-regular__field-label {
4075    width: 38%;
4076    flex-shrink: 0;
4077    min-height: var(--wpds-dimension-size-md, 32px);
4078    display: flex;
4079    align-items: center;
4080    line-height: var(--wpds-typography-line-height-sm, 20px);
4081    hyphens: auto;
4082  }
4083  
4084  .dataforms-layouts-regular__field-label--label-position-side {
4085    align-self: center;
4086  }
4087  
4088  .dataforms-layouts-regular__field-label .components-base-control__label {
4089    margin-bottom: 0;
4090  }
4091  
4092  .dataforms-layouts-regular__field-control {
4093    flex-grow: 1;
4094    min-height: var(--wpds-dimension-size-md, 32px);
4095    display: flex;
4096    align-items: center;
4097  }
4098  
4099  .dataforms-layouts-card__field {
4100    width: 100%;
4101  }
4102  
4103  .dataforms-layouts-card__field-header-content {
4104    min-height: 24px;
4105  }
4106  
4107  .dataforms-layouts-card__field-header-content-description {
4108    display: contents;
4109  }
4110  
4111  .dataforms-layouts-card__field-description {
4112    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
4113    display: block;
4114    font-size: var(--wpds-typography-font-size-md, 13px);
4115    margin-bottom: var(--wpds-dimension-gap-lg, 16px);
4116  }
4117  
4118  .dataforms-layouts-card__field-summary {
4119    display: flex;
4120    flex-direction: row;
4121    gap: var(--wpds-dimension-gap-lg, 16px);
4122    align-items: center;
4123  }
4124  
4125  .dataforms-layouts-details__summary-content {
4126    display: inline-flex;
4127    min-height: var(--wpds-dimension-size-sm, 24px);
4128  }
4129  
4130  .dataforms-layouts-details__content {
4131    padding-top: var(--wpds-dimension-padding-md, 12px);
4132  }
4133  
4134  .dataforms-layouts-row__field-control {
4135    width: 100%;
4136  }
4137  
4138  .dataforms-layouts__wrapper {
4139    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4140    font-weight: var(--wpds-typography-font-weight-default, 400);
4141    font-size: 13px;
4142    line-height: 20px;
4143  }
4144  
4145  /**
4146   * Typography
4147   */
4148  /**
4149   * SCSS Variables.
4150   *
4151   * Please use variables from this sheet to ensure consistency across the UI.
4152   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
4153   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
4154   */
4155  /**
4156   * Colors
4157   */
4158  /**
4159   * Fonts & basic variables.
4160   */
4161  /**
4162   * Typography
4163   */
4164  /**
4165   * Grid System.
4166   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
4167   */
4168  /**
4169   * Radius scale.
4170   */
4171  /**
4172   * Elevation scale.
4173   */
4174  /**
4175   * Dimensions.
4176   */
4177  /**
4178   * Mobile specific styles
4179   */
4180  /**
4181   * Editor styles.
4182   */
4183  /**
4184   * Block & Editor UI.
4185   */
4186  /**
4187   * Block paddings.
4188   */
4189  /**
4190   * React Native specific.
4191   * These variables do not appear to be used anywhere else.
4192   */
4193  /**
4194   * Breakpoints & Media Queries
4195   */
4196  /**
4197  *  Converts a hex value into the rgb equivalent.
4198  *
4199  * @param {string} hex - the hexadecimal value to convert
4200  * @return {string} comma separated rgb values
4201  */
4202  /**
4203   * Long content fade mixin
4204   *
4205   * Creates a fading overlay to signify that the content is longer
4206   * than the space allows.
4207   */
4208  /**
4209   * Breakpoint mixins
4210   */
4211  /**
4212   * Focus styles.
4213   */
4214  /**
4215   * Standard focus rings for the WordPress Design System.
4216   *
4217   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
4218   * e.g. `&:focus { @include outset-ring__focus(); }`.
4219   */
4220  /**
4221   * Applies editor left position to the selector passed as argument
4222   */
4223  /**
4224   * Styles that are reused verbatim in a few places
4225   */
4226  /**
4227   * Allows users to opt-out of animations via OS-level preferences.
4228   */
4229  /**
4230   * Reset default styles for JavaScript UI based pages.
4231   * This is a WP-admin agnostic reset
4232   */
4233  /**
4234   * Reset the WP Admin page styles for Gutenberg-like pages.
4235   */
4236  /**
4237   * Creates a checkerboard pattern background to indicate transparency.
4238   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
4239   */
4240  :root {
4241    --wp-block-synced-color: #7a00df;
4242    --wp-block-synced-color--rgb: 122, 0, 223;
4243    --wp-bound-block-color: var(--wp-block-synced-color);
4244    --wp-editor-canvas-background: #ddd;
4245    --wp-admin-theme-color: #007cba;
4246    --wp-admin-theme-color--rgb: 0, 124, 186;
4247    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
4248    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
4249    --wp-admin-theme-color-darker-20: #005a87;
4250    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
4251    --wp-admin-border-width-focus: 2px;
4252  }
4253  
4254  @media (min-resolution: 192dpi) {
4255    :root {
4256      --wp-admin-border-width-focus: 1.5px;
4257    }
4258  }
4259  .fields-create-template-part-modal {
4260    z-index: 1000001;
4261  }
4262  
4263  .fields-create-template-part-modal__area-fieldset {
4264    border: 0;
4265    padding: 0;
4266    margin: 0;
4267  }
4268  
4269  .fields-create-template-part-modal__area-radio-group {
4270    border: 1px solid #949494;
4271    border-radius: 2px;
4272  }
4273  
4274  .fields-create-template-part-modal__area-radio-wrapper {
4275    position: relative;
4276    padding: 12px;
4277    display: grid;
4278    align-items: center;
4279    grid-template-columns: min-content 1fr min-content;
4280    grid-gap: 4px 8px;
4281    color: #1e1e1e;
4282  }
4283  
4284  .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
4285    border-top: 1px solid #949494;
4286  }
4287  
4288  .fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
4289    position: absolute;
4290    opacity: 0;
4291  }
4292  
4293  .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
4294    z-index: 1;
4295  }
4296  
4297  .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
4298    color: var(--wp-admin-theme-color);
4299  }
4300  
4301  .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
4302    pointer-events: none;
4303  }
4304  
4305  .fields-create-template-part-modal__area-radio-label::before {
4306    content: "";
4307    position: absolute;
4308    inset: 0;
4309  }
4310  
4311  input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
4312    cursor: var(--wpds-cursor-control, pointer);
4313  }
4314  
4315  input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
4316    outline: 4px solid transparent;
4317    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4318  }
4319  
4320  .fields-create-template-part-modal__area-radio-icon,
4321  .fields-create-template-part-modal__area-radio-checkmark {
4322    fill: currentColor;
4323  }
4324  
4325  input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
4326    opacity: 0;
4327  }
4328  
4329  .fields-create-template-part-modal__area-radio-description {
4330    grid-column: 2/3;
4331    margin: 0;
4332    color: #757575;
4333    font-size: 12px;
4334    line-height: normal;
4335    text-wrap: pretty;
4336  }
4337  
4338  input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
4339    color: inherit;
4340  }
4341  
4342  fieldset.fields__media-edit {
4343    border: 0;
4344    padding: 0;
4345    margin: 0;
4346    width: 100%;
4347  }
4348  
4349  fieldset.fields__media-edit .components-base-control__label {
4350    color: #1e1e1e;
4351  }
4352  
4353  fieldset.fields__media-edit .fields__media-edit-description {
4354    font-size: 12px;
4355    line-height: 1.5;
4356  }
4357  
4358  fieldset.fields__media-edit {
4359    container-type: inline-size;
4360  }
4361  
4362  fieldset.fields__media-edit .fields__media-edit-compact-group {
4363    border: 1px dashed #949494;
4364    border-radius: 4px;
4365    overflow: hidden;
4366  }
4367  
4368  fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
4369    border-radius: 2px;
4370  }
4371  
4372  fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
4373    border: 0;
4374    border-radius: 0;
4375  }
4376  
4377  fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
4378    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4379  }
4380  
4381  fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
4382    border-bottom: 1px solid #f0f0f0;
4383  }
4384  
4385  fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
4386    display: flex;
4387    align-items: center;
4388    gap: 8px;
4389  }
4390  
4391  fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4392    margin: 0;
4393  }
4394  
4395  fieldset.fields__media-edit .fields__media-edit-compact {
4396    position: relative;
4397    min-width: 0;
4398  }
4399  
4400  fieldset.fields__media-edit .fields__media-edit-compact:hover .fields__media-edit-compact-movers, fieldset.fields__media-edit .fields__media-edit-compact:focus-within .fields__media-edit-compact-movers {
4401    opacity: 1;
4402  }
4403  
4404  fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
4405    position: absolute;
4406    left: 8px;
4407    top: 50%;
4408    transform: translateY(-50%);
4409    opacity: 0;
4410    pointer-events: none;
4411    z-index: 1;
4412    border-radius: 2px;
4413    background: #fff;
4414  }
4415  
4416  fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
4417    pointer-events: auto;
4418  }
4419  
4420  fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner {
4421    display: flex;
4422    align-items: center;
4423    gap: 8px;
4424  }
4425  
4426  fieldset.fields__media-edit .fields__media-edit-picker-button:has(.fields__media-edit-placeholder):not(.fields__media-edit-expanded *) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4427    margin: 0;
4428  }
4429  
4430  fieldset.fields__media-edit .fields__media-edit-picker-button {
4431    position: relative;
4432    display: flex;
4433    align-items: center;
4434    gap: 8px;
4435    border: 1px dashed #949494;
4436    border-radius: 2px;
4437    padding: 4px 8px;
4438    min-height: 40px;
4439    cursor: var(--wpds-cursor-control, pointer);
4440    min-width: 0;
4441  }
4442  
4443  fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
4444    border-color: var(--wp-admin-theme-color);
4445    color: var(--wp-admin-theme-color);
4446  }
4447  
4448  fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
4449    background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
4450    color: var(--wp-admin-theme-color-darker-20);
4451    border-color: var(--wp-admin-theme-color-darker-20);
4452  }
4453  
4454  fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
4455    color: var(--wp-admin-theme-color);
4456  }
4457  
4458  fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
4459    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4460    outline: none;
4461  }
4462  
4463  fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
4464    opacity: 0.6;
4465    cursor: default;
4466  }
4467  
4468  fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
4469    position: absolute;
4470    top: 50%;
4471    right: 50%;
4472    transform: translate(50%, -50%);
4473    z-index: 1;
4474  }
4475  
4476  fieldset.fields__media-edit .fields__media-edit-filename,
4477  fieldset.fields__media-edit .fields__media-edit-placeholder {
4478    flex: 1;
4479    width: 100%;
4480    min-width: 0;
4481  }
4482  
4483  fieldset.fields__media-edit .fields__media-edit-placeholder {
4484    text-align: center;
4485  }
4486  
4487  fieldset.fields__media-edit .fields__media-edit-thumbnail {
4488    width: 24px;
4489    aspect-ratio: 1/1;
4490    flex-shrink: 0;
4491    border-radius: 2px;
4492  }
4493  
4494  fieldset.fields__media-edit .fields__media-edit-expanded {
4495    display: grid;
4496    gap: 8px;
4497  }
4498  
4499  fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
4500    display: flex;
4501    align-items: center;
4502    gap: 8px;
4503  }
4504  
4505  fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
4506    margin: 0;
4507  }
4508  
4509  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
4510    position: relative;
4511    width: 100%;
4512    aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
4513    border-radius: 2px;
4514    padding: 4px;
4515    overflow: hidden;
4516    display: flex;
4517    align-items: center;
4518    justify-content: center;
4519  }
4520  
4521  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
4522    width: 100%;
4523    height: 100%;
4524  }
4525  
4526  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
4527    position: absolute;
4528    top: 0;
4529    right: 0;
4530    left: 0;
4531    bottom: 0;
4532    opacity: 0;
4533    pointer-events: none;
4534  }
4535  
4536  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
4537    pointer-events: auto;
4538  }
4539  
4540  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
4541    position: absolute;
4542    top: 4px;
4543    left: 4px;
4544    border-radius: 2px;
4545    background: #fff;
4546  }
4547  
4548  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
4549    position: relative;
4550    min-width: 0;
4551    border-radius: 4px;
4552  }
4553  
4554  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:hover .fields__media-edit-expanded-overlay, fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:focus-within .fields__media-edit-expanded-overlay {
4555    opacity: 1;
4556  }
4557  
4558  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
4559    padding: 8px;
4560  }
4561  
4562  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4563    width: 100%;
4564    height: 100%;
4565    -o-object-fit: cover;
4566    object-fit: cover;
4567    -o-object-position: 50% 50%;
4568    object-position: 50% 50%;
4569  }
4570  
4571  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
4572    text-align: center;
4573    flex: none;
4574  }
4575  
4576  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
4577    margin: 0;
4578  }
4579  
4580  fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
4581    grid-template-columns: 1fr;
4582  }
4583  
4584  fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
4585    aspect-ratio: 2/1;
4586  }
4587  
4588  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
4589    border-radius: 4px;
4590  }
4591  
4592  fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
4593    border-radius: 2px;
4594  }
4595  
4596  fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
4597    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
4598  }
4599  
4600  @container (max-width: 500px) {
4601    fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
4602      grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
4603    }
4604  }
4605  fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
4606    padding: 0;
4607  }
4608  
4609  fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
4610    display: flex;
4611    align-items: center;
4612    justify-content: center;
4613    aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
4614  }
4615  
4616  .fields-controls__author-avatar {
4617    flex-shrink: 0;
4618    overflow: hidden;
4619    width: 24px;
4620    height: 24px;
4621    align-items: center;
4622    justify-content: right;
4623    display: flex;
4624  }
4625  
4626  .fields-controls__author-avatar img {
4627    width: 16px;
4628    height: 16px;
4629    -o-object-fit: cover;
4630    object-fit: cover;
4631    opacity: 0;
4632    border-radius: 100%;
4633  }
4634  
4635  @media not (prefers-reduced-motion) {
4636    .fields-controls__author-avatar img {
4637      transition: opacity 0.1s linear;
4638    }
4639  }
4640  .fields-controls__author-avatar.is-loaded img {
4641    opacity: 1;
4642  }
4643  
4644  .fields-controls__author-icon {
4645    display: flex;
4646    flex-shrink: 0;
4647    width: 24px;
4648    height: 24px;
4649  }
4650  
4651  .fields-controls__author-icon svg {
4652    margin-right: -4px;
4653    fill: currentColor;
4654  }
4655  
4656  .fields-controls__author-name {
4657    text-overflow: ellipsis;
4658    overflow: hidden;
4659  }
4660  
4661  .fields-controls__slug {
4662    border: 0;
4663    padding: 0;
4664    margin: 0;
4665  }
4666  
4667  .fields-controls__slug .fields-controls__slug-external-icon {
4668    margin-right: 5ch;
4669  }
4670  
4671  .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4672    padding-inline-start: 0 !important;
4673  }
4674  
4675  .fields-controls__slug .fields-controls__slug-help-link {
4676    word-break: break-word;
4677  }
4678  
4679  .fields-controls__slug .fields-controls__slug-help {
4680    display: flex;
4681    flex-direction: column;
4682  }
4683  
4684  .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
4685    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4686  }
4687  
4688  .fields-controls__featured-image-image,
4689  .fields-controls__featured-image-placeholder {
4690    width: 100%;
4691    height: 100%;
4692    display: block;
4693    border-radius: 4px;
4694  }
4695  
4696  .fields-controls__featured-image-placeholder {
4697    box-shadow: none;
4698    background: #f0f0f0;
4699  }
4700  
4701  .fields-controls__parent {
4702    border: 0;
4703    padding: 0;
4704    margin: 0;
4705  }
4706  
4707  .fields-controls__password {
4708    border: 0;
4709    padding: 0;
4710    margin: 0;
4711  }
4712  
4713  .fields-controls__status-icon {
4714    height: 24px;
4715    width: 24px;
4716  }
4717  
4718  .fields-controls__status-icon svg {
4719    fill: currentColor;
4720    margin-right: -4px;
4721  }
4722  
4723  .fields-field__title > span:first-child {
4724    text-overflow: ellipsis;
4725    overflow: hidden;
4726    text-decoration: none;
4727    white-space: nowrap;
4728    display: block;
4729    flex-grow: 0;
4730  }
4731  
4732  .fields-field__pattern-title span:first-child {
4733    flex: 1;
4734  }
4735  
4736  /**
4737   * Colors
4738   */
4739  /**
4740   * SCSS Variables.
4741   *
4742   * Please use variables from this sheet to ensure consistency across the UI.
4743   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
4744   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
4745   */
4746  /**
4747   * Fonts & basic variables.
4748   */
4749  /**
4750   * Typography
4751   */
4752  /**
4753   * Grid System.
4754   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
4755   */
4756  /**
4757   * Radius scale.
4758   */
4759  /**
4760   * Elevation scale.
4761   */
4762  /**
4763   * Dimensions.
4764   */
4765  /**
4766   * Mobile specific styles
4767   */
4768  /**
4769   * Editor styles.
4770   */
4771  /**
4772   * Block & Editor UI.
4773   */
4774  /**
4775   * Block paddings.
4776   */
4777  /**
4778   * React Native specific.
4779   * These variables do not appear to be used anywhere else.
4780   */
4781  .media-editor-preview {
4782    box-sizing: border-box;
4783    display: flex;
4784    justify-content: center;
4785    align-items: center;
4786    min-height: 100%;
4787    padding: 32px;
4788    position: relative;
4789  }
4790  
4791  .media-editor-preview__spinner {
4792    position: absolute;
4793    top: 50%;
4794    right: 50%;
4795    transform: translate(50%, -50%);
4796  }
4797  
4798  .media-editor-preview--loading {
4799    width: 100%;
4800    height: 100%;
4801  }
4802  
4803  .media-editor-preview--image img {
4804    max-width: 100%;
4805    max-height: 100%;
4806    -o-object-fit: contain;
4807    object-fit: contain;
4808    width: auto;
4809    height: auto;
4810    opacity: 0;
4811  }
4812  
4813  @keyframes __wp-base-styles-fade-in {
4814    from {
4815      opacity: 0;
4816    }
4817    to {
4818      opacity: 1;
4819    }
4820  }
4821  @media not (prefers-reduced-motion) {
4822    .media-editor-preview--image img.loaded {
4823      animation: __wp-base-styles-fade-in 0.08s linear 0s;
4824      animation-fill-mode: forwards;
4825    }
4826  }
4827  .media-editor-preview--video video {
4828    max-width: 100%;
4829    max-height: 100%;
4830    -o-object-fit: contain;
4831    object-fit: contain;
4832    width: auto;
4833    height: auto;
4834  }
4835  
4836  .media-editor-preview--audio audio {
4837    max-width: 100%;
4838  }
4839  
4840  .media-editor-preview--file {
4841    text-align: center;
4842  }
4843  
4844  .media-editor-preview__file-info {
4845    background: #f0f0f0;
4846    padding: 24px;
4847    border-radius: 2px;
4848  }
4849  
4850  .media-editor-preview__file-name {
4851    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4852    margin-bottom: 8px;
4853  }
4854  
4855  .media-editor-preview__mime-type {
4856    color: #757575;
4857    font-size: 0.9em;
4858    margin-bottom: 16px;
4859  }
4860  
4861  .media-editor-preview__download-link {
4862    display: inline-block;
4863    margin-top: 8px;
4864  }
4865  
4866  .media-editor-preview--error, .media-editor-preview--empty {
4867    color: #757575;
4868    text-align: center;
4869  }
4870  
4871  .media-editor-preview__url {
4872    font-size: 0.9em;
4873    color: #949494;
4874    word-break: break-all;
4875    margin-top: 8px;
4876  }
4877  
4878  .wp-media-editor-image-editor {
4879    position: relative;
4880    overflow: hidden;
4881    width: 100%;
4882    height: 100%;
4883    touch-action: none;
4884    -webkit-user-select: none;
4885    -moz-user-select: none;
4886    user-select: none;
4887    cursor: grab;
4888  }
4889  
4890  .wp-media-editor-image-editor__canvas {
4891    position: absolute;
4892    inset: 24px;
4893    min-height: 100px;
4894    min-width: 100px;
4895  }
4896  
4897  .wp-media-editor-image-editor__canvas:focus {
4898    outline: none;
4899  }
4900  
4901  .wp-media-editor-image-editor__stage {
4902    position: absolute;
4903    inset: 0;
4904  }
4905  
4906  .wp-media-editor-image-editor--dragging {
4907    cursor: grabbing;
4908  }
4909  
4910  .wp-media-editor-image-editor__image {
4911    position: absolute;
4912    top: 0;
4913    right: 0;
4914    will-change: transform;
4915    transform-origin: center center;
4916  }
4917  
4918  .wp-media-editor-image-editor__stencil {
4919    position: absolute;
4920    pointer-events: none;
4921  }
4922  
4923  .wp-media-editor-image-editor__dimming {
4924    position: absolute;
4925    pointer-events: none;
4926    /* Large shadow spread washes everything outside the crop area
4927       toward the canvas grey ($gray-200). Slightly stronger at rest
4928       for clear crop framing, lighter during drag so the user can see
4929       where they're panning. */
4930    box-shadow: 0 0 0 9999px rgba(224, 224, 224, 0.6);
4931    transition: box-shadow 0.15s ease;
4932  }
4933  
4934  .wp-media-editor-image-editor--dragging .wp-media-editor-image-editor__dimming {
4935    box-shadow: 0 0 0 9999px rgba(224, 224, 224, 0.4);
4936  }
4937  
4938  .wp-media-editor-image-editor__grid {
4939    position: absolute;
4940    pointer-events: none;
4941    overflow: hidden;
4942    transition: opacity 0.15s ease;
4943  }
4944  
4945  .wp-media-editor-image-editor__canvas--grid-interactive .wp-media-editor-image-editor__grid {
4946    opacity: 0;
4947    transition-delay: 0.1s;
4948  }
4949  
4950  .wp-media-editor-image-editor__canvas--show-grid .wp-media-editor-image-editor__grid {
4951    opacity: 1;
4952    transition-delay: 0s;
4953  }
4954  
4955  .wp-media-editor-image-editor__canvas--settling .wp-media-editor-image-editor__grid {
4956    opacity: 0;
4957    transition: none;
4958  }
4959  
4960  .wp-media-editor-image-editor__grid-line {
4961    position: absolute;
4962    background: rgba(255, 255, 255, 0.4);
4963  }
4964  
4965  .wp-media-editor-image-editor__grid-line--horizontal {
4966    right: 0;
4967    width: 100%;
4968    height: 1px;
4969  }
4970  
4971  .wp-media-editor-image-editor__grid-line--vertical {
4972    top: 0;
4973    height: 100%;
4974    width: 1px;
4975  }
4976  
4977  .wp-media-editor-image-editor__dimensions-tooltip {
4978    position: absolute;
4979    padding: 2px 6px;
4980    background: #fff;
4981    color: #1e1e1e;
4982    font-size: 11px;
4983    line-height: 1.4;
4984    font-variant-numeric: tabular-nums;
4985    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
4986    pointer-events: none;
4987    white-space: nowrap;
4988    z-index: 2;
4989  }
4990  
4991  .wp-media-editor-image-editor__stencil-rect {
4992    position: absolute;
4993    border: 1px solid #1e1e1e;
4994    box-sizing: border-box;
4995    pointer-events: none;
4996    transition: border-color 0.15s ease, box-shadow 0.15s ease;
4997  }
4998  
4999  .wp-media-editor-image-editor__canvas--focus-visible:focus .wp-media-editor-image-editor__stencil-rect {
5000    border-color: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5001    box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5002  }
5003  
5004  .wp-media-editor-image-editor__handle {
5005    -webkit-appearance: none;
5006    -moz-appearance: none;
5007    appearance: none;
5008    margin: 0;
5009    padding: 0;
5010    font: inherit;
5011    cursor: default;
5012    position: absolute;
5013    width: 12px;
5014    height: 12px;
5015    background: #fff;
5016    border: 1px solid var(--wp-admin-theme-color, #007cba);
5017    border-radius: 50%;
5018    box-sizing: border-box;
5019    pointer-events: auto;
5020    transition: background-color 0.15s ease, box-shadow 0.15s ease;
5021  }
5022  
5023  .wp-media-editor-image-editor__handle:focus {
5024    outline: none;
5025  }
5026  
5027  .wp-media-editor-image-editor__canvas--focus-visible .wp-media-editor-image-editor__handle:focus {
5028    background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5029    border-color: transparent;
5030    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5031  }
5032  
5033  .wp-media-editor-image-editor__handle::before {
5034    content: "";
5035    position: absolute;
5036    top: 50%;
5037    right: 50%;
5038    width: 44px;
5039    height: 44px;
5040    transform: translate(50%, -50%);
5041  }
5042  
5043  .wp-media-editor-image-editor__handle {
5044    /* Offset by half the handle width (12px / 2 = 6px) to center on crop edge */
5045  }
5046  
5047  .wp-media-editor-image-editor__handle--n {
5048    top: -6px;
5049    right: 50%;
5050    margin-right: -6px;
5051    cursor: ns-resize;
5052  }
5053  
5054  .wp-media-editor-image-editor__handle--s {
5055    bottom: -6px;
5056    right: 50%;
5057    margin-right: -6px;
5058    cursor: ns-resize;
5059  }
5060  
5061  .wp-media-editor-image-editor__handle--e {
5062    top: 50%;
5063    left: -6px;
5064    margin-top: -6px;
5065    cursor: ew-resize;
5066  }
5067  
5068  .wp-media-editor-image-editor__handle--w {
5069    top: 50%;
5070    right: -6px;
5071    margin-top: -6px;
5072    cursor: ew-resize;
5073  }
5074  
5075  .wp-media-editor-image-editor__handle--nw {
5076    top: -6px;
5077    right: -6px;
5078    cursor: nesw-resize;
5079  }
5080  
5081  .wp-media-editor-image-editor__handle--ne {
5082    top: -6px;
5083    left: -6px;
5084    cursor: nwse-resize;
5085  }
5086  
5087  .wp-media-editor-image-editor__handle--sw {
5088    bottom: -6px;
5089    right: -6px;
5090    cursor: nwse-resize;
5091  }
5092  
5093  .wp-media-editor-image-editor__handle--se {
5094    bottom: -6px;
5095    left: -6px;
5096    cursor: nesw-resize;
5097  }
5098  
5099  /**
5100   * Breakpoints & Media Queries
5101   */
5102  /**
5103   * Typography
5104   */
5105  /**
5106  *  Converts a hex value into the rgb equivalent.
5107  *
5108  * @param {string} hex - the hexadecimal value to convert
5109  * @return {string} comma separated rgb values
5110  */
5111  /**
5112   * Long content fade mixin
5113   *
5114   * Creates a fading overlay to signify that the content is longer
5115   * than the space allows.
5116   */
5117  /**
5118   * Breakpoint mixins
5119   */
5120  /**
5121   * Focus styles.
5122   */
5123  /**
5124   * Standard focus rings for the WordPress Design System.
5125   *
5126   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
5127   * e.g. `&:focus { @include outset-ring__focus(); }`.
5128   */
5129  /**
5130   * Applies editor left position to the selector passed as argument
5131   */
5132  /**
5133   * Styles that are reused verbatim in a few places
5134   */
5135  /**
5136   * Allows users to opt-out of animations via OS-level preferences.
5137   */
5138  /**
5139   * Reset default styles for JavaScript UI based pages.
5140   * This is a WP-admin agnostic reset
5141   */
5142  /**
5143   * Reset the WP Admin page styles for Gutenberg-like pages.
5144   */
5145  /**
5146   * Creates a checkerboard pattern background to indicate transparency.
5147   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
5148   */
5149  .media-editor {
5150    display: flex;
5151    flex: 1;
5152    flex-direction: column;
5153    height: 100%;
5154    min-height: 0;
5155  }
5156  
5157  .media-editor .media-editor__loading {
5158    height: 100%;
5159    display: flex;
5160    align-items: center;
5161    justify-content: center;
5162  }
5163  
5164  .media-editor .interface-interface-skeleton {
5165    position: relative;
5166    top: auto;
5167    left: auto;
5168    bottom: auto;
5169    right: auto;
5170    height: 100%;
5171    max-height: none;
5172    flex: 1;
5173    flex-direction: column;
5174  }
5175  
5176  .media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5177    top: auto;
5178  }
5179  
5180  .media-editor .interface-interface-skeleton__editor {
5181    min-width: 0;
5182    flex: 1;
5183  }
5184  
5185  .media-editor .media-editor__content {
5186    display: flex;
5187    flex: 1;
5188    flex-direction: column;
5189    min-height: 0;
5190    margin: 0 24px;
5191    border-radius: 8px;
5192    overflow: hidden;
5193  }
5194  
5195  .media-editor .media-editor__canvas-toolbar {
5196    display: flex;
5197    flex-shrink: 0;
5198    justify-content: center;
5199    background: #e0e0e0;
5200    padding: 8px 16px;
5201  }
5202  
5203  .media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5204    flex: 0 1 360px;
5205    min-width: 0;
5206  }
5207  
5208  .media-editor .media-editor__canvas-area {
5209    display: flex;
5210    align-items: center;
5211    justify-content: center;
5212    background: #e0e0e0;
5213    overflow: auto;
5214    flex: 1;
5215    min-height: 0;
5216  }
5217  
5218  .media-editor .media-editor__canvas-area .media-editor-preview {
5219    height: 100%;
5220  }
5221  
5222  .media-editor .media-editor__canvas-area img,
5223  .media-editor .media-editor__canvas-area video {
5224    max-width: 100%;
5225    max-height: 100%;
5226    -o-object-fit: contain;
5227    object-fit: contain;
5228  }
5229  
5230  .media-editor .media-editor__sidebar {
5231    box-sizing: border-box;
5232  }
5233  
5234  .media-editor .media-editor__sidebar *,
5235  .media-editor .media-editor__sidebar *::before,
5236  .media-editor .media-editor__sidebar *::after {
5237    box-sizing: inherit;
5238  }
5239  
5240  @media (min-width: 600px) {
5241    .media-editor .media-editor__sidebar {
5242      padding-right: 1px;
5243    }
5244  }
5245  .media-editor .media-editor__sidebar-panel {
5246    padding-bottom: 24px;
5247  }
5248  
5249  .media-editor .interface-interface-skeleton__sidebar {
5250    border-top: 0;
5251    box-shadow: none;
5252    outline: 1px solid transparent;
5253  }
5254  
5255  .media-editor .media-editor__panel {
5256    padding: 16px;
5257  }
5258  
5259  @media (min-width: 600px) {
5260    .media-editor .media-editor__panel {
5261      padding: 24px 0 0 24px;
5262    }
5263  }
5264  .media-editor .components-panel__header.media-editor__sidebar-header {
5265    padding-right: 0;
5266    padding-left: 8px;
5267    margin-left: 24px;
5268    margin-left: 0;
5269  }
5270  
5271  @media (min-width: 600px) {
5272    .media-editor .components-panel__header.media-editor__sidebar-header {
5273      margin-left: 24px;
5274    }
5275  }
5276  .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5277    padding: 0;
5278  }
5279  
5280  @media (min-width: 600px) {
5281    .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5282      display: flex;
5283    }
5284  }
5285  @media (min-width: 600px) and (max-width: 781px) {
5286    .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5287      position: relative !important;
5288    }
5289    .media-editor .interface-complementary-area__fill,
5290    .media-editor .interface-complementary-area {
5291      width: 280px !important;
5292    }
5293  }
5294  @media (max-width: 599px) {
5295    .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5296      width: 100%;
5297    }
5298    .media-editor .interface-complementary-area__fill,
5299    .media-editor .interface-complementary-area {
5300      width: 100% !important;
5301    }
5302  }
5303  .media-editor__snackbar {
5304    position: fixed;
5305    bottom: 24px;
5306    right: 0;
5307    left: 0;
5308    padding-inline: 16px;
5309    box-sizing: border-box;
5310    display: flex;
5311    flex-direction: column;
5312    pointer-events: none;
5313  }
5314  
5315  .media-editor__snackbar .components-snackbar {
5316    margin-inline: auto;
5317  }
5318  
5319  .media-editor-form .dataforms-layouts-panel__field-control {
5320    text-wrap: pretty;
5321  }
5322  
5323  .media-editor-modal.components-modal__frame .components-modal__content {
5324    padding: 0;
5325    margin-bottom: 0;
5326    display: flex;
5327    flex-direction: column;
5328    min-height: 0;
5329  }
5330  
5331  .media-editor-modal.components-modal__frame .components-modal__children-container {
5332    display: flex;
5333    flex: 1;
5334    flex-direction: column;
5335    min-height: 0;
5336  }
5337  
5338  .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5339    flex-shrink: 0;
5340    display: flex;
5341    gap: 16px;
5342    padding: 16px 32px 24px;
5343    background: #fff;
5344    z-index: 1000001;
5345  }
5346  
5347  .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5348    flex-direction: row;
5349    align-items: center;
5350  }
5351  
5352  .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions {
5353    margin-right: auto;
5354  }
5355  
5356  .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5357    flex-direction: column;
5358  }
5359  
5360  .media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5361    align-self: center;
5362  }
5363  
5364  .media-editor-modal__footer-row {
5365    display: flex;
5366    flex-wrap: wrap;
5367    align-items: center;
5368    gap: 16px;
5369  }
5370  
5371  .media-editor-modal__footer-row .media-editor-image-controls,
5372  .media-editor-modal__footer-row .media-editor__footer-actions {
5373    margin-right: auto;
5374  }
5375  
5376  .media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
5377    color: var(--wp-admin-theme-color);
5378  }
5379  
5380  .media-editor-modal {
5381    display: flex;
5382    flex-direction: column;
5383  }
5384  
5385  .media-editor-modal__snackbar {
5386    position: fixed;
5387    bottom: 24px;
5388    right: 0;
5389    left: 0;
5390    padding-inline: 16px;
5391    box-sizing: border-box;
5392    display: flex;
5393    flex-direction: column;
5394    pointer-events: none;
5395  }
5396  
5397  .media-editor-modal__snackbar .components-snackbar {
5398    margin-inline: auto;
5399  }
5400  
5401  .media-editor-modal__snackbar {
5402    z-index: 1000001;
5403  }
5404  
5405  .media-editor-canvas {
5406    position: relative;
5407    width: 100%;
5408    height: 100%;
5409  }
5410  
5411  .media-editor-canvas__cropper {
5412    width: 100%;
5413    height: 100%;
5414    opacity: 0;
5415    pointer-events: none;
5416  }
5417  
5418  .media-editor-canvas__cropper.is-loaded {
5419    opacity: 1;
5420    pointer-events: auto;
5421  }
5422  
5423  @keyframes __wp-base-styles-fade-in {
5424    from {
5425      opacity: 0;
5426    }
5427    to {
5428      opacity: 1;
5429    }
5430  }
5431  @media not (prefers-reduced-motion) {
5432    .media-editor-canvas__cropper.is-loaded {
5433      animation: __wp-base-styles-fade-in 0.2s linear 0s;
5434      animation-fill-mode: forwards;
5435    }
5436  }
5437  .media-editor-canvas__spinner {
5438    position: absolute;
5439    top: 50%;
5440    right: 50%;
5441    transform: translate(50%, -50%);
5442  }
5443  
5444  .media-editor-canvas__error {
5445    display: flex;
5446    align-items: center;
5447    justify-content: center;
5448    width: 100%;
5449    height: 100%;
5450    color: #757575;
5451    text-align: center;
5452  }
5453  
5454  .media-editor-image-controls {
5455    display: flex;
5456    flex-wrap: nowrap;
5457    align-items: center;
5458    gap: 8px;
5459  }
5460  
5461  .media-editor-image-controls.is-stacked {
5462    flex-direction: column;
5463    align-items: flex-start;
5464    gap: 24px;
5465  }
5466  
5467  .media-editor-image-controls__transforms {
5468    display: flex;
5469    gap: 48px;
5470  }
5471  
5472  .media-editor-image-controls__group {
5473    display: flex;
5474    flex-direction: column;
5475    gap: 4px;
5476  }
5477  
5478  .media-editor-image-controls__label {
5479    font-size: 11px;
5480    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5481    line-height: 1.4;
5482    text-transform: uppercase;
5483  }
5484  
5485  .media-editor-image-controls__buttons {
5486    display: flex;
5487    gap: 8px;
5488    padding-inline: 2px 0;
5489  }
5490  
5491  .media-editor-keyboard-shortcuts-modal {
5492    min-width: 280px;
5493  }
5494  
5495  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__note {
5496    margin: 0 0 16px;
5497    color: #757575;
5498    font-size: 13px;
5499  }
5500  
5501  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-list {
5502    list-style: none;
5503    margin: 0;
5504    padding: 0;
5505  }
5506  
5507  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut {
5508    display: flex;
5509    align-items: baseline;
5510    padding: 0.6rem 0;
5511    border-top: 1px solid #ddd;
5512    margin-bottom: 0;
5513  }
5514  
5515  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut:last-child {
5516    border-bottom: 1px solid #ddd;
5517  }
5518  
5519  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-description {
5520    flex: 1;
5521    margin: 0;
5522  }
5523  
5524  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-term {
5525    background: none;
5526    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5527    margin: 0 1rem 0 0;
5528    padding: 0;
5529    text-align: left;
5530  }
5531  
5532  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key {
5533    padding: 0.25rem 0.5rem;
5534    border-radius: 8%;
5535    margin: 0 0.2rem 0 0.2rem;
5536  }
5537  
5538  .media-editor-keyboard-shortcuts-modal .media-editor-keyboard-shortcuts-modal__shortcut-key:last-child {
5539    margin: 0 0.2rem 0 0;
5540  }
5541  
5542  .rotation-ruler {
5543    position: relative;
5544    min-width: 180px;
5545    height: 32px;
5546    padding: 0 8px;
5547    box-sizing: border-box;
5548    color: #1e1e1e;
5549    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5550    -webkit-user-select: none;
5551    -moz-user-select: none;
5552    user-select: none;
5553    touch-action: none;
5554    cursor: ew-resize;
5555    container-type: inline-size;
5556  }
5557  
5558  .rotation-ruler[data-disabled] {
5559    opacity: 0.5;
5560    pointer-events: none;
5561    cursor: default;
5562  }
5563  
5564  .rotation-ruler:has(.rotation-ruler__input:focus-visible) {
5565    outline: 2px solid var(--wp-admin-theme-color, #3858e9);
5566    outline-offset: 2px;
5567    border-radius: 4px;
5568  }
5569  
5570  .rotation-ruler__input {
5571    position: absolute;
5572    width: 1px;
5573    height: 1px;
5574    margin: -1px;
5575    padding: 0;
5576    border: 0;
5577    clip: rect(0 0 0 0);
5578    overflow: hidden;
5579    white-space: nowrap;
5580  }
5581  
5582  .rotation-ruler__pointer {
5583    position: absolute;
5584    bottom: 0;
5585    right: 50%;
5586    width: 2px;
5587    height: 18px;
5588    background: var(--wp-admin-theme-color, #3858e9);
5589    border-radius: 1px;
5590    transform: translateX(50%);
5591    pointer-events: none;
5592  }
5593  
5594  .rotation-ruler__strip {
5595    position: absolute;
5596    inset: 0;
5597    overflow: hidden;
5598    mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
5599    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
5600  }
5601  
5602  .rotation-ruler__ticks {
5603    position: absolute;
5604    left: 50%;
5605    top: 0;
5606    display: block;
5607    overflow: visible;
5608  }
5609  
5610  .rotation-ruler__tick {
5611    stroke: currentColor;
5612    stroke-width: 1;
5613  }
5614  
5615  .rotation-ruler__tick--minor {
5616    opacity: 0.35;
5617  }
5618  
5619  .rotation-ruler__tick--mid {
5620    opacity: 0.6;
5621  }
5622  
5623  .rotation-ruler__tick--major {
5624    opacity: 1;
5625  }
5626  
5627  .rotation-ruler__label {
5628    fill: currentColor;
5629    font-size: 10px;
5630    font-weight: 400;
5631    opacity: 0.45;
5632  }
5633  
5634  .rotation-ruler__active-label {
5635    position: absolute;
5636    top: 0;
5637    right: 50%;
5638    height: 14px;
5639    transform: translateX(50%);
5640    font-size: 12px;
5641    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5642    line-height: 14px;
5643    color: #1e1e1e;
5644    pointer-events: none;
5645  }
5646  
5647  .rotation-ruler__active-label::before {
5648    content: "";
5649    position: absolute;
5650    top: 0;
5651    right: 50%;
5652    width: 60px;
5653    height: 100%;
5654    transform: translateX(50%);
5655    background: linear-gradient(to left, transparent 0, #e0e0e0 12px, #e0e0e0 calc(100% - 12px), transparent 100%);
5656  }
5657  
5658  .rotation-ruler__active-label-number {
5659    position: relative;
5660    display: inline-block;
5661  }
5662  
5663  .rotation-ruler__active-label-sign {
5664    position: absolute;
5665    top: 0;
5666    left: 100%;
5667  }
5668  
5669  .rotation-ruler__active-label-unit {
5670    position: absolute;
5671    top: 0;
5672    right: 100%;
5673  }
5674  
5675  @container (max-width: 220px) {
5676    .rotation-ruler__tick--minor {
5677      opacity: 0;
5678    }
5679  }
5680  @media (prefers-reduced-motion: reduce) {
5681    .rotation-ruler__ticks {
5682      transition: none;
5683    }
5684  }
5685  .editor-autocompleters__link {
5686    white-space: nowrap;
5687    gap: 8px;
5688  }
5689  
5690  .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5691    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5692    font: normal 20px/1 dashicons;
5693    content: "\f110";
5694    margin-left: 5px;
5695    vertical-align: middle;
5696  }
5697  .editor-autocompleters__user .editor-autocompleters__user-avatar {
5698    margin-left: 8px;
5699    flex-grow: 0;
5700    flex-shrink: 0;
5701    max-width: none;
5702    width: 24px;
5703    height: 24px;
5704  }
5705  .editor-autocompleters__user .editor-autocompleters__user-name {
5706    white-space: nowrap;
5707    text-overflow: ellipsis;
5708    overflow: hidden;
5709    max-width: 200px;
5710    flex-shrink: 0;
5711    flex-grow: 1;
5712  }
5713  .editor-autocompleters__user .editor-autocompleters__user-slug {
5714    margin-right: 8px;
5715    white-space: nowrap;
5716    text-overflow: ellipsis;
5717    overflow: hidden;
5718    max-width: 100px;
5719    flex-grow: 0;
5720    flex-shrink: 0;
5721  }
5722  .editor-autocompleters__user:not(.is-primary) .editor-autocompleters__user-slug {
5723    color: #757575;
5724  }
5725  
5726  .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
5727    box-shadow: none;
5728  }
5729  .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) .interface-complementary-area-header {
5730    display: none;
5731  }
5732  
5733  .editor-collab-sidebar {
5734    height: 100%;
5735    overflow: hidden;
5736  }
5737  
5738  .editor-collab-sidebar-panel {
5739    position: relative;
5740    padding: 16px 16px 24px;
5741    height: 100%;
5742    overflow: hidden;
5743  }
5744  
5745  .editor-collab-sidebar-panel__thread {
5746    position: relative;
5747    padding: 16px;
5748    border-radius: 8px;
5749    border: 1px solid #ddd;
5750    background-color: #f0f0f0;
5751    overflow: hidden;
5752    width: auto;
5753  }
5754  .editor-collab-sidebar-panel__thread.is-selected {
5755    background-color: #fff;
5756    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
5757    z-index: 1;
5758  }
5759  .editor-collab-sidebar-panel__thread:focus {
5760    outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
5761    outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
5762  }
5763  .editor-collab-sidebar-panel__thread.is-floating {
5764    right: 16px;
5765    left: 16px;
5766    position: absolute;
5767    margin-top: 16px;
5768    transform: translateY(var(--canvas-scroll, 0));
5769    will-change: transform;
5770    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px);
5771    overflow-y: auto;
5772  }
5773  
5774  .editor-collab-sidebar-panel__user-name {
5775    font-size: 12px;
5776    font-weight: 400;
5777    line-height: 16px;
5778    text-align: right;
5779    color: #757575;
5780    text-transform: capitalize;
5781  }
5782  
5783  .editor-collab-sidebar-panel__user-time {
5784    font-size: 12px;
5785    font-weight: 400;
5786    line-height: 16px;
5787    text-align: right;
5788    color: #757575;
5789  }
5790  
5791  .editor-collab-sidebar-panel__show-more-button {
5792    width: -moz-fit-content;
5793    width: fit-content;
5794    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5795    cursor: var(--wpds-cursor-control, pointer);
5796  }
5797  .editor-collab-sidebar-panel__show-more-button:hover, .editor-collab-sidebar-panel__show-more-button:focus, .editor-collab-sidebar-panel__show-more-button:active {
5798    color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
5799  }
5800  
5801  .editor-collab-sidebar-panel__note-content p:last-child {
5802    margin-bottom: 0;
5803  }
5804  .editor-collab-sidebar-panel__note-content.is-collapsed {
5805    -webkit-line-clamp: 3;
5806    line-clamp: 3;
5807    display: -webkit-box;
5808    -webkit-box-orient: vertical;
5809    overflow: hidden;
5810  }
5811  
5812  .editor-collab-sidebar-panel__user-avatar {
5813    border-radius: 50%;
5814    flex-shrink: 0;
5815    border-width: var(--wp-admin-border-width-focus);
5816    border-style: solid;
5817    padding: var(--wp-admin-border-width-focus);
5818    background: #fff;
5819  }
5820  
5821  .editor-collab-sidebar-panel__note-actions {
5822    margin-right: auto;
5823  }
5824  .editor-collab-sidebar-panel__note-actions button.has-icon:not(.has-text) {
5825    min-width: 24px;
5826    padding: 0;
5827    width: 24px;
5828    height: 24px;
5829    flex-shrink: 0;
5830  }
5831  
5832  .editor-collab-sidebar-panel__more-reply-separator::before, .editor-collab-sidebar-panel__more-reply-separator::after,
5833  .editor-collab-sidebar-panel__status-separator::before,
5834  .editor-collab-sidebar-panel__status-separator::after {
5835    content: "";
5836    flex: 1;
5837    height: 1px;
5838    background-color: #ddd;
5839  }
5840  
5841  .editor-collab-sidebar-panel__more-reply-button {
5842    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5843  }
5844  
5845  .editor-collab-sidebar-panel__deleted-block-notice {
5846    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5847    color: #757575;
5848  }
5849  
5850  .editor-collab-sidebar-panel__resolution-text {
5851    font-style: italic;
5852  }
5853  
5854  .editor-collab-sidebar-panel__note-form [role=textbox] {
5855    line-height: 20px;
5856    max-height: 418px;
5857    overflow-y: auto;
5858    white-space: pre-wrap;
5859    word-wrap: break-word;
5860  }
5861  .editor-collab-sidebar-panel__note-form [role=textbox] code {
5862    font-family: Menlo, Consolas, monaco, monospace;
5863    font-size: 0.9em;
5864    padding: 0 2px;
5865    background: #f0f0f0;
5866    border-radius: 2px;
5867  }
5868  .editor-collab-sidebar-panel__note-form [role=textbox] a:not(.wp-note-mention) {
5869    color: var(--wp-admin-theme-color);
5870    text-decoration: underline;
5871  }
5872  
5873  .editor-collab-sidebar-panel__skip-to-note,
5874  .editor-collab-sidebar-panel__skip-to-block {
5875    position: absolute;
5876    top: -9999px;
5877    left: -9999px;
5878    overflow: hidden;
5879    clip-path: inset(50%);
5880    background: #fff !important;
5881    z-index: -1;
5882  }
5883  .editor-collab-sidebar-panel__skip-to-note:focus,
5884  .editor-collab-sidebar-panel__skip-to-block:focus {
5885    overflow: visible;
5886    clip-path: none;
5887    z-index: 1;
5888    left: 8px;
5889  }
5890  
5891  .editor-collab-sidebar-panel__skip-to-note:focus {
5892    top: 8px;
5893  }
5894  
5895  .editor-collab-sidebar-panel__skip-to-block:focus {
5896    top: auto;
5897    bottom: 8px;
5898  }
5899  
5900  .editor-note-indicator__avatar {
5901    width: 24px;
5902    border-radius: 50%;
5903    margin-right: -12px;
5904    border-width: var(--wp-admin-border-width-focus);
5905    border-style: solid;
5906    padding: var(--wp-admin-border-width-focus);
5907    background: #fff;
5908    box-sizing: border-box;
5909  }
5910  .editor-note-indicator__avatar:first-child {
5911    margin-right: 0;
5912  }
5913  
5914  .editor-note-indicator__overflow {
5915    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5916  }
5917  
5918  .show-icon-labels .editor-note-indicator {
5919    width: auto;
5920  }
5921  .show-icon-labels .editor-note-indicator div {
5922    display: none;
5923  }
5924  .show-icon-labels .editor-note-indicator::after {
5925    content: attr(aria-label);
5926    font-size: 12px;
5927  }
5928  
5929  mark.wp-note {
5930    border-radius: 1px;
5931    transition: background-color 0.1s ease-in-out;
5932  }
5933  
5934  .wp-note-mention {
5935    display: inline;
5936    padding: 0 4px;
5937    border-radius: 2px;
5938    background: color-mix(in srgb, var(--wp-admin-theme-color) 12%, transparent);
5939    color: var(--wp-admin-theme-color);
5940    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5941    white-space: nowrap;
5942    text-decoration: none;
5943  }
5944  
5945  .editor-collab-sidebar-panel__mention-suggestion .editor-autocompleters__user-avatar {
5946    border-radius: 50%;
5947  }
5948  
5949  .editor-avatar {
5950    position: relative;
5951    display: inline-flex;
5952    align-items: center;
5953    border-radius: 9999px;
5954    flex-shrink: 0;
5955    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
5956  }
5957  
5958  .editor-avatar__image {
5959    box-sizing: border-box;
5960    position: relative;
5961    width: 32px;
5962    height: 32px;
5963    border-radius: 9999px;
5964    border: 0;
5965    background-color: var(--wp-admin-theme-color, #3858e9);
5966    overflow: hidden;
5967    overflow: clip;
5968    flex-shrink: 0;
5969    font-size: 0;
5970    color: #fff;
5971  }
5972  .is-small > .editor-avatar__image {
5973    width: 24px;
5974    height: 24px;
5975  }
5976  .has-avatar-border-color > .editor-avatar__image {
5977    border: var(--wp-admin-border-width-focus) solid var(--editor-avatar-outline-color);
5978    background-clip: padding-box;
5979  }
5980  .has-avatar-border-color > .editor-avatar__image::after {
5981    content: "";
5982    position: absolute;
5983    inset: 0;
5984    border-radius: inherit;
5985    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
5986    pointer-events: none;
5987    z-index: 1;
5988  }
5989  
5990  .editor-avatar__img {
5991    position: absolute;
5992    inset: 0;
5993    width: 100%;
5994    height: 100%;
5995    -o-object-fit: cover;
5996       object-fit: cover;
5997    border-radius: inherit;
5998    opacity: 0;
5999  }
6000  .has-src > .editor-avatar__image > .editor-avatar__img {
6001    opacity: 1;
6002  }
6003  
6004  .editor-avatar:not(.has-src) > .editor-avatar__image {
6005    display: flex;
6006    align-items: center;
6007    justify-content: center;
6008    font-size: 11px;
6009    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6010    border: 0;
6011    background-clip: border-box;
6012  }
6013  .editor-avatar:not(.has-src) > .editor-avatar__image::after {
6014    content: none;
6015  }
6016  
6017  .editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
6018    background-color: var(--editor-avatar-outline-color);
6019  }
6020  
6021  .editor-avatar__name {
6022    font-size: 13px;
6023    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6024    line-height: 20px;
6025    color: var(--editor-avatar-name-color, #fff);
6026    min-width: 0;
6027    padding-bottom: 2px;
6028    overflow: hidden;
6029    opacity: 0;
6030    white-space: nowrap;
6031    transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
6032  }
6033  
6034  .editor-avatar.is-badge {
6035    display: inline-grid;
6036    grid-template-columns: min-content 0fr;
6037    -moz-column-gap: 0;
6038         column-gap: 0;
6039    padding-inline-end: 0;
6040    background-color: var(--wp-admin-theme-color, #3858e9);
6041    transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6042    transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1), -moz-column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6043  }
6044  .editor-avatar.is-badge:hover {
6045    grid-template-columns: min-content 1fr;
6046    -moz-column-gap: 4px;
6047         column-gap: 4px;
6048    padding-inline-end: 8px;
6049    transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6050  }
6051  .editor-avatar.is-badge:hover .editor-avatar__name {
6052    opacity: 1;
6053    transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6054  }
6055  
6056  .editor-avatar.is-badge.has-avatar-border-color {
6057    background-color: var(--editor-avatar-outline-color);
6058  }
6059  
6060  .editor-avatar.is-dimmed > .editor-avatar__image {
6061    opacity: 0.5;
6062    background-color: #757575;
6063  }
6064  
6065  .editor-avatar.is-dimmed.has-avatar-border-color > .editor-avatar__image {
6066    border-color: #757575;
6067  }
6068  
6069  .editor-avatar.is-dimmed .editor-avatar__img {
6070    filter: grayscale(1);
6071  }
6072  
6073  .editor-avatar__status-indicator {
6074    position: absolute;
6075    top: 0;
6076    right: 0;
6077    width: 32px;
6078    height: 32px;
6079    display: flex;
6080    align-items: center;
6081    justify-content: center;
6082    z-index: 1;
6083    color: #1e1e1e;
6084    fill: #1e1e1e;
6085  }
6086  .is-small > .editor-avatar__status-indicator {
6087    width: 24px;
6088    height: 24px;
6089  }
6090  .editor-avatar__status-indicator svg {
6091    width: 75%;
6092    height: 75%;
6093  }
6094  
6095  @media (prefers-reduced-motion: reduce) {
6096    .editor-avatar.is-badge,
6097    .editor-avatar__name {
6098      transition: none;
6099    }
6100  }
6101  .editor-avatar-group {
6102    display: flex;
6103    align-items: center;
6104  }
6105  .editor-avatar-group > .editor-avatar + .editor-avatar {
6106    margin-inline-start: -8px;
6107  }
6108  .editor-avatar-group > .editor-avatar {
6109    position: relative;
6110  }
6111  .editor-avatar-group > .editor-avatar:nth-child(1) {
6112    z-index: 10;
6113  }
6114  .editor-avatar-group > .editor-avatar:nth-child(2) {
6115    z-index: 9;
6116  }
6117  .editor-avatar-group > .editor-avatar:nth-child(3) {
6118    z-index: 8;
6119  }
6120  .editor-avatar-group > .editor-avatar:nth-child(4) {
6121    z-index: 7;
6122  }
6123  .editor-avatar-group > .editor-avatar:nth-child(5) {
6124    z-index: 6;
6125  }
6126  .editor-avatar-group > .editor-avatar:nth-child(6) {
6127    z-index: 5;
6128  }
6129  .editor-avatar-group > .editor-avatar:nth-child(7) {
6130    z-index: 4;
6131  }
6132  .editor-avatar-group > .editor-avatar:nth-child(8) {
6133    z-index: 3;
6134  }
6135  .editor-avatar-group > .editor-avatar:nth-child(9) {
6136    z-index: 2;
6137  }
6138  .editor-avatar-group > .editor-avatar:nth-child(10) {
6139    z-index: 1;
6140  }
6141  
6142  .editor-avatar-group__overflow {
6143    margin-inline-start: 4px;
6144    margin-inline-end: 4px;
6145    font-size: 12px;
6146    line-height: 20px;
6147    color: #1e1e1e;
6148    white-space: nowrap;
6149  }
6150  
6151  .editor-collaborators-presence__list.components-popover .components-popover__content {
6152    border: 1px solid #ddd;
6153    border-width: 1px 1px 0 0;
6154    border-radius: 8px;
6155    background: #fff;
6156    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
6157  }
6158  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content {
6159    min-width: 280px;
6160  }
6161  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header {
6162    display: flex;
6163    justify-content: space-between;
6164    align-items: center;
6165    padding: 8px 16px;
6166  }
6167  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title {
6168    font-size: 13px;
6169    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6170    line-height: 20px;
6171    display: flex;
6172    gap: 4px;
6173  }
6174  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span {
6175    color: #757575;
6176  }
6177  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action {
6178    padding: 0;
6179  }
6180  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button {
6181    color: #1e1e1e;
6182    height: 32px;
6183    width: 32px;
6184    padding: 0;
6185  }
6186  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items {
6187    display: flex;
6188    flex-direction: column;
6189    padding-bottom: 16px;
6190  }
6191  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item {
6192    all: unset;
6193    box-sizing: border-box;
6194    display: flex;
6195    align-items: center;
6196    padding: 12px 16px;
6197    gap: 8px;
6198    width: 100%;
6199    cursor: var(--wpds-cursor-control, pointer);
6200    transition: background-color 0.2s ease;
6201  }
6202  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled) {
6203    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
6204  }
6205  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled) {
6206    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
6207  }
6208  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible {
6209    outline: 2px solid var(--wp-admin-theme-color, #3858e9);
6210    outline-offset: -2px;
6211  }
6212  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled {
6213    cursor: default;
6214  }
6215  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info {
6216    display: flex;
6217    flex-direction: column;
6218    flex: 1;
6219    min-width: 0;
6220  }
6221  .editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name {
6222    font-size: 13px;
6223    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
6224    line-height: 20px;
6225    color: #1e1e1e;
6226    overflow: hidden;
6227    text-overflow: ellipsis;
6228    white-space: nowrap;
6229  }
6230  
6231  .editor-collaborators-presence {
6232    display: flex;
6233    align-items: center;
6234    flex-shrink: 0;
6235    height: 32px;
6236    background: #f0f0f0;
6237    border-radius: 4px;
6238  }
6239  .editor-collaborators-presence:hover {
6240    background-color: #e0e0e0;
6241  }
6242  .editor-collaborators-presence:has(.is-pressed) {
6243    background-color: #e0e0e0;
6244  }
6245  
6246  .editor-header__center .editor-collaborators-presence {
6247    margin-left: 8px;
6248  }
6249  
6250  .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6251    display: flex;
6252    align-items: center;
6253    cursor: var(--wpds-cursor-control, pointer);
6254    position: relative;
6255    padding: 4px;
6256    border-radius: 4px;
6257    height: 100%;
6258    box-sizing: border-box;
6259    color: #2f2f2f;
6260    background: transparent;
6261  }
6262  .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover {
6263    background: transparent;
6264    color: #2f2f2f;
6265  }
6266  .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover {
6267    background: transparent;
6268    color: #2f2f2f;
6269  }
6270  .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6271    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6272    outline: none;
6273  }
6274  
6275  .editor-collapsible-block-toolbar {
6276    overflow: hidden;
6277    display: flex;
6278    align-items: center;
6279    height: 64px;
6280  }
6281  .editor-collapsible-block-toolbar .block-editor-block-contextual-toolbar {
6282    border-bottom: 0;
6283    height: 100%;
6284    background: transparent;
6285  }
6286  .editor-collapsible-block-toolbar .block-editor-block-toolbar {
6287    height: 100%;
6288    padding-top: 17px;
6289  }
6290  .editor-collapsible-block-toolbar .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
6291    height: 32px;
6292  }
6293  .editor-collapsible-block-toolbar::after {
6294    content: "";
6295    width: 1px;
6296    height: 24px;
6297    background-color: #ddd;
6298    margin-left: 7px;
6299  }
6300  .editor-collapsible-block-toolbar .components-toolbar-group,
6301  .editor-collapsible-block-toolbar .components-toolbar {
6302    border-left: none;
6303    position: relative;
6304  }
6305  .editor-collapsible-block-toolbar .components-toolbar-group::after,
6306  .editor-collapsible-block-toolbar .components-toolbar::after {
6307    content: "";
6308    width: 1px;
6309    height: 24px;
6310    background-color: #ddd;
6311    top: 4px;
6312    position: absolute;
6313    left: -1px;
6314  }
6315  .editor-collapsible-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
6316  .editor-collapsible-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after {
6317    display: none;
6318  }
6319  .editor-collapsible-block-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
6320    height: 32px;
6321    overflow: visible;
6322  }
6323  @media (min-width: 600px) {
6324    .editor-collapsible-block-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
6325      height: 40px;
6326      position: relative;
6327      top: -4px;
6328    }
6329  }
6330  .editor-collapsible-block-toolbar.is-collapsed {
6331    display: none;
6332  }
6333  
6334  .editor-block-visibility__disabled-blocks-count {
6335    border: 1px solid #ddd;
6336    border-width: 1px 0;
6337    box-shadow: 32px 0 0 0 #fff, -32px 0 0 0 #fff;
6338    padding: 8px;
6339    background-color: #fff;
6340    text-align: center;
6341    position: sticky;
6342    top: -5px;
6343    z-index: 1;
6344  }
6345  .editor-block-visibility__disabled-blocks-count ~ .block-editor-block-manager__content .block-editor-block-manager__category-title {
6346    top: 31px;
6347  }
6348  .editor-block-visibility__disabled-blocks-count .is-link {
6349    margin-right: 12px;
6350  }
6351  
6352  .editor-blog-title-dropdown__content .components-popover__content {
6353    min-width: 320px;
6354    padding: 16px;
6355  }
6356  
6357  .editor-document-bar {
6358    display: flex;
6359    align-items: center;
6360    height: 32px;
6361    justify-content: space-between;
6362    min-width: 0;
6363    background: #f0f0f0;
6364    border-radius: 4px;
6365    width: min(100%, 450px);
6366  }
6367  .editor-document-bar:hover {
6368    background-color: #e0e0e0;
6369  }
6370  .editor-document-bar .components-button {
6371    border-radius: 4px;
6372  }
6373  @media not (prefers-reduced-motion) {
6374    .editor-document-bar .components-button {
6375      transition: background-color 0.1s ease-out;
6376    }
6377  }
6378  .editor-document-bar .components-button:hover {
6379    background: #e0e0e0;
6380  }
6381  @media screen and (min-width: 782px) and (max-width: 960px) {
6382    .editor-document-bar.has-back-button .editor-document-bar__post-type-label {
6383      display: none;
6384    }
6385  }
6386  
6387  .editor-document-bar__command {
6388    flex-grow: 1;
6389    color: var(--wp-block-synced-color);
6390    overflow: hidden;
6391  }
6392  
6393  .editor-document-bar__title {
6394    overflow: hidden;
6395    color: #1e1e1e;
6396    margin: 0 auto;
6397    max-width: 70%;
6398  }
6399  .editor-document-bar__title h1 {
6400    display: flex;
6401    align-items: center;
6402    justify-content: center;
6403    font-weight: 400;
6404    white-space: nowrap;
6405    overflow: hidden;
6406  }
6407  
6408  .editor-document-bar__post-title {
6409    color: currentColor;
6410    flex: 1;
6411    overflow: hidden;
6412    text-overflow: ellipsis;
6413  }
6414  
6415  .editor-document-bar__post-type-label {
6416    flex: 0;
6417    color: #2f2f2f;
6418    padding-right: 4px;
6419  }
6420  @media screen and (max-width: 600px) {
6421    .editor-document-bar__post-type-label {
6422      display: none;
6423    }
6424  }
6425  
6426  .editor-document-bar__back.components-button.has-icon.has-text {
6427    min-width: 36px;
6428    flex-shrink: 0;
6429    color: #757575;
6430    gap: 0;
6431    z-index: 1;
6432    position: absolute;
6433  }
6434  .editor-document-bar__back.components-button.has-icon.has-text:hover {
6435    color: #1e1e1e;
6436    background-color: transparent;
6437  }
6438  
6439  .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6440    position: absolute;
6441    margin-right: 12px;
6442    display: none;
6443    pointer-events: none;
6444  }
6445  .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6446    fill: #949494;
6447  }
6448  @media (min-width: 600px) {
6449    .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6450      display: flex;
6451    }
6452  }
6453  
6454  .document-outline ul {
6455    margin: 0;
6456    padding: 0;
6457  }
6458  
6459  .document-outline__item {
6460    display: flex;
6461    margin: 4px 0;
6462  }
6463  .document-outline__item a {
6464    text-decoration: none;
6465  }
6466  .document-outline__item .document-outline__emdash::before {
6467    color: #ddd;
6468    margin-left: 4px;
6469  }
6470  .document-outline__item.is-h2 .document-outline__emdash::before {
6471    content: "—";
6472  }
6473  .document-outline__item.is-h3 .document-outline__emdash::before {
6474    content: "——";
6475  }
6476  .document-outline__item.is-h4 .document-outline__emdash::before {
6477    content: "———";
6478  }
6479  .document-outline__item.is-h5 .document-outline__emdash::before {
6480    content: "————";
6481  }
6482  .document-outline__item.is-h6 .document-outline__emdash::before {
6483    content: "—————";
6484  }
6485  
6486  .document-outline__button {
6487    cursor: var(--wpds-cursor-control, pointer);
6488    background: none;
6489    border: none;
6490    display: flex;
6491    align-items: flex-start;
6492    margin: 0 -1px 0 0;
6493    padding: 2px 1px 2px 5px;
6494    color: #1e1e1e;
6495    text-align: right;
6496    border-radius: 2px;
6497  }
6498  .document-outline__button[aria-disabled=true], .document-outline__button:disabled {
6499    cursor: default;
6500    color: #757575;
6501  }
6502  .document-outline__button:focus {
6503    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
6504    outline: 2px solid transparent;
6505  }
6506  
6507  .document-outline__level {
6508    background: #ddd;
6509    color: #1e1e1e;
6510    border-radius: 3px;
6511    font-size: 13px;
6512    padding: 1px 6px;
6513    margin-left: 4px;
6514  }
6515  .is-invalid .document-outline__level {
6516    background: #f0b849;
6517  }
6518  
6519  .document-outline__item-content {
6520    padding: 1px 0;
6521  }
6522  
6523  .editor-document-outline.has-no-headings > svg {
6524    margin-top: 28px;
6525  }
6526  .editor-document-outline.has-no-headings > p {
6527    padding-right: 32px;
6528    padding-left: 32px;
6529  }
6530  .editor-document-outline.has-no-headings {
6531    text-align: center;
6532    color: #757575;
6533  }
6534  
6535  .editor-document-tools {
6536    display: inline-flex;
6537    align-items: center;
6538  }
6539  .editor-document-tools .editor-document-tools__left > .editor-history__redo,
6540  .editor-document-tools .editor-document-tools__left > .editor-history__undo {
6541    display: none;
6542  }
6543  @media (min-width: 782px) {
6544    .editor-document-tools .editor-document-tools__left > .editor-history__redo,
6545    .editor-document-tools .editor-document-tools__left > .editor-history__undo {
6546      display: inline-flex;
6547    }
6548  }
6549  .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle {
6550    display: inline-flex;
6551  }
6552  @media not (prefers-reduced-motion) {
6553    .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle svg {
6554      transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
6555    }
6556  }
6557  .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.is-pressed svg {
6558    transform: rotate(-45deg);
6559  }
6560  .editor-document-tools .block-editor-list-view {
6561    display: none;
6562  }
6563  @media (min-width: 600px) {
6564    .editor-document-tools .block-editor-list-view {
6565      display: flex;
6566    }
6567  }
6568  .editor-document-tools .editor-document-tools__left > .components-button.has-icon,
6569  .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon {
6570    height: 32px;
6571    min-width: 32px;
6572    padding: 4px;
6573  }
6574  .editor-document-tools .editor-document-tools__left > .components-button.has-icon.is-pressed,
6575  .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon.is-pressed {
6576    background: #1e1e1e;
6577  }
6578  .editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:disabled),
6579  .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
6580    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
6581    outline: 1px solid transparent;
6582  }
6583  .editor-document-tools .editor-document-tools__left > .components-button.has-icon::before,
6584  .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon::before {
6585    display: none;
6586  }
6587  
6588  .editor-document-tools__left {
6589    display: inline-flex;
6590    align-items: center;
6591    gap: 8px;
6592  }
6593  .editor-document-tools__left:not(:last-child) {
6594    margin-inline-end: 8px;
6595  }
6596  
6597  .show-icon-labels .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
6598    width: auto;
6599    padding: 0 8px;
6600  }
6601  
6602  .show-icon-labels .editor-document-tools__left > * + * {
6603    margin-right: 8px;
6604  }
6605  
6606  .editor-editor-interface .entities-saved-states__panel-header {
6607    height: 65px;
6608  }
6609  
6610  .editor-editor-interface .interface-interface-skeleton__content {
6611    isolation: isolate;
6612  }
6613  
6614  .editor-editor-interface .editor-notices {
6615    padding: var(--wpds-dimension-padding-md, 12px);
6616  }
6617  
6618  .editor-visual-editor {
6619    flex: 1 0 auto;
6620  }
6621  
6622  .editor-notices__dismissible,
6623  .editor-notices__pinned {
6624    position: relative;
6625    right: 0;
6626    top: 0;
6627    left: 0;
6628  }
6629  
6630  .entities-saved-states__panel-header {
6631    box-sizing: border-box;
6632    background: #fff;
6633    padding-right: 16px;
6634    padding-left: 16px;
6635    height: 64px;
6636    border-bottom: 1px solid #ddd;
6637  }
6638  
6639  .entities-saved-states__text-prompt {
6640    padding: 16px;
6641    padding-bottom: 4px;
6642  }
6643  .entities-saved-states__text-prompt .entities-saved-states__text-prompt--header {
6644    display: block;
6645    margin-bottom: 12px;
6646  }
6647  
6648  .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt {
6649    padding: 0;
6650  }
6651  .entities-saved-states__panel.is-inline .entities-saved-states__panel-body {
6652    padding-right: 0;
6653    padding-left: 0;
6654    border: 0;
6655  }
6656  .entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 {
6657    margin-right: -16px;
6658    margin-left: -16px;
6659    margin-bottom: 0;
6660  }
6661  .entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 button {
6662    font-size: 11px;
6663    text-transform: uppercase;
6664  }
6665  .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--header-wrapper {
6666    display: none;
6667  }
6668  .entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--changes-count {
6669    margin-top: 0;
6670    margin-bottom: 8px;
6671  }
6672  .entities-saved-states__panel.is-inline .entities-saved-states__panel-footer {
6673    margin-top: 16px;
6674  }
6675  
6676  .entities-saved-states__change-control {
6677    flex: 1;
6678  }
6679  
6680  .entities-saved-states__changes {
6681    font-size: 13px;
6682    margin: 4px 24px 0 16px;
6683    list-style: disc;
6684  }
6685  .entities-saved-states__changes li {
6686    margin-bottom: 4px;
6687  }
6688  
6689  .editor-error-boundary {
6690    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6691    margin: auto;
6692    max-width: 780px;
6693    padding: 1em;
6694    margin-top: 64px;
6695    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
6696    border: 1px solid #1e1e1e;
6697    border-radius: 2px;
6698    background-color: #fff;
6699  }
6700  
6701  .editor-global-styles-header__description {
6702    padding: 0 16px;
6703  }
6704  
6705  .editor-global-styles-header {
6706    margin-bottom: 0 !important;
6707  }
6708  
6709  .editor-global-styles-sidebar {
6710    display: flex;
6711    flex-direction: column;
6712    min-height: 100%;
6713  }
6714  .editor-global-styles-sidebar__panel {
6715    flex: 1;
6716  }
6717  
6718  .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6719    margin: 0;
6720  }
6721  
6722  .editor-global-styles-sidebar .editor-global-styles-sidebar__header-actions {
6723    flex: 1;
6724  }
6725  
6726  .editor-global-styles-sidebar .block-editor-panel-color-gradient-settings {
6727    border: 0;
6728  }
6729  
6730  .editor-global-styles-sidebar .single-column {
6731    grid-column: span 1;
6732  }
6733  
6734  .editor-global-styles-sidebar .components-tools-panel .span-columns {
6735    grid-column: 1/-1;
6736  }
6737  
6738  .editor-global-styles-sidebar__blocks-group {
6739    padding-top: 24px;
6740    border-top: 1px solid #e0e0e0;
6741  }
6742  
6743  .editor-global-styles-sidebar__blocks-group-help {
6744    padding: 0 16px;
6745  }
6746  
6747  .global-styles-ui-color-palette-panel,
6748  .global-styles-ui-gradient-palette-panel {
6749    padding: 16px;
6750  }
6751  
6752  .editor-global-styles-sidebar hr {
6753    margin: 0;
6754  }
6755  
6756  .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon {
6757    width: auto;
6758  }
6759  .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon svg {
6760    display: none;
6761  }
6762  .show-icon-labels .editor-global-styles-sidebar__header .components-button.has-icon::after {
6763    content: attr(aria-label);
6764    font-size: 12px;
6765  }
6766  
6767  .editor-welcome-guide {
6768    width: 312px;
6769  }
6770  .editor-welcome-guide.guide-styles .editor-welcome-guide__image {
6771    background: #00a0d2;
6772  }
6773  .editor-welcome-guide__image {
6774    margin: 0 0 16px;
6775  }
6776  .editor-welcome-guide__image > img {
6777    display: block;
6778    max-width: 100%;
6779    -o-object-fit: cover;
6780       object-fit: cover;
6781  }
6782  .editor-welcome-guide__heading {
6783    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6784    font-size: 24px;
6785    line-height: 1.4;
6786    margin: 16px 0 16px 0;
6787    padding: 0 32px;
6788  }
6789  .editor-welcome-guide__text {
6790    font-size: 13px;
6791    line-height: 1.4;
6792    margin: 0 0 16px 0;
6793    padding: 0 32px;
6794  }
6795  .editor-welcome-guide__text img {
6796    vertical-align: bottom;
6797  }
6798  .editor-welcome-guide .components-button:hover svg {
6799    fill: #fff;
6800  }
6801  
6802  .editor-header {
6803    box-sizing: border-box;
6804  }
6805  .editor-header *,
6806  .editor-header *::before,
6807  .editor-header *::after {
6808    box-sizing: inherit;
6809  }
6810  .editor-header {
6811    height: 64px;
6812    background: #fff;
6813    display: grid;
6814    grid-auto-flow: row;
6815    grid-template: auto/32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
6816  }
6817  .editor-header:has(> .editor-header__center) {
6818    grid-template: auto/32px min-content 1fr min-content 64px;
6819  }
6820  @media (min-width: 782px) {
6821    .editor-header:has(> .editor-header__center) {
6822      grid-template: auto/32px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6823    }
6824  }
6825  @media (min-width: 480px) {
6826    .editor-header {
6827      gap: 16px;
6828    }
6829  }
6830  .editor-header {
6831    align-items: center;
6832    max-width: 100vw;
6833    justify-content: space-between;
6834  }
6835  @media (min-width: 280px) {
6836    .editor-header {
6837      flex-wrap: nowrap;
6838    }
6839  }
6840  
6841  .editor-header__back-button {
6842    padding-right: 8px;
6843  }
6844  
6845  .editor-header__toolbar {
6846    grid-column: 1/3;
6847  }
6848  .editor-header__toolbar > :first-child {
6849    margin-inline: 16px 0;
6850  }
6851  .editor-header__back-button + .editor-header__toolbar {
6852    grid-column: 2/3;
6853  }
6854  @media (min-width: 480px) {
6855    .editor-header__back-button + .editor-header__toolbar > :first-child {
6856      margin-inline: 0;
6857    }
6858  }
6859  .editor-header__toolbar {
6860    display: flex;
6861    min-width: 0;
6862    align-items: center;
6863    clip-path: inset(-2px);
6864  }
6865  @media (min-width: 480px) {
6866    .editor-header__toolbar {
6867      clip-path: none;
6868    }
6869  }
6870  .editor-header__toolbar .table-of-contents {
6871    display: none;
6872  }
6873  @media (min-width: 600px) {
6874    .editor-header__toolbar .table-of-contents {
6875      display: block;
6876    }
6877  }
6878  .editor-header__toolbar .editor-collapsible-block-toolbar {
6879    margin-inline: 8px 0;
6880  }
6881  .editor-header__toolbar .editor-collapsible-block-toolbar.is-collapsed ~ .editor-collapsible-block-toolbar__toggle {
6882    margin-inline: 8px 0;
6883  }
6884  
6885  .editor-header__center {
6886    grid-column: 3/4;
6887    display: flex;
6888    justify-content: center;
6889    align-items: center;
6890    min-width: 0;
6891  }
6892  @media (max-width: 479px) {
6893    .editor-header__center > :first-child {
6894      margin-inline-start: 8px;
6895    }
6896    .editor-header__center > :last-child {
6897      margin-inline-end: 8px;
6898    }
6899  }
6900  
6901  /**
6902   * Buttons on the right side
6903   */
6904  .editor-header__settings {
6905    grid-column: 3/-1;
6906  }
6907  .editor-header:has(> .editor-header__center) .editor-header__settings {
6908    grid-column: 4/-1;
6909  }
6910  .editor-header__settings {
6911    justify-self: end;
6912    display: inline-flex;
6913    align-items: center;
6914    flex-wrap: nowrap;
6915    padding-left: 4px;
6916  }
6917  @media (min-width: 600px) {
6918    .editor-header__settings {
6919      padding-left: 8px;
6920    }
6921  }
6922  .editor-header__settings {
6923    gap: 8px;
6924  }
6925  
6926  /**
6927   * Show icon labels.
6928   */
6929  .show-icon-labels.interface-pinned-items .components-button.has-icon,
6930  .show-icon-labels .editor-header .components-button.has-icon {
6931    width: auto;
6932  }
6933  .show-icon-labels.interface-pinned-items .components-button.has-icon svg,
6934  .show-icon-labels .editor-header .components-button.has-icon svg {
6935    display: none;
6936  }
6937  .show-icon-labels.interface-pinned-items .components-button.has-icon::after,
6938  .show-icon-labels .editor-header .components-button.has-icon::after {
6939    content: attr(aria-label);
6940    white-space: nowrap;
6941  }
6942  .show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled=true],
6943  .show-icon-labels .editor-header .components-button.has-icon[aria-disabled=true] {
6944    background-color: transparent;
6945  }
6946  .show-icon-labels.interface-pinned-items .is-tertiary:active,
6947  .show-icon-labels .editor-header .is-tertiary:active {
6948    box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
6949    background-color: transparent;
6950  }
6951  .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg,
6952  .show-icon-labels .editor-header .components-button.has-icon.button-toggle svg {
6953    display: block;
6954  }
6955  .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after,
6956  .show-icon-labels .editor-header .components-button.has-icon.button-toggle::after {
6957    content: none;
6958  }
6959  .show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
6960  .show-icon-labels .editor-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
6961    display: block;
6962  }
6963  .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6964  .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
6965  .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6966  .show-icon-labels .editor-header .interface-pinned-items .components-button {
6967    padding-right: 8px;
6968    padding-left: 8px;
6969  }
6970  @media (min-width: 600px) {
6971    .show-icon-labels.interface-pinned-items .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6972    .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
6973    .show-icon-labels .editor-header .editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
6974    .show-icon-labels .editor-header .interface-pinned-items .components-button {
6975      padding-right: 12px;
6976      padding-left: 12px;
6977    }
6978  }
6979  .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
6980  .show-icon-labels.interface-pinned-items .editor-post-saved-state.editor-post-saved-state::after,
6981  .show-icon-labels .editor-header .editor-post-save-draft.editor-post-save-draft::after,
6982  .show-icon-labels .editor-header .editor-post-saved-state.editor-post-saved-state::after {
6983    content: none;
6984  }
6985  
6986  .show-icon-labels .editor-header__toolbar .block-editor-block-mover {
6987    border-right: none;
6988  }
6989  .show-icon-labels .editor-header__toolbar .block-editor-block-mover::before {
6990    content: "";
6991    width: 1px;
6992    height: 24px;
6993    background-color: #ddd;
6994    margin-top: 4px;
6995    margin-right: 8px;
6996  }
6997  .show-icon-labels .editor-header__toolbar .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
6998    width: calc(100% - 24px);
6999    background: #ddd;
7000    right: calc(50% + 1px);
7001  }
7002  
7003  .show-icon-labels.interface-pinned-items {
7004    padding: 6px 12px 12px;
7005    margin-top: 0;
7006    margin-bottom: 0;
7007    margin-right: -12px;
7008    margin-left: -12px;
7009    border-bottom: 1px solid #ccc;
7010    display: block;
7011  }
7012  .show-icon-labels.interface-pinned-items > .components-button.has-icon {
7013    margin: 0;
7014    padding: 6px 8px 6px 6px;
7015    width: 14.625rem;
7016    justify-content: flex-start;
7017  }
7018  .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=true] svg {
7019    display: block;
7020    max-width: 24px;
7021  }
7022  .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=false] {
7023    padding-right: 40px;
7024  }
7025  .show-icon-labels.interface-pinned-items > .components-button.has-icon svg {
7026    margin-left: 8px;
7027  }
7028  
7029  @media (min-width: 480px) {
7030    .editor-header__post-preview-button {
7031      display: none;
7032    }
7033  }
7034  
7035  .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header {
7036    border-bottom: none;
7037  }
7038  .editor-editor-interface.is-distraction-free .editor-header {
7039    background-color: #fff;
7040    width: 100%;
7041  }
7042  @media (min-width: 782px) {
7043    .editor-editor-interface.is-distraction-free .editor-header {
7044      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
7045      position: absolute;
7046    }
7047  }
7048  .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
7049    visibility: hidden;
7050  }
7051  .editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle {
7052    display: none;
7053  }
7054  .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
7055    opacity: 1 !important;
7056  }
7057  .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
7058    transform: translateX(0) translateZ(0) !important;
7059  }
7060  .editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
7061    position: absolute;
7062    z-index: 35;
7063  }
7064  
7065  .components-popover.more-menu-dropdown__content {
7066    z-index: 99998;
7067  }
7068  
7069  .editor-inserter-sidebar {
7070    box-sizing: border-box;
7071  }
7072  .editor-inserter-sidebar *,
7073  .editor-inserter-sidebar *::before,
7074  .editor-inserter-sidebar *::after {
7075    box-sizing: inherit;
7076  }
7077  .editor-inserter-sidebar {
7078    height: 100%;
7079    display: flex;
7080    flex-direction: column;
7081  }
7082  
7083  .editor-inserter-sidebar__content {
7084    height: 100%;
7085  }
7086  
7087  .editor-keyboard-shortcut-help-modal__section {
7088    margin: 0 0 2rem 0;
7089  }
7090  .editor-keyboard-shortcut-help-modal__section-title {
7091    font-size: 0.9rem;
7092    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
7093  }
7094  .editor-keyboard-shortcut-help-modal__shortcut {
7095    display: flex;
7096    align-items: baseline;
7097    padding: 0.6rem 0;
7098    border-top: 1px solid #ddd;
7099    margin-bottom: 0;
7100  }
7101  .editor-keyboard-shortcut-help-modal__shortcut:last-child {
7102    border-bottom: 1px solid #ddd;
7103  }
7104  .editor-keyboard-shortcut-help-modal__shortcut:empty {
7105    display: none;
7106  }
7107  .editor-keyboard-shortcut-help-modal__shortcut-term {
7108    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
7109    margin: 0 1rem 0 0;
7110    text-align: left;
7111  }
7112  .editor-keyboard-shortcut-help-modal__shortcut-description {
7113    flex: 1;
7114    margin: 0;
7115  }
7116  .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
7117    display: block;
7118    background: none;
7119    margin: 0;
7120    padding: 0;
7121  }
7122  .editor-keyboard-shortcut-help-modal__shortcut-key-combination + .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
7123    margin-top: 10px;
7124  }
7125  .editor-keyboard-shortcut-help-modal__shortcut-key {
7126    padding: 0.25rem 0.5rem;
7127    border-radius: 8%;
7128    margin: 0 0.2rem 0 0.2rem;
7129  }
7130  .editor-keyboard-shortcut-help-modal__shortcut-key:last-child {
7131    margin: 0 0.2rem 0 0;
7132  }
7133  
7134  .editor-list-view-sidebar {
7135    height: 100%;
7136  }
7137  @media (min-width: 782px) {
7138    .editor-list-view-sidebar {
7139      width: 350px;
7140    }
7141  }
7142  
7143  .editor-list-view-sidebar__list-view-panel-content,
7144  .editor-list-view-sidebar__list-view-container > .document-outline {
7145    height: 100%;
7146  }
7147  .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar,
7148  .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar {
7149    width: 12px;
7150    height: 12px;
7151  }
7152  .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar-track,
7153  .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar-track {
7154    background-color: transparent;
7155  }
7156  .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar-thumb,
7157  .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar-thumb {
7158    background-color: transparent;
7159    border-radius: 8px;
7160    border: 3px solid transparent;
7161    background-clip: padding-box;
7162  }
7163  .editor-list-view-sidebar__list-view-panel-content:hover::-webkit-scrollbar-thumb, .editor-list-view-sidebar__list-view-panel-content:focus::-webkit-scrollbar-thumb, .editor-list-view-sidebar__list-view-panel-content:focus-within::-webkit-scrollbar-thumb,
7164  .editor-list-view-sidebar__list-view-container > .document-outline:hover::-webkit-scrollbar-thumb,
7165  .editor-list-view-sidebar__list-view-container > .document-outline:focus::-webkit-scrollbar-thumb,
7166  .editor-list-view-sidebar__list-view-container > .document-outline:focus-within::-webkit-scrollbar-thumb {
7167    background-color: #949494;
7168  }
7169  .editor-list-view-sidebar__list-view-panel-content,
7170  .editor-list-view-sidebar__list-view-container > .document-outline {
7171    scrollbar-width: thin;
7172    scrollbar-gutter: stable both-edges;
7173    scrollbar-color: transparent transparent;
7174  }
7175  .editor-list-view-sidebar__list-view-panel-content:hover, .editor-list-view-sidebar__list-view-panel-content:focus, .editor-list-view-sidebar__list-view-panel-content:focus-within,
7176  .editor-list-view-sidebar__list-view-container > .document-outline:hover,
7177  .editor-list-view-sidebar__list-view-container > .document-outline:focus,
7178  .editor-list-view-sidebar__list-view-container > .document-outline:focus-within {
7179    scrollbar-color: #949494 transparent;
7180  }
7181  .editor-list-view-sidebar__list-view-panel-content,
7182  .editor-list-view-sidebar__list-view-container > .document-outline {
7183    will-change: transform;
7184  }
7185  @media (hover: none) {
7186    .editor-list-view-sidebar__list-view-panel-content,
7187    .editor-list-view-sidebar__list-view-container > .document-outline {
7188      scrollbar-color: #949494 transparent;
7189    }
7190  }
7191  .editor-list-view-sidebar__list-view-panel-content,
7192  .editor-list-view-sidebar__list-view-container > .document-outline {
7193    overflow: auto;
7194    scrollbar-gutter: auto;
7195  }
7196  
7197  .editor-list-view-sidebar__list-view-panel-content {
7198    padding: 4px;
7199  }
7200  
7201  .editor-list-view-sidebar__list-view-container {
7202    display: flex;
7203    flex-direction: column;
7204    height: 100%;
7205  }
7206  .editor-list-view-sidebar__list-view-container > .document-outline {
7207    padding: 16px;
7208  }
7209  
7210  .editor-list-view-sidebar__tab-panel {
7211    height: 100%;
7212  }
7213  
7214  .editor-list-view-sidebar__outline {
7215    display: flex;
7216    flex-direction: column;
7217    gap: 8px;
7218    border-bottom: 1px solid #ddd;
7219    padding: 16px;
7220  }
7221  .editor-list-view-sidebar__outline > div > span:first-child {
7222    width: 90px;
7223    display: inline-block;
7224  }
7225  .editor-list-view-sidebar__outline > div > span {
7226    font-size: 12px;
7227    line-height: 1.4;
7228    color: #757575;
7229  }
7230  
7231  .editor-post-parent__panel,
7232  .editor-post-order__panel {
7233    padding-top: 8px;
7234  }
7235  .editor-post-parent__panel .editor-post-panel__row-control > div,
7236  .editor-post-order__panel .editor-post-panel__row-control > div {
7237    width: 100%;
7238  }
7239  
7240  .editor-post-parent__panel-dialog .editor-post-parent,
7241  .editor-post-parent__panel-dialog .editor-post-order,
7242  .editor-post-order__panel-dialog .editor-post-parent,
7243  .editor-post-order__panel-dialog .editor-post-order {
7244    margin: 8px;
7245  }
7246  .editor-post-parent__panel-dialog .components-popover__content,
7247  .editor-post-order__panel-dialog .components-popover__content {
7248    min-width: 320px;
7249  }
7250  
7251  .editor-post-author__panel {
7252    padding-top: 8px;
7253  }
7254  
7255  .editor-post-author__panel .editor-post-panel__row-control > div {
7256    width: 100%;
7257  }
7258  
7259  .editor-post-author__panel-dialog .editor-post-author {
7260    min-width: 248px;
7261    margin: 8px;
7262  }
7263  
7264  .editor-action-modal {
7265    z-index: 1000001;
7266  }
7267  
7268  .editor-post-card-panel__content {
7269    flex-grow: 1;
7270  }
7271  .editor-post-card-panel__title {
7272    width: 100%;
7273  }
7274  .editor-post-card-panel__title.editor-post-card-panel__title {
7275    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
7276    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
7277    font-size: 13px;
7278    line-height: 20px;
7279    margin: 0;
7280    display: flex;
7281    align-items: center;
7282    flex-wrap: wrap;
7283    -moz-column-gap: 8px;
7284         column-gap: 8px;
7285    row-gap: 4px;
7286    word-break: break-word;
7287  }
7288  .editor-post-card-panel__icon {
7289    flex: 0 0 24px;
7290    width: 24px;
7291    height: 24px;
7292  }
7293  .editor-post-card-panel__header {
7294    display: flex;
7295    justify-content: space-between;
7296  }
7297  .editor-post-card-panel.has-description .editor-post-card-panel__header {
7298    margin-bottom: 8px;
7299  }
7300  .editor-post-card-panel .editor-post-card-panel__title-name {
7301    padding: 2px 0;
7302  }
7303  .editor-post-card-panel .editor-post-card-panel__description {
7304    color: #757575;
7305  }
7306  
7307  .editor-post-content-information {
7308    color: #757575;
7309  }
7310  .editor-post-content-information .components-text {
7311    color: inherit;
7312  }
7313  
7314  .editor-post-discussion__panel-dialog .editor-post-discussion {
7315    min-width: 248px;
7316    margin: 8px;
7317  }
7318  
7319  .editor-post-discussion__panel-toggle .components-text {
7320    color: inherit;
7321  }
7322  
7323  .editor-post-discussion__panel-dialog .components-popover__content {
7324    min-width: 320px;
7325  }
7326  
7327  .editor-post-excerpt__textarea {
7328    width: 100%;
7329    margin-bottom: 10px;
7330  }
7331  
7332  .editor-post-excerpt__dropdown__content .components-popover__content {
7333    min-width: 320px;
7334    padding: 16px;
7335  }
7336  
7337  .editor-post-featured-image {
7338    padding: 0;
7339  }
7340  .editor-post-featured-image .hidden {
7341    display: none;
7342  }
7343  .editor-post-featured-image .components-spinner {
7344    position: absolute;
7345    top: 50%;
7346    right: 50%;
7347    margin-top: -9px;
7348    margin-right: -9px;
7349  }
7350  
7351  .editor-post-featured-image__container {
7352    position: relative;
7353  }
7354  .editor-post-featured-image__container:hover .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image), .editor-post-featured-image__container:focus .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image), .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image) {
7355    opacity: 1;
7356  }
7357  .editor-post-featured-image__container .editor-post-featured-image__actions.editor-post-featured-image__actions-missing-image {
7358    opacity: 1;
7359    margin-top: 16px;
7360  }
7361  .editor-post-featured-image__container .components-drop-zone__content {
7362    border-radius: 2px;
7363  }
7364  .editor-post-featured-image__container:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner {
7365    display: flex;
7366    align-items: center;
7367    gap: 8px;
7368  }
7369  .editor-post-featured-image__container:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
7370    margin: 0;
7371  }
7372  
7373  .editor-post-featured-image__toggle,
7374  .editor-post-featured-image__preview {
7375    width: 100%;
7376    padding: 0;
7377    border-color: #ccc;
7378    overflow: hidden;
7379    outline-offset: -1px;
7380    min-height: 40px;
7381    display: flex;
7382    justify-content: center;
7383  }
7384  
7385  .editor-post-featured-image__preview {
7386    height: auto !important;
7387    outline: 1px solid rgba(0, 0, 0, 0.1);
7388    background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
7389    background-position: 0 0, 12px 12px;
7390    background-size: 24px 24px;
7391  }
7392  .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7393    -o-object-fit: cover;
7394       object-fit: cover;
7395    width: 100%;
7396    -o-object-position: 50% 50%;
7397       object-position: 50% 50%;
7398    aspect-ratio: 2/1;
7399  }
7400  
7401  .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
7402    bottom: 0;
7403    opacity: 0;
7404    padding: 8px;
7405    position: absolute;
7406  }
7407  @media not (prefers-reduced-motion) {
7408    .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
7409      transition: opacity 50ms ease-out;
7410    }
7411  }
7412  .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) .editor-post-featured-image__action {
7413    backdrop-filter: blur(16px) saturate(180%);
7414    background: rgba(255, 255, 255, 0.75);
7415  }
7416  .editor-post-featured-image__actions .editor-post-featured-image__action {
7417    flex-grow: 1;
7418    justify-content: center;
7419  }
7420  
7421  [class].editor-post-format__suggestion {
7422    margin: 4px 0 0 0;
7423  }
7424  
7425  .editor-post-format__dialog .editor-post-format__dialog-content {
7426    min-width: 248px;
7427    margin: 8px;
7428  }
7429  
7430  .editor-post-last-edited-panel {
7431    color: #757575;
7432  }
7433  .editor-post-last-edited-panel .components-text {
7434    color: inherit;
7435  }
7436  
7437  .editor-post-last-revision__title {
7438    width: 100%;
7439    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
7440  }
7441  
7442  .editor-post-last-revision__title.components-button.has-icon {
7443    height: 100%;
7444    justify-content: space-between;
7445  }
7446  .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7447    background: #f0f0f0;
7448  }
7449  .editor-post-last-revision__title.components-button.has-icon:focus {
7450    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7451    border-radius: 0;
7452  }
7453  
7454  .components-panel__body.is-opened.editor-post-last-revision__panel {
7455    padding: 0;
7456    height: 48px;
7457  }
7458  .components-panel__body.is-opened.editor-post-last-revision__panel .editor-post-last-revision__title.components-button.components-button {
7459    padding: 16px;
7460  }
7461  
7462  .editor-post-locked-modal__buttons {
7463    margin-top: 24px;
7464  }
7465  
7466  .editor-post-locked-modal__avatar {
7467    border-radius: 50%;
7468    margin-top: 16px;
7469    min-width: initial !important;
7470  }
7471  
7472  .editor-post-panel__row {
7473    width: 100%;
7474    min-height: 32px;
7475    justify-content: flex-start !important;
7476    align-items: flex-start !important;
7477  }
7478  
7479  .editor-post-panel__row-label {
7480    width: 38%;
7481    flex-shrink: 0;
7482    min-height: 32px;
7483    display: flex;
7484    align-items: center;
7485    padding: 6px 0;
7486    line-height: 20px;
7487    hyphens: auto;
7488    word-break: break-word;
7489  }
7490  
7491  .editor-post-panel__row-control {
7492    flex-grow: 1;
7493    min-height: 32px;
7494    display: flex;
7495    align-items: center;
7496  }
7497  .editor-post-panel__row-control .components-button {
7498    max-width: 100%;
7499    text-align: right;
7500    white-space: normal;
7501    text-wrap: balance;
7502    text-wrap: pretty;
7503    height: auto;
7504    min-height: 32px;
7505    font-weight: var(--wpds-typography-font-weight-default, 400);
7506  }
7507  .editor-post-panel__row-control .components-dropdown {
7508    max-width: 100%;
7509  }
7510  
7511  .editor-post-panel__section {
7512    padding: 16px;
7513  }
7514  
7515  .editor-post-publish-panel__content {
7516    min-height: calc(100% - 148px);
7517  }
7518  .editor-post-publish-panel__content > .components-spinner {
7519    display: block;
7520    margin: 100px auto 0;
7521  }
7522  
7523  .editor-post-publish-panel__header {
7524    background: #fff;
7525    padding-right: 16px;
7526    padding-left: 16px;
7527    height: 65px;
7528    border-bottom: 1px solid #ddd;
7529    display: flex;
7530    align-items: center;
7531    align-content: space-between;
7532  }
7533  .editor-post-publish-panel__header .components-button {
7534    width: 100%;
7535    justify-content: center;
7536  }
7537  .editor-post-publish-panel__header .has-icon {
7538    margin-right: auto;
7539    width: auto;
7540  }
7541  
7542  .components-site-card {
7543    display: flex;
7544    align-items: center;
7545    margin: 16px 0;
7546  }
7547  
7548  .components-site-icon {
7549    border: none;
7550    border-radius: 2px;
7551    margin-left: 12px;
7552    flex-shrink: 0;
7553    height: 36px;
7554    width: 36px;
7555  }
7556  
7557  .components-site-name {
7558    display: block;
7559    font-size: 14px;
7560  }
7561  
7562  .components-site-home {
7563    display: block;
7564    color: #757575;
7565    font-size: 12px;
7566    word-break: break-word;
7567  }
7568  
7569  .editor-post-publish-panel__header-publish-button,
7570  .editor-post-publish-panel__header-cancel-button {
7571    flex: 1;
7572  }
7573  @media (min-width: 480px) {
7574    .editor-post-publish-panel__header-publish-button,
7575    .editor-post-publish-panel__header-cancel-button {
7576      max-width: 160px;
7577    }
7578  }
7579  
7580  .editor-post-publish-panel__header-publish-button {
7581    padding-right: 4px;
7582    justify-content: center;
7583  }
7584  
7585  .editor-post-publish-panel__header-cancel-button {
7586    padding-left: 4px;
7587  }
7588  
7589  .editor-post-publish-panel__header-published {
7590    flex-grow: 1;
7591  }
7592  
7593  .editor-post-publish-panel__footer {
7594    padding: 16px;
7595  }
7596  
7597  .components-button.editor-post-publish-panel__toggle.is-primary {
7598    display: inline-flex;
7599    align-items: center;
7600  }
7601  .components-button.editor-post-publish-panel__toggle.is-primary.is-busy .dashicon {
7602    display: none;
7603  }
7604  .components-button.editor-post-publish-panel__toggle.is-primary .dashicon {
7605    margin-left: -4px;
7606  }
7607  
7608  .editor-post-publish-panel__link {
7609    font-weight: 400;
7610    padding-right: 4px;
7611  }
7612  
7613  .editor-post-publish-panel__prepublish {
7614    padding: 16px;
7615  }
7616  .editor-post-publish-panel__prepublish strong {
7617    color: #1e1e1e;
7618  }
7619  .editor-post-publish-panel__prepublish .components-panel__body {
7620    background: #fff;
7621    margin-right: -16px;
7622    margin-left: -16px;
7623  }
7624  .editor-post-publish-panel__prepublish .editor-post-visibility__dialog-legend {
7625    display: none;
7626  }
7627  .editor-post-publish-panel__prepublish .components-panel__body-title .components-button {
7628    align-items: flex-start;
7629    text-wrap: balance;
7630    text-wrap: pretty;
7631  }
7632  
7633  .post-publish-panel__postpublish .components-panel__body {
7634    border-bottom: 1px solid #e0e0e0;
7635    border-top: none;
7636    word-break: break-word;
7637  }
7638  
7639  .post-publish-panel__postpublish-buttons {
7640    display: flex;
7641    align-content: space-between;
7642    flex-wrap: wrap;
7643    gap: 16px;
7644  }
7645  .post-publish-panel__postpublish-buttons .components-button,
7646  .post-publish-panel__postpublish-buttons .components-button.has-icon {
7647    justify-content: center;
7648    flex: 1;
7649    min-width: unset;
7650  }
7651  .post-publish-panel__postpublish-buttons .components-clipboard-button {
7652    width: 100%;
7653  }
7654  
7655  .post-publish-panel__postpublish-post-address-container {
7656    display: flex;
7657    align-items: flex-end;
7658    margin-bottom: 16px;
7659  }
7660  .post-publish-panel__postpublish-post-address-container .post-publish-panel__postpublish-post-address {
7661    flex: 1;
7662  }
7663  .post-publish-panel__postpublish-post-address-container input[readonly] {
7664    padding: 12px;
7665    background: #f0f0f0;
7666    border-color: #ccc;
7667    overflow: hidden;
7668    text-overflow: ellipsis;
7669    height: 36px;
7670  }
7671  
7672  .post-publish-panel__postpublish-post-address__copy-button-wrap {
7673    flex-shrink: 0;
7674    margin-right: 16px;
7675  }
7676  
7677  .post-publish-panel__postpublish-header {
7678    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
7679  }
7680  
7681  .post-publish-panel__postpublish-subheader {
7682    margin: 0 0 8px;
7683  }
7684  
7685  .post-publish-panel__tip {
7686    color: #f0b849;
7687  }
7688  
7689  @media screen and (max-width: 782px) {
7690    .post-publish-panel__postpublish-post-address__button-wrap .components-button {
7691      height: 40px;
7692    }
7693  }
7694  .editor-post-publish-panel {
7695    box-sizing: border-box;
7696  }
7697  .editor-post-publish-panel *,
7698  .editor-post-publish-panel *::before,
7699  .editor-post-publish-panel *::after {
7700    box-sizing: inherit;
7701  }
7702  .editor-post-publish-panel {
7703    position: fixed;
7704    z-index: 100001;
7705    background: #fff;
7706    top: 46px;
7707    bottom: 0;
7708    left: 0;
7709    right: 0;
7710    overflow: auto;
7711  }
7712  @media (min-width: 782px) {
7713    .editor-post-publish-panel {
7714      z-index: 99998;
7715      top: 32px;
7716      right: auto;
7717      width: 281px;
7718      border-right: 1px solid #ddd;
7719    }
7720  }
7721  @media (min-width: 782px) and (not (prefers-reduced-motion)) {
7722    .editor-post-publish-panel {
7723      transform: translateX(-100%);
7724      animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
7725    }
7726  }
7727  @media (min-width: 782px) {
7728    body.is-fullscreen-mode .editor-post-publish-panel {
7729      top: var(--wp-admin--admin-bar--height, 0);
7730    }
7731    [role=region]:focus .editor-post-publish-panel {
7732      transform: translateX(0%);
7733    }
7734  }
7735  
7736  @keyframes editor-post-publish-panel__slide-in-animation {
7737    100% {
7738      transform: translateX(0%);
7739    }
7740  }
7741  .editor-revisions-header__slider {
7742    width: 100%;
7743  }
7744  .editor-revisions-header__slider .components-range-control__tooltip {
7745    white-space: nowrap;
7746  }
7747  
7748  .editor-revisions-header__no-revisions {
7749    color: #757575;
7750    font-size: 13px;
7751  }
7752  
7753  .editor-revisions-canvas__loading {
7754    display: flex;
7755    align-items: center;
7756    justify-content: center;
7757    height: 100%;
7758  }
7759  
7760  .editor-revisions-canvas__content {
7761    display: flex;
7762    height: 100%;
7763  }
7764  .editor-revisions-canvas__content .editor-visual-editor {
7765    flex: 1;
7766    min-width: 0;
7767  }
7768  
7769  .revision-diff-markers {
7770    position: relative;
7771    flex-shrink: 0;
7772    width: max(16px, 1rem);
7773    background: rgba(0, 0, 0, 0.05);
7774  }
7775  .revision-diff-markers .revision-diff-marker {
7776    position: absolute;
7777    width: 100%;
7778    min-height: 4px;
7779    border: none;
7780    padding: 0;
7781    cursor: var(--wpds-cursor-control, pointer);
7782    transition: opacity 0.1s ease;
7783  }
7784  .revision-diff-markers .revision-diff-marker.is-added {
7785    background: #008a20;
7786  }
7787  .revision-diff-markers .revision-diff-marker.is-removed {
7788    background: repeating-linear-gradient(-45deg, #d63638, #d63638 6px, rgba(214, 54, 56, 0.45) 6px, rgba(214, 54, 56, 0.45) 8px);
7789  }
7790  .revision-diff-markers .revision-diff-marker.is-modified {
7791    background: repeating-linear-gradient(45deg, #9a7000, #9a7000 6px, rgba(154, 112, 0, 0.45) 6px, rgba(154, 112, 0, 0.45) 8px);
7792  }
7793  .revision-diff-markers .revision-diff-marker:hover {
7794    opacity: 0.7;
7795  }
7796  .revision-diff-markers .revision-diff-marker:focus {
7797    outline: 2px solid #1e1e1e;
7798    outline-offset: -2px;
7799  }
7800  
7801  .interface-complementary-area:has(.editor-post-revisions-timeline) {
7802    display: flex;
7803    flex-direction: column;
7804    overflow: hidden;
7805  }
7806  .interface-complementary-area:has(.editor-post-revisions-timeline) .editor-sidebar__panel-tabs {
7807    flex-shrink: 0;
7808  }
7809  
7810  .editor-sidebar__panel:has(.editor-post-revisions-timeline) {
7811    display: flex;
7812    flex-direction: column;
7813    flex: 1;
7814    min-height: 0;
7815  }
7816  .editor-sidebar__panel:has(.editor-post-revisions-timeline) [role=tabpanel]:has(.editor-post-revisions-timeline) {
7817    display: flex;
7818    flex-direction: column;
7819    flex: 1;
7820    min-height: 0;
7821  }
7822  .editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-revision-meta-diff__content {
7823    max-height: 80px;
7824    overflow-y: auto;
7825  }
7826  .editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-post-revisions-timeline {
7827    flex: 1;
7828    min-height: 0;
7829  }
7830  
7831  .editor-revision-fields-diff__value {
7832    word-break: break-word;
7833  }
7834  
7835  .editor-revision-fields-diff__added {
7836    background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
7837    text-decoration: none;
7838  }
7839  
7840  .editor-revision-fields-diff__removed {
7841    text-decoration: line-through;
7842    color: #d63638;
7843  }
7844  
7845  .editor-post-saved-state {
7846    display: flex;
7847    align-items: center;
7848    width: 28px;
7849    padding: 12px 4px;
7850    color: #757575;
7851    overflow: hidden;
7852    white-space: nowrap;
7853  }
7854  .editor-post-saved-state.is-saving[aria-disabled=true], .editor-post-saved-state.is-saving[aria-disabled=true]:hover, .editor-post-saved-state.is-saved[aria-disabled=true], .editor-post-saved-state.is-saved[aria-disabled=true]:hover {
7855    background: transparent;
7856    color: #757575;
7857  }
7858  .editor-post-saved-state svg {
7859    display: inline-block;
7860    flex: 0 0 auto;
7861    fill: currentColor;
7862    margin-left: 8px;
7863  }
7864  @media (min-width: 600px) {
7865    .editor-post-saved-state {
7866      width: auto;
7867      padding: 8px 12px;
7868      text-indent: inherit;
7869    }
7870    .editor-post-saved-state svg {
7871      margin-left: 0;
7872    }
7873  }
7874  
7875  .editor-post-save-draft.has-text.has-icon svg {
7876    margin-left: 0;
7877  }
7878  
7879  .editor-post-schedule__panel-dropdown {
7880    width: 100%;
7881  }
7882  
7883  .editor-post-schedule__dialog .components-popover__content {
7884    min-width: 320px;
7885    padding: 16px;
7886  }
7887  
7888  .editor-post-status {
7889    max-width: 100%;
7890  }
7891  .editor-post-status.is-read-only {
7892    padding: 6px 12px;
7893  }
7894  .editor-post-status .editor-post-status__toggle.editor-post-status__toggle {
7895    padding-top: 4px;
7896    padding-bottom: 4px;
7897  }
7898  
7899  .editor-change-status__password-fieldset,
7900  .editor-change-status__publish-date-wrapper {
7901    border-top: 1px solid #e0e0e0;
7902    padding-top: 16px;
7903  }
7904  
7905  .editor-change-status__content .components-popover__content {
7906    min-width: 320px;
7907    padding: 16px;
7908  }
7909  .editor-change-status__content .editor-change-status__password-legend {
7910    padding: 0;
7911    margin-bottom: 8px;
7912  }
7913  .editor-change-status__content p.components-base-control__help:has(.components-checkbox-control__help) {
7914    margin-top: 4px;
7915  }
7916  
7917  .editor-post-sticky__checkbox-control {
7918    border-top: 1px solid #e0e0e0;
7919    padding-top: 16px;
7920  }
7921  
7922  .editor-post-sync-status__value {
7923    padding: 6px 12px 6px 0;
7924  }
7925  
7926  .editor-post-taxonomies__hierarchical-terms-list {
7927    max-height: 14em;
7928    overflow: auto;
7929    margin-right: -6px;
7930    padding-right: 6px;
7931    margin-top: -6px;
7932    padding-top: 6px;
7933  }
7934  
7935  .editor-post-taxonomies__hierarchical-terms-choice {
7936    margin-bottom: 8px;
7937  }
7938  .editor-post-taxonomies__hierarchical-terms-choice:last-child {
7939    margin-bottom: 4px;
7940  }
7941  
7942  .editor-post-taxonomies__hierarchical-terms-subchoices {
7943    margin-top: 8px;
7944    margin-right: 16px;
7945  }
7946  
7947  .editor-post-taxonomies__flat-term-most-used .editor-post-taxonomies__flat-term-most-used-label {
7948    margin-bottom: 4px;
7949  }
7950  
7951  .editor-post-taxonomies__flat-term-most-used-list {
7952    margin: 0;
7953  }
7954  .editor-post-taxonomies__flat-term-most-used-list li {
7955    display: inline-block;
7956    margin-left: 8px;
7957  }
7958  
7959  .editor-sync-connection-error-modal {
7960    z-index: 1000001;
7961  }
7962  
7963  .editor-sync-connection-error-modal p {
7964    margin: 0;
7965  }
7966  
7967  .editor-sync-connection-error-modal__retry-countdown {
7968    color: #757575;
7969  }
7970  
7971  .editor-post-template__swap-template-modal {
7972    z-index: 1000001;
7973  }
7974  .editor-post-template__swap-template-modal .editor-post-template__swap-template-search {
7975    background: #fff;
7976    position: sticky;
7977    top: 0;
7978    padding: 16px 0;
7979    transform: translateY(-4px);
7980    margin-bottom: -4px;
7981    z-index: 2;
7982  }
7983  
7984  .editor-post-template__create-template-modal {
7985    z-index: 1000001;
7986  }
7987  
7988  .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7989    -moz-column-count: 2;
7990         column-count: 2;
7991    -moz-column-gap: 24px;
7992         column-gap: 24px;
7993    padding-top: 2px;
7994  }
7995  @media (min-width: 782px) {
7996    .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7997      -moz-column-count: 3;
7998           column-count: 3;
7999    }
8000  }
8001  @media (min-width: 1280px) {
8002    .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8003      -moz-column-count: 4;
8004           column-count: 4;
8005    }
8006  }
8007  .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8008    -moz-column-break-inside: avoid;
8009         break-inside: avoid-column;
8010  }
8011  
8012  .editor-post-template__dropdown .components-popover__content {
8013    min-width: 240px;
8014  }
8015  .editor-post-template__dropdown .components-button.is-pressed,
8016  .editor-post-template__dropdown .components-button.is-pressed:hover {
8017    background: inherit;
8018    color: inherit;
8019  }
8020  
8021  .editor-post-template__classic-theme-dropdown {
8022    padding: 8px;
8023  }
8024  
8025  .editor-template-actions-panel__preview .block-editor-block-preview__container {
8026    display: flex;
8027    aspect-ratio: 4/3;
8028    overflow: hidden;
8029    border-radius: 4px;
8030  }
8031  .editor-template-actions-panel__preview .block-editor-block-preview__container::after {
8032    outline: 1px solid rgba(0, 0, 0, 0.1);
8033    outline-offset: -1px;
8034    border-radius: 4px;
8035  }
8036  @media not (prefers-reduced-motion) {
8037    .editor-template-actions-panel__preview .block-editor-block-preview__container::after {
8038      transition: outline 0.1s linear;
8039    }
8040  }
8041  .editor-template-actions-panel__preview[role=button] {
8042    cursor: var(--wpds-cursor-control, pointer);
8043  }
8044  .editor-template-actions-panel__preview[role=button]:hover .block-editor-block-preview__container::after {
8045    outline-color: rgba(0, 0, 0, 0.3);
8046  }
8047  .editor-template-actions-panel__preview[role=button]:focus-visible .block-editor-block-preview__container::after {
8048    outline-color: var(--wp-admin-theme-color);
8049    outline-width: var(--wp-admin-border-width-focus);
8050    outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
8051  }
8052  
8053  .editor-template-actions-panel__action {
8054    flex: 1;
8055    justify-content: center;
8056  }
8057  
8058  textarea.editor-post-text-editor {
8059    border: 1px solid #949494;
8060    border-radius: 0;
8061    display: block;
8062    margin: 0;
8063    width: 100%;
8064    box-shadow: none;
8065    resize: none;
8066    overflow: hidden;
8067    font-family: Menlo, Consolas, monaco, monospace;
8068    line-height: 2.4;
8069    min-height: 200px;
8070  }
8071  @media not (prefers-reduced-motion) {
8072    textarea.editor-post-text-editor {
8073      transition: border 0.1s ease-out, box-shadow 0.1s linear;
8074    }
8075  }
8076  textarea.editor-post-text-editor {
8077    padding: 16px;
8078  }
8079  @media (min-width: 600px) {
8080    textarea.editor-post-text-editor {
8081      padding: 24px;
8082    }
8083  }
8084  textarea.editor-post-text-editor {
8085    /* Fonts smaller than 16px causes mobile safari to zoom. */
8086    font-size: 16px !important;
8087  }
8088  @media (min-width: 600px) {
8089    textarea.editor-post-text-editor {
8090      font-size: 15px !important;
8091    }
8092  }
8093  textarea.editor-post-text-editor:focus {
8094    border-color: var(--wp-admin-theme-color);
8095    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8096    position: relative;
8097  }
8098  textarea.editor-post-text-editor::-moz-placeholder {
8099    color: rgba(30, 30, 30, 0.62);
8100  }
8101  textarea.editor-post-text-editor::placeholder {
8102    color: rgba(30, 30, 30, 0.62);
8103  }
8104  
8105  .editor-post-title.is-raw-text {
8106    margin-bottom: 24px;
8107    margin-top: 2px;
8108    max-width: none;
8109  }
8110  
8111  .editor-post-url__panel-dropdown {
8112    width: 100%;
8113  }
8114  
8115  .editor-post-url__panel-dialog .editor-post-url {
8116    min-width: 248px;
8117    margin: 8px;
8118  }
8119  .editor-post-url__link,
8120  .editor-post-url__front-page-link {
8121    direction: ltr;
8122    word-break: break-word;
8123  }
8124  .editor-post-url__front-page-link {
8125    padding: 6px 12px;
8126    border-radius: 2px;
8127    color: var(--wp-admin-theme-color);
8128  }
8129  .editor-post-url__front-page-link:hover {
8130    background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
8131    color: var(--wp-admin-theme-color-darker-20, #183ad6);
8132  }
8133  .editor-post-url__front-page-link:focus {
8134    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8135    color: var(--wp-admin-theme-color);
8136    outline: 3px solid rgba(0, 0, 0, 0);
8137  }
8138  
8139  .editor-post-url__link-slug {
8140    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
8141  }
8142  
8143  .editor-post-url__input input.components-input-control__input {
8144    padding-inline-start: 0 !important;
8145  }
8146  
8147  .editor-post-url__panel-toggle,
8148  .editor-post-parent__panel-toggle {
8149    word-break: break-word;
8150  }
8151  
8152  .editor-post-url__intro {
8153    margin: 0;
8154  }
8155  
8156  .editor-post-url__permalink {
8157    margin-top: 8px;
8158    margin-bottom: 0;
8159  }
8160  .editor-post-url__permalink-visual-label {
8161    display: block;
8162  }
8163  
8164  .editor-posts-per-page-dropdown__content .components-popover__content {
8165    min-width: 320px;
8166    padding: 16px;
8167  }
8168  
8169  .editor-post-trash.components-button {
8170    flex-grow: 1;
8171    justify-content: center;
8172  }
8173  
8174  .editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
8175    padding-left: 4px;
8176    padding-right: 6px;
8177  }
8178  
8179  @media (prefers-reduced-motion: no-preference) {
8180    .editor-resizable-editor:not(.is-resizing) {
8181      transition: width 0.2s ease-out;
8182    }
8183  }
8184  
8185  .editor-resizable-editor.is-resizable {
8186    overflow: visible;
8187    margin: 0 auto;
8188  }
8189  
8190  .editor-resizable-editor__resize-handle {
8191    position: absolute;
8192    top: 0;
8193    bottom: 0;
8194    padding: 0;
8195    margin: auto 0;
8196    width: 12px;
8197    -webkit-appearance: none;
8198       -moz-appearance: none;
8199            appearance: none;
8200    cursor: ew-resize;
8201    outline: none;
8202    background: none;
8203    border-radius: 9999px;
8204    border: 0;
8205    height: 100px;
8206  }
8207  .editor-resizable-editor__resize-handle::after {
8208    position: absolute;
8209    top: 16px;
8210    right: 4px;
8211    left: 0;
8212    bottom: 16px;
8213    content: "";
8214    width: 4px;
8215    background-color: rgba(117, 117, 117, 0.4);
8216    border-radius: 9999px;
8217  }
8218  .editor-resizable-editor__resize-handle.is-left {
8219    right: -18px;
8220  }
8221  .editor-resizable-editor__resize-handle.is-right {
8222    left: -18px;
8223  }
8224  .editor-resizable-editor__resize-handle:hover, .editor-resizable-editor__resize-handle:focus, .editor-resizable-editor__resize-handle:active {
8225    opacity: 1;
8226  }
8227  .editor-resizable-editor__resize-handle:hover::after, .editor-resizable-editor__resize-handle:focus::after, .editor-resizable-editor__resize-handle:active::after {
8228    background-color: var(--wp-admin-theme-color);
8229  }
8230  
8231  .editor-layout__toggle-publish-panel,
8232  .editor-layout__toggle-sidebar-panel,
8233  .editor-layout__toggle-entities-saved-states-panel {
8234    z-index: 100000;
8235    position: fixed !important;
8236    top: -9999em;
8237    bottom: auto;
8238    right: auto;
8239    left: 0;
8240    box-sizing: border-box;
8241    width: 280px;
8242    background-color: #fff;
8243    border: 1px dotted #ddd;
8244    height: auto !important;
8245    padding: 24px;
8246    display: flex;
8247    justify-content: center;
8248  }
8249  
8250  .interface-interface-skeleton__actions:focus .editor-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-entities-saved-states-panel,
8251  .interface-interface-skeleton__actions:focus .editor-layout__toggle-publish-panel,
8252  .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-publish-panel {
8253    top: auto;
8254    bottom: 0;
8255  }
8256  
8257  .editor-start-page-options__modal .editor-start-page-options__modal__actions {
8258    position: absolute;
8259    bottom: 0;
8260    width: 100%;
8261    height: 72px;
8262    background-color: #fff;
8263    margin-right: -32px;
8264    margin-left: -32px;
8265    padding-right: 32px;
8266    padding-left: 32px;
8267    border-top: 1px solid #ddd;
8268    z-index: 1;
8269  }
8270  .editor-start-page-options__modal .block-editor-block-patterns-list {
8271    padding-bottom: 72px;
8272  }
8273  
8274  .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8275    -moz-column-count: 2;
8276         column-count: 2;
8277    -moz-column-gap: 24px;
8278         column-gap: 24px;
8279  }
8280  @media (min-width: 782px) {
8281    .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8282      -moz-column-count: 3;
8283           column-count: 3;
8284    }
8285  }
8286  @media (min-width: 1280px) {
8287    .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8288      -moz-column-count: 4;
8289           column-count: 4;
8290    }
8291  }
8292  .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8293    -moz-column-break-inside: avoid;
8294         break-inside: avoid-column;
8295    margin-bottom: 24px;
8296  }
8297  .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8298    min-height: 100px;
8299  }
8300  .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__content {
8301    width: 100%;
8302  }
8303  
8304  .editor-start-template-options__modal .editor-start-template-options__modal__actions {
8305    position: absolute;
8306    bottom: 0;
8307    width: 100%;
8308    height: 92px;
8309    background-color: #fff;
8310    margin-right: -32px;
8311    margin-left: -32px;
8312    padding-right: 32px;
8313    padding-left: 32px;
8314    border-top: 1px solid #ddd;
8315    z-index: 1;
8316  }
8317  .editor-start-template-options__modal .block-editor-block-patterns-list {
8318    padding-bottom: 92px;
8319  }
8320  
8321  .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8322    -moz-column-count: 2;
8323         column-count: 2;
8324    -moz-column-gap: 24px;
8325         column-gap: 24px;
8326  }
8327  @media (min-width: 782px) {
8328    .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8329      -moz-column-count: 3;
8330           column-count: 3;
8331    }
8332  }
8333  @media (min-width: 1280px) {
8334    .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8335      -moz-column-count: 4;
8336           column-count: 4;
8337    }
8338  }
8339  .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8340    -moz-column-break-inside: avoid;
8341         break-inside: avoid-column;
8342  }
8343  .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
8344    display: none;
8345  }
8346  
8347  .components-panel__header.editor-sidebar__panel-tabs {
8348    padding-right: 0;
8349    padding-left: 8px;
8350  }
8351  .components-panel__header.editor-sidebar__panel-tabs .components-button.has-icon {
8352    padding: 0;
8353  }
8354  @media (min-width: 782px) {
8355    .components-panel__header.editor-sidebar__panel-tabs .components-button.has-icon {
8356      display: flex;
8357    }
8358  }
8359  
8360  .editor-post-summary .components-v-stack:empty {
8361    display: none;
8362  }
8363  
8364  .editor-sidebar {
8365    box-sizing: border-box;
8366  }
8367  .editor-sidebar *,
8368  .editor-sidebar *::before,
8369  .editor-sidebar *::after {
8370    box-sizing: inherit;
8371  }
8372  .editor-sidebar__revisions-block-message {
8373    padding: 16px;
8374    color: #757575;
8375    font-size: 13px;
8376  }
8377  
8378  .fields-controls__password {
8379    border-top: 1px solid #e0e0e0;
8380    padding-top: 16px;
8381  }
8382  
8383  .editor-site-discussion-dropdown__content .components-popover__content {
8384    min-width: 320px;
8385    padding: 16px;
8386  }
8387  
8388  .editor-style-book {
8389    height: 100%;
8390  }
8391  .editor-style-book.is-button {
8392    border-radius: 8px;
8393  }
8394  
8395  .editor-style-book__iframe {
8396    display: block;
8397    height: 100%;
8398    width: 100%;
8399  }
8400  .editor-style-book__iframe.is-button {
8401    border-radius: 8px;
8402  }
8403  .editor-style-book__iframe.is-focused {
8404    outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
8405    outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
8406  }
8407  
8408  .editor-style-book__tabs {
8409    height: 100%;
8410    display: flex;
8411    flex-direction: column;
8412  }
8413  
8414  .editor-style-book__tablist-container {
8415    flex: none;
8416    display: flex;
8417    width: 100%;
8418    padding-left: 56px;
8419    background: #fff;
8420  }
8421  
8422  .editor-style-book__tabpanel {
8423    flex: 1 0 auto;
8424    overflow: auto;
8425  }
8426  
8427  .editor-styles-canvas {
8428    height: 100%;
8429    padding: 24px;
8430    background-color: var(--wp-editor-canvas-background);
8431  }
8432  .editor-styles-canvas iframe {
8433    display: block;
8434    width: 100%;
8435    height: 100%;
8436  }
8437  
8438  .editor-styles-canvas__section {
8439    background: #fff;
8440    bottom: 0;
8441    right: 0;
8442    overflow: hidden;
8443    position: absolute;
8444    left: 0;
8445    top: 0;
8446  }
8447  @media not (prefers-reduced-motion) {
8448    .editor-styles-canvas__section {
8449      transition: all 0.3s;
8450    }
8451  }
8452  
8453  .editor-styles-canvas__close-button {
8454    position: absolute;
8455    left: 8px;
8456    top: 8px;
8457    z-index: 2;
8458    background: #fff;
8459  }
8460  
8461  .table-of-contents__popover.components-popover .components-popover__content {
8462    min-width: 380px;
8463  }
8464  
8465  .components-popover.table-of-contents__popover {
8466    z-index: 99998;
8467  }
8468  
8469  .table-of-contents__popover .components-popover__content {
8470    padding: 16px;
8471  }
8472  @media (min-width: 600px) {
8473    .table-of-contents__popover .components-popover__content {
8474      max-height: calc(100vh - 120px);
8475      overflow-y: auto;
8476    }
8477  }
8478  .table-of-contents__popover hr {
8479    margin: 10px -16px 0;
8480  }
8481  
8482  .table-of-contents__wrapper:focus::before {
8483    content: "";
8484    display: block;
8485    position: absolute;
8486    top: 0;
8487    left: 0;
8488    bottom: 0;
8489    right: 0;
8490    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8491    pointer-events: none;
8492  }
8493  
8494  .table-of-contents__counts {
8495    display: flex;
8496    flex-wrap: wrap;
8497    margin: 0;
8498    margin-top: -8px;
8499  }
8500  
8501  .table-of-contents__count {
8502    flex-basis: 33%;
8503    display: flex;
8504    flex-direction: column;
8505    font-size: 13px;
8506    color: #1e1e1e;
8507    padding-left: 8px;
8508    margin-bottom: 0;
8509    margin-top: 8px;
8510  }
8511  .table-of-contents__count:nth-child(4n) {
8512    padding-left: 0;
8513  }
8514  
8515  .table-of-contents__number,
8516  .table-of-contents__popover .word-count {
8517    font-size: 21px;
8518    font-weight: 400;
8519    line-height: 30px;
8520    color: #1e1e1e;
8521  }
8522  
8523  .table-of-contents__title {
8524    display: block;
8525    margin-top: 20px;
8526    font-size: 15px;
8527    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
8528  }
8529  
8530  .editor-text-editor {
8531    box-sizing: border-box;
8532  }
8533  .editor-text-editor *,
8534  .editor-text-editor *::before,
8535  .editor-text-editor *::after {
8536    box-sizing: inherit;
8537  }
8538  .editor-text-editor {
8539    position: relative;
8540    isolation: isolate;
8541    width: 100%;
8542    background-color: #fff;
8543    flex-grow: 1;
8544  }
8545  .editor-text-editor .editor-post-title:not(.is-raw-text),
8546  .editor-text-editor .editor-post-title.is-raw-text textarea {
8547    max-width: none;
8548    line-height: 1.4;
8549    font-family: Menlo, Consolas, monaco, monospace;
8550    font-size: 2.5em;
8551    font-weight: normal;
8552    border: 1px solid #949494;
8553    border-radius: 0;
8554    padding: 16px;
8555  }
8556  @media (min-width: 600px) {
8557    .editor-text-editor .editor-post-title:not(.is-raw-text),
8558    .editor-text-editor .editor-post-title.is-raw-text textarea {
8559      padding: 24px;
8560    }
8561  }
8562  .editor-text-editor .editor-post-title:not(.is-raw-text):focus,
8563  .editor-text-editor .editor-post-title.is-raw-text textarea:focus {
8564    border-color: var(--wp-admin-theme-color);
8565    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8566  }
8567  
8568  .editor-text-editor__body {
8569    width: 100%;
8570    padding: 0 12px 12px 12px;
8571    max-width: 1080px;
8572    margin-right: auto;
8573    margin-left: auto;
8574  }
8575  @media (min-width: 960px) {
8576    .editor-text-editor__body {
8577      padding: 0 24px 24px 24px;
8578    }
8579  }
8580  
8581  .editor-text-editor__toolbar {
8582    position: sticky;
8583    z-index: 1;
8584    top: 0;
8585    right: 0;
8586    left: 0;
8587    display: flex;
8588    background: rgba(255, 255, 255, 0.8);
8589    padding: 4px 12px;
8590  }
8591  @media (min-width: 600px) {
8592    .editor-text-editor__toolbar {
8593      padding: 12px;
8594    }
8595  }
8596  @media (min-width: 960px) {
8597    .editor-text-editor__toolbar {
8598      padding: 12px 24px;
8599    }
8600  }
8601  .editor-text-editor__toolbar h2 {
8602    line-height: 40px;
8603    margin: 0 0 0 auto;
8604    font-size: 13px;
8605    color: #1e1e1e;
8606  }
8607  
8608  .editor-upload-progress-snackbar__spinner,
8609  .editor-upload-progress-snackbar__check {
8610    display: inline-flex;
8611    align-items: center;
8612    justify-content: center;
8613    width: 24px;
8614    height: 24px;
8615  }
8616  
8617  .editor-upload-progress-snackbar__spinner .components-spinner {
8618    margin: 0;
8619  }
8620  
8621  .editor-upload-progress-snackbar__check svg {
8622    width: 24px;
8623    height: 24px;
8624    fill: currentColor;
8625  }
8626  
8627  .editor-visual-editor {
8628    position: relative;
8629    display: flex;
8630    max-height: 100%;
8631    background-color: var(--wp-editor-canvas-background);
8632  }
8633  .editor-visual-editor iframe[name=editor-canvas] {
8634    background-color: transparent;
8635  }
8636  .editor-visual-editor {
8637    align-items: center;
8638  }
8639  @media (prefers-reduced-motion: no-preference) {
8640    .editor-visual-editor {
8641      transition: padding 0.2s ease-out;
8642    }
8643  }
8644  .editor-visual-editor.has-vertical-padding {
8645    padding-top: 24px;
8646    padding-bottom: 24px;
8647  }
8648  .editor-visual-editor.has-horizontal-padding {
8649    padding-right: 24px;
8650    padding-left: 24px;
8651  }
8652  .editor-visual-editor {
8653    overflow: hidden;
8654  }
8655  .editor-visual-editor .components-button {
8656    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
8657    font-size: 13px;
8658    padding: 6px 12px;
8659  }
8660  .editor-visual-editor .components-button.is-tertiary, .editor-visual-editor .components-button.has-icon {
8661    padding: 6px;
8662  }
8663  
8664  .editor-fields-content-preview {
8665    display: flex;
8666    flex-direction: column;
8667    height: 100%;
8668    border-radius: 4px;
8669  }
8670  .dataviews-view-table .editor-fields-content-preview {
8671    width: 96px;
8672    flex-grow: 0;
8673  }
8674  .editor-fields-content-preview .block-editor-block-preview__container,
8675  .editor-fields-content-preview .editor-fields-content-preview__empty {
8676    margin-top: auto;
8677    margin-bottom: auto;
8678  }
8679  
8680  .editor-fields-content-preview__empty {
8681    text-align: center;
8682  }
8683  
8684  .editor-push-changes-to-global-styles-control .components-button {
8685    justify-content: center;
8686    width: 100%;
8687  }


Generated : Wed Jul 15 08:20:16 2026 Cross-referenced by PHPXref