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