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