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