[Summary view] [Print] [Text view]

   1  /**
   2   * Typography
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Colors
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Standard focus rings for the WordPress Design System.
  72   *
  73   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  74   * e.g. `&:focus { @include outset-ring__focus(); }`.
  75   */
  76  /**
  77   * Applies editor left position to the selector passed as argument
  78   */
  79  /**
  80   * Styles that are reused verbatim in a few places
  81   */
  82  /**
  83   * Allows users to opt-out of animations via OS-level preferences.
  84   */
  85  /**
  86   * Reset default styles for JavaScript UI based pages.
  87   * This is a WP-admin agnostic reset
  88   */
  89  /**
  90   * Reset the WP Admin page styles for Gutenberg-like pages.
  91   */
  92  /**
  93   * Creates a checkerboard pattern background to indicate transparency.
  94   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  95   */
  96  :root {
  97    --wp-block-synced-color: #7a00df;
  98    --wp-block-synced-color--rgb: 122, 0, 223;
  99    --wp-bound-block-color: var(--wp-block-synced-color);
 100    --wp-editor-canvas-background: #ddd;
 101    --wp-admin-theme-color: #007cba;
 102    --wp-admin-theme-color--rgb: 0, 124, 186;
 103    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
 104    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
 105    --wp-admin-theme-color-darker-20: #005a87;
 106    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
 107    --wp-admin-border-width-focus: 2px;
 108  }
 109  @media (min-resolution: 192dpi) {
 110    :root {
 111      --wp-admin-border-width-focus: 1.5px;
 112    }
 113  }
 114  
 115  /**
 116   * Typography
 117   */
 118  /**
 119   * SCSS Variables.
 120   *
 121   * Please use variables from this sheet to ensure consistency across the UI.
 122   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 123   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 124   */
 125  /**
 126   * Colors
 127   */
 128  /**
 129   * Fonts & basic variables.
 130   */
 131  /**
 132   * Typography
 133   */
 134  /**
 135   * Grid System.
 136   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 137   */
 138  /**
 139   * Radius scale.
 140   */
 141  /**
 142   * Elevation scale.
 143   */
 144  /**
 145   * Dimensions.
 146   */
 147  /**
 148   * Mobile specific styles
 149   */
 150  /**
 151   * Editor styles.
 152   */
 153  /**
 154   * Block & Editor UI.
 155   */
 156  /**
 157   * Block paddings.
 158   */
 159  /**
 160   * React Native specific.
 161   * These variables do not appear to be used anywhere else.
 162   */
 163  /**
 164   * Breakpoints & Media Queries
 165   */
 166  /**
 167  *  Converts a hex value into the rgb equivalent.
 168  *
 169  * @param {string} hex - the hexadecimal value to convert
 170  * @return {string} comma separated rgb values
 171  */
 172  /**
 173   * Long content fade mixin
 174   *
 175   * Creates a fading overlay to signify that the content is longer
 176   * than the space allows.
 177   */
 178  /**
 179   * Breakpoint mixins
 180   */
 181  /**
 182   * Focus styles.
 183   */
 184  /**
 185   * Standard focus rings for the WordPress Design System.
 186   *
 187   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
 188   * e.g. `&:focus { @include outset-ring__focus(); }`.
 189   */
 190  /**
 191   * Applies editor left position to the selector passed as argument
 192   */
 193  /**
 194   * Styles that are reused verbatim in a few places
 195   */
 196  /**
 197   * Allows users to opt-out of animations via OS-level preferences.
 198   */
 199  /**
 200   * Reset default styles for JavaScript UI based pages.
 201   * This is a WP-admin agnostic reset
 202   */
 203  /**
 204   * Reset the WP Admin page styles for Gutenberg-like pages.
 205   */
 206  /**
 207   * Creates a checkerboard pattern background to indicate transparency.
 208   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 209   */
 210  .dataviews-wrapper,
 211  .dataviews-picker-wrapper {
 212    height: 100%;
 213    flex-grow: 1;
 214    min-height: 0;
 215    box-sizing: border-box;
 216    scroll-padding-bottom: 64px;
 217    container: dataviews-wrapper/inline-size;
 218    display: flex;
 219    flex-direction: column;
 220    font-size: var(--wpds-typography-font-size-md, 13px);
 221    line-height: var(--wpds-typography-line-height-sm, 20px);
 222    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
 223  }
 224  
 225  .dataviews__view-actions,
 226  .dataviews-filters__container {
 227    box-sizing: border-box;
 228    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 229    flex-shrink: 0;
 230    position: sticky;
 231    right: 0;
 232    background-color: inherit;
 233  }
 234  
 235  @media not (prefers-reduced-motion) {
 236    .dataviews__view-actions,
 237    .dataviews-filters__container {
 238      transition: padding ease-out 0.1s;
 239    }
 240  }
 241  .dataviews__search {
 242    flex-grow: 1;
 243  }
 244  
 245  .dataviews__search .dataviews-search {
 246    flex-basis: 210px;
 247  }
 248  
 249  .dataviews-no-results,
 250  .dataviews-loading {
 251    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
 252    flex-grow: 1;
 253    display: flex;
 254    align-items: center;
 255    justify-content: center;
 256  }
 257  
 258  @media not (prefers-reduced-motion) {
 259    .dataviews-no-results,
 260    .dataviews-loading {
 261      transition: padding ease-out 0.1s;
 262    }
 263  }
 264  .dataviews-no-results.is-refreshing {
 265    opacity: 0.5;
 266    pointer-events: none;
 267  }
 268  
 269  @media not (prefers-reduced-motion) {
 270    .dataviews-no-results.is-refreshing {
 271      opacity: 1;
 272      animation: dataviews-pulse 1s ease-in-out infinite;
 273    }
 274  }
 275  @keyframes dataviews-pulse {
 276    0%, 100% {
 277      opacity: 1;
 278    }
 279    50% {
 280      opacity: 0.5;
 281    }
 282  }
 283  .dataviews-loading-more {
 284    text-align: center;
 285  }
 286  
 287  .dataviews-loading-more[aria-hidden=true] {
 288    visibility: hidden;
 289  }
 290  
 291  @container (max-width: 430px) {
 292    .dataviews__view-actions,
 293    .dataviews-filters__container {
 294      padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
 295    }
 296  }
 297  .dataviews-title-field {
 298    font-size: var(--wpds-typography-font-size-md, 13px);
 299    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 300    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 301    text-overflow: ellipsis;
 302    white-space: nowrap;
 303    width: 100%;
 304  }
 305  
 306  .dataviews-title-field a {
 307    text-decoration: none;
 308    text-overflow: ellipsis;
 309    white-space: nowrap;
 310    overflow: hidden;
 311    display: block;
 312    flex-grow: 0;
 313    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 314  }
 315  
 316  .dataviews-title-field a:hover {
 317    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 318  }
 319  
 320  .dataviews-title-field a:focus {
 321    color: var(--wp-admin-theme-color--rgb);
 322    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
 323    border-radius: 2px;
 324  }
 325  
 326  .dataviews-title-field button.components-button.is-link {
 327    text-decoration: none;
 328    font-weight: inherit;
 329    text-overflow: ellipsis;
 330    white-space: nowrap;
 331    overflow: hidden;
 332    display: block;
 333    width: 100%;
 334    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
 335  }
 336  
 337  .dataviews-title-field button.components-button.is-link:hover {
 338    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 339  }
 340  
 341  .dataviews-title-field--clickable {
 342    cursor: var(--wpds-cursor-control, pointer);
 343    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 344  }
 345  
 346  .dataviews-title-field--clickable:hover {
 347    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 348  }
 349  
 350  .dataviews-title-field--clickable:focus {
 351    color: var(--wp-admin-theme-color--rgb);
 352    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
 353    border-radius: 2px;
 354  }
 355  
 356  .dataviews__view-actions--infinite-scroll {
 357    position: sticky;
 358    top: 0;
 359    z-index: 2;
 360    background-color: #fff;
 361  }
 362  
 363  /**
 364   * When DataViews are placed within cards, apply a consistent top padding.
 365   */
 366  .components-card__body:has(> .dataviews-wrapper),
 367  .components-card__body:has(> .dataviews-picker-wrapper) {
 368    padding: var(--wpds-dimension-padding-sm, 8px) 0 0;
 369    overflow: hidden;
 370  }
 371  
 372  .dataviews-bulk-actions-footer__item-count {
 373    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 374  }
 375  
 376  .dataviews-bulk-actions-footer__container {
 377    margin-left: auto;
 378    min-height: var(--wpds-dimension-size-md, 32px);
 379  }
 380  
 381  .dataviews-layout__container {
 382    flex: 1;
 383    min-height: 0;
 384    overflow: auto;
 385    display: flex;
 386    flex-direction: column;
 387    background-color: inherit;
 388  }
 389  
 390  .dataviews-filters__button {
 391    position: relative;
 392  }
 393  
 394  .dataviews-filters__container {
 395    padding-top: 0;
 396  }
 397  
 398  .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:hover {
 399    opacity: 0;
 400  }
 401  
 402  .dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled=true]:focus {
 403    opacity: 1;
 404  }
 405  
 406  .dataviews-filters__summary-popover {
 407    font-size: var(--wpds-typography-font-size-md, 13px);
 408    line-height: var(--wpds-typography-line-height-sm, 20px);
 409  }
 410  
 411  .dataviews-filters__summary-popover .components-popover__content {
 412    width: 100%;
 413    min-width: 230px;
 414    max-width: 250px;
 415    border-radius: var(--wpds-border-radius-md, 4px);
 416  }
 417  
 418  .dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
 419    padding: 0;
 420  }
 421  
 422  .dataviews-filters__summary-operators-container {
 423    padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-lg, 16px);
 424  }
 425  
 426  .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) {
 427    border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
 428  }
 429  
 430  .dataviews-filters__summary-operators-container:empty {
 431    display: none;
 432  }
 433  
 434  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
 435    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 436    white-space: nowrap;
 437    overflow: hidden;
 438    text-overflow: ellipsis;
 439    flex-shrink: 0; /* Prevents this element from shrinking */
 440    max-width: calc(100% - 55px);
 441  }
 442  
 443  .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
 444    width: 100%;
 445    min-width: 0;
 446    white-space: nowrap;
 447  }
 448  
 449  .dataviews-filters__summary-chip-container {
 450    position: relative;
 451    white-space: pre-wrap;
 452  }
 453  
 454  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip {
 455    border-radius: var(--wpds-border-radius-lg, 8px);
 456    border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
 457    cursor: var(--wpds-cursor-control, pointer);
 458    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
 459    min-height: var(--wpds-dimension-size-md, 32px);
 460    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 461    position: relative;
 462    display: flex;
 463    align-items: center;
 464    box-sizing: border-box;
 465  }
 466  
 467  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.is-not-clickable {
 468    cursor: default;
 469  }
 470  
 471  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
 472    padding-inline-end: calc(var(--wpds-dimension-size-sm, 24px) + var(--wpds-dimension-padding-xs, 4px));
 473  }
 474  
 475  .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] {
 476    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 477    border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
 478    background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
 479  }
 480  
 481  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-values {
 482    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 483    background: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
 484    border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 485  }
 486  
 487  .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] {
 488    color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
 489    background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
 490    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
 491  }
 492  
 493  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip:focus-visible {
 494    outline: none;
 495    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));
 496  }
 497  
 498  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
 499    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 500  }
 501  
 502  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
 503    width: var(--wpds-dimension-size-sm, 24px);
 504    height: var(--wpds-dimension-size-sm, 24px);
 505    border-radius: var(--wpds-border-radius-md, 4px);
 506    border: 0;
 507    padding: 0;
 508    position: absolute;
 509    left: var(--wpds-dimension-padding-xs, 4px);
 510    top: 50%;
 511    transform: translateY(-50%);
 512    display: flex;
 513    align-items: center;
 514    justify-content: center;
 515    background: transparent;
 516    cursor: var(--wpds-cursor-control, pointer);
 517  }
 518  
 519  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
 520    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 521  }
 522  
 523  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
 524    background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
 525  }
 526  
 527  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
 528    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
 529  }
 530  
 531  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
 532    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 533  }
 534  
 535  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
 536    background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
 537  }
 538  
 539  .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus-visible {
 540    outline: none;
 541    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));
 542  }
 543  
 544  .dataviews-filters__search-widget-filter-combobox-list {
 545    max-height: 184px;
 546    padding: var(--wpds-dimension-padding-xs, 4px);
 547    overflow: auto;
 548    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
 549  }
 550  
 551  .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
 552    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 553  }
 554  
 555  .dataviews-filters__search-widget-listbox {
 556    padding: var(--wpds-dimension-padding-xs, 4px);
 557    overflow: auto;
 558  }
 559  
 560  .dataviews-filters__search-widget-listitem {
 561    display: flex;
 562    align-items: center;
 563    gap: var(--wpds-dimension-gap-md, 12px);
 564    border-radius: var(--wpds-border-radius-sm, 2px);
 565    box-sizing: border-box;
 566    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
 567    cursor: default;
 568    min-height: var(--wpds-dimension-size-md, 32px);
 569    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 570    font-weight: var(--wpds-typography-font-weight-default, 400);
 571    font-size: 13px;
 572    line-height: 20px;
 573    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 574  }
 575  
 576  .dataviews-filters__search-widget-listitem:last-child {
 577    margin-block-end: 0;
 578  }
 579  
 580  .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
 581    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
 582    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
 583  }
 584  
 585  .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 {
 586    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
 587    background: var(--wpds-color-background-surface-neutral-strong, #fff);
 588  }
 589  
 590  .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 {
 591    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
 592    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
 593  }
 594  
 595  .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 {
 596    /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
 597    background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
 598    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
 599  }
 600  
 601  .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 {
 602    border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
 603    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
 604  }
 605  
 606  .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 {
 607    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
 608  }
 609  
 610  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
 611    overflow: hidden;
 612    text-overflow: ellipsis;
 613    white-space: nowrap;
 614    min-width: 0;
 615  }
 616  
 617  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
 618    display: block;
 619    overflow: hidden;
 620    text-overflow: ellipsis;
 621    font-size: var(--wpds-typography-font-size-sm, 12px);
 622    line-height: 16px;
 623    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
 624  }
 625  
 626  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
 627    border: 1px solid #1e1e1e;
 628    margin-left: 12px;
 629    transition: none;
 630    border-radius: 50%;
 631    width: 24px;
 632    height: 24px;
 633    min-width: 24px;
 634    max-width: 24px;
 635    position: relative;
 636  }
 637  
 638  @media not (prefers-reduced-motion) {
 639    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
 640      transition: box-shadow 0.1s linear;
 641    }
 642  }
 643  @media (min-width: 600px) {
 644    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
 645      height: 16px;
 646      width: 16px;
 647      min-width: 16px;
 648      max-width: 16px;
 649    }
 650  }
 651  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
 652    box-sizing: inherit;
 653    width: 12px;
 654    height: 12px;
 655    position: absolute;
 656    top: 50%;
 657    right: 50%;
 658    transform: translate(50%, -50%);
 659    margin: 0;
 660    background-color: #fff;
 661    border: 4px solid #fff;
 662  }
 663  
 664  @media (min-width: 600px) {
 665    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
 666      width: 8px;
 667      height: 8px;
 668    }
 669  }
 670  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
 671    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
 672    outline: 2px solid transparent;
 673  }
 674  
 675  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
 676    background: var(--wp-admin-theme-color);
 677    border: none;
 678  }
 679  
 680  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
 681    margin: 0;
 682    padding: 0;
 683  }
 684  
 685  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
 686    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
 687    border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 688  }
 689  
 690  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
 691    content: "";
 692    border-radius: 50%;
 693    box-sizing: inherit;
 694    width: 12px;
 695    height: 12px;
 696    position: absolute;
 697    top: 50%;
 698    right: 50%;
 699    transform: translate(50%, -50%);
 700    margin: 0;
 701    background-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
 702    border: 4px solid var(--wpds-color-foreground-interactive-brand-strong, #fff);
 703  }
 704  
 705  @media (min-width: 600px) {
 706    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
 707      width: 8px;
 708      height: 8px;
 709    }
 710  }
 711  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
 712    --checkbox-size: 24px;
 713    flex-shrink: 0;
 714    border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
 715    margin-left: 12px;
 716    transition: none;
 717    border-radius: 2px;
 718    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 719    padding: 6px 8px;
 720    /* Fonts smaller than 16px causes mobile safari to zoom. */
 721    font-size: 16px;
 722    /* Override core line-height. To be reviewed. */
 723    line-height: normal;
 724    border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
 725    border-radius: var(--wpds-border-radius-sm, 2px);
 726  }
 727  
 728  @media (min-width: 600px) {
 729    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
 730      font-size: 13px;
 731      /* Override core line-height. To be reviewed. */
 732      line-height: normal;
 733    }
 734  }
 735  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
 736    border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
 737  }
 738  
 739  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
 740    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
 741    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 742    border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
 743    box-shadow: none;
 744  }
 745  
 746  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
 747    color: rgba(30, 30, 30, 0.62);
 748  }
 749  
 750  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
 751    background: var(--wpds-color-background-interactive-neutral-active, #fff);
 752  }
 753  
 754  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
 755    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
 756    outline: 2px solid transparent;
 757  }
 758  
 759  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
 760    background: var(--wp-admin-theme-color);
 761    border-color: var(--wp-admin-theme-color);
 762  }
 763  
 764  .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 {
 765    margin: -3px -5px;
 766    color: #fff;
 767  }
 768  
 769  @media (min-width: 782px) {
 770    .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 {
 771      margin: -4px -5px 0 0;
 772    }
 773  }
 774  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
 775    background: var(--wp-admin-theme-color);
 776    border-color: var(--wp-admin-theme-color);
 777  }
 778  
 779  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
 780    content: "\f460";
 781    float: right;
 782    display: inline-block;
 783    vertical-align: middle;
 784    width: 16px;
 785    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 786    font: 400 30px/1 dashicons;
 787    speak: none;
 788    -webkit-font-smoothing: antialiased;
 789    -moz-osx-font-smoothing: grayscale;
 790  }
 791  
 792  @media (min-width: 782px) {
 793    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
 794      float: none;
 795      font-size: 21px;
 796    }
 797  }
 798  .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 {
 799    background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
 800    border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 801    color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
 802    cursor: default;
 803    opacity: 1;
 804  }
 805  
 806  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true]:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true][aria-checked=mixed]::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled[aria-checked=mixed]::before {
 807    color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
 808  }
 809  
 810  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
 811    position: relative;
 812    /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
 813    background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
 814    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
 815    margin: 0;
 816    padding: 0;
 817    width: var(--checkbox-size);
 818    height: var(--checkbox-size);
 819  }
 820  
 821  @media (min-width: 600px) {
 822    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
 823      --checkbox-size: 16px;
 824    }
 825  }
 826  @media not (prefers-reduced-motion) {
 827    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
 828      transition: 0.1s border-color ease-in-out;
 829    }
 830  }
 831  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
 832    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
 833    border-color: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 834  }
 835  
 836  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
 837    --checkmark-size: var(--checkbox-size);
 838    color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
 839    position: absolute;
 840    right: 50%;
 841    top: 50%;
 842    transform: translate(50%, -50%);
 843    width: var(--checkmark-size);
 844    height: var(--checkmark-size);
 845  }
 846  
 847  @media (min-width: 600px) {
 848    .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
 849      --checkmark-size: calc(var(--checkbox-size) + 4px);
 850    }
 851  }
 852  .dataviews-filters__search-widget-filter-combobox__wrapper {
 853    position: relative;
 854    padding: var(--wpds-dimension-padding-sm, 8px);
 855  }
 856  
 857  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
 858    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 859    padding: 6px 8px;
 860    /* Fonts smaller than 16px causes mobile safari to zoom. */
 861    font-size: 16px;
 862    /* Override core line-height. To be reviewed. */
 863    line-height: normal;
 864    border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
 865    border-radius: var(--wpds-border-radius-sm, 2px);
 866  }
 867  
 868  @media (min-width: 600px) {
 869    .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
 870      font-size: 13px;
 871      /* Override core line-height. To be reviewed. */
 872      line-height: normal;
 873    }
 874  }
 875  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
 876    border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
 877  }
 878  
 879  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
 880    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
 881    outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 882    border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
 883    box-shadow: none;
 884  }
 885  
 886  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
 887    color: rgba(30, 30, 30, 0.62);
 888  }
 889  
 890  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
 891    display: block;
 892    padding: 0 var(--wpds-dimension-size-md, 32px) 0 var(--wpds-dimension-padding-sm, 8px);
 893    width: 100%;
 894    height: var(--wpds-dimension-size-md, 32px);
 895    margin-right: 0;
 896    margin-left: 0;
 897    /* Fonts smaller than 16px causes mobile safari to zoom. */
 898    font-size: 16px;
 899  }
 900  
 901  @media (min-width: 600px) {
 902    .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
 903      font-size: var(--wpds-typography-font-size-md, 13px);
 904    }
 905  }
 906  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
 907    background: var(--wpds-color-background-surface-neutral-strong, #fff);
 908  }
 909  
 910  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
 911    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 912  }
 913  
 914  .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 {
 915    -webkit-appearance: none;
 916  }
 917  
 918  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon {
 919    position: absolute;
 920    inset-inline-start: var(--wpds-dimension-gap-md, 12px);
 921    top: 0;
 922    bottom: 0;
 923    display: flex;
 924    align-items: center;
 925    justify-content: center;
 926    width: var(--wpds-dimension-size-sm, 24px);
 927  }
 928  
 929  .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__icon:dir(ltr) {
 930    transform: scaleX(-1);
 931  }
 932  
 933  .dataviews-filters__container-visibility-toggle {
 934    position: relative;
 935    flex-shrink: 0;
 936  }
 937  
 938  .dataviews-filters-toggle__count {
 939    position: absolute;
 940    top: 0;
 941    left: 0;
 942    transform: translate(-50%, -50%);
 943    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
 944    height: var(--wpds-dimension-size-2xs, 16px);
 945    min-width: var(--wpds-dimension-size-2xs, 16px);
 946    line-height: var(--wpds-typography-line-height-xs, 16px);
 947    padding: 0 var(--wpds-dimension-padding-xs, 4px);
 948    text-align: center;
 949    border-radius: var(--wpds-border-radius-lg, 8px);
 950    font-size: 11px;
 951    outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-background-surface-neutral-strong, #fff);
 952    color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
 953    box-sizing: border-box;
 954  }
 955  
 956  .dataviews-filters__user-input-widget {
 957    padding: var(--wpds-dimension-padding-lg, 16px);
 958  }
 959  
 960  .dataviews-filters__user-input-widget .components-input-control__prefix {
 961    padding-right: var(--wpds-dimension-padding-sm, 8px);
 962  }
 963  
 964  .dataviews-filters__search-widget-no-elements {
 965    display: flex;
 966    align-items: center;
 967    justify-content: center;
 968    padding: var(--wpds-dimension-padding-lg, 16px);
 969  }
 970  
 971  .dataviews-footer {
 972    position: sticky;
 973    bottom: 0;
 974    right: 0;
 975    background-color: inherit;
 976    padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
 977    border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
 978    flex-shrink: 0;
 979  }
 980  
 981  @media not (prefers-reduced-motion) {
 982    .dataviews-footer {
 983      transition: padding ease-out 0.1s;
 984    }
 985  }
 986  .dataviews-footer {
 987    z-index: 1;
 988  }
 989  
 990  .dataviews-footer .is-refreshing {
 991    opacity: 0.5;
 992    pointer-events: none;
 993  }
 994  
 995  @media not (prefers-reduced-motion) {
 996    .dataviews-footer .is-refreshing {
 997      opacity: 1;
 998      animation: dataviews-pulse 1s ease-in-out infinite;
 999    }
1000  }
1001  @container (max-width: 560px) {
1002    .dataviews-footer__content {
1003      flex-direction: column !important;
1004    }
1005    .dataviews-footer__content .dataviews-bulk-actions-footer__container {
1006      width: 100%;
1007    }
1008    .dataviews-footer__content .dataviews-bulk-actions-footer__item-count {
1009      flex-grow: 1;
1010    }
1011    .dataviews-footer__content .dataviews-pagination {
1012      width: 100%;
1013      justify-content: space-between;
1014    }
1015  }
1016  .dataviews-pagination__page-select {
1017    font-size: 11px;
1018    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1019    text-transform: uppercase;
1020  }
1021  
1022  @media (min-width: 600px) {
1023    .dataviews-pagination__page-select .components-select-control__input {
1024      font-size: 11px !important;
1025      font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1026    }
1027  }
1028  .dataviews-action-modal {
1029    z-index: 1000001;
1030  }
1031  
1032  .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1033    padding: 0 var(--wpds-dimension-padding-xs, 4px);
1034  }
1035  
1036  .dataviews-selection-checkbox {
1037    --checkbox-input-size: 24px;
1038  }
1039  
1040  @media (min-width: 600px) {
1041    .dataviews-selection-checkbox {
1042      --checkbox-input-size: 16px;
1043    }
1044  }
1045  .dataviews-selection-checkbox {
1046    line-height: 0;
1047    flex-shrink: 0;
1048  }
1049  
1050  .dataviews-selection-checkbox .components-checkbox-control__input-container {
1051    margin: 0;
1052  }
1053  
1054  .dataviews-view-config {
1055    width: 320px;
1056    container-type: inline-size;
1057    font-size: var(--wpds-typography-font-size-md, 13px);
1058    line-height: var(--wpds-typography-line-height-sm, 20px);
1059  }
1060  
1061  .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
1062    overflow-y: scroll;
1063    height: 100%;
1064  }
1065  
1066  .dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper .dataviews-view-config {
1067    width: auto;
1068  }
1069  
1070  .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
1071    text-transform: uppercase;
1072  }
1073  
1074  .dataviews-settings-section__title.dataviews-settings-section__title {
1075    line-height: var(--wpds-typography-line-height-md, 24px);
1076    font-size: 15px;
1077  }
1078  
1079  .dataviews-settings-section__sidebar {
1080    grid-column: span 4;
1081  }
1082  
1083  .dataviews-settings-section__content,
1084  .dataviews-settings-section__content > * {
1085    grid-column: span 8;
1086  }
1087  
1088  .dataviews-settings-section__content .is-divided-in-two {
1089    display: contents;
1090  }
1091  
1092  .dataviews-settings-section__content .is-divided-in-two > * {
1093    grid-column: span 4;
1094  }
1095  
1096  .dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
1097    display: none;
1098  }
1099  
1100  @container (max-width: 500px) {
1101    .dataviews-settings-section.dataviews-settings-section {
1102      grid-template-columns: repeat(2, 1fr);
1103    }
1104    .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__sidebar {
1105      grid-column: span 2;
1106    }
1107    .dataviews-settings-section.dataviews-settings-section .dataviews-settings-section__content {
1108      grid-column: span 2;
1109    }
1110  }
1111  .dataviews-view-config__sort-controls > * {
1112    flex: 1;
1113  }
1114  
1115  .dataviews-view-config__label {
1116    text-wrap: nowrap;
1117  }
1118  
1119  .dataviews-view-config__toggle-wrapper {
1120    position: relative;
1121    display: inline-flex;
1122  }
1123  
1124  .dataviews-view-config__modified-indicator {
1125    position: absolute;
1126    top: var(--wpds-dimension-gap-xs, 4px);
1127    left: var(--wpds-dimension-gap-xs, 4px);
1128    width: var(--wpds-dimension-gap-xs, 4px);
1129    height: var(--wpds-dimension-gap-xs, 4px);
1130    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
1131    border-radius: 50%;
1132    pointer-events: none;
1133  }
1134  
1135  .dataviews-view-grid-items {
1136    margin-bottom: auto;
1137    display: grid;
1138    gap: var(--wpds-dimension-gap-xl, 24px);
1139    grid-template-rows: max-content;
1140    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
1141    padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1142    container-type: inline-size;
1143  }
1144  
1145  @media not (prefers-reduced-motion) {
1146    .dataviews-view-grid-items {
1147      transition: padding ease-out 0.1s;
1148    }
1149  }
1150  .dataviews-view-grid-items.has-compact-density {
1151    gap: var(--wpds-dimension-gap-lg, 16px);
1152  }
1153  
1154  .dataviews-view-grid-items.has-comfortable-density {
1155    gap: var(--wpds-dimension-gap-2xl, 32px);
1156  }
1157  
1158  .dataviews-view-grid {
1159    padding: 0 var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1160    display: flex;
1161    flex-direction: column;
1162    gap: var(--wpds-dimension-gap-xl, 24px);
1163    container-type: inline-size;
1164    margin-bottom: auto;
1165  }
1166  
1167  @media not (prefers-reduced-motion) {
1168    .dataviews-view-grid {
1169      transition: padding ease-out 0.1s;
1170    }
1171  }
1172  .dataviews-view-grid.has-compact-density {
1173    gap: var(--wpds-dimension-gap-lg, 16px);
1174  }
1175  
1176  .dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
1177    gap: var(--wpds-dimension-gap-lg, 16px);
1178  }
1179  
1180  .dataviews-view-grid.has-comfortable-density {
1181    gap: var(--wpds-dimension-gap-2xl, 32px);
1182  }
1183  
1184  .dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
1185    gap: var(--wpds-dimension-gap-2xl, 32px);
1186  }
1187  
1188  .dataviews-view-grid .dataviews-view-grid__row {
1189    display: grid;
1190    gap: var(--wpds-dimension-gap-xl, 24px);
1191  }
1192  
1193  .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
1194    border-radius: var(--wpds-border-radius-md, 4px);
1195    position: relative;
1196  }
1197  
1198  .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
1199    content: "";
1200    position: absolute;
1201    top: 0;
1202    right: 0;
1203    width: 100%;
1204    height: 100%;
1205    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1206    border-radius: var(--wpds-border-radius-md, 4px);
1207    pointer-events: none;
1208    outline: 2px solid transparent;
1209  }
1210  
1211  .dataviews-view-grid .dataviews-view-grid__card,
1212  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card {
1213    height: 100%;
1214    justify-content: flex-start;
1215    position: relative;
1216    isolation: isolate;
1217  }
1218  
1219  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-actions,
1220  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-actions {
1221    padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
1222  }
1223  
1224  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field,
1225  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field {
1226    min-height: var(--wpds-dimension-size-sm, 24px);
1227    overflow: hidden;
1228    align-content: center;
1229    text-align: start;
1230  }
1231  
1232  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1233  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1234    width: fit-content;
1235  }
1236  
1237  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1238  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1239    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1240  }
1241  
1242  .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
1243  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
1244    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);
1245  }
1246  
1247  .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after,
1248  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
1249    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1250  }
1251  
1252  .dataviews-view-grid .dataviews-view-grid__media,
1253  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1254    width: 100%;
1255    aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
1256    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1257    border-radius: var(--wpds-border-radius-md, 4px);
1258    overflow: hidden;
1259    position: relative;
1260  }
1261  
1262  .dataviews-view-grid .dataviews-view-grid__media.dataviews-view-grid__media--placeholder,
1263  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media.dataviews-view-grid__media--placeholder {
1264    aspect-ratio: 3/1;
1265  }
1266  
1267  .dataviews-view-grid .dataviews-view-grid__media img,
1268  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1269    object-fit: cover;
1270    width: 100%;
1271    height: 100%;
1272  }
1273  
1274  .dataviews-view-grid .dataviews-view-grid__media::after,
1275  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media::after {
1276    content: "";
1277    position: absolute;
1278    top: 0;
1279    right: 0;
1280    width: 100%;
1281    height: 100%;
1282    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1283    border-radius: var(--wpds-border-radius-md, 4px);
1284    pointer-events: none;
1285  }
1286  
1287  .dataviews-view-grid .dataviews-view-grid__media .dataviews-view-grid__media-placeholder,
1288  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media .dataviews-view-grid__media-placeholder {
1289    width: 100%;
1290    height: 100%;
1291    display: block;
1292    border-radius: var(--wpds-border-radius-md, 4px);
1293    box-shadow: none;
1294    background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1295  }
1296  
1297  .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media,
1298  .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media {
1299    background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1300  }
1301  
1302  .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
1303  .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
1304    object-fit: contain;
1305  }
1306  
1307  .dataviews-view-grid .dataviews-view-grid__fields,
1308  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1309    position: relative;
1310    font-size: 12px;
1311    line-height: 16px;
1312  }
1313  
1314  .dataviews-view-grid .dataviews-view-grid__fields:not(:empty),
1315  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields:not(:empty) {
1316    padding: 0 0 var(--wpds-dimension-padding-md, 12px);
1317  }
1318  
1319  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty),
1320  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field-value:not(:empty) {
1321    min-height: var(--wpds-dimension-size-sm, 24px);
1322    line-height: var(--wpds-typography-line-height-sm, 20px);
1323    padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
1324  }
1325  
1326  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field,
1327  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field {
1328    min-height: var(--wpds-dimension-size-sm, 24px);
1329    align-items: center;
1330  }
1331  
1332  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name,
1333  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-name {
1334    width: 35%;
1335    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1336    overflow: hidden;
1337    text-overflow: ellipsis;
1338    white-space: nowrap;
1339  }
1340  
1341  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
1342  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
1343    width: 65%;
1344    overflow: hidden;
1345    text-overflow: ellipsis;
1346    white-space: nowrap;
1347  }
1348  
1349  .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))),
1350  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields .dataviews-view-grid__field:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
1351    display: none;
1352  }
1353  
1354  .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty),
1355  .dataviews-view-grid-infinite-scroll .dataviews-view-grid__badge-fields:not(:empty) {
1356    padding-bottom: var(--wpds-dimension-padding-md, 12px);
1357  }
1358  
1359  .dataviews-view-grid.is-refreshing,
1360  .dataviews-view-grid-infinite-scroll.is-refreshing {
1361    opacity: 0.5;
1362    pointer-events: none;
1363  }
1364  
1365  @media not (prefers-reduced-motion) {
1366    .dataviews-view-grid.is-refreshing,
1367    .dataviews-view-grid-infinite-scroll.is-refreshing {
1368      opacity: 1;
1369      animation: dataviews-pulse 1s ease-in-out infinite;
1370    }
1371  }
1372  .dataviews-view-grid__field-value:empty,
1373  .dataviews-view-grid__field:empty {
1374    display: none;
1375  }
1376  
1377  .dataviews-view-grid__card .dataviews-selection-checkbox {
1378    position: absolute;
1379    top: -9999em;
1380    right: var(--wpds-dimension-padding-sm, 8px);
1381    z-index: 1;
1382    opacity: 0;
1383  }
1384  
1385  @media not (prefers-reduced-motion) {
1386    .dataviews-view-grid__card .dataviews-selection-checkbox {
1387      transition: opacity 0.1s linear;
1388    }
1389  }
1390  @media (hover: none) {
1391    .dataviews-view-grid__card .dataviews-selection-checkbox {
1392      opacity: 1;
1393      top: var(--wpds-dimension-padding-sm, 8px);
1394    }
1395  }
1396  .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
1397  .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
1398  .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
1399    opacity: 1;
1400    top: var(--wpds-dimension-padding-sm, 8px);
1401  }
1402  
1403  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1404    position: absolute;
1405    z-index: 1;
1406    top: var(--wpds-dimension-padding-xs, 4px);
1407    opacity: 0;
1408    left: var(--wpds-dimension-padding-xs, 4px);
1409  }
1410  
1411  .dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
1412    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1413  }
1414  
1415  @media not (prefers-reduced-motion) {
1416    .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1417      transition: opacity 0.1s linear;
1418    }
1419  }
1420  @media (hover: none) {
1421    .dataviews-view-grid__card .dataviews-view-grid__media-actions {
1422      opacity: 1;
1423      top: var(--wpds-dimension-padding-xs, 4px);
1424    }
1425  }
1426  .dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
1427  .dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
1428  .dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
1429    opacity: 1;
1430  }
1431  
1432  .dataviews-view-grid__media--clickable {
1433    cursor: var(--wpds-cursor-control, pointer);
1434  }
1435  
1436  .dataviews-view-grid__group-header {
1437    font-size: var(--wpds-typography-font-size-lg, 15px);
1438    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1439    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1440    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1441    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1442    container-type: inline-size;
1443  }
1444  
1445  div.dataviews-view-list {
1446    list-style-type: none;
1447  }
1448  
1449  .dataviews-view-list {
1450    margin: 0 0 auto;
1451  }
1452  
1453  .dataviews-view-list div[role=row],
1454  .dataviews-view-list div[role=article] {
1455    margin: 0;
1456    border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1457  }
1458  
1459  .dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper,
1460  .dataviews-view-list div[role=article] .dataviews-view-list__item-wrapper {
1461    position: relative;
1462    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
1463    box-sizing: border-box;
1464  }
1465  
1466  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1467  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1468    display: flex;
1469    width: max-content;
1470    flex: 0 0 auto;
1471    gap: var(--wpds-dimension-gap-xs, 4px);
1472    white-space: nowrap;
1473  }
1474  
1475  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button,
1476  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions .components-button {
1477    position: relative;
1478    z-index: 1;
1479  }
1480  
1481  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div,
1482  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > div {
1483    height: var(--wpds-dimension-size-sm, 24px);
1484  }
1485  
1486  .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1487  .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
1488    flex: 0;
1489    overflow: hidden;
1490    width: 0;
1491  }
1492  
1493  .dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child),
1494  .dataviews-view-list div[role=article]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions > :not(:last-child) {
1495    flex-basis: min-content;
1496    width: auto;
1497    overflow: unset;
1498  }
1499  
1500  @media (hover: none) {
1501    .dataviews-view-list div[role=row] .dataviews-view-list__item-actions > :not(:last-child),
1502    .dataviews-view-list div[role=article] .dataviews-view-list__item-actions > :not(:last-child) {
1503      flex-basis: min-content;
1504      width: auto;
1505      overflow: unset;
1506    }
1507  }
1508  .dataviews-view-list div[role=row].is-selected.is-selected,
1509  .dataviews-view-list div[role=article].is-selected.is-selected {
1510    border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1511  }
1512  
1513  .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],
1514  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=row],
1515  .dataviews-view-list div[role=article].is-selected.is-selected + div[role=article] {
1516    border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1517  }
1518  
1519  .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,
1520  .dataviews-view-list div[role=article]:not(.is-selected):hover,
1521  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1522  .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1523    background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1524  }
1525  
1526  .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1527  .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,
1528  .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,
1529  .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__field,
1530  .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-title-field,
1531  .dataviews-view-list div[role=article]:not(.is-selected):hover .dataviews-view-list__field,
1532  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1533  .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1534  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1535  .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1536    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1537  }
1538  
1539  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1540  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1541  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1542  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1543    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1544    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1545  }
1546  
1547  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1548  .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1549  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1550  .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1551  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1552  .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1553  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1554  .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1555    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1556  }
1557  
1558  .dataviews-view-list .dataviews-view-list__item {
1559    position: absolute;
1560    z-index: 1;
1561    inset: 0;
1562    scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1563    appearance: none;
1564    border: none;
1565    background: none;
1566    padding: 0;
1567    cursor: var(--wpds-cursor-control, pointer);
1568  }
1569  
1570  .dataviews-view-list .dataviews-view-list__item:focus-visible {
1571    outline: none;
1572  }
1573  
1574  .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
1575    position: absolute;
1576    content: "";
1577    inset: var(--wp-admin-border-width-focus);
1578    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
1579    border-radius: var(--wpds-border-radius-sm, 2px);
1580    outline: 2px solid transparent;
1581  }
1582  
1583  .dataviews-view-list .dataviews-view-list__title-field {
1584    flex: 1;
1585    min-height: var(--wpds-dimension-size-sm, 24px);
1586    line-height: var(--wpds-typography-line-height-md, 24px);
1587    overflow: hidden;
1588  }
1589  
1590  .dataviews-view-list .dataviews-view-list__title-field:has(a, button) {
1591    z-index: 1;
1592  }
1593  
1594  .dataviews-view-list .dataviews-view-list__media-wrapper {
1595    width: 48px;
1596    height: 48px;
1597    overflow: hidden;
1598    position: relative;
1599    flex-shrink: 0;
1600    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1601    border-radius: var(--wpds-border-radius-md, 4px);
1602  }
1603  
1604  .dataviews-view-list .dataviews-view-list__media-wrapper img {
1605    width: 100%;
1606    height: 100%;
1607    object-fit: cover;
1608  }
1609  
1610  .dataviews-view-list .dataviews-view-list__media-wrapper::after {
1611    content: "";
1612    position: absolute;
1613    top: 0;
1614    right: 0;
1615    width: 100%;
1616    height: 100%;
1617    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1618    border-radius: var(--wpds-border-radius-md, 4px);
1619  }
1620  
1621  .dataviews-view-list .dataviews-view-list__field-wrapper {
1622    min-height: 48px;
1623    flex-grow: 1;
1624    min-width: 0;
1625  }
1626  
1627  .dataviews-view-list .dataviews-view-list__field {
1628    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1629  }
1630  
1631  .dataviews-view-list .dataviews-view-list__fields {
1632    display: flex;
1633    gap: var(--wpds-dimension-gap-md, 12px);
1634    row-gap: var(--wpds-dimension-gap-xs, 4px);
1635    flex-wrap: wrap;
1636    font-size: 12px;
1637  }
1638  
1639  .dataviews-view-list .dataviews-view-list__fields:empty {
1640    display: none;
1641  }
1642  
1643  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field:has(.dataviews-view-list__field-value:empty) {
1644    display: none;
1645  }
1646  
1647  .dataviews-view-list .dataviews-view-list__fields .dataviews-view-list__field-value {
1648    min-height: var(--wpds-dimension-size-sm, 24px);
1649    line-height: var(--wpds-typography-line-height-sm, 20px);
1650    display: flex;
1651    align-items: center;
1652  }
1653  
1654  .dataviews-view-list + .dataviews-pagination {
1655    justify-content: space-between;
1656  }
1657  
1658  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__item-wrapper {
1659    padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-2xl, 24px);
1660  }
1661  
1662  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__title-field {
1663    min-height: var(--wpds-dimension-size-2xs, 16px);
1664    line-height: var(--wpds-typography-line-height-xs, 16px);
1665  }
1666  
1667  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__media-wrapper {
1668    width: var(--wpds-dimension-size-md, 32px);
1669    height: var(--wpds-dimension-size-md, 32px);
1670  }
1671  
1672  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__field-wrapper {
1673    min-height: var(--wpds-dimension-size-md, 32px);
1674  }
1675  
1676  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields {
1677    gap: var(--wpds-dimension-gap-sm, 8px);
1678    row-gap: var(--wpds-dimension-gap-xs, 4px);
1679  }
1680  
1681  .dataviews-view-list.has-compact-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1682    min-height: var(--wpds-dimension-size-2xs, 16px);
1683    line-height: var(--wpds-typography-line-height-xs, 16px);
1684  }
1685  
1686  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__item-wrapper {
1687    padding: var(--wpds-dimension-padding-2xl, 24px) var(--wpds-dimension-padding-2xl, 24px);
1688  }
1689  
1690  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__title-field {
1691    min-height: var(--wpds-dimension-size-md, 32px);
1692    line-height: var(--wpds-typography-line-height-xl, 32px);
1693  }
1694  
1695  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__media-wrapper {
1696    width: 64px;
1697    height: 64px;
1698  }
1699  
1700  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__field-wrapper {
1701    min-height: 64px;
1702  }
1703  
1704  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields {
1705    gap: var(--wpds-dimension-gap-lg, 16px);
1706    row-gap: var(--wpds-dimension-gap-sm, 8px);
1707  }
1708  
1709  .dataviews-view-list.has-comfortable-density div[role=row] .dataviews-view-list__fields .dataviews-view-list__field-value {
1710    min-height: var(--wpds-dimension-size-md, 32px);
1711    line-height: var(--wpds-typography-line-height-md, 24px);
1712  }
1713  
1714  .dataviews-view-list.is-refreshing {
1715    opacity: 0.5;
1716    pointer-events: none;
1717  }
1718  
1719  @media not (prefers-reduced-motion) {
1720    .dataviews-view-list.is-refreshing {
1721      opacity: 1;
1722      animation: dataviews-pulse 1s ease-in-out infinite;
1723    }
1724  }
1725  .dataviews-view-list__group-header {
1726    font-size: var(--wpds-typography-font-size-lg, 15px);
1727    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1728    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1729    margin: 0 0 var(--wpds-dimension-gap-lg, 16px) 0;
1730    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1731  }
1732  
1733  .dataviews-view-table {
1734    width: 100%;
1735    text-indent: 0;
1736    border-color: inherit;
1737    border-collapse: collapse;
1738    position: relative;
1739    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1740    margin-bottom: auto;
1741    background-color: inherit;
1742  }
1743  
1744  .dataviews-view-table th {
1745    text-align: right;
1746    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1747    font-weight: 400;
1748    font-size: var(--wpds-typography-font-size-md, 13px);
1749  }
1750  
1751  .dataviews-view-table td,
1752  .dataviews-view-table th {
1753    padding: var(--wpds-dimension-padding-md, 12px);
1754  }
1755  
1756  .dataviews-view-table td.dataviews-view-table__actions-column,
1757  .dataviews-view-table th.dataviews-view-table__actions-column {
1758    text-align: left;
1759  }
1760  
1761  .dataviews-view-table td.dataviews-view-table__actions-column--sticky,
1762  .dataviews-view-table th.dataviews-view-table__actions-column--sticky {
1763    position: sticky;
1764    left: 0;
1765    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1766  }
1767  
1768  .dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
1769  .dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
1770    display: block;
1771    content: "";
1772    position: absolute;
1773    top: 0;
1774    bottom: 0;
1775    right: 0;
1776    width: 1px;
1777    background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1778  }
1779  
1780  .dataviews-view-table td.dataviews-view-table__checkbox-column,
1781  .dataviews-view-table th.dataviews-view-table__checkbox-column {
1782    padding-left: 0;
1783  }
1784  
1785  .dataviews-view-table td.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper,
1786  .dataviews-view-table th.dataviews-view-table__checkbox-column .dataviews-view-table__cell-content-wrapper {
1787    max-width: auto;
1788    min-width: auto;
1789  }
1790  
1791  .dataviews-view-table tr {
1792    border-top: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1793    background-color: inherit;
1794  }
1795  
1796  .dataviews-view-table tr td:first-child,
1797  .dataviews-view-table tr th:first-child {
1798    padding-right: var(--wpds-dimension-padding-2xl, 24px);
1799  }
1800  
1801  .dataviews-view-table tr td:last-child,
1802  .dataviews-view-table tr th:last-child {
1803    padding-left: var(--wpds-dimension-padding-2xl, 24px);
1804  }
1805  
1806  .dataviews-view-table tr:last-child {
1807    border-bottom: 0;
1808  }
1809  
1810  .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1811    opacity: 0;
1812  }
1813  
1814  @media (hover: none) {
1815    .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
1816      opacity: 1;
1817    }
1818  }
1819  .dataviews-view-table tr.is-selected {
1820    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1821    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1822  }
1823  
1824  .dataviews-view-table tr.is-selected, .dataviews-view-table tr.is-selected + tr {
1825    border-top: 1px solid var(--wpds-color-stroke-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 40%, white));
1826  }
1827  
1828  .dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
1829    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1830  }
1831  
1832  .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) {
1833    opacity: 1;
1834  }
1835  
1836  .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 {
1837    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
1838  }
1839  
1840  .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 {
1841    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1842  }
1843  
1844  .dataviews-view-table thead {
1845    position: sticky;
1846    inset-block-start: 0;
1847    z-index: 1;
1848    background-color: inherit;
1849  }
1850  
1851  .dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
1852    display: block;
1853    content: "";
1854    position: absolute;
1855    bottom: 0;
1856    right: 0;
1857    left: 0;
1858    height: 1px;
1859    background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1860  }
1861  
1862  .dataviews-view-table thead tr {
1863    border: 0;
1864  }
1865  
1866  .dataviews-view-table thead th {
1867    background-color: inherit;
1868    padding-top: var(--wpds-dimension-padding-sm, 8px);
1869    padding-bottom: var(--wpds-dimension-padding-sm, 8px);
1870    font-size: 11px;
1871    text-transform: uppercase;
1872    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1873  }
1874  
1875  .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1876    padding-right: var(--wpds-dimension-padding-xs, 4px);
1877    padding-left: var(--wpds-dimension-padding-xs, 4px);
1878  }
1879  
1880  .dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
1881    gap: var(--wpds-dimension-gap-xs, 4px);
1882  }
1883  
1884  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
1885    padding-right: var(--wpds-dimension-padding-lg, 16px);
1886  }
1887  
1888  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1889    padding-left: var(--wpds-dimension-padding-lg, 16px);
1890  }
1891  
1892  .dataviews-view-table tbody td {
1893    vertical-align: top;
1894  }
1895  
1896  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper {
1897    min-height: var(--wpds-dimension-size-md, 32px);
1898    display: flex;
1899    align-items: center;
1900    white-space: nowrap;
1901  }
1902  
1903  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
1904    justify-content: flex-end;
1905    font-variant-numeric: tabular-nums;
1906  }
1907  
1908  .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
1909    justify-content: center;
1910  }
1911  
1912  .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
1913    min-height: 0;
1914  }
1915  
1916  .dataviews-view-table .dataviews-view-table-header-button {
1917    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1918    font-size: 11px;
1919    text-transform: uppercase;
1920    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1921  }
1922  
1923  .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1924    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1925  }
1926  
1927  .dataviews-view-table .dataviews-view-table-header-button span {
1928    speak: none;
1929  }
1930  
1931  .dataviews-view-table .dataviews-view-table-header-button span:empty {
1932    display: none;
1933  }
1934  
1935  .dataviews-view-table .dataviews-view-table-header {
1936    padding-right: var(--wpds-dimension-padding-xs, 4px);
1937  }
1938  
1939  .dataviews-view-table .dataviews-view-table__actions-column {
1940    width: auto;
1941    white-space: nowrap;
1942  }
1943  
1944  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
1945    padding-right: 0;
1946  }
1947  
1948  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
1949    padding-left: 0;
1950  }
1951  
1952  .dataviews-view-table.has-compact-density td,
1953  .dataviews-view-table.has-compact-density th {
1954    padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1955  }
1956  
1957  .dataviews-view-table.has-comfortable-density td,
1958  .dataviews-view-table.has-comfortable-density th {
1959    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-md, 12px);
1960  }
1961  
1962  .dataviews-view-table.has-compact-density td.dataviews-view-table__checkbox-column,
1963  .dataviews-view-table.has-compact-density th.dataviews-view-table__checkbox-column, .dataviews-view-table.has-comfortable-density td.dataviews-view-table__checkbox-column,
1964  .dataviews-view-table.has-comfortable-density th.dataviews-view-table__checkbox-column {
1965    padding-left: 0;
1966  }
1967  
1968  .dataviews-view-table-selection-checkbox {
1969    --checkbox-input-size: 24px;
1970  }
1971  
1972  @media (min-width: 600px) {
1973    .dataviews-view-table-selection-checkbox {
1974      --checkbox-input-size: 16px;
1975    }
1976  }
1977  .dataviews-column-primary__media {
1978    max-width: 60px;
1979    min-width: var(--wpds-dimension-size-md, 32px);
1980    min-height: var(--wpds-dimension-size-md, 32px);
1981    overflow: hidden;
1982    position: relative;
1983    flex-shrink: 0;
1984    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1985    border-radius: var(--wpds-border-radius-md, 4px);
1986  }
1987  
1988  .dataviews-column-primary__media img {
1989    width: var(--wpds-dimension-size-md, 32px);
1990    height: var(--wpds-dimension-size-md, 32px);
1991    object-fit: cover;
1992  }
1993  
1994  .dataviews-column-primary__media::after {
1995    content: "";
1996    position: absolute;
1997    top: 0;
1998    right: 0;
1999    width: 100%;
2000    height: 100%;
2001    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2002    border-radius: var(--wpds-border-radius-md, 4px);
2003  }
2004  
2005  .dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media {
2006    height: var(--wpds-dimension-size-md, 32px);
2007    aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
2008    min-width: 0;
2009  }
2010  
2011  .dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media img {
2012    width: 100%;
2013    height: 100%;
2014  }
2015  
2016  .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
2017  .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
2018    min-width: 15ch;
2019    max-width: 80ch;
2020  }
2021  
2022  .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
2023    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2024    padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
2025    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2026  }
2027  
2028  /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
2029  .dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
2030    width: 1%;
2031  }
2032  
2033  .dataviews-view-table.is-refreshing {
2034    opacity: 0.5;
2035    pointer-events: none;
2036  }
2037  
2038  @media not (prefers-reduced-motion) {
2039    .dataviews-view-table.is-refreshing {
2040      opacity: 1;
2041      animation: dataviews-pulse 1s ease-in-out infinite;
2042    }
2043  }
2044  .dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
2045    gap: var(--wpds-dimension-gap-lg, 16px);
2046  }
2047  
2048  .dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
2049    gap: var(--wpds-dimension-gap-2xl, 32px);
2050  }
2051  
2052  .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
2053    height: 100%;
2054    justify-content: flex-start;
2055    position: relative;
2056    isolation: isolate;
2057  }
2058  
2059  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
2060    padding: var(--wpds-dimension-padding-sm, 8px) 0 var(--wpds-dimension-padding-xs, 4px);
2061  }
2062  
2063  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
2064    min-height: var(--wpds-dimension-size-sm, 24px);
2065    overflow: hidden;
2066    align-content: center;
2067    text-align: start;
2068  }
2069  
2070  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2071    width: fit-content;
2072  }
2073  
2074  .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 {
2075    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2076  }
2077  
2078  .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
2079    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);
2080  }
2081  
2082  .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
2083    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2084  }
2085  
2086  .dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
2087    outline: none;
2088  }
2089  
2090  .dataviews-view-picker-grid:focus-visible [data-active-item=true] {
2091    outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2092  }
2093  
2094  .dataviews-view-picker-grid .dataviews-selection-checkbox {
2095    top: var(--wpds-dimension-padding-sm, 8px) !important;
2096  }
2097  
2098  .dataviews-view-picker-grid .dataviews-selection-checkbox input {
2099    pointer-events: none;
2100  }
2101  
2102  .dataviews-view-picker-grid .dataviews-view-picker-grid__media {
2103    width: 100%;
2104    aspect-ratio: 1/1;
2105    min-height: 0;
2106    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2107    border-radius: var(--wpds-border-radius-md, 4px);
2108    overflow: hidden;
2109    position: relative;
2110  }
2111  
2112  .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2113    object-fit: cover;
2114    width: 100%;
2115    height: 100%;
2116  }
2117  
2118  .dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
2119    content: "";
2120    position: absolute;
2121    top: 0;
2122    right: 0;
2123    width: 100%;
2124    height: 100%;
2125    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
2126    border-radius: var(--wpds-border-radius-md, 4px);
2127    pointer-events: none;
2128  }
2129  
2130  .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media {
2131    background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2132  }
2133  
2134  .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
2135    object-fit: contain;
2136  }
2137  
2138  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2139    position: relative;
2140    font-size: 12px;
2141    line-height: 16px;
2142  }
2143  
2144  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
2145    padding: 0 0 var(--wpds-dimension-padding-md, 12px);
2146  }
2147  
2148  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
2149    min-height: var(--wpds-dimension-size-sm, 24px);
2150    line-height: var(--wpds-typography-line-height-sm, 20px);
2151    padding-top: calc((var(--wpds-dimension-size-sm, 24px) - var(--wpds-typography-line-height-sm, 20px)) / 2);
2152  }
2153  
2154  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
2155    min-height: var(--wpds-dimension-size-sm, 24px);
2156    align-items: center;
2157  }
2158  
2159  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
2160    width: 35%;
2161    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2162    overflow: hidden;
2163    text-overflow: ellipsis;
2164    white-space: nowrap;
2165  }
2166  
2167  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
2168    width: 65%;
2169    overflow: hidden;
2170    text-overflow: ellipsis;
2171    white-space: nowrap;
2172  }
2173  
2174  .dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
2175    display: none;
2176  }
2177  
2178  .dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
2179    padding-bottom: var(--wpds-dimension-padding-md, 12px);
2180  }
2181  
2182  .dataviews-view-picker-grid__field-value:empty,
2183  .dataviews-view-picker-grid__field:empty {
2184    display: none;
2185  }
2186  
2187  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2188    position: absolute;
2189    top: -9999em;
2190    right: var(--wpds-dimension-padding-sm, 8px);
2191    z-index: 1;
2192  }
2193  
2194  @media (hover: none) {
2195    .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
2196      top: var(--wpds-dimension-padding-sm, 8px);
2197    }
2198  }
2199  .dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
2200  .dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
2201  .dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
2202    top: var(--wpds-dimension-padding-sm, 8px);
2203  }
2204  
2205  .dataviews-view-picker-grid__media--clickable {
2206    cursor: var(--wpds-cursor-control, pointer);
2207  }
2208  
2209  .dataviews-view-picker-grid-group__header {
2210    font-size: var(--wpds-typography-font-size-lg, 15px);
2211    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2212    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2213    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2214    padding: 0 48px;
2215  }
2216  
2217  .dataviews-view-picker-table {
2218    background-color: inherit;
2219  }
2220  
2221  .dataviews-view-picker-table .dataviews-view-table__checkbox-column {
2222    width: 48px;
2223  }
2224  
2225  .dataviews-view-picker-table tbody:focus-visible[aria-activedescendant] {
2226    outline: none;
2227  }
2228  
2229  .dataviews-view-picker-table tbody:focus-visible [data-active-item=true] {
2230    outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2231  }
2232  
2233  .dataviews-view-picker-table .dataviews-selection-checkbox .components-checkbox-control__input.components-checkbox-control__input {
2234    pointer-events: none;
2235    opacity: 1;
2236  }
2237  
2238  .dataviews-view-picker-table .dataviews-view-table__row {
2239    cursor: var(--wpds-cursor-control, pointer);
2240  }
2241  
2242  .dataviews-view-picker-table .dataviews-view-table__row.is-selected {
2243    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2244  }
2245  
2246  .dataviews-view-picker-table .dataviews-view-table__row.is-hovered {
2247    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2248  }
2249  
2250  .dataviews-view-picker-table .dataviews-view-table__row.is-selected.is-hovered {
2251    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2252  }
2253  
2254  .dataviews-view-activity {
2255    margin: 0 0 auto;
2256    padding: 0 var(--wpds-dimension-padding-2xl, 24px);
2257  }
2258  
2259  .dataviews-view-activity .dataviews-view-activity__group-header {
2260    font-size: var(--wpds-typography-font-size-lg, 15px);
2261    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2262    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2263    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2264    padding: 0;
2265  }
2266  
2267  .dataviews-view-activity .dataviews-view-activity__item-actions {
2268    min-width: var(--wpds-dimension-size-sm, 24px);
2269  }
2270  
2271  .dataviews-view-activity .dataviews-view-activity__item-content {
2272    flex-grow: 1;
2273  }
2274  
2275  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
2276  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
2277  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2278    min-height: var(--wpds-dimension-size-2xs, 16px);
2279  }
2280  
2281  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
2282    position: relative;
2283    display: flex;
2284    align-items: center;
2285    flex: 1;
2286    overflow: hidden;
2287  }
2288  
2289  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
2290    cursor: var(--wpds-cursor-control, pointer);
2291  }
2292  
2293  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
2294    outline: var(--wp-admin-border-width-focus) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2295    outline-offset: var(--wp-admin-border-width-focus);
2296    border-radius: var(--wpds-border-radius-sm, 2px);
2297  }
2298  
2299  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2300    display: flex;
2301    width: max-content;
2302    flex: 0 0 auto;
2303  }
2304  
2305  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button {
2306    position: relative;
2307    z-index: 1;
2308  }
2309  
2310  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
2311    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2312    display: flex;
2313    gap: var(--wpds-dimension-gap-md, 12px);
2314    row-gap: var(--wpds-dimension-gap-xs, 4px);
2315    flex-wrap: wrap;
2316  }
2317  
2318  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
2319    display: none;
2320  }
2321  
2322  .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) {
2323    display: none;
2324  }
2325  
2326  .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value {
2327    display: flex;
2328    align-items: center;
2329  }
2330  
2331  .dataviews-view-activity .dataviews-view-activity__item-type {
2332    align-self: stretch;
2333    flex-shrink: 0;
2334  }
2335  
2336  .dataviews-view-activity .dataviews-view-activity__item-type::after {
2337    content: "";
2338    flex: 1 1 auto;
2339    width: 1px;
2340    margin: 0 auto;
2341    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2342  }
2343  
2344  .dataviews-view-activity .dataviews-view-activity__item-type::before {
2345    content: "";
2346    flex: 0 0 auto;
2347    width: 1px;
2348    margin: 0 auto;
2349    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2350  }
2351  
2352  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
2353    width: var(--wpds-dimension-padding-md, 12px);
2354  }
2355  
2356  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
2357    height: var(--wpds-dimension-size-3xs, 12px);
2358  }
2359  
2360  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
2361    width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2362    height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2363  }
2364  
2365  .dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
2366    margin: var(--wpds-dimension-gap-md, 12px) 0;
2367  }
2368  
2369  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
2370    width: var(--wpds-dimension-size-sm, 24px);
2371  }
2372  
2373  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
2374    height: var(--wpds-dimension-size-3xs, 12px);
2375  }
2376  
2377  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
2378    width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2379    height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2380  }
2381  
2382  .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
2383    margin: var(--wpds-dimension-gap-md, 12px) 0;
2384    padding-top: var(--wpds-dimension-padding-sm, 8px);
2385  }
2386  
2387  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
2388    width: var(--wpds-dimension-size-md, 32px);
2389  }
2390  
2391  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
2392    height: var(--wpds-dimension-size-4xs, 8px);
2393  }
2394  
2395  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
2396    width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2397    height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2398  }
2399  
2400  .dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
2401    margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
2402    padding-top: var(--wpds-dimension-padding-md, 12px);
2403  }
2404  
2405  .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 {
2406    width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2407    height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2408    position: relative;
2409    top: 50%;
2410    transform: translateY(-50%);
2411  }
2412  
2413  .dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before {
2414    visibility: hidden;
2415  }
2416  
2417  .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 {
2418    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%);
2419  }
2420  
2421  .dataviews-view-activity .dataviews-view-activity__item-type-icon {
2422    overflow: hidden;
2423    flex-shrink: 0;
2424    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2425  }
2426  
2427  .dataviews-view-activity .dataviews-view-activity__item-type-icon img,
2428  .dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
2429  .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2430    display: block;
2431    width: 100%;
2432    height: 100%;
2433    margin: 0 auto;
2434    object-fit: cover;
2435    border-radius: 50%;
2436    box-sizing: border-box;
2437    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2438  }
2439  
2440  .dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
2441    padding: var(--wpds-dimension-padding-xs, 4px);
2442  }
2443  
2444  .dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
2445    content: "";
2446    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2447  }
2448  
2449  .dataviews-view-activity.is-refreshing {
2450    opacity: 0.5;
2451    pointer-events: none;
2452  }
2453  
2454  @media not (prefers-reduced-motion) {
2455    .dataviews-view-activity.is-refreshing {
2456      opacity: 1;
2457      animation: dataviews-pulse 1s ease-in-out infinite;
2458    }
2459  }
2460  .dataviews-view-activity + .dataviews-pagination {
2461    justify-content: space-between;
2462  }
2463  
2464  .dataviews-view-picker-activity {
2465    margin: 0;
2466    padding: 0;
2467    flex-grow: 1;
2468  }
2469  
2470  .dataviews-view-picker-activity:focus-visible[aria-activedescendant] {
2471    outline: none;
2472  }
2473  
2474  .dataviews-view-picker-activity:focus-visible .dataviews-view-picker-activity__item[data-active-item=true] {
2475    outline: 2px solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2476    outline-offset: -2px;
2477  }
2478  
2479  .dataviews-view-picker-activity .dataviews-view-picker-activity__item {
2480    cursor: var(--wpds-cursor-control, pointer);
2481    border-radius: var(--wpds-border-radius-sm, 2px);
2482    padding-inline: var(--wpds-dimension-padding-2xl, 24px);
2483    transition: background-color 0.1s ease;
2484  }
2485  
2486  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected, .dataviews-view-picker-activity .dataviews-view-picker-activity__item:hover {
2487    background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2488  }
2489  
2490  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-selected {
2491    outline: 3px solid transparent;
2492    outline-offset: -2px;
2493  }
2494  
2495  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type {
2496    width: var(--wpds-dimension-padding-md, 12px);
2497  }
2498  
2499  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type::before {
2500    height: var(--wpds-dimension-size-3xs, 12px);
2501  }
2502  
2503  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-type-icon {
2504    width: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2505    height: calc(var(--wpds-dimension-size-3xs, 12px) - 1px);
2506  }
2507  
2508  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-compact .dataviews-view-picker-activity__item-content {
2509    margin: var(--wpds-dimension-gap-md, 12px) 0;
2510  }
2511  
2512  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type {
2513    width: var(--wpds-dimension-size-sm, 24px);
2514  }
2515  
2516  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type::before {
2517    height: var(--wpds-dimension-size-3xs, 12px);
2518  }
2519  
2520  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-type-icon {
2521    width: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2522    height: calc(var(--wpds-dimension-size-sm, 24px) + 1px);
2523  }
2524  
2525  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-balanced .dataviews-view-picker-activity__item-content {
2526    margin: var(--wpds-dimension-gap-md, 12px) 0;
2527    padding-top: var(--wpds-dimension-padding-sm, 8px);
2528  }
2529  
2530  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type {
2531    width: var(--wpds-dimension-size-md, 32px);
2532  }
2533  
2534  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type::before {
2535    height: var(--wpds-dimension-size-4xs, 8px);
2536  }
2537  
2538  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-type-icon {
2539    width: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2540    height: calc(var(--wpds-dimension-size-md, 32px) + 1px);
2541  }
2542  
2543  .dataviews-view-picker-activity .dataviews-view-picker-activity__item.is-comfortable .dataviews-view-picker-activity__item-content {
2544    margin: var(--wpds-dimension-gap-sm, 8px) 0 var(--wpds-dimension-gap-lg, 16px);
2545    padding-top: var(--wpds-dimension-padding-md, 12px);
2546  }
2547  
2548  .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 {
2549    width: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2550    height: calc(var(--wpds-dimension-size-4xs, 8px) + 1px);
2551    position: relative;
2552    top: 50%;
2553    transform: translateY(-50%);
2554  }
2555  
2556  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content {
2557    flex-grow: 1;
2558  }
2559  
2560  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title,
2561  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description,
2562  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2563    min-height: var(--wpds-dimension-size-2xs, 16px);
2564  }
2565  
2566  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-title {
2567    position: relative;
2568    display: flex;
2569    align-items: center;
2570    flex: 1;
2571    overflow: hidden;
2572  }
2573  
2574  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-description:empty {
2575    display: none;
2576  }
2577  
2578  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields {
2579    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2580    display: flex;
2581    gap: var(--wpds-dimension-gap-md, 12px);
2582    row-gap: var(--wpds-dimension-gap-xs, 4px);
2583    flex-wrap: wrap;
2584  }
2585  
2586  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields:empty {
2587    display: none;
2588  }
2589  
2590  .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) {
2591    display: none;
2592  }
2593  
2594  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-content .dataviews-view-picker-activity__item-fields .dataviews-view-picker-activity__item-field-value {
2595    display: flex;
2596    align-items: center;
2597  }
2598  
2599  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type {
2600    align-self: stretch;
2601    flex-shrink: 0;
2602  }
2603  
2604  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::after {
2605    content: "";
2606    flex: 1 1 auto;
2607    width: 1px;
2608    margin: 0 auto;
2609    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2610  }
2611  
2612  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type::before {
2613    content: "";
2614    flex: 0 0 auto;
2615    width: 1px;
2616    margin: 0 auto;
2617    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2618  }
2619  
2620  .dataviews-view-picker-activity .dataviews-view-picker-activity__item:first-child .dataviews-view-picker-activity__item-type::before {
2621    visibility: hidden;
2622  }
2623  
2624  .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 {
2625    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%);
2626  }
2627  
2628  .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2629    font-size: var(--wpds-typography-font-size-lg, 15px);
2630    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2631    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2632    margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2633    padding: 0;
2634    padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
2635  }
2636  
2637  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon {
2638    overflow: hidden;
2639    flex-shrink: 0;
2640    background-color: transparent;
2641  }
2642  
2643  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon img,
2644  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg,
2645  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
2646    display: block;
2647    width: 100%;
2648    height: 100%;
2649    margin: 0 auto;
2650    object-fit: cover;
2651    border-radius: 50%;
2652    box-sizing: border-box;
2653    box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2654  }
2655  
2656  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon svg {
2657    padding: var(--wpds-dimension-padding-xs, 4px);
2658  }
2659  
2660  .dataviews-view-picker-activity .dataviews-view-picker-activity__item-type-icon .dataviews-view-picker-activity__item-bullet {
2661    background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2662  }
2663  
2664  .dataviews-picker-footer__bulk-selection {
2665    align-self: flex-start;
2666    height: var(--wpds-dimension-size-md, 32px);
2667  }
2668  
2669  .dataviews-picker-footer__actions {
2670    align-self: flex-end;
2671  }
2672  
2673  .dataviews-controls__datetime {
2674    border: none;
2675    padding: 0;
2676  }
2677  
2678  .dataviews-controls__relative-date-number,
2679  .dataviews-controls__relative-date-unit {
2680    flex: 1 1 50%;
2681  }
2682  
2683  .dataviews-controls__date input[type=date]::-webkit-inner-spin-button,
2684  .dataviews-controls__date input[type=date]::-webkit-calendar-picker-indicator {
2685    display: none;
2686    -webkit-appearance: none;
2687  }
2688  
2689  .dataviews-controls__date-range-inputs > * {
2690    min-width: 0;
2691  }
2692  
2693  .dataviews-controls__color-picker-dropdown {
2694    display: flex;
2695  }
2696  
2697  .dataviews-controls__date-preset {
2698    border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2699  }
2700  
2701  .dataviews-controls__date-preset:active {
2702    background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2703  }
2704  
2705  .dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2706    --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2707  }
2708  
2709  .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2710    border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2711  }
2712  
2713  .dataviews-validated-control__wrapper-with-error-delegate {
2714    position: relative;
2715  }
2716  
2717  .dataviews-validated-control__error-delegate {
2718    position: absolute;
2719    top: 0;
2720    height: 100%;
2721    width: 100%;
2722    opacity: 0;
2723    pointer-events: none;
2724  }
2725  
2726  .dataforms-layouts-panel__field-trigger {
2727    position: relative;
2728    color: inherit;
2729    display: flex;
2730    width: 100%;
2731    min-height: var(--wpds-dimension-size-sm, 24px);
2732    cursor: var(--wpds-cursor-control, pointer);
2733    align-items: flex-start;
2734    border-radius: var(--wpds-border-radius-sm, 2px);
2735    isolation: isolate;
2736  }
2737  
2738  .dataforms-layouts-panel__field-trigger--label-side {
2739    flex-direction: row;
2740    gap: var(--wpds-dimension-gap-sm, 8px);
2741  }
2742  
2743  .dataforms-layouts-panel__field-trigger--label-top {
2744    display: grid;
2745    grid-template-columns: 1fr auto;
2746  }
2747  
2748  .dataforms-layouts-panel__field-trigger--label-none {
2749    align-items: center;
2750  }
2751  
2752  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover {
2753    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2754  }
2755  
2756  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-trigger-icon {
2757    opacity: 1;
2758  }
2759  
2760  .dataforms-layouts-panel__field-trigger:not(.is-disabled):hover .dataforms-layouts-panel__field-label {
2761    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2762  }
2763  
2764  .dataforms-layouts-panel__field-trigger.is-disabled {
2765    cursor: default;
2766  }
2767  
2768  .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2769    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2770    font-weight: var(--wpds-typography-font-weight-default, 400);
2771  }
2772  
2773  .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
2774    opacity: 1;
2775    fill: currentColor;
2776  }
2777  
2778  .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 {
2779    fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2780  }
2781  
2782  .dataforms-layouts-panel__field-trigger-icon {
2783    padding: 0;
2784    color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2785    flex: 0 0 auto;
2786    opacity: 0;
2787    border-radius: var(--wpds-border-radius-xs, 1px);
2788  }
2789  
2790  .dataforms-layouts-panel__field-trigger-icon::after {
2791    content: "";
2792    position: absolute;
2793    inset: 0;
2794  }
2795  
2796  .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2797    opacity: 1;
2798    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));
2799  }
2800  
2801  .dataforms-layouts-panel__field-dropdown-anchor {
2802    width: 100%;
2803  }
2804  
2805  .dataforms-layouts-panel__field-dropdown-anchor .components-dropdown {
2806    width: 100%;
2807  }
2808  
2809  .dataforms-layouts-panel__field-label {
2810    width: 38%;
2811    flex-shrink: 0;
2812    min-height: var(--wpds-dimension-size-sm, 24px);
2813    display: flex;
2814    align-items: center;
2815    line-height: var(--wpds-typography-line-height-sm, 20px);
2816    hyphens: auto;
2817    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2818  }
2819  
2820  .dataforms-layouts-panel__field-label .components-base-control__label {
2821    display: inline;
2822    margin-bottom: 0;
2823    line-height: inherit;
2824  }
2825  
2826  .dataforms-layouts-panel__field-label.has-error {
2827    color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2828  }
2829  
2830  .dataforms-layouts-panel__field-label-error-content {
2831    pointer-events: none;
2832    color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2833    display: inline-flex;
2834    flex-direction: row;
2835    align-items: center;
2836    gap: var(--wpds-dimension-gap-xs, 4px);
2837  }
2838  
2839  .dataforms-layouts-panel__field-control {
2840    flex-grow: 1;
2841    min-width: 0;
2842    min-height: var(--wpds-dimension-size-sm, 24px);
2843    line-height: var(--wpds-typography-line-height-md, 24px);
2844    display: flex;
2845    align-items: center;
2846    overflow: clip;
2847    padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2848    margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2849    word-break: normal;
2850    overflow-wrap: anywhere;
2851    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2852  }
2853  
2854  .dataforms-layouts-panel__field-control:has(a, button) {
2855    z-index: 1;
2856  }
2857  
2858  .dataforms-layouts-panel__field-control > * {
2859    min-width: 0;
2860  }
2861  
2862  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-label {
2863    width: 100%;
2864  }
2865  
2866  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-control {
2867    grid-column: 1/-1;
2868  }
2869  
2870  .dataforms-layouts-panel__field-trigger--label-top .dataforms-layouts-panel__field-trigger-icon {
2871    grid-row: 1;
2872    grid-column: 2;
2873  }
2874  
2875  .dataforms-layouts-panel__field-dropdown .components-popover__content {
2876    min-width: 320px;
2877    padding: var(--wpds-dimension-padding-lg, 16px);
2878  }
2879  
2880  .dataforms-layouts-panel__dropdown-header {
2881    margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2882  }
2883  
2884  .dataforms-layouts-panel__modal-footer {
2885    margin-top: var(--wpds-dimension-gap-lg, 16px);
2886  }
2887  
2888  .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2889    z-index: 159990;
2890  }
2891  
2892  .dataforms-layouts-regular__field {
2893    width: 100%;
2894    min-height: var(--wpds-dimension-size-md, 32px);
2895    justify-content: flex-start !important;
2896    align-items: flex-start !important;
2897  }
2898  
2899  .dataforms-layouts-regular__field .components-base-control__label,
2900  .dataforms-layouts-regular__field .components-input-control__label,
2901  .dataforms-layouts-regular__field .components-form-token-field__label {
2902    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2903  }
2904  
2905  .dataforms-layouts-regular__field-label {
2906    width: 38%;
2907    flex-shrink: 0;
2908    min-height: var(--wpds-dimension-size-md, 32px);
2909    display: flex;
2910    align-items: center;
2911    line-height: var(--wpds-typography-line-height-sm, 20px);
2912    hyphens: auto;
2913  }
2914  
2915  .dataforms-layouts-regular__field-label--label-position-side {
2916    align-self: center;
2917  }
2918  
2919  .dataforms-layouts-regular__field-label .components-base-control__label {
2920    margin-bottom: 0;
2921  }
2922  
2923  .dataforms-layouts-regular__field-control {
2924    flex-grow: 1;
2925    min-height: var(--wpds-dimension-size-md, 32px);
2926    display: flex;
2927    align-items: center;
2928  }
2929  
2930  .dataforms-layouts-card__field {
2931    width: 100%;
2932  }
2933  
2934  .dataforms-layouts-card__field-header-content {
2935    min-height: 24px;
2936  }
2937  
2938  .dataforms-layouts-card__field-header-content-description {
2939    display: contents;
2940  }
2941  
2942  .dataforms-layouts-card__field-description {
2943    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2944    display: block;
2945    font-size: var(--wpds-typography-font-size-md, 13px);
2946    margin-bottom: var(--wpds-dimension-gap-lg, 16px);
2947  }
2948  
2949  .dataforms-layouts-card__field-summary {
2950    display: flex;
2951    flex-direction: row;
2952    gap: var(--wpds-dimension-gap-lg, 16px);
2953    align-items: center;
2954  }
2955  
2956  .dataforms-layouts-details__summary-content {
2957    display: inline-flex;
2958    min-height: var(--wpds-dimension-size-sm, 24px);
2959  }
2960  
2961  .dataforms-layouts-details__content {
2962    padding-top: var(--wpds-dimension-padding-md, 12px);
2963  }
2964  
2965  .dataforms-layouts-row__field-control {
2966    width: 100%;
2967  }
2968  
2969  .dataforms-layouts__wrapper {
2970    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2971    font-weight: var(--wpds-typography-font-weight-default, 400);
2972    font-size: 13px;
2973    line-height: 20px;
2974  }
2975  
2976  /**
2977   * Typography
2978   */
2979  /**
2980   * SCSS Variables.
2981   *
2982   * Please use variables from this sheet to ensure consistency across the UI.
2983   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
2984   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
2985   */
2986  /**
2987   * Colors
2988   */
2989  /**
2990   * Fonts & basic variables.
2991   */
2992  /**
2993   * Typography
2994   */
2995  /**
2996   * Grid System.
2997   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
2998   */
2999  /**
3000   * Radius scale.
3001   */
3002  /**
3003   * Elevation scale.
3004   */
3005  /**
3006   * Dimensions.
3007   */
3008  /**
3009   * Mobile specific styles
3010   */
3011  /**
3012   * Editor styles.
3013   */
3014  /**
3015   * Block & Editor UI.
3016   */
3017  /**
3018   * Block paddings.
3019   */
3020  /**
3021   * React Native specific.
3022   * These variables do not appear to be used anywhere else.
3023   */
3024  /**
3025   * Breakpoints & Media Queries
3026   */
3027  /**
3028  *  Converts a hex value into the rgb equivalent.
3029  *
3030  * @param {string} hex - the hexadecimal value to convert
3031  * @return {string} comma separated rgb values
3032  */
3033  /**
3034   * Long content fade mixin
3035   *
3036   * Creates a fading overlay to signify that the content is longer
3037   * than the space allows.
3038   */
3039  /**
3040   * Breakpoint mixins
3041   */
3042  /**
3043   * Focus styles.
3044   */
3045  /**
3046   * Standard focus rings for the WordPress Design System.
3047   *
3048   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
3049   * e.g. `&:focus { @include outset-ring__focus(); }`.
3050   */
3051  /**
3052   * Applies editor left position to the selector passed as argument
3053   */
3054  /**
3055   * Styles that are reused verbatim in a few places
3056   */
3057  /**
3058   * Allows users to opt-out of animations via OS-level preferences.
3059   */
3060  /**
3061   * Reset default styles for JavaScript UI based pages.
3062   * This is a WP-admin agnostic reset
3063   */
3064  /**
3065   * Reset the WP Admin page styles for Gutenberg-like pages.
3066   */
3067  /**
3068   * Creates a checkerboard pattern background to indicate transparency.
3069   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3070   */
3071  :root {
3072    --wp-block-synced-color: #7a00df;
3073    --wp-block-synced-color--rgb: 122, 0, 223;
3074    --wp-bound-block-color: var(--wp-block-synced-color);
3075    --wp-editor-canvas-background: #ddd;
3076    --wp-admin-theme-color: #007cba;
3077    --wp-admin-theme-color--rgb: 0, 124, 186;
3078    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
3079    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
3080    --wp-admin-theme-color-darker-20: #005a87;
3081    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
3082    --wp-admin-border-width-focus: 2px;
3083  }
3084  
3085  @media (min-resolution: 192dpi) {
3086    :root {
3087      --wp-admin-border-width-focus: 1.5px;
3088    }
3089  }
3090  .fields-create-template-part-modal {
3091    z-index: 1000001;
3092  }
3093  
3094  .fields-create-template-part-modal__area-fieldset {
3095    border: 0;
3096    padding: 0;
3097    margin: 0;
3098  }
3099  
3100  .fields-create-template-part-modal__area-radio-group {
3101    border: 1px solid #949494;
3102    border-radius: 2px;
3103  }
3104  
3105  .fields-create-template-part-modal__area-radio-wrapper {
3106    position: relative;
3107    padding: 12px;
3108    display: grid;
3109    align-items: center;
3110    grid-template-columns: min-content 1fr min-content;
3111    gap: 4px 8px;
3112    color: #1e1e1e;
3113  }
3114  
3115  .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
3116    border-top: 1px solid #949494;
3117  }
3118  
3119  .fields-create-template-part-modal__area-radio-wrapper input[type=radio] {
3120    position: absolute;
3121    opacity: 0;
3122  }
3123  
3124  .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:checked) {
3125    z-index: 1;
3126  }
3127  
3128  .fields-create-template-part-modal__area-radio-wrapper:has(input[type=radio]:not(:checked)):hover {
3129    color: var(--wp-admin-theme-color);
3130  }
3131  
3132  .fields-create-template-part-modal__area-radio-wrapper > *:not(.fields-create-template-part-modal__area-radio-label) {
3133    pointer-events: none;
3134  }
3135  
3136  .fields-create-template-part-modal__area-radio-label::before {
3137    content: "";
3138    position: absolute;
3139    inset: 0;
3140  }
3141  
3142  input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-label::before {
3143    cursor: var(--wpds-cursor-control, pointer);
3144  }
3145  
3146  input[type=radio]:focus-visible ~ .fields-create-template-part-modal__area-radio-label::before {
3147    outline: 4px solid transparent;
3148    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3149  }
3150  
3151  .fields-create-template-part-modal__area-radio-icon,
3152  .fields-create-template-part-modal__area-radio-checkmark {
3153    fill: currentColor;
3154  }
3155  
3156  input[type=radio]:not(:checked) ~ .fields-create-template-part-modal__area-radio-checkmark {
3157    opacity: 0;
3158  }
3159  
3160  .fields-create-template-part-modal__area-radio-description {
3161    grid-column: 2/3;
3162    margin: 0;
3163    color: #757575;
3164    font-size: 12px;
3165    line-height: normal;
3166    text-wrap: pretty;
3167  }
3168  
3169  input[type=radio]:not(:checked):hover ~ .fields-create-template-part-modal__area-radio-description {
3170    color: inherit;
3171  }
3172  
3173  fieldset.fields__media-edit {
3174    border: 0;
3175    padding: 0;
3176    margin: 0;
3177    width: 100%;
3178  }
3179  
3180  fieldset.fields__media-edit .components-base-control__label {
3181    color: #1e1e1e;
3182  }
3183  
3184  fieldset.fields__media-edit .fields__media-edit-description {
3185    font-size: 12px;
3186    line-height: 1.5;
3187  }
3188  
3189  fieldset.fields__media-edit {
3190    container-type: inline-size;
3191  }
3192  
3193  fieldset.fields__media-edit .fields__media-edit-compact-group {
3194    border: 1px dashed #949494;
3195    border-radius: 4px;
3196    overflow: hidden;
3197  }
3198  
3199  fieldset.fields__media-edit .fields__media-edit-compact-group.is-single {
3200    border-radius: 2px;
3201  }
3202  
3203  fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button {
3204    border: 0;
3205    border-radius: 0;
3206  }
3207  
3208  fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-picker-button:focus-visible {
3209    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3210  }
3211  
3212  fieldset.fields__media-edit .fields__media-edit-compact-group .fields__media-edit-compact:not(:last-child) {
3213    border-bottom: 1px solid #f0f0f0;
3214  }
3215  
3216  fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner {
3217    display: flex;
3218    align-items: center;
3219    gap: 8px;
3220  }
3221  
3222  fieldset.fields__media-edit .fields__media-edit-compact .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3223    margin: 0;
3224  }
3225  
3226  fieldset.fields__media-edit .fields__media-edit-compact {
3227    position: relative;
3228    min-width: 0;
3229  }
3230  
3231  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 {
3232    opacity: 1;
3233  }
3234  
3235  fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers {
3236    position: absolute;
3237    left: 8px;
3238    top: 50%;
3239    transform: translateY(-50%);
3240    opacity: 0;
3241    pointer-events: none;
3242    z-index: 1;
3243    border-radius: 2px;
3244    background: #fff;
3245  }
3246  
3247  fieldset.fields__media-edit .fields__media-edit-compact .fields__media-edit-compact-movers * {
3248    pointer-events: auto;
3249  }
3250  
3251  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 {
3252    display: flex;
3253    align-items: center;
3254    gap: 8px;
3255  }
3256  
3257  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 {
3258    margin: 0;
3259  }
3260  
3261  fieldset.fields__media-edit .fields__media-edit-picker-button {
3262    position: relative;
3263    display: flex;
3264    align-items: center;
3265    gap: 8px;
3266    border: 1px dashed #949494;
3267    border-radius: 2px;
3268    padding: 4px 8px;
3269    min-height: 40px;
3270    cursor: var(--wpds-cursor-control, pointer);
3271    min-width: 0;
3272  }
3273  
3274  fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment) {
3275    border-color: var(--wp-admin-theme-color);
3276    color: var(--wp-admin-theme-color);
3277  }
3278  
3279  fieldset.fields__media-edit .fields__media-edit-picker-button:not(.has-attachment):hover {
3280    background-color: color-mix(in srgb, var(--wp-admin-theme-color, #3858e9) 4%, transparent);
3281    color: var(--wp-admin-theme-color-darker-20);
3282    border-color: var(--wp-admin-theme-color-darker-20);
3283  }
3284  
3285  fieldset.fields__media-edit .fields__media-edit-picker-button:hover {
3286    color: var(--wp-admin-theme-color);
3287  }
3288  
3289  fieldset.fields__media-edit .fields__media-edit-picker-button:focus-visible {
3290    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3291    outline: none;
3292  }
3293  
3294  fieldset.fields__media-edit .fields__media-edit-picker-button[aria-disabled=true] {
3295    opacity: 0.6;
3296    cursor: default;
3297  }
3298  
3299  fieldset.fields__media-edit .fields__media-edit-picker-button .fields__media-edit-picker-button-spinner {
3300    position: absolute;
3301    top: 50%;
3302    right: 50%;
3303    transform: translate(50%, -50%);
3304    z-index: 1;
3305  }
3306  
3307  fieldset.fields__media-edit .fields__media-edit-filename,
3308  fieldset.fields__media-edit .fields__media-edit-placeholder {
3309    flex: 1;
3310    width: 100%;
3311    min-width: 0;
3312  }
3313  
3314  fieldset.fields__media-edit .fields__media-edit-placeholder {
3315    text-align: center;
3316  }
3317  
3318  fieldset.fields__media-edit .fields__media-edit-thumbnail {
3319    width: 24px;
3320    aspect-ratio: 1/1;
3321    flex-shrink: 0;
3322    border-radius: 2px;
3323  }
3324  
3325  fieldset.fields__media-edit .fields__media-edit-expanded {
3326    display: grid;
3327    gap: 8px;
3328  }
3329  
3330  fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner {
3331    display: flex;
3332    align-items: center;
3333    gap: 8px;
3334  }
3335  
3336  fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .components-drop-zone .components-drop-zone__content-inner .components-drop-zone__content-icon {
3337    margin: 0;
3338  }
3339  
3340  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview {
3341    position: relative;
3342    width: 100%;
3343    aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3344    border-radius: 2px;
3345    padding: 4px;
3346    overflow: hidden;
3347    display: flex;
3348    align-items: center;
3349    justify-content: center;
3350  }
3351  
3352  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-preview .fields__media-edit-expanded-preview-stack {
3353    width: 100%;
3354    height: 100%;
3355  }
3356  
3357  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay {
3358    position: absolute;
3359    top: 0;
3360    right: 0;
3361    left: 0;
3362    bottom: 0;
3363    opacity: 0;
3364    pointer-events: none;
3365  }
3366  
3367  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-overlay * {
3368    pointer-events: auto;
3369  }
3370  
3371  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-actions {
3372    position: absolute;
3373    top: 4px;
3374    left: 4px;
3375    border-radius: 2px;
3376    background: #fff;
3377  }
3378  
3379  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item {
3380    position: relative;
3381    min-width: 0;
3382    border-radius: 4px;
3383  }
3384  
3385  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 {
3386    opacity: 1;
3387  }
3388  
3389  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-expanded-item:not(.has-preview-image) .fields__media-edit-expanded-preview-stack {
3390    padding: 8px;
3391  }
3392  
3393  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3394    width: 100%;
3395    height: 100%;
3396    object-fit: cover;
3397    object-position: 50% 50%;
3398  }
3399  
3400  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
3401    text-align: center;
3402    flex: none;
3403  }
3404  
3405  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button-spinner svg {
3406    margin: 0;
3407  }
3408  
3409  fieldset.fields__media-edit .fields__media-edit-expanded.is-single {
3410    grid-template-columns: 1fr;
3411  }
3412  
3413  fieldset.fields__media-edit .fields__media-edit-expanded.is-single .fields__media-edit-expanded-preview {
3414    aspect-ratio: 2/1;
3415  }
3416  
3417  fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-picker-button {
3418    border-radius: 4px;
3419  }
3420  
3421  fieldset.fields__media-edit .fields__media-edit-expanded.is-empty .fields__media-edit-picker-button {
3422    border-radius: 2px;
3423  }
3424  
3425  fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3426    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3427  }
3428  
3429  @container (max-width: 500px) {
3430    fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3431      grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
3432    }
3433  }
3434  fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-picker-button {
3435    padding: 0;
3436  }
3437  
3438  fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields__media-edit-placeholder {
3439    display: flex;
3440    align-items: center;
3441    justify-content: center;
3442    aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
3443  }
3444  
3445  .fields-controls__author-avatar {
3446    flex-shrink: 0;
3447    overflow: hidden;
3448    width: 24px;
3449    height: 24px;
3450    align-items: center;
3451    justify-content: right;
3452    display: flex;
3453  }
3454  
3455  .fields-controls__author-avatar img {
3456    width: 16px;
3457    height: 16px;
3458    object-fit: cover;
3459    opacity: 0;
3460    border-radius: 100%;
3461  }
3462  
3463  @media not (prefers-reduced-motion) {
3464    .fields-controls__author-avatar img {
3465      transition: opacity 0.1s linear;
3466    }
3467  }
3468  .fields-controls__author-avatar.is-loaded img {
3469    opacity: 1;
3470  }
3471  
3472  .fields-controls__author-icon {
3473    display: flex;
3474    flex-shrink: 0;
3475    width: 24px;
3476    height: 24px;
3477  }
3478  
3479  .fields-controls__author-icon svg {
3480    margin-right: -4px;
3481    fill: currentColor;
3482  }
3483  
3484  .fields-controls__author-name {
3485    text-overflow: ellipsis;
3486    overflow: hidden;
3487  }
3488  
3489  .fields-controls__slug {
3490    border: 0;
3491    padding: 0;
3492    margin: 0;
3493  }
3494  
3495  .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3496    padding-inline-start: 0 !important;
3497  }
3498  
3499  .fields-controls__slug .fields-controls__slug-help-link {
3500    word-break: normal;
3501    overflow-wrap: anywhere;
3502  }
3503  
3504  .fields-controls__slug .fields-controls__slug-help {
3505    display: flex;
3506    flex-direction: column;
3507  }
3508  
3509  .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3510    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3511  }
3512  
3513  .fields-controls__featured-image-image,
3514  .fields-controls__featured-image-placeholder {
3515    width: 100%;
3516    height: 100%;
3517    display: block;
3518    border-radius: 4px;
3519  }
3520  
3521  .fields-controls__featured-image-placeholder {
3522    box-shadow: none;
3523    background: #f0f0f0;
3524  }
3525  
3526  .fields-controls__parent {
3527    border: 0;
3528    padding: 0;
3529    margin: 0;
3530  }
3531  
3532  .fields-controls__password {
3533    border: 0;
3534    padding: 0;
3535    margin: 0;
3536  }
3537  
3538  .fields-controls__status-icon {
3539    height: 24px;
3540    width: 24px;
3541  }
3542  
3543  .fields-controls__status-icon svg {
3544    fill: currentColor;
3545    margin-right: -4px;
3546  }
3547  
3548  .fields-field__title > span:first-child {
3549    text-overflow: ellipsis;
3550    overflow: hidden;
3551    text-decoration: none;
3552    white-space: nowrap;
3553    display: block;
3554    flex-grow: 0;
3555  }
3556  
3557  .fields-field__pattern-title span:first-child {
3558    flex: 1;
3559  }
3560  
3561  /**
3562   * SCSS Variables.
3563   *
3564   * Please use variables from this sheet to ensure consistency across the UI.
3565   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
3566   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
3567   */
3568  /**
3569   * Colors
3570   */
3571  /**
3572   * Fonts & basic variables.
3573   */
3574  /**
3575   * Typography
3576   */
3577  /**
3578   * Grid System.
3579   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
3580   */
3581  /**
3582   * Radius scale.
3583   */
3584  /**
3585   * Elevation scale.
3586   */
3587  /**
3588   * Dimensions.
3589   */
3590  /**
3591   * Mobile specific styles
3592   */
3593  /**
3594   * Editor styles.
3595   */
3596  /**
3597   * Block & Editor UI.
3598   */
3599  /**
3600   * Block paddings.
3601   */
3602  /**
3603   * React Native specific.
3604   * These variables do not appear to be used anywhere else.
3605   */
3606  /**
3607   * Typography
3608   */
3609  /**
3610   * Breakpoints & Media Queries
3611   */
3612  /**
3613  *  Converts a hex value into the rgb equivalent.
3614  *
3615  * @param {string} hex - the hexadecimal value to convert
3616  * @return {string} comma separated rgb values
3617  */
3618  /**
3619   * Long content fade mixin
3620   *
3621   * Creates a fading overlay to signify that the content is longer
3622   * than the space allows.
3623   */
3624  /**
3625   * Breakpoint mixins
3626   */
3627  /**
3628   * Focus styles.
3629   */
3630  /**
3631   * Standard focus rings for the WordPress Design System.
3632   *
3633   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
3634   * e.g. `&:focus { @include outset-ring__focus(); }`.
3635   */
3636  /**
3637   * Applies editor left position to the selector passed as argument
3638   */
3639  /**
3640   * Styles that are reused verbatim in a few places
3641   */
3642  /**
3643   * Allows users to opt-out of animations via OS-level preferences.
3644   */
3645  /**
3646   * Reset default styles for JavaScript UI based pages.
3647   * This is a WP-admin agnostic reset
3648   */
3649  /**
3650   * Reset the WP Admin page styles for Gutenberg-like pages.
3651   */
3652  /**
3653   * Creates a checkerboard pattern background to indicate transparency.
3654   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
3655   */
3656  @media (min-width: 782px) {
3657    .font-library-modal.font-library-modal {
3658      width: 65vw;
3659    }
3660  }
3661  .font-library-modal .components-modal__header {
3662    border-bottom: none;
3663  }
3664  
3665  .font-library-modal .components-modal__content {
3666    padding: 0;
3667    margin-bottom: 90px;
3668  }
3669  
3670  .font-library-modal .font-library__subtitle {
3671    text-transform: uppercase;
3672    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3673    font-size: 11px;
3674  }
3675  
3676  .font-library-modal__tab-panel {
3677    height: calc(100% - 50px);
3678  }
3679  
3680  .font-library__tabpanel-layout {
3681    height: 100%;
3682    display: flex;
3683    flex-direction: column;
3684  }
3685  
3686  .font-library__tabpanel-layout > div {
3687    flex-grow: 1;
3688  }
3689  
3690  .font-library__tabpanel-layout .font-library__loading {
3691    width: 100%;
3692    height: 100%;
3693    display: flex;
3694    position: absolute;
3695    right: 0;
3696    top: 0;
3697    align-items: center;
3698    justify-content: center;
3699    padding-top: 124px;
3700    box-sizing: border-box;
3701  }
3702  
3703  .font-library__tabpanel-layout .components-navigator-screen {
3704    padding: 24px;
3705    width: 100%;
3706  }
3707  
3708  .font-library__footer {
3709    position: absolute;
3710    width: 100%;
3711    bottom: 0;
3712    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3713    padding: 24px;
3714    background-color: #fff;
3715    box-sizing: border-box;
3716    flex-grow: 0 !important;
3717    flex-shrink: 0;
3718    height: 90px;
3719  }
3720  
3721  .font-library__page-selection {
3722    font-size: 11px;
3723    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3724    text-transform: uppercase;
3725  }
3726  
3727  @media (min-width: 600px) {
3728    .font-library__page-selection .components-select-control__input {
3729      font-size: 11px !important;
3730      font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3731    }
3732  }
3733  .font-library__search {
3734    width: 240px;
3735  }
3736  
3737  .font-library__fonts-title {
3738    text-transform: uppercase;
3739    font-size: 11px;
3740    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3741    margin-top: 0;
3742    margin-bottom: 0;
3743  }
3744  
3745  .font-library__fonts-list {
3746    list-style: none;
3747    padding: 0;
3748    margin-top: 0;
3749    margin-bottom: 0;
3750  }
3751  
3752  .font-library__fonts-list-item {
3753    margin-bottom: 0;
3754  }
3755  
3756  .font-library__font-demo {
3757    position: relative;
3758  }
3759  
3760  .font-library__font-card {
3761    box-sizing: border-box;
3762    border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3763    width: 100%;
3764    height: auto !important;
3765    padding: 16px;
3766    margin-top: -1px; /* To collapse the margin with the previous element */
3767  }
3768  
3769  .font-library__font-card:hover {
3770    background-color: #f0f0f0;
3771  }
3772  
3773  .font-library__font-card:focus {
3774    position: relative;
3775  }
3776  
3777  .font-library__font-card .font-library__font-card__name {
3778    font-weight: 700;
3779  }
3780  
3781  .font-library__font-card .font-library__font-card__count {
3782    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3783  }
3784  
3785  .font-library__font-card .font-library__font-variant_demo-image {
3786    display: block;
3787    height: 24px;
3788    width: auto;
3789  }
3790  
3791  @media not (prefers-reduced-motion) {
3792    .font-library__font-card .font-library__font-variant_demo-image {
3793      transition: opacity var(--wpds-motion-duration-lg, 300ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
3794    }
3795  }
3796  .font-library__font-card .font-library__font-variant_demo-image.is-loading {
3797    position: absolute;
3798    top: 0;
3799    right: 0;
3800    opacity: 0;
3801  }
3802  
3803  .font-library__font-card .font-library__font-variant-demo-skeleton {
3804    height: 24px;
3805    border-radius: var(--wpds-border-radius-sm, 2px);
3806  }
3807  
3808  .font-library__font-card .font-library__font-variant_demo-text {
3809    white-space: nowrap;
3810    flex-shrink: 0;
3811  }
3812  
3813  @media not (prefers-reduced-motion) {
3814    .font-library__font-card .font-library__font-variant_demo-text {
3815      transition: opacity 0.3s ease-in-out;
3816    }
3817  }
3818  .font-library-modal__tablist-container {
3819    position: sticky;
3820    top: 0;
3821    border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3822    background: #fff;
3823    z-index: 1;
3824  }
3825  
3826  .font-library__upload-area {
3827    align-items: center;
3828    display: flex;
3829    justify-content: center;
3830    height: 256px !important;
3831    width: 100%;
3832  }
3833  
3834  button.font-library__upload-area {
3835    background-color: #f0f0f0;
3836  }
3837  
3838  .font-library__local-fonts {
3839    margin: 24px auto;
3840    width: 80%;
3841  }
3842  
3843  .font-library__local-fonts .font-library__upload-area__text {
3844    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3845  }
3846  
3847  .font-library__google-fonts-confirm {
3848    display: flex;
3849    justify-content: center;
3850    align-items: center;
3851    margin-top: 64px;
3852  }
3853  
3854  .font-library__google-fonts-confirm p {
3855    line-height: 1.4;
3856  }
3857  
3858  .font-library__google-fonts-confirm h2 {
3859    font-size: 1.2rem;
3860    font-weight: 400;
3861  }
3862  
3863  .font-library__google-fonts-confirm .components-card {
3864    padding: 16px;
3865    width: 400px;
3866  }
3867  
3868  .font-library__google-fonts-confirm .components-button {
3869    width: 100%;
3870    justify-content: center;
3871  }
3872  
3873  .font-library__select-all {
3874    padding: 16px 17px 16px 16px;
3875  }
3876  
3877  .font-library__select-all .components-checkbox-control__label {
3878    padding-right: 16px;
3879  }
3880  
3881  .global-styles-ui-screen-revisions {
3882    display: flex;
3883    flex-direction: column;
3884    flex-grow: 1;
3885    min-height: 0;
3886  }
3887  
3888  .global-styles-ui-screen-revisions__actions {
3889    margin-inline-start: auto;
3890  }
3891  
3892  .global-styles-ui-screen-revisions__date {
3893    text-transform: uppercase;
3894    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3895    font-size: 12px;
3896  }
3897  
3898  .global-styles-ui-screen-revisions__description {
3899    display: flex;
3900    flex-direction: column;
3901    align-items: flex-start;
3902    gap: 8px;
3903  }
3904  
3905  .global-styles-ui-screen-revisions__changes,
3906  .global-styles-ui-screen-revisions__meta {
3907    color: #2f2f2f;
3908    font-size: 12px;
3909  }
3910  
3911  .global-styles-ui-screen-revisions__meta {
3912    display: flex;
3913    justify-content: start;
3914    width: 100%;
3915    align-items: center;
3916    text-align: right;
3917  }
3918  
3919  .global-styles-ui-screen-revisions__meta img {
3920    width: 16px;
3921    height: 16px;
3922    border-radius: 100%;
3923    margin-left: 8px;
3924  }
3925  
3926  .global-styles-ui-screen-revisions__changes {
3927    text-align: right;
3928    line-height: 1.4;
3929    margin: 0 12px 0 0;
3930    list-style: disc;
3931  }
3932  
3933  .global-styles-ui-screen-revisions__changes li {
3934    margin-bottom: 4px;
3935  }
3936  
3937  .global-styles-ui-variations_item {
3938    box-sizing: border-box;
3939    cursor: var(--wpds-cursor-control, pointer);
3940  }
3941  
3942  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
3943    border-radius: 2px;
3944    outline: 1px solid rgba(0, 0, 0, 0.1);
3945    outline-offset: -1px;
3946    overflow: hidden;
3947    position: relative;
3948  }
3949  
3950  @media not (prefers-reduced-motion) {
3951    .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
3952      transition: outline 0.1s linear;
3953    }
3954  }
3955  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill {
3956    height: 32px;
3957  }
3958  
3959  .global-styles-ui-variations_item .global-styles-ui-variations_item-preview.is-pill .block-editor-iframe__scale-container {
3960    overflow: hidden;
3961  }
3962  
3963  .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
3964    outline-color: rgba(0, 0, 0, 0.3);
3965  }
3966  
3967  .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 {
3968    outline-color: #1e1e1e;
3969    outline-offset: 1px;
3970    outline-width: var(--wp-admin-border-width-focus);
3971  }
3972  
3973  .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
3974    outline-color: var(--wp-admin-theme-color);
3975  }
3976  
3977  .global-styles-ui-preview__wrapper {
3978    max-width: 100%;
3979    display: block;
3980    width: 100%;
3981  }
3982  
3983  .global-styles-ui-preview__wrapper.is-hoverable {
3984    cursor: var(--wpds-cursor-control, pointer);
3985  }
3986  
3987  .global-styles-ui-typography-preview {
3988    display: flex;
3989    align-items: center;
3990    justify-content: center;
3991    min-height: 100px;
3992    margin-bottom: 20px;
3993    background: #f0f0f0;
3994    border-radius: 2px;
3995    overflow: hidden;
3996  }
3997  
3998  .global-styles-ui-font-size__item {
3999    white-space: nowrap;
4000    text-overflow: ellipsis;
4001    overflow: hidden;
4002    line-break: anywhere;
4003  }
4004  
4005  .global-styles-ui-font-size__item-value {
4006    color: #757575;
4007  }
4008  
4009  .global-styles-ui-screen-typography__indicator {
4010    height: 24px;
4011    width: 24px;
4012    font-size: 14px;
4013    display: flex !important;
4014    align-items: center;
4015    justify-content: center;
4016    border-radius: 2px;
4017  }
4018  
4019  .global-styles-ui-block-types-filter {
4020    margin-bottom: 12px;
4021    padding: 0 16px;
4022  }
4023  
4024  .global-styles-ui-block-types-search {
4025    flex-grow: 1;
4026  }
4027  
4028  .global-styles-ui-block-types-item-list .global-styles-ui-block-types-item__icon {
4029    min-width: 24px;
4030  }
4031  
4032  .global-styles-ui-block-types-item-list__no-results {
4033    padding-top: 16px;
4034  }
4035  
4036  .global-styles-ui-block-types-item__indicator {
4037    background: var(--wp-admin-theme-color);
4038    border-radius: 50%;
4039    flex: none;
4040    height: 6px;
4041    margin-right: auto;
4042    width: 6px;
4043  }
4044  
4045  .global-styles-ui-screen-typography__font-variants-count {
4046    color: #757575;
4047  }
4048  
4049  .global-styles-ui-font-families__manage-fonts {
4050    justify-content: center;
4051  }
4052  
4053  .global-styles-ui-screen .color-block-support-panel {
4054    padding-right: 0;
4055    padding-left: 0;
4056    padding-top: 0;
4057    border-top: none;
4058    row-gap: 12px;
4059  }
4060  
4061  .global-styles-ui-header {
4062    margin-bottom: 0 !important;
4063    line-height: 1.9 !important;
4064  }
4065  
4066  .global-styles-ui-subtitle {
4067    margin-bottom: 0 !important;
4068    text-transform: uppercase;
4069    font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important;
4070    font-size: 11px !important;
4071  }
4072  
4073  .global-styles-ui-section-title {
4074    color: #2f2f2f;
4075    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4076    line-height: 1.2;
4077    padding: 16px 16px 0;
4078    margin: 0;
4079  }
4080  
4081  .global-styles-ui-icon-with-current-color {
4082    fill: currentColor;
4083  }
4084  
4085  .global-styles-ui__color-indicator-wrapper {
4086    height: 24px;
4087    flex-shrink: 0;
4088    display: flex;
4089    align-items: center;
4090  }
4091  
4092  .global-styles-ui__palette-preview {
4093    display: inline-flex;
4094  }
4095  
4096  .global-styles-ui__palette-preview > * + * {
4097    margin-inline-start: -8px;
4098  }
4099  
4100  .global-styles-ui__shadows-panel__options-container,
4101  .global-styles-ui__typography-panel__options-container {
4102    height: 24px;
4103  }
4104  
4105  .global-styles-ui__block-preview-panel {
4106    position: relative;
4107    width: 100%;
4108    border: #ddd 1px solid;
4109    border-radius: 2px;
4110    overflow: hidden;
4111  }
4112  
4113  .global-styles-ui__shadow-preview-panel,
4114  .global-styles-ui__text-shadow-preview-panel {
4115    height: 144px;
4116    border: #ddd 1px solid;
4117    border-radius: 2px;
4118    overflow: auto;
4119    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);
4120    background-position: 0 0, 8px 8px;
4121    background-size: 16px 16px;
4122  }
4123  
4124  .global-styles-ui__shadow-preview-block {
4125    border: #ddd 1px solid;
4126    border-radius: 2px;
4127    background-color: #fff;
4128    width: 60%;
4129    height: 60px;
4130  }
4131  
4132  .global-styles-ui__text-shadow-preview-panel {
4133    margin-block: -8px 16px;
4134  }
4135  
4136  .global-styles-ui__text-shadow-preview-text {
4137    font-size: 24px;
4138  }
4139  
4140  .global-styles-ui__text-shadow-editor__header {
4141    margin-block-end: 8px;
4142  }
4143  
4144  .global-styles-ui__text-shadow-editor__inputs {
4145    display: grid;
4146    grid-template-columns: repeat(2, 1fr);
4147    gap: 16px;
4148  }
4149  
4150  .global-styles-ui__shadow-editor__dropdown-content,
4151  .global-styles-ui__text-shadow-editor__dropdown-content {
4152    width: 280px;
4153  }
4154  
4155  .global-styles-ui__shadow-editor-panel,
4156  .global-styles-ui__text-shadow-editor-panel {
4157    margin-bottom: 4px;
4158  }
4159  
4160  .global-styles-ui__shadow-editor__dropdown,
4161  .global-styles-ui__text-shadow-editor__dropdown {
4162    width: 100%;
4163    position: relative;
4164  }
4165  
4166  .global-styles-ui__shadow-editor__dropdown-toggle,
4167  .global-styles-ui__text-shadow-editor__dropdown-toggle {
4168    width: 100%;
4169    height: auto;
4170    padding-top: 8px;
4171    padding-bottom: 8px;
4172    text-align: right;
4173    border-radius: inherit;
4174  }
4175  
4176  .global-styles-ui__shadow-editor__dropdown-toggle.is-open,
4177  .global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
4178    background: #f0f0f0;
4179    color: var(--wp-admin-theme-color);
4180  }
4181  
4182  .global-styles-ui__shadow-editor__remove-button,
4183  .global-styles-ui__text-shadow-editor__remove-button {
4184    position: absolute;
4185    left: 8px;
4186    top: 8px;
4187    opacity: 0;
4188  }
4189  
4190  .global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover,
4191  .global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4192  .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4193  .global-styles-ui__text-shadow-editor__remove-button:focus,
4194  .global-styles-ui__text-shadow-editor__remove-button:hover {
4195    opacity: 1;
4196  }
4197  
4198  @media (hover: none) {
4199    .global-styles-ui__shadow-editor__remove-button,
4200    .global-styles-ui__text-shadow-editor__remove-button {
4201      opacity: 1;
4202    }
4203  }
4204  .global-styles-ui-screen-css {
4205    flex: 1 1 auto;
4206    display: flex;
4207    flex-direction: column;
4208    margin: 16px;
4209  }
4210  
4211  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
4212    flex: 1 1 auto;
4213  }
4214  
4215  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
4216    flex: 1 1 auto;
4217    display: flex;
4218    flex-direction: column;
4219  }
4220  
4221  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4222    flex: 1 1 auto;
4223    display: flex;
4224    flex-direction: column;
4225  }
4226  
4227  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
4228    flex: 1 1 auto;
4229  }
4230  
4231  .global-styles-ui-screen-css-help-link {
4232    display: inline-block;
4233    margin-top: 8px;
4234  }
4235  
4236  .global-styles-ui-screen-variations {
4237    margin-top: 16px;
4238    border-top: 1px solid #ddd;
4239  }
4240  
4241  .global-styles-ui-screen-variations > * {
4242    margin: 24px 16px;
4243  }
4244  
4245  .global-styles-ui-sidebar__navigator-provider {
4246    height: 100%;
4247  }
4248  
4249  .global-styles-ui-sidebar__navigator-screen {
4250    display: flex;
4251    flex-direction: column;
4252    height: 100%;
4253  }
4254  
4255  .global-styles-ui-color-palette__tablist-container {
4256    border-bottom: 1px solid #ddd;
4257  }
4258  
4259  .global-styles-ui-color-palette__tablist {
4260    margin-bottom: -1px;
4261  }
4262  
4263  .global-styles-ui-sidebar__navigator-screen .single-column {
4264    grid-column: span 1;
4265  }
4266  
4267  .global-styles-ui-screen-root.global-styles-ui-screen-root,
4268  .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4269    background: unset;
4270    color: inherit;
4271  }
4272  
4273  .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4274    fill: currentColor;
4275  }
4276  
4277  .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 {
4278    border-radius: 2px;
4279  }
4280  
4281  .global-styles-ui-screen-root__active-style-tile-preview {
4282    clip-path: border-box;
4283  }
4284  
4285  .global-styles-ui-color-palette-panel,
4286  .global-styles-ui-gradient-palette-panel,
4287  .global-styles-ui-duotone-palette-panel {
4288    padding: 16px;
4289  }
4290  
4291  .edit-site-custom-template-modal__contents-wrapper {
4292    height: 100%;
4293    justify-content: flex-start !important;
4294  }
4295  .edit-site-custom-template-modal__contents-wrapper > * {
4296    width: 100%;
4297  }
4298  .edit-site-custom-template-modal__contents > .components-button {
4299    height: auto;
4300    justify-content: center;
4301  }
4302  @media (min-width: 782px) {
4303    .edit-site-custom-template-modal {
4304      width: 456px;
4305    }
4306  }
4307  @media (min-width: 600px) {
4308    .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4309      overflow-y: auto;
4310      max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4311      padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4312      margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4313      width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4314      scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4315    }
4316  }
4317  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4318    display: block;
4319    width: 100%;
4320    text-align: right;
4321    white-space: pre-wrap;
4322    overflow-wrap: break-word;
4323    height: auto;
4324    padding: 8px 12px;
4325  }
4326  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4327    font-weight: 700;
4328    background: none;
4329  }
4330  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4331    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4332  }
4333  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4334    color: var(--wp-admin-theme-color);
4335  }
4336  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4337    color: var(--wp-admin-theme-color);
4338  }
4339  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4340    background-color: #f0f0f0;
4341  }
4342  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4343    overflow: hidden;
4344    text-overflow: ellipsis;
4345    display: block;
4346  }
4347  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4348    word-break: break-all;
4349    color: #757575;
4350  }
4351  
4352  .edit-site-custom-template-modal__no-results {
4353    border: 1px solid #ccc;
4354    border-radius: 2px;
4355    padding: 16px;
4356  }
4357  
4358  .edit-site-custom-generic-template__modal .components-modal__header {
4359    border-bottom: none;
4360  }
4361  .edit-site-custom-generic-template__modal .components-modal__content::before {
4362    margin-bottom: 4px;
4363  }
4364  
4365  @media (min-width: 960px) {
4366    .edit-site-add-new-template__modal {
4367      max-width: 832px;
4368      margin-top: 64px;
4369      width: calc(100% - 128px);
4370      max-height: calc(100% - 128px);
4371    }
4372  }
4373  .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4374  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4375    color: var(--wp-admin-theme-color);
4376  }
4377  .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4378    padding: 8px;
4379    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4380    border-radius: 100%;
4381    max-height: 40px;
4382    max-width: 40px;
4383  }
4384  
4385  .edit-site-custom-template-modal__contents > .components-button,
4386  .edit-site-add-new-template__template-list__contents > .components-button {
4387    padding: 32px;
4388    display: flex;
4389    flex-direction: column;
4390    border: 1px solid #ddd;
4391    justify-content: center;
4392  }
4393  .edit-site-custom-template-modal__contents > .components-button span:first-child,
4394  .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4395    color: #1e1e1e;
4396  }
4397  .edit-site-custom-template-modal__contents > .components-button span,
4398  .edit-site-add-new-template__template-list__contents > .components-button span {
4399    color: #757575;
4400  }
4401  .edit-site-custom-template-modal__contents > .components-button:hover,
4402  .edit-site-add-new-template__template-list__contents > .components-button:hover {
4403    color: var(--wp-admin-theme-color-darker-10);
4404    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4405    border-color: transparent;
4406  }
4407  .edit-site-custom-template-modal__contents > .components-button:hover span,
4408  .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4409    color: var(--wp-admin-theme-color);
4410  }
4411  .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4412  .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4413    color: var(--wp-admin-theme-color);
4414  }
4415  .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4416  .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4417  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4418  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4419    grid-column: 1/-1;
4420  }
4421  
4422  .edit-site-add-new-template__template-list__contents > .components-button {
4423    height: 100%;
4424    padding: 16px;
4425    text-align: start;
4426    align-items: flex-start;
4427    justify-content: flex-start;
4428  }
4429  
4430  .edit-site-visual-editor__editor-canvas.is-focused {
4431    outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4432    outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4433  }
4434  
4435  .edit-site-canvas-loader {
4436    --wp-components-color-foreground: var(--color);
4437    width: 100%;
4438    height: 100%;
4439    display: flex;
4440    position: absolute;
4441    top: 0;
4442    right: 0;
4443    opacity: 0;
4444    align-items: center;
4445    justify-content: center;
4446  }
4447  @media not (prefers-reduced-motion) {
4448    .edit-site-canvas-loader {
4449      animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4450      animation-fill-mode: forwards;
4451    }
4452  }
4453  
4454  @keyframes edit-site-canvas-loader__fade-in-animation {
4455    from {
4456      opacity: 0;
4457    }
4458    to {
4459      opacity: 1;
4460    }
4461  }
4462  .edit-site-patterns__delete-modal {
4463    width: 400px;
4464  }
4465  
4466  .page-patterns-preview-field {
4467    display: flex;
4468    justify-content: center;
4469    align-items: center;
4470    flex-direction: column;
4471    height: 100%;
4472    border-radius: 4px;
4473  }
4474  .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4475    height: 100%;
4476  }
4477  .dataviews-view-table .page-patterns-preview-field {
4478    width: 96px;
4479    flex-grow: 0;
4480    text-wrap: balance;
4481    text-wrap: pretty;
4482  }
4483  
4484  .edit-site-patterns__pattern-icon {
4485    fill: var(--wp-block-synced-color);
4486    flex-shrink: 0;
4487  }
4488  
4489  .edit-site-patterns__section-header {
4490    border-bottom: 1px solid #f0f0f0;
4491    padding: 16px 48px;
4492    position: sticky;
4493    top: 0;
4494    z-index: 2;
4495    flex-shrink: 0;
4496    min-height: 40px;
4497  }
4498  @media not (prefers-reduced-motion) {
4499    .edit-site-patterns__section-header {
4500      transition: padding ease-out 0.1s;
4501    }
4502  }
4503  .edit-site-patterns__section-header .edit-site-patterns__title {
4504    min-height: 40px;
4505  }
4506  .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4507    flex-grow: 1;
4508    flex-basis: 0;
4509    white-space: nowrap;
4510  }
4511  .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4512    margin-bottom: 8px;
4513  }
4514  .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4515    top: 0;
4516  }
4517  
4518  .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
4519    background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4520    color: var(--wp-block-synced-color);
4521    border-color: currentColor;
4522  }
4523  
4524  .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4525    width: 350px;
4526  }
4527  .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4528    position: relative;
4529  }
4530  .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4531    position: absolute;
4532    border: 1px solid var(--wp-admin-theme-color);
4533    border-bottom-right-radius: 2px;
4534    border-bottom-left-radius: 2px;
4535    box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4536    box-sizing: border-box;
4537    z-index: 1;
4538    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
4539    width: calc(100% + 2px);
4540    right: -1px;
4541    min-width: initial;
4542    max-height: 96px;
4543  }
4544  
4545  @media (min-width: 600px) {
4546    .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4547      max-width: 500px;
4548    }
4549  }
4550  
4551  @container (max-width: 430px) {
4552    .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4553      padding-right: 24px;
4554      padding-left: 24px;
4555    }
4556  }
4557  .show-icon-labels .edit-site-patterns__button.has-icon {
4558    width: auto;
4559    padding: 0 var(--wpds-dimension-padding-xs, 4px);
4560  }
4561  .show-icon-labels .edit-site-patterns__button.has-icon svg {
4562    display: none;
4563  }
4564  .show-icon-labels .edit-site-patterns__button.has-icon::after {
4565    content: attr(aria-label);
4566    font-size: var(--wpds-typography-font-size-sm, 12px);
4567  }
4568  
4569  .page-templates-preview-field {
4570    display: flex;
4571    justify-content: center;
4572    align-items: center;
4573    flex-direction: column;
4574    height: 100%;
4575    width: 100%;
4576    border-radius: 4px;
4577  }
4578  .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4579    height: 120px;
4580  }
4581  .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4582    height: 100%;
4583  }
4584  .dataviews-view-table .page-templates-preview-field {
4585    position: relative;
4586    width: 120px;
4587    max-height: 160px;
4588    text-wrap: balance;
4589    text-wrap: pretty;
4590  }
4591  
4592  .edit-site-list__rename-modal {
4593    z-index: 1000001;
4594  }
4595  
4596  .edit-site-editor__editor-interface {
4597    opacity: 1;
4598  }
4599  @media not (prefers-reduced-motion) {
4600    .edit-site-editor__editor-interface {
4601      transition: opacity 0.1s ease-out;
4602    }
4603  }
4604  .edit-site-editor__editor-interface.is-loading {
4605    opacity: 0;
4606  }
4607  
4608  .edit-site-editor__toggle-save-panel {
4609    box-sizing: border-box;
4610    width: 280px;
4611    background-color: #fff;
4612    border: 1px dotted #ddd;
4613    padding: 24px;
4614    display: flex;
4615    justify-content: center;
4616  }
4617  
4618  .edit-site-welcome-guide {
4619    width: 312px;
4620  }
4621  .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4622    background: #00a0d2;
4623  }
4624  .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4625    border-left: #3858e9 16px solid;
4626    border-top: #3858e9 16px solid;
4627  }
4628  .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4629    border-right: #3858e9 16px solid;
4630    border-top: #3858e9 16px solid;
4631  }
4632  .edit-site-welcome-guide__image {
4633    margin: 0 0 16px;
4634  }
4635  .edit-site-welcome-guide__image > img {
4636    display: block;
4637    max-width: 100%;
4638    object-fit: cover;
4639  }
4640  .edit-site-welcome-guide__heading {
4641    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4642    font-size: 24px;
4643    line-height: 1.4;
4644    margin: 16px 0 16px 0;
4645    padding: 0 32px;
4646  }
4647  .edit-site-welcome-guide__text {
4648    font-size: 13px;
4649    line-height: 1.4;
4650    margin: 0 0 16px 0;
4651    padding: 0 32px;
4652  }
4653  .edit-site-welcome-guide__text img {
4654    vertical-align: bottom;
4655  }
4656  .edit-site-welcome-guide__inserter-icon {
4657    margin: 0 4px;
4658    vertical-align: text-top;
4659  }
4660  .edit-site-welcome-guide .components-button:hover svg {
4661    color: #fff;
4662  }
4663  
4664  .edit-site-layout {
4665    height: 100%;
4666    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4667    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4668    display: flex;
4669    flex-direction: column;
4670  }
4671  .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4672    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4673  }
4674  
4675  .edit-site-layout__content {
4676    height: 100%;
4677    min-height: 0;
4678    flex-grow: 1;
4679    display: flex;
4680  }
4681  
4682  .edit-site-layout__sidebar-region {
4683    z-index: 1;
4684    width: 100vw;
4685    flex-shrink: 0;
4686  }
4687  @media (min-width: 782px) {
4688    .edit-site-layout__sidebar-region {
4689      width: 300px;
4690    }
4691  }
4692  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4693    position: fixed !important;
4694    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
4695    right: 0;
4696    top: var(--wp-admin--admin-bar--height, 0);
4697  }
4698  .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4699    display: flex;
4700    flex-direction: column;
4701    height: 100%;
4702    min-height: 0;
4703  }
4704  .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4705    left: 0;
4706  }
4707  
4708  .edit-site-layout__main {
4709    flex-grow: 1;
4710    overflow: hidden;
4711    display: flex;
4712    flex-direction: column;
4713  }
4714  
4715  .edit-site-layout__mobile {
4716    position: relative;
4717    width: 100%;
4718    z-index: 2;
4719    display: flex;
4720    flex-direction: column;
4721    /*
4722     * The SiteHubMobile component is displayed
4723     * for pages that do not have a sidebar,
4724     * yet it needs the Sidebar component for the React context.
4725     *
4726     * This removes the padding in this scenario.
4727     * See https://github.com/WordPress/gutenberg/pull/63118
4728     */
4729  }
4730  .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4731    padding: 0;
4732  }
4733  .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4734    padding: 0 12px;
4735  }
4736  
4737  .edit-site-layout__mobile-content {
4738    display: flex;
4739    flex-direction: column;
4740    flex-grow: 1;
4741  }
4742  
4743  .edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
4744    background: var(--wpds-color-background-surface-neutral, #fcfcfc);
4745  }
4746  
4747  .edit-site-layout__canvas-container {
4748    position: relative;
4749    flex-grow: 1;
4750    z-index: 2;
4751    overflow: visible;
4752  }
4753  
4754  .edit-site-layout__canvas {
4755    position: absolute;
4756    top: 0;
4757    right: 0;
4758    bottom: 0;
4759    width: 100%;
4760    display: flex;
4761    justify-content: center;
4762    align-items: center;
4763  }
4764  .edit-site-layout__canvas.is-right-aligned {
4765    justify-content: flex-end;
4766  }
4767  .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4768    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4769  }
4770  @media (min-width: 782px) {
4771    .edit-site-layout__canvas {
4772      top: 16px;
4773      bottom: 16px;
4774      width: calc(100% - 16px);
4775    }
4776    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4777      box-shadow: 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);
4778      overflow: hidden;
4779    }
4780  }
4781  @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4782    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4783      transition: border-radius, box-shadow 0.4s;
4784    }
4785  }
4786  @media (min-width: 782px) {
4787    .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4788      border-radius: var(--wpds-border-radius-xl, 12px);
4789    }
4790    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4791      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);
4792    }
4793  }
4794  .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4795    top: 0;
4796    bottom: 0;
4797    width: 100%;
4798  }
4799  
4800  .edit-site-layout__mobile .interface-interface-skeleton,
4801  .edit-site-layout__canvas .interface-interface-skeleton,
4802  .edit-site-template-pages-preview .interface-interface-skeleton {
4803    position: relative !important;
4804    min-height: 100% !important;
4805  }
4806  
4807  .edit-site-template-pages-preview {
4808    height: 100%;
4809  }
4810  
4811  html.canvas-mode-edit-transition::view-transition-group(toggle) {
4812    animation-delay: 255ms;
4813  }
4814  
4815  @media (prefers-reduced-motion) {
4816    ::view-transition-group(*),
4817    ::view-transition-old(*),
4818    ::view-transition-new(*) {
4819      animation: none !important;
4820    }
4821  }
4822  .edit-site-layout__actions {
4823    z-index: 100000;
4824    position: fixed !important;
4825    top: -9999em;
4826    bottom: auto;
4827    right: auto;
4828    left: 0;
4829    width: 280px;
4830    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4831    background: var(--wpds-color-background-surface-neutral-strong, #fff);
4832  }
4833  .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4834    top: auto;
4835    bottom: 0;
4836  }
4837  .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4838    top: var(--wp-admin--admin-bar--height, 0);
4839  }
4840  @media (min-width: 782px) {
4841    .edit-site-layout__actions {
4842      border-right: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4843    }
4844  }
4845  
4846  .edit-site-layout__area {
4847    flex-grow: 1;
4848    margin: 0;
4849    overflow: hidden;
4850    box-shadow: 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);
4851  }
4852  @media (min-width: 782px) {
4853    .edit-site-layout__area {
4854      border-radius: var(--wpds-border-radius-xl, 12px);
4855      margin: 16px 0 16px 16px;
4856    }
4857  }
4858  
4859  .edit-site-layout__snackbar {
4860    position: fixed;
4861    bottom: var(--wpds-dimension-size-md, 32px);
4862    right: 0;
4863    left: 0;
4864    padding-inline: 16px;
4865    box-sizing: border-box;
4866    display: flex;
4867    flex-direction: column;
4868    pointer-events: none;
4869  }
4870  .edit-site-layout__snackbar .components-snackbar {
4871    margin-inline: auto;
4872  }
4873  
4874  .edit-site-save-hub {
4875    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4876    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4877    flex-shrink: 0;
4878    margin: 0;
4879    padding: 16px;
4880  }
4881  
4882  .edit-site-save-hub__button {
4883    color: inherit;
4884    width: 100%;
4885    justify-content: center;
4886  }
4887  .edit-site-save-hub__button[aria-disabled=true] {
4888    opacity: 1;
4889  }
4890  .edit-site-save-hub__button[aria-disabled=true], .edit-site-save-hub__button[aria-disabled=true]:hover {
4891    color: inherit;
4892  }
4893  .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4894    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4895  }
4896  
4897  @media (min-width: 600px) {
4898    .edit-site-save-panel__modal {
4899      width: 600px;
4900    }
4901  }
4902  
4903  .edit-site-sidebar__content {
4904    flex-grow: 1;
4905    flex-basis: 0;
4906    min-height: 0;
4907    overflow-y: auto;
4908    overflow-x: hidden;
4909    contain: content;
4910  }
4911  
4912  @keyframes local--slide-from-right {
4913    from {
4914      transform: translateX(-50px);
4915      opacity: 0;
4916    }
4917    to {
4918      transform: none;
4919      opacity: 1;
4920    }
4921  }
4922  @keyframes local--slide-from-left {
4923    from {
4924      transform: translateX(50px);
4925      opacity: 0;
4926    }
4927    to {
4928      transform: none;
4929      opacity: 1;
4930    }
4931  }
4932  .edit-site-sidebar__screen-wrapper {
4933    overflow-x: auto;
4934  }
4935  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
4936    width: 12px;
4937    height: 12px;
4938  }
4939  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
4940    background-color: transparent;
4941  }
4942  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
4943    background-color: transparent;
4944    border-radius: 8px;
4945    border: 3px solid transparent;
4946    background-clip: padding-box;
4947  }
4948  .edit-site-sidebar__screen-wrapper:hover::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus::-webkit-scrollbar-thumb, .edit-site-sidebar__screen-wrapper:focus-within::-webkit-scrollbar-thumb {
4949    background-color: #757575;
4950  }
4951  .edit-site-sidebar__screen-wrapper {
4952    scrollbar-width: thin;
4953    scrollbar-gutter: stable both-edges;
4954    scrollbar-color: transparent transparent;
4955  }
4956  .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
4957    scrollbar-color: #757575 transparent;
4958  }
4959  .edit-site-sidebar__screen-wrapper {
4960    will-change: transform;
4961  }
4962  @media (hover: none) {
4963    .edit-site-sidebar__screen-wrapper {
4964      scrollbar-color: #757575 transparent;
4965    }
4966  }
4967  .edit-site-sidebar__screen-wrapper {
4968    scrollbar-gutter: stable;
4969    display: flex;
4970    flex-direction: column;
4971    height: 100%;
4972    max-height: 100%;
4973    padding: 0 12px;
4974    animation-duration: 0.14s;
4975    animation-timing-function: ease-in-out;
4976    will-change: transform, opacity;
4977  }
4978  @media (prefers-reduced-motion: reduce) {
4979    .edit-site-sidebar__screen-wrapper {
4980      animation-duration: 0s;
4981    }
4982  }
4983  .edit-site-sidebar__screen-wrapper.slide-from-left {
4984    animation-name: local--slide-from-left;
4985  }
4986  .edit-site-sidebar__screen-wrapper.slide-from-right {
4987    animation-name: local--slide-from-right;
4988  }
4989  
4990  .edit-site-sidebar-button {
4991    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4992    flex-shrink: 0;
4993  }
4994  .edit-site-sidebar-button:focus:not(:focus-visible) {
4995    outline: none;
4996  }
4997  .edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
4998    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4999  }
5000  
5001  .edit-site-sidebar-navigation-item.components-item {
5002    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5003    padding: 8px 16px 8px 6px;
5004    border: none;
5005    min-height: 40px;
5006  }
5007  .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true], .edit-site-sidebar-navigation-item.components-item.edit-site-sidebar-navigation-item.components-item:hover {
5008    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5009  }
5010  .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5011    background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5012    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5013    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5014  }
5015  .edit-site-sidebar-navigation-item.components-item:focus-visible {
5016    --wp-components-color-accent: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
5017    transform: translateZ(0);
5018  }
5019  .edit-site-sidebar-navigation-item.components-item.with-suffix {
5020    padding-left: 16px;
5021  }
5022  
5023  .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
5024    cursor: grab;
5025    padding: 8px 0 8px 8px;
5026  }
5027  
5028  .edit-site-sidebar-navigation-screen {
5029    display: flex;
5030    flex-direction: column;
5031    overflow-x: unset !important;
5032    position: relative;
5033  }
5034  
5035  .edit-site-sidebar-navigation-screen__main {
5036    flex-grow: 1;
5037    margin-bottom: 16px;
5038  }
5039  .edit-site-sidebar-navigation-screen__main.has-footer {
5040    margin-bottom: 0;
5041  }
5042  
5043  .edit-site-sidebar-navigation-screen__content {
5044    padding: 0 16px;
5045  }
5046  .edit-site-sidebar-navigation-screen__content .components-text {
5047    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
5048  }
5049  .edit-site-sidebar-navigation-screen__content .components-heading {
5050    margin-bottom: 8px;
5051  }
5052  
5053  .edit-site-sidebar-navigation-screen__title-icon {
5054    position: sticky;
5055    top: 0;
5056    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5057    padding-top: 32px;
5058    margin-bottom: 8px;
5059    padding-bottom: 8px;
5060    z-index: 1;
5061  }
5062  
5063  .edit-site-sidebar-navigation-screen__title {
5064    flex-grow: 1;
5065    overflow-wrap: break-word;
5066  }
5067  .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title, .edit-site-sidebar-navigation-screen__title.edit-site-sidebar-navigation-screen__title .edit-site-sidebar-navigation-screen__title {
5068    line-height: 32px;
5069  }
5070  
5071  .edit-site-sidebar-navigation-screen__actions {
5072    display: flex;
5073    flex-shrink: 0;
5074  }
5075  
5076  @media (min-width: 782px) {
5077    .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5078      max-width: 292px;
5079    }
5080  }
5081  
5082  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5083    outline-color: rgba(255, 255, 255, 0.05);
5084  }
5085  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5086    outline-color: rgba(255, 255, 255, 0.15);
5087  }
5088  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5089    outline-color: #fff;
5090  }
5091  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5092    outline-color: var(--wp-admin-theme-color);
5093  }
5094  
5095  .edit-site-sidebar-navigation-screen__footer {
5096    position: sticky;
5097    bottom: 0;
5098    background-color: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5099    gap: 0;
5100    padding: 8px 16px;
5101    margin: 16px 0 0;
5102    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5103  }
5104  .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5105    margin-right: -16px;
5106    margin-left: -16px;
5107  }
5108  
5109  /* In general style overrides are discouraged.
5110   * This is a temporary solution to override the InputControl component's styles.
5111   * The `Theme` component will potentially be the more appropriate approach
5112   * once that component is stabilized.
5113   * See: packages/components/src/theme
5114   */
5115  .edit-site-sidebar-navigation-screen__input-control {
5116    width: 100%;
5117  }
5118  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5119    background: var(--wpds-color-background-interactive-neutral-weak, #0000);
5120  }
5121  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5122    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5123  }
5124  .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5125    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5126    background: var(--wpds-color-background-interactive-neutral-weak, #0000) !important;
5127  }
5128  .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5129    border: 4px !important;
5130  }
5131  .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5132    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5133  }
5134  
5135  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5136  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5137  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5138    background: none;
5139  }
5140  
5141  .sidebar-navigation__more-menu .components-button {
5142    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5143  }
5144  .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5145    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5146  }
5147  
5148  .edit-site-sidebar-navigation-screen-patterns__group {
5149    margin-bottom: 24px;
5150    margin-right: -16px;
5151    margin-left: -16px;
5152  }
5153  .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5154    border-bottom: 0;
5155    padding-bottom: 0;
5156    margin-bottom: 0;
5157  }
5158  
5159  .edit-site-sidebar-navigation-screen-patterns__group-header {
5160    margin-top: 16px;
5161  }
5162  .edit-site-sidebar-navigation-screen-patterns__group-header p {
5163    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5164  }
5165  .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5166    font-size: 11px;
5167    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5168    text-transform: uppercase;
5169  }
5170  
5171  .edit-site-sidebar-navigation-screen-patterns__divider {
5172    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5173    margin: 16px 0;
5174  }
5175  
5176  .edit-site-sidebar-navigation-screen__description {
5177    margin: 0 0 32px 0;
5178  }
5179  
5180  .edit-site-sidebar-navigation-screen-navigation-menus {
5181    margin-right: -16px;
5182    margin-left: -16px;
5183  }
5184  
5185  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5186    white-space: normal;
5187  }
5188  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5189    margin-top: 3px;
5190  }
5191  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5192    padding-left: 0;
5193  }
5194  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5195    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5196  }
5197  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button[aria-current] {
5198    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5199  }
5200  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5201    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5202  }
5203  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
5204    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5205  }
5206  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5207    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5208    color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
5209  }
5210  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle:focus {
5211    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5212    color: var(--wpds-color-foreground-interactive-brand-strong-active, #fff);
5213  }
5214  
5215  .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5216    margin-right: auto;
5217    margin-left: auto;
5218    display: block;
5219  }
5220  
5221  .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5222    display: none;
5223  }
5224  
5225  .edit-site-sidebar-navigation-screen-main {
5226    margin-right: -16px;
5227    margin-left: -16px;
5228  }
5229  
5230  .edit-site-sidebar-dataviews {
5231    margin-right: -16px;
5232    margin-left: -16px;
5233  }
5234  
5235  .edit-site-site-hub {
5236    display: flex;
5237    align-items: center;
5238    padding-right: 16px;
5239    height: 64px;
5240  }
5241  
5242  .edit-site-site-hub__back-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-site-hub__back-button:active:not(:disabled, [aria-disabled=true]) {
5243    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5244  }
5245  
5246  .fields-controls__password {
5247    border-top: 1px solid #e0e0e0;
5248    padding-top: 16px;
5249  }
5250  
5251  .dataviews-action-modal__quick-edit {
5252    justify-content: flex-end;
5253    align-items: stretch;
5254  }
5255  .dataviews-action-modal__quick-edit .components-modal__frame {
5256    margin: 16px 0 16px 16px;
5257    height: calc(100% - 32px);
5258    max-height: calc(100% - 32px);
5259    max-width: 400px;
5260    border-radius: 8px;
5261    position: relative;
5262    animation-name: none;
5263  }
5264  @media (prefers-reduced-motion: no-preference) {
5265    .dataviews-action-modal__quick-edit .components-modal__frame {
5266      animation-name: quick-edit-slide-in-right;
5267      animation-duration: 0.2s;
5268      animation-timing-function: ease-out;
5269    }
5270  }
5271  .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5272    animation-name: none;
5273  }
5274  @media (prefers-reduced-motion: no-preference) {
5275    .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5276      animation-name: quick-edit-slide-out-right;
5277      animation-duration: 0.2s;
5278      animation-timing-function: ease-out;
5279    }
5280  }
5281  .dataviews-action-modal__quick-edit .components-modal__content {
5282    display: flex;
5283    flex-direction: column;
5284    overflow: hidden;
5285    padding: 0;
5286  }
5287  .dataviews-action-modal__quick-edit .components-modal__content > * {
5288    display: flex;
5289    flex-direction: column;
5290    flex: 1;
5291    min-height: 0;
5292  }
5293  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5294    padding: 24px 24px 0;
5295  }
5296  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5297    flex: 1;
5298    min-height: 0;
5299    overflow-y: auto;
5300    padding-top: 16px;
5301  }
5302  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5303    flex: 1;
5304    padding: 0 24px 4px;
5305  }
5306  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5307    position: sticky;
5308    bottom: 0;
5309    flex-shrink: 0;
5310    padding: 16px 24px 24px;
5311  }
5312  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5313    flex: 1;
5314    justify-content: center;
5315  }
5316  
5317  @keyframes quick-edit-slide-in-right {
5318    from {
5319      transform: translateX(-100%);
5320    }
5321    to {
5322      transform: translateX(0);
5323    }
5324  }
5325  @keyframes quick-edit-slide-out-right {
5326    from {
5327      transform: translateX(0);
5328    }
5329    to {
5330      transform: translateX(-100%);
5331    }
5332  }
5333  .edit-site-resizable-frame__inner {
5334    position: relative;
5335  }
5336  body:has(.edit-site-resizable-frame__inner.is-resizing) {
5337    cursor: col-resize;
5338    -webkit-user-select: none;
5339            user-select: none;
5340  }
5341  
5342  .edit-site-resizable-frame__inner.is-resizing::before {
5343    position: absolute;
5344    z-index: 1;
5345    inset: 0;
5346    content: "";
5347  }
5348  
5349  .edit-site-resizable-frame__inner-content {
5350    position: absolute;
5351    z-index: 0;
5352    inset: 0;
5353  }
5354  
5355  .edit-site-resizable-frame__handle {
5356    align-items: center;
5357    background-color: rgba(117, 117, 117, 0.4);
5358    border: 0;
5359    border-radius: 4px;
5360    cursor: col-resize;
5361    display: flex;
5362    height: 64px;
5363    justify-content: flex-end;
5364    padding: 0;
5365    position: absolute;
5366    top: calc(50% - 32px);
5367    width: 4px;
5368    z-index: 100;
5369  }
5370  .edit-site-resizable-frame__handle::before {
5371    content: "";
5372    height: 100%;
5373    right: 100%;
5374    position: absolute;
5375    width: 32px;
5376  }
5377  .edit-site-resizable-frame__handle::after {
5378    content: "";
5379    height: 100%;
5380    position: absolute;
5381    left: 100%;
5382    width: 32px;
5383  }
5384  .edit-site-resizable-frame__handle:focus-visible {
5385    outline: 2px solid transparent;
5386  }
5387  .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5388    background-color: var(--wp-admin-theme-color);
5389  }
5390  
5391  .edit-site-pagination .components-button.is-tertiary {
5392    width: 32px;
5393    height: 32px;
5394    justify-content: center;
5395  }
5396  
5397  .edit-site-styles .global-styles-ui-screen-root {
5398    box-shadow: none;
5399  }
5400  .edit-site-styles .global-styles-ui-screen-root > div > hr {
5401    display: none;
5402  }
5403  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5404    border-top: none;
5405  }
5406  .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5407    overflow-y: auto;
5408    padding-right: 0;
5409    padding-left: 0;
5410  }
5411  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5412    padding: 12px;
5413    outline: none;
5414  }
5415  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen .global-styles-ui-color-palette__tablist-container {
5416    margin-inline: -12px;
5417    width: calc(100% + 24px);
5418    padding-inline: 12px;
5419  }
5420  .edit-site-styles .edit-site-sidebar-button {
5421    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5422  }
5423  
5424  .edit-site-styles__content {
5425    flex-grow: 1;
5426    min-height: 0;
5427    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5428  }
5429  
5430  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5431    width: auto;
5432    padding: 0 var(--wpds-dimension-padding-xs, 4px);
5433  }
5434  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon svg {
5435    display: none;
5436  }
5437  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5438    content: attr(aria-label);
5439    font-size: var(--wpds-typography-font-size-sm, 12px);
5440  }
5441  
5442  .edit-site-sidebar-identity__form {
5443    flex-grow: 1;
5444    min-height: 0;
5445    overflow: auto;
5446    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5447    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
5448  }
5449  
5450  ::view-transition-image-pair(root) {
5451    isolation: auto;
5452  }
5453  
5454  ::view-transition-old(root),
5455  ::view-transition-new(root) {
5456    animation: none;
5457    mix-blend-mode: normal;
5458    display: block;
5459  }
5460  
5461  body.js #wpbody {
5462    padding-top: 0;
5463  }
5464  
5465  body.js.appearance_page_gutenberg-template-parts,
5466  body.js.site-editor-php {
5467    background: #fff;
5468  }
5469  body.js.appearance_page_gutenberg-template-parts #wpcontent,
5470  body.js.site-editor-php #wpcontent {
5471    padding-right: 0;
5472  }
5473  body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5474  body.js.site-editor-php #wpbody-content {
5475    padding-bottom: 0;
5476  }
5477  body.js.appearance_page_gutenberg-template-parts,
5478  body.js.site-editor-php {
5479    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5480       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5481  }
5482  body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5483  body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5484    display: none;
5485  }
5486  body.js.appearance_page_gutenberg-template-parts #wpfooter,
5487  body.js.site-editor-php #wpfooter {
5488    display: none;
5489  }
5490  body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5491  body.js.site-editor-php .a11y-speak-region {
5492    right: -1px;
5493    top: -1px;
5494  }
5495  body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5496  body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5497  body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5498  body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5499    border-left-color: #fff;
5500  }
5501  body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5502  body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5503    width: auto;
5504    max-width: 100%;
5505  }
5506  
5507  body.js.site-editor-php {
5508    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5509  }
5510  @media (min-width: 782px) {
5511    body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) {
5512      --wp-admin--admin-bar--height: 0px;
5513      --wp-editor-admin-bar-display: none;
5514    }
5515    body.js.site-editor-php #wpadminbar {
5516      display: var(--wp-editor-admin-bar-display, block);
5517    }
5518  }
5519  
5520  .edit-site {
5521    box-sizing: border-box;
5522  }
5523  .edit-site *,
5524  .edit-site *::before,
5525  .edit-site *::after {
5526    box-sizing: inherit;
5527  }
5528  .edit-site {
5529    padding-top: var(--wp-admin--admin-bar--height, 0);
5530    height: 100vh;
5531  }
5532  @media (min-width: 600px) {
5533    .edit-site {
5534      bottom: 0;
5535      right: 0;
5536      height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
5537      padding-top: 0;
5538      position: fixed;
5539      left: 0;
5540      top: var(--wp-admin--admin-bar--height, 0);
5541    }
5542  }
5543  .no-js .edit-site {
5544    min-height: 0;
5545    position: static;
5546  }
5547  .edit-site .interface-interface-skeleton {
5548    top: 0;
5549  }