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