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