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