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