[Summary view] [Print] [Text view]

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