[Summary view] [Print] [Text view]

   1  /**
   2   * Typography
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Colors
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Standard focus rings for the WordPress Design System.
  72   *
  73   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  74   * e.g. `&:focus { @include outset-ring__focus(); }`.
  75   */
  76  /**
  77   * Applies editor left position to the selector passed as argument
  78   */
  79  /**
  80   * Styles that are reused verbatim in a few places
  81   */
  82  /**
  83   * Allows users to opt-out of animations via OS-level preferences.
  84   */
  85  /**
  86   * Reset default styles for JavaScript UI based pages.
  87   * This is a WP-admin agnostic reset
  88   */
  89  /**
  90   * Reset the WP Admin page styles for Gutenberg-like pages.
  91   */
  92  /**
  93   * Creates a checkerboard pattern background to indicate transparency.
  94   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  95   */
  96  :root {
  97    --wp-block-synced-color: #7a00df;
  98    --wp-block-synced-color--rgb: 122, 0, 223;
  99    --wp-bound-block-color: var(--wp-block-synced-color);
 100    --wp-editor-canvas-background: #ddd;
 101    --wp-admin-theme-color: #007cba;
 102    --wp-admin-theme-color--rgb: 0, 124, 186;
 103    --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
 104    --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
 105    --wp-admin-theme-color-darker-20: #005a87;
 106    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
 107    --wp-admin-border-width-focus: 2px;
 108  }
 109  @media (min-resolution: 192dpi) {
 110    :root {
 111      --wp-admin-border-width-focus: 1.5px;
 112    }
 113  }
 114  
 115  /**
 116   * Typography
 117   */
 118  /**
 119   * SCSS Variables.
 120   *
 121   * Please use variables from this sheet to ensure consistency across the UI.
 122   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
 123   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
 124   */
 125  /**
 126   * Colors
 127   */
 128  /**
 129   * Fonts & basic variables.
 130   */
 131  /**
 132   * Typography
 133   */
 134  /**
 135   * Grid System.
 136   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
 137   */
 138  /**
 139   * Radius scale.
 140   */
 141  /**
 142   * Elevation scale.
 143   */
 144  /**
 145   * Dimensions.
 146   */
 147  /**
 148   * Mobile specific styles
 149   */
 150  /**
 151   * Editor styles.
 152   */
 153  /**
 154   * Block & Editor UI.
 155   */
 156  /**
 157   * Block paddings.
 158   */
 159  /**
 160   * React Native specific.
 161   * These variables do not appear to be used anywhere else.
 162   */
 163  /**
 164   * Breakpoints & Media Queries
 165   */
 166  /**
 167  *  Converts a hex value into the rgb equivalent.
 168  *
 169  * @param {string} hex - the hexadecimal value to convert
 170  * @return {string} comma separated rgb values
 171  */
 172  /**
 173   * Long content fade mixin
 174   *
 175   * Creates a fading overlay to signify that the content is longer
 176   * than the space allows.
 177   */
 178  /**
 179   * Breakpoint mixins
 180   */
 181  /**
 182   * Focus styles.
 183   */
 184  /**
 185   * Standard focus rings for the WordPress Design System.
 186   *
 187   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
 188   * e.g. `&:focus { @include outset-ring__focus(); }`.
 189   */
 190  /**
 191   * Applies editor left position to the selector passed as argument
 192   */
 193  /**
 194   * Styles that are reused verbatim in a few places
 195   */
 196  /**
 197   * Allows users to opt-out of animations via OS-level preferences.
 198   */
 199  /**
 200   * Reset default styles for JavaScript UI based pages.
 201   * This is a WP-admin agnostic reset
 202   */
 203  /**
 204   * Reset the WP Admin page styles for Gutenberg-like pages.
 205   */
 206  /**
 207   * Creates a checkerboard pattern background to indicate transparency.
 208   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
 209   */
 210  .dataviews-wrapper,
 211  .dataviews-picker-wrapper {
 212    height: 100%;
 213    flex-grow: 1;
 214    min-height: 0;
 215    box-sizing: border-box;
 216    scroll-padding-bottom: 64px;
 217    container: dataviews-wrapper/inline-size;
 218    display: flex;
 219    flex-direction: column;
 220    font-size: var(--wpds-typography-font-size-md, 13px);
 221    line-height: var(--wpds-typography-line-height-sm, 20px);
 222    background-color: var(--wp-dataviews-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
 223  }
 224  
 225  .dataviews__view-actions,
 226  .dataviews-filters__container {
 227    box-sizing: border-box;
 228    padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 229    flex-shrink: 0;
 230    position: sticky;
 231    right: 0;
 232    background-color: inherit;
 233  }
 234  
 235  @media not (prefers-reduced-motion) {
 236    .dataviews__view-actions,
 237    .dataviews-filters__container {
 238      transition: padding ease-out 0.1s;
 239    }
 240  }
 241  .dataviews-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-left: 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    left: 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-left: 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    right: 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    right: 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-left: 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 -5px 0 0;
 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: right;
 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    right: 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-size-md, 32px) 0 var(--wpds-dimension-padding-sm, 8px);
 884    width: 100%;
 885    height: var(--wpds-dimension-size-md, 32px);
 886    margin-right: 0;
 887    margin-left: 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    left: 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-right: 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    right: 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    left: 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    right: 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    right: 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    right: 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    left: 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    right: 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: right;
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: left;
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    left: 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    right: 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-left: 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-right: 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-left: 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    right: 0;
1855    left: 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-right: var(--wpds-dimension-padding-xs, 4px);
1875    padding-left: 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-right: var(--wpds-dimension-padding-lg, 16px);
1884  }
1885  
1886  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1887    padding-left: 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-right: 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-right: 0;
1944  }
1945  
1946  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
1947    padding-left: 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-left: 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    right: 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    right: 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    right: 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    left: 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    right: 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    right: 0;
3324    left: 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    left: 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: right;
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-right: -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-right: 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-right: -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    right: 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 17px 16px 16px;
3819  }
3820  
3821  .font-library__select-all .components-checkbox-control__label {
3822    padding-right: 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    right: 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    right: 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 40px 4px 12px;
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 40px 12px 12px;
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: right;
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-left: 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: right;
3968    line-height: 1.4;
3969    margin-right: 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    right: -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-right: 0;
4113    padding-left: 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    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);
4167    background-position: 0 0, 8px 8px;
4168    background-size: 16px 16px;
4169  }
4170  
4171  .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4172    border: #ddd 1px solid;
4173    border-radius: 2px;
4174    background-color: #fff;
4175    width: 60%;
4176    height: 60px;
4177  }
4178  
4179  .global-styles-ui__shadow-editor__dropdown-content {
4180    width: 280px;
4181  }
4182  
4183  .global-styles-ui__shadow-editor-panel {
4184    margin-bottom: 4px;
4185  }
4186  
4187  .global-styles-ui__shadow-editor__dropdown {
4188    width: 100%;
4189    position: relative;
4190  }
4191  
4192  .global-styles-ui__shadow-editor__dropdown-toggle {
4193    width: 100%;
4194    height: auto;
4195    padding-top: 8px;
4196    padding-bottom: 8px;
4197    text-align: right;
4198    border-radius: inherit;
4199  }
4200  
4201  .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4202    background: #f0f0f0;
4203    color: var(--wp-admin-theme-color);
4204  }
4205  
4206  .global-styles-ui__shadow-editor__remove-button {
4207    position: absolute;
4208    left: 8px;
4209    top: 8px;
4210    opacity: 0;
4211  }
4212  
4213  .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4214    border: none;
4215  }
4216  
4217  .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 {
4218    opacity: 1;
4219  }
4220  
4221  @media (hover: none) {
4222    .global-styles-ui__shadow-editor__remove-button {
4223      opacity: 1;
4224    }
4225  }
4226  .global-styles-ui-screen-css {
4227    flex: 1 1 auto;
4228    display: flex;
4229    flex-direction: column;
4230    margin: 16px;
4231  }
4232  
4233  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
4234    flex: 1 1 auto;
4235  }
4236  
4237  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
4238    flex: 1 1 auto;
4239    display: flex;
4240    flex-direction: column;
4241  }
4242  
4243  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4244    flex: 1 1 auto;
4245    display: flex;
4246    flex-direction: column;
4247  }
4248  
4249  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
4250    flex: 1 1 auto;
4251  }
4252  
4253  .global-styles-ui-screen-css-help-link {
4254    display: inline-block;
4255    margin-top: 8px;
4256  }
4257  
4258  .global-styles-ui-screen-variations {
4259    margin-top: 16px;
4260    border-top: 1px solid #ddd;
4261  }
4262  
4263  .global-styles-ui-screen-variations > * {
4264    margin: 24px 16px;
4265  }
4266  
4267  .global-styles-ui-sidebar__navigator-provider {
4268    height: 100%;
4269  }
4270  
4271  .global-styles-ui-sidebar__navigator-screen {
4272    display: flex;
4273    flex-direction: column;
4274    height: 100%;
4275  }
4276  
4277  .global-styles-ui-color-palette__tablist-container {
4278    border-bottom: 1px solid #ddd;
4279  }
4280  
4281  .global-styles-ui-color-palette__tablist {
4282    margin-bottom: -1px;
4283  }
4284  
4285  .global-styles-ui-sidebar__navigator-screen .single-column {
4286    grid-column: span 1;
4287  }
4288  
4289  .global-styles-ui-screen-root.global-styles-ui-screen-root,
4290  .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4291    background: unset;
4292    color: inherit;
4293  }
4294  
4295  .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4296    fill: currentColor;
4297  }
4298  
4299  .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 {
4300    border-radius: 2px;
4301  }
4302  
4303  .global-styles-ui-screen-root__active-style-tile-preview {
4304    clip-path: border-box;
4305  }
4306  
4307  .global-styles-ui-color-palette-panel,
4308  .global-styles-ui-gradient-palette-panel {
4309    padding: 16px;
4310  }
4311  
4312  .edit-site-custom-template-modal__contents-wrapper {
4313    height: 100%;
4314    justify-content: flex-start !important;
4315  }
4316  .edit-site-custom-template-modal__contents-wrapper > * {
4317    width: 100%;
4318  }
4319  .edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4320    margin-right: -12px;
4321    margin-left: -12px;
4322    width: calc(100% + 24px);
4323  }
4324  .edit-site-custom-template-modal__contents > .components-button {
4325    height: auto;
4326    justify-content: center;
4327  }
4328  @media (min-width: 782px) {
4329    .edit-site-custom-template-modal {
4330      width: 456px;
4331    }
4332  }
4333  @media (min-width: 600px) {
4334    .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4335      max-height: 224px;
4336      overflow-y: auto;
4337    }
4338  }
4339  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4340    display: block;
4341    width: 100%;
4342    text-align: right;
4343    white-space: pre-wrap;
4344    overflow-wrap: break-word;
4345    height: auto;
4346    padding: 8px 12px;
4347  }
4348  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4349    font-weight: 700;
4350    background: none;
4351  }
4352  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4353    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4354  }
4355  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4356    color: var(--wp-admin-theme-color);
4357  }
4358  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4359    color: var(--wp-admin-theme-color);
4360  }
4361  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4362    background-color: #f0f0f0;
4363  }
4364  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4365    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4366  }
4367  .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 {
4368    overflow: hidden;
4369    text-overflow: ellipsis;
4370    display: block;
4371  }
4372  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4373    word-break: break-all;
4374    color: #757575;
4375  }
4376  
4377  .edit-site-custom-template-modal__no-results {
4378    border: 1px solid #ccc;
4379    border-radius: 2px;
4380    padding: 16px;
4381  }
4382  
4383  .edit-site-custom-generic-template__modal .components-modal__header {
4384    border-bottom: none;
4385  }
4386  .edit-site-custom-generic-template__modal .components-modal__content::before {
4387    margin-bottom: 4px;
4388  }
4389  
4390  @media (min-width: 960px) {
4391    .edit-site-add-new-template__modal {
4392      max-width: 832px;
4393      margin-top: 64px;
4394      width: calc(100% - 128px);
4395      max-height: calc(100% - 128px);
4396    }
4397  }
4398  .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4399  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4400    fill: var(--wp-admin-theme-color);
4401  }
4402  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4403    flex-grow: 1;
4404    align-items: flex-start;
4405  }
4406  .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4407    padding: 8px;
4408    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4409    border-radius: 100%;
4410    max-height: 40px;
4411    max-width: 40px;
4412  }
4413  
4414  .edit-site-custom-template-modal__contents > .components-button,
4415  .edit-site-add-new-template__template-list__contents > .components-button {
4416    padding: 32px;
4417    display: flex;
4418    flex-direction: column;
4419    border: 1px solid #ddd;
4420    justify-content: center;
4421    outline: 1px solid transparent;
4422  }
4423  .edit-site-custom-template-modal__contents > .components-button span:first-child,
4424  .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4425    color: #1e1e1e;
4426  }
4427  .edit-site-custom-template-modal__contents > .components-button span,
4428  .edit-site-add-new-template__template-list__contents > .components-button span {
4429    color: #757575;
4430  }
4431  .edit-site-custom-template-modal__contents > .components-button:hover,
4432  .edit-site-add-new-template__template-list__contents > .components-button:hover {
4433    color: var(--wp-admin-theme-color-darker-10);
4434    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4435    border-color: transparent;
4436  }
4437  .edit-site-custom-template-modal__contents > .components-button:hover span,
4438  .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4439    color: var(--wp-admin-theme-color);
4440  }
4441  .edit-site-custom-template-modal__contents > .components-button:focus,
4442  .edit-site-add-new-template__template-list__contents > .components-button:focus {
4443    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4444    border-color: transparent;
4445    outline: 3px solid transparent;
4446  }
4447  .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4448  .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4449    color: var(--wp-admin-theme-color);
4450  }
4451  .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4452  .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4453  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4454  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4455    grid-column: 1/-1;
4456  }
4457  
4458  .edit-site-add-new-template__template-list__contents > .components-button {
4459    height: 100%;
4460    text-align: start;
4461    align-items: flex-start;
4462  }
4463  
4464  .edit-site-visual-editor__editor-canvas.is-focused {
4465    outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4466    outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4467  }
4468  
4469  .edit-site-canvas-loader {
4470    width: 100%;
4471    height: 100%;
4472    display: flex;
4473    position: absolute;
4474    top: 0;
4475    right: 0;
4476    opacity: 0;
4477    align-items: center;
4478    justify-content: center;
4479  }
4480  @media not (prefers-reduced-motion) {
4481    .edit-site-canvas-loader {
4482      animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4483      animation-fill-mode: forwards;
4484    }
4485  }
4486  .edit-site-canvas-loader > div {
4487    width: 160px;
4488  }
4489  
4490  @keyframes edit-site-canvas-loader__fade-in-animation {
4491    from {
4492      opacity: 0;
4493    }
4494    to {
4495      opacity: 1;
4496    }
4497  }
4498  .edit-site-patterns__delete-modal {
4499    width: 400px;
4500  }
4501  
4502  .page-patterns-preview-field {
4503    display: flex;
4504    justify-content: center;
4505    align-items: center;
4506    flex-direction: column;
4507    height: 100%;
4508    border-radius: 4px;
4509  }
4510  .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4511    height: 100%;
4512  }
4513  .dataviews-view-table .page-patterns-preview-field {
4514    width: 96px;
4515    flex-grow: 0;
4516    text-wrap: balance;
4517    text-wrap: pretty;
4518  }
4519  
4520  .edit-site-patterns__pattern-icon {
4521    fill: var(--wp-block-synced-color);
4522    flex-shrink: 0;
4523  }
4524  
4525  .edit-site-patterns__section-header {
4526    border-bottom: 1px solid #f0f0f0;
4527    padding: 16px 48px;
4528    position: sticky;
4529    top: 0;
4530    z-index: 2;
4531    flex-shrink: 0;
4532    min-height: 40px;
4533  }
4534  @media not (prefers-reduced-motion) {
4535    .edit-site-patterns__section-header {
4536      transition: padding ease-out 0.1s;
4537    }
4538  }
4539  .edit-site-patterns__section-header .edit-site-patterns__title {
4540    min-height: 40px;
4541  }
4542  .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4543    flex-grow: 1;
4544    flex-basis: 0;
4545    white-space: nowrap;
4546  }
4547  .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4548    margin-bottom: 8px;
4549  }
4550  .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4551    top: 0;
4552  }
4553  
4554  .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
4555    background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4556    color: var(--wp-block-synced-color);
4557  }
4558  
4559  .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4560    width: 350px;
4561  }
4562  .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4563    position: relative;
4564  }
4565  .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4566    position: absolute;
4567    border: 1px solid var(--wp-admin-theme-color);
4568    border-bottom-right-radius: 2px;
4569    border-bottom-left-radius: 2px;
4570    box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4571    box-sizing: border-box;
4572    z-index: 1;
4573    background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
4574    width: calc(100% + 2px);
4575    right: -1px;
4576    min-width: initial;
4577    max-height: 96px;
4578  }
4579  
4580  @media (min-width: 600px) {
4581    .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4582      max-width: 500px;
4583    }
4584  }
4585  
4586  @container (max-width: 430px) {
4587    .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4588      padding-right: 24px;
4589      padding-left: 24px;
4590    }
4591  }
4592  .show-icon-labels .edit-site-patterns__button.has-icon {
4593    width: auto;
4594    padding: 0 var(--wpds-dimension-padding-xs, 4px);
4595  }
4596  .show-icon-labels .edit-site-patterns__button.has-icon svg {
4597    display: none;
4598  }
4599  .show-icon-labels .edit-site-patterns__button.has-icon::after {
4600    content: attr(aria-label);
4601    font-size: var(--wpds-typography-font-size-sm, 12px);
4602  }
4603  
4604  .page-templates-preview-field {
4605    display: flex;
4606    justify-content: center;
4607    align-items: center;
4608    flex-direction: column;
4609    height: 100%;
4610    width: 100%;
4611    border-radius: 4px;
4612  }
4613  .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4614    height: 120px;
4615  }
4616  .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4617    height: 100%;
4618  }
4619  .dataviews-view-table .page-templates-preview-field {
4620    position: relative;
4621    width: 120px;
4622    max-height: 160px;
4623    text-wrap: balance;
4624    text-wrap: pretty;
4625  }
4626  
4627  .edit-site-list__rename-modal {
4628    z-index: 1000001;
4629  }
4630  
4631  .edit-site-editor__editor-interface {
4632    opacity: 1;
4633  }
4634  @media not (prefers-reduced-motion) {
4635    .edit-site-editor__editor-interface {
4636      transition: opacity 0.1s ease-out;
4637    }
4638  }
4639  .edit-site-editor__editor-interface.is-loading {
4640    opacity: 0;
4641  }
4642  
4643  .edit-site-editor__toggle-save-panel {
4644    box-sizing: border-box;
4645    width: 280px;
4646    background-color: #fff;
4647    border: 1px dotted #ddd;
4648    padding: 24px;
4649    display: flex;
4650    justify-content: center;
4651  }
4652  
4653  .edit-site-welcome-guide {
4654    width: 312px;
4655  }
4656  .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4657    background: #00a0d2;
4658  }
4659  .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4660    border-left: #3858e9 16px solid;
4661    border-top: #3858e9 16px solid;
4662  }
4663  .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4664    border-right: #3858e9 16px solid;
4665    border-top: #3858e9 16px solid;
4666  }
4667  .edit-site-welcome-guide__image {
4668    margin: 0 0 16px;
4669  }
4670  .edit-site-welcome-guide__image > img {
4671    display: block;
4672    max-width: 100%;
4673    -o-object-fit: cover;
4674       object-fit: cover;
4675  }
4676  .edit-site-welcome-guide__heading {
4677    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4678    font-size: 24px;
4679    line-height: 1.4;
4680    margin: 16px 0 16px 0;
4681    padding: 0 32px;
4682  }
4683  .edit-site-welcome-guide__text {
4684    font-size: 13px;
4685    line-height: 1.4;
4686    margin: 0 0 16px 0;
4687    padding: 0 32px;
4688  }
4689  .edit-site-welcome-guide__text img {
4690    vertical-align: bottom;
4691  }
4692  .edit-site-welcome-guide__inserter-icon {
4693    margin: 0 4px;
4694    vertical-align: text-top;
4695  }
4696  .edit-site-welcome-guide .components-button:hover svg {
4697    fill: #fff;
4698  }
4699  
4700  .edit-site-layout {
4701    height: 100%;
4702    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4703    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4704    display: flex;
4705    flex-direction: column;
4706  }
4707  .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4708    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4709  }
4710  
4711  .edit-site-layout__content {
4712    height: 100%;
4713    min-height: 0;
4714    flex-grow: 1;
4715    display: flex;
4716  }
4717  
4718  .edit-site-layout__sidebar-region {
4719    z-index: 1;
4720    width: 100vw;
4721    flex-shrink: 0;
4722  }
4723  @media (min-width: 782px) {
4724    .edit-site-layout__sidebar-region {
4725      width: 300px;
4726    }
4727  }
4728  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4729    position: fixed !important;
4730    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
4731    right: 0;
4732    top: var(--wp-admin--admin-bar--height, 0);
4733  }
4734  .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4735    display: flex;
4736    flex-direction: column;
4737    height: 100%;
4738    min-height: 0;
4739  }
4740  .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4741    left: 0;
4742  }
4743  
4744  .edit-site-layout__main {
4745    flex-grow: 1;
4746    overflow: hidden;
4747    display: flex;
4748    flex-direction: column;
4749  }
4750  
4751  .edit-site-layout__mobile {
4752    position: relative;
4753    width: 100%;
4754    z-index: 2;
4755    display: flex;
4756    flex-direction: column;
4757    /*
4758     * The SiteHubMobile component is displayed
4759     * for pages that do not have a sidebar,
4760     * yet it needs the Sidebar component for the React context.
4761     *
4762     * This removes the padding in this scenario.
4763     * See https://github.com/WordPress/gutenberg/pull/63118
4764     */
4765  }
4766  .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4767    padding: 0;
4768  }
4769  .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4770    padding: 0 12px;
4771  }
4772  
4773  .edit-site-layout__mobile-content {
4774    display: flex;
4775    flex-direction: column;
4776    flex-grow: 1;
4777  }
4778  
4779  .edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
4780    background: var(--wpds-color-background-surface-neutral, #fcfcfc);
4781  }
4782  
4783  .edit-site-layout__canvas-container {
4784    position: relative;
4785    flex-grow: 1;
4786    z-index: 2;
4787    overflow: visible;
4788  }
4789  
4790  .edit-site-layout__canvas {
4791    position: absolute;
4792    top: 0;
4793    right: 0;
4794    bottom: 0;
4795    width: 100%;
4796    display: flex;
4797    justify-content: center;
4798    align-items: center;
4799  }
4800  .edit-site-layout__canvas.is-right-aligned {
4801    justify-content: flex-end;
4802  }
4803  .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4804    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4805  }
4806  @media (min-width: 782px) {
4807    .edit-site-layout__canvas {
4808      top: 16px;
4809      bottom: 16px;
4810      width: calc(100% - 16px);
4811    }
4812    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4813      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);
4814      overflow: hidden;
4815    }
4816  }
4817  @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4818    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4819      transition: border-radius, box-shadow 0.4s;
4820    }
4821  }
4822  @media (min-width: 782px) {
4823    .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4824      border-radius: var(--wpds-border-radius-xl, 12px);
4825    }
4826    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4827      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);
4828    }
4829  }
4830  .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4831    top: 0;
4832    bottom: 0;
4833    width: 100%;
4834  }
4835  
4836  .edit-site-layout__mobile .interface-interface-skeleton,
4837  .edit-site-layout__canvas .interface-interface-skeleton,
4838  .edit-site-template-pages-preview .interface-interface-skeleton {
4839    position: relative !important;
4840    min-height: 100% !important;
4841  }
4842  
4843  .edit-site-template-pages-preview {
4844    height: 100%;
4845  }
4846  
4847  html.canvas-mode-edit-transition::view-transition-group(toggle) {
4848    animation-delay: 255ms;
4849  }
4850  
4851  @media (prefers-reduced-motion) {
4852    ::view-transition-group(*),
4853    ::view-transition-old(*),
4854    ::view-transition-new(*) {
4855      animation: none !important;
4856    }
4857  }
4858  .edit-site-layout__actions {
4859    z-index: 100000;
4860    position: fixed !important;
4861    top: -9999em;
4862    bottom: auto;
4863    right: auto;
4864    left: 0;
4865    width: 280px;
4866    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4867    background: var(--wpds-color-background-surface-neutral-strong, #fff);
4868  }
4869  .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4870    top: auto;
4871    bottom: 0;
4872  }
4873  .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4874    top: var(--wp-admin--admin-bar--height, 0);
4875  }
4876  @media (min-width: 782px) {
4877    .edit-site-layout__actions {
4878      border-right: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4879    }
4880  }
4881  
4882  .edit-site-layout__area {
4883    flex-grow: 1;
4884    margin: 0;
4885    overflow: hidden;
4886    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);
4887  }
4888  @media (min-width: 782px) {
4889    .edit-site-layout__area {
4890      border-radius: var(--wpds-border-radius-xl, 12px);
4891      margin: 16px 0 16px 16px;
4892    }
4893  }
4894  
4895  .edit-site-layout__snackbar {
4896    position: fixed;
4897    bottom: 24px;
4898    right: 0;
4899    left: 0;
4900    padding-inline: 16px;
4901    box-sizing: border-box;
4902    display: flex;
4903    flex-direction: column;
4904    pointer-events: none;
4905  }
4906  .edit-site-layout__snackbar .components-snackbar {
4907    margin-inline: auto;
4908  }
4909  
4910  .edit-site-save-hub {
4911    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
4912    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4913    flex-shrink: 0;
4914    margin: 0;
4915    padding: 16px;
4916  }
4917  
4918  .edit-site-save-hub__button {
4919    color: inherit;
4920    width: 100%;
4921    justify-content: center;
4922  }
4923  .edit-site-save-hub__button[aria-disabled=true] {
4924    opacity: 1;
4925  }
4926  .edit-site-save-hub__button[aria-disabled=true], .edit-site-save-hub__button[aria-disabled=true]:hover {
4927    color: inherit;
4928  }
4929  .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4930    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4931  }
4932  
4933  @media (min-width: 600px) {
4934    .edit-site-save-panel__modal {
4935      width: 600px;
4936    }
4937  }
4938  
4939  .edit-site-sidebar__content {
4940    flex-grow: 1;
4941    flex-basis: 0;
4942    min-height: 0;
4943    overflow-y: auto;
4944    overflow-x: hidden;
4945    contain: content;
4946  }
4947  
4948  @keyframes local--slide-from-right {
4949    from {
4950      transform: translateX(-50px);
4951      opacity: 0;
4952    }
4953    to {
4954      transform: none;
4955      opacity: 1;
4956    }
4957  }
4958  @keyframes local--slide-from-left {
4959    from {
4960      transform: translateX(50px);
4961      opacity: 0;
4962    }
4963    to {
4964      transform: none;
4965      opacity: 1;
4966    }
4967  }
4968  .edit-site-sidebar__screen-wrapper {
4969    overflow-x: auto;
4970  }
4971  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
4972    width: 12px;
4973    height: 12px;
4974  }
4975  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
4976    background-color: transparent;
4977  }
4978  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
4979    background-color: transparent;
4980    border-radius: 8px;
4981    border: 3px solid transparent;
4982    background-clip: padding-box;
4983  }
4984  .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 {
4985    background-color: #757575;
4986  }
4987  .edit-site-sidebar__screen-wrapper {
4988    scrollbar-width: thin;
4989    scrollbar-gutter: stable both-edges;
4990    scrollbar-color: transparent transparent;
4991  }
4992  .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
4993    scrollbar-color: #757575 transparent;
4994  }
4995  .edit-site-sidebar__screen-wrapper {
4996    will-change: transform;
4997  }
4998  @media (hover: none) {
4999    .edit-site-sidebar__screen-wrapper {
5000      scrollbar-color: #757575 transparent;
5001    }
5002  }
5003  .edit-site-sidebar__screen-wrapper {
5004    scrollbar-gutter: stable;
5005    display: flex;
5006    flex-direction: column;
5007    height: 100%;
5008    max-height: 100%;
5009    padding: 0 12px;
5010    animation-duration: 0.14s;
5011    animation-timing-function: ease-in-out;
5012    will-change: transform, opacity;
5013  }
5014  @media (prefers-reduced-motion: reduce) {
5015    .edit-site-sidebar__screen-wrapper {
5016      animation-duration: 0s;
5017    }
5018  }
5019  .edit-site-sidebar__screen-wrapper.slide-from-left {
5020    animation-name: local--slide-from-left;
5021  }
5022  .edit-site-sidebar__screen-wrapper.slide-from-right {
5023    animation-name: local--slide-from-right;
5024  }
5025  
5026  .edit-site-sidebar-button {
5027    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5028    flex-shrink: 0;
5029  }
5030  .edit-site-sidebar-button:focus:not(:focus-visible) {
5031    outline: none;
5032  }
5033  .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] {
5034    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5035  }
5036  
5037  .edit-site-sidebar-navigation-item.components-item {
5038    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5039    padding: 8px 16px 8px 6px;
5040    border: none;
5041    min-height: 40px;
5042  }
5043  .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] {
5044    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5045  }
5046  .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 {
5047    fill: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5048  }
5049  .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5050    background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5051    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5052    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5053  }
5054  .edit-site-sidebar-navigation-item.components-item:focus-visible {
5055    --wp-components-color-accent: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
5056    transform: translateZ(0);
5057  }
5058  .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5059    fill: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5060  }
5061  .edit-site-sidebar-navigation-item.components-item.with-suffix {
5062    padding-left: 16px;
5063  }
5064  
5065  .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
5066    cursor: grab;
5067    padding: 8px 0 8px 8px;
5068  }
5069  
5070  .edit-site-sidebar-navigation-screen {
5071    display: flex;
5072    flex-direction: column;
5073    overflow-x: unset !important;
5074    position: relative;
5075  }
5076  
5077  .edit-site-sidebar-navigation-screen__main {
5078    flex-grow: 1;
5079    margin-bottom: 16px;
5080  }
5081  .edit-site-sidebar-navigation-screen__main.has-footer {
5082    margin-bottom: 0;
5083  }
5084  
5085  .edit-site-sidebar-navigation-screen__content {
5086    padding: 0 16px;
5087  }
5088  .edit-site-sidebar-navigation-screen__content .components-text {
5089    color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
5090  }
5091  .edit-site-sidebar-navigation-screen__content .components-heading {
5092    margin-bottom: 8px;
5093  }
5094  
5095  .edit-site-sidebar-navigation-screen__title-icon {
5096    position: sticky;
5097    top: 0;
5098    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5099    padding-top: 32px;
5100    margin-bottom: 8px;
5101    padding-bottom: 8px;
5102    z-index: 1;
5103  }
5104  
5105  .edit-site-sidebar-navigation-screen__title {
5106    flex-grow: 1;
5107    overflow-wrap: break-word;
5108  }
5109  .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 {
5110    line-height: 32px;
5111  }
5112  
5113  .edit-site-sidebar-navigation-screen__actions {
5114    display: flex;
5115    flex-shrink: 0;
5116  }
5117  
5118  @media (min-width: 782px) {
5119    .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5120      max-width: 292px;
5121    }
5122  }
5123  
5124  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5125    outline-color: rgba(255, 255, 255, 0.05);
5126  }
5127  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5128    outline-color: rgba(255, 255, 255, 0.15);
5129  }
5130  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5131    outline-color: #fff;
5132  }
5133  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5134    outline-color: var(--wp-admin-theme-color);
5135  }
5136  
5137  .edit-site-sidebar-navigation-screen__footer {
5138    position: sticky;
5139    bottom: 0;
5140    background-color: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5141    gap: 0;
5142    padding: 8px 16px;
5143    margin: 16px 0 0;
5144    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5145  }
5146  .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5147    margin-right: -16px;
5148    margin-left: -16px;
5149  }
5150  
5151  /* In general style overrides are discouraged.
5152   * This is a temporary solution to override the InputControl component's styles.
5153   * The `Theme` component will potentially be the more appropriate approach
5154   * once that component is stabilized.
5155   * See: packages/components/src/theme
5156   */
5157  .edit-site-sidebar-navigation-screen__input-control {
5158    width: 100%;
5159  }
5160  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5161    background: var(--wpds-color-background-interactive-neutral-weak, #0000);
5162  }
5163  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5164    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5165  }
5166  .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5167    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e) !important;
5168    background: var(--wpds-color-background-interactive-neutral-weak, #0000) !important;
5169  }
5170  .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5171    border: 4px !important;
5172  }
5173  .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5174    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5175  }
5176  
5177  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5178  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5179  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5180    background: none;
5181  }
5182  
5183  .sidebar-navigation__more-menu .components-button {
5184    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5185  }
5186  .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5187    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5188  }
5189  
5190  .edit-site-sidebar-navigation-screen-patterns__group {
5191    margin-bottom: 24px;
5192    margin-right: -16px;
5193    margin-left: -16px;
5194  }
5195  .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5196    border-bottom: 0;
5197    padding-bottom: 0;
5198    margin-bottom: 0;
5199  }
5200  
5201  .edit-site-sidebar-navigation-screen-patterns__group-header {
5202    margin-top: 16px;
5203  }
5204  .edit-site-sidebar-navigation-screen-patterns__group-header p {
5205    color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5206  }
5207  .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5208    font-size: 11px;
5209    font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5210    text-transform: uppercase;
5211  }
5212  
5213  .edit-site-sidebar-navigation-screen-patterns__divider {
5214    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5215    margin: 16px 0;
5216  }
5217  
5218  .edit-site-sidebar-navigation-screen__description {
5219    margin: 0 0 32px 0;
5220  }
5221  
5222  .edit-site-sidebar-navigation-screen-navigation-menus {
5223    margin-right: -16px;
5224    margin-left: -16px;
5225  }
5226  
5227  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5228    white-space: normal;
5229  }
5230  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5231    margin-top: 3px;
5232  }
5233  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5234    padding-left: 0;
5235  }
5236  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5237    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5238  }
5239  .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] {
5240    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5241  }
5242  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5243    color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5244  }
5245  .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 {
5246    color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5247  }
5248  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5249    background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5250    color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
5251  }
5252  .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 {
5253    background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5254    color: var(--wpds-color-foreground-interactive-brand-strong-active, #fff);
5255  }
5256  
5257  .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5258    margin-right: auto;
5259    margin-left: auto;
5260    display: block;
5261  }
5262  
5263  .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5264    display: none;
5265  }
5266  
5267  .edit-site-sidebar-navigation-screen-main {
5268    margin-right: -16px;
5269    margin-left: -16px;
5270  }
5271  
5272  .edit-site-sidebar-navigation-screen-templates-browse {
5273    margin-right: -16px;
5274    margin-left: -16px;
5275  }
5276  
5277  .edit-site-sidebar-dataviews {
5278    margin-right: -16px;
5279    margin-left: -16px;
5280  }
5281  
5282  .edit-site-site-hub {
5283    display: flex;
5284    align-items: center;
5285    padding-right: 16px;
5286    height: 64px;
5287  }
5288  
5289  .edit-site-site-hub__back-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-site-hub__back-button:active:not(:disabled, [aria-disabled=true]) {
5290    color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5291  }
5292  
5293  .fields-controls__password {
5294    border-top: 1px solid #e0e0e0;
5295    padding-top: 16px;
5296  }
5297  
5298  .dataviews-action-modal__quick-edit {
5299    justify-content: flex-end;
5300    align-items: stretch;
5301  }
5302  .dataviews-action-modal__quick-edit .components-modal__frame {
5303    margin: 16px 0 16px 16px;
5304    height: calc(100% - 32px);
5305    max-height: calc(100% - 32px);
5306    max-width: 400px;
5307    border-radius: 8px;
5308    position: relative;
5309    animation-name: none;
5310  }
5311  @media (prefers-reduced-motion: no-preference) {
5312    .dataviews-action-modal__quick-edit .components-modal__frame {
5313      animation-name: quick-edit-slide-in-right;
5314      animation-duration: 0.2s;
5315      animation-timing-function: ease-out;
5316    }
5317  }
5318  .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5319    animation-name: none;
5320  }
5321  @media (prefers-reduced-motion: no-preference) {
5322    .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5323      animation-name: quick-edit-slide-out-right;
5324      animation-duration: 0.2s;
5325      animation-timing-function: ease-out;
5326    }
5327  }
5328  .dataviews-action-modal__quick-edit .components-modal__content {
5329    display: flex;
5330    flex-direction: column;
5331    overflow: hidden;
5332    padding: 0;
5333  }
5334  .dataviews-action-modal__quick-edit .components-modal__content > * {
5335    display: flex;
5336    flex-direction: column;
5337    flex: 1;
5338    min-height: 0;
5339  }
5340  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5341    padding: 24px 24px 0;
5342  }
5343  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5344    flex: 1;
5345    min-height: 0;
5346    overflow-y: auto;
5347    padding-top: 16px;
5348  }
5349  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5350    flex: 1;
5351    padding: 0 24px 4px;
5352  }
5353  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5354    position: sticky;
5355    bottom: 0;
5356    flex-shrink: 0;
5357    padding: 16px 24px 24px;
5358  }
5359  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5360    flex: 1;
5361    justify-content: center;
5362  }
5363  
5364  @keyframes quick-edit-slide-in-right {
5365    from {
5366      transform: translateX(-100%);
5367    }
5368    to {
5369      transform: translateX(0);
5370    }
5371  }
5372  @keyframes quick-edit-slide-out-right {
5373    from {
5374      transform: translateX(0);
5375    }
5376    to {
5377      transform: translateX(-100%);
5378    }
5379  }
5380  .edit-site-resizable-frame__inner {
5381    position: relative;
5382  }
5383  body:has(.edit-site-resizable-frame__inner.is-resizing) {
5384    cursor: col-resize;
5385    -webkit-user-select: none;
5386       -moz-user-select: none;
5387            user-select: none;
5388  }
5389  
5390  .edit-site-resizable-frame__inner.is-resizing::before {
5391    position: absolute;
5392    z-index: 1;
5393    inset: 0;
5394    content: "";
5395  }
5396  
5397  .edit-site-resizable-frame__inner-content {
5398    position: absolute;
5399    z-index: 0;
5400    inset: 0;
5401  }
5402  
5403  .edit-site-resizable-frame__handle {
5404    align-items: center;
5405    background-color: rgba(117, 117, 117, 0.4);
5406    border: 0;
5407    border-radius: 4px;
5408    cursor: col-resize;
5409    display: flex;
5410    height: 64px;
5411    justify-content: flex-end;
5412    padding: 0;
5413    position: absolute;
5414    top: calc(50% - 32px);
5415    width: 4px;
5416    z-index: 100;
5417  }
5418  .edit-site-resizable-frame__handle::before {
5419    content: "";
5420    height: 100%;
5421    right: 100%;
5422    position: absolute;
5423    width: 32px;
5424  }
5425  .edit-site-resizable-frame__handle::after {
5426    content: "";
5427    height: 100%;
5428    position: absolute;
5429    left: 100%;
5430    width: 32px;
5431  }
5432  .edit-site-resizable-frame__handle:focus-visible {
5433    outline: 2px solid transparent;
5434  }
5435  .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5436    background-color: var(--wp-admin-theme-color);
5437  }
5438  
5439  .edit-site-pagination .components-button.is-tertiary {
5440    width: 32px;
5441    height: 32px;
5442    justify-content: center;
5443  }
5444  
5445  .edit-site-styles .global-styles-ui-screen-root {
5446    box-shadow: none;
5447  }
5448  .edit-site-styles .global-styles-ui-screen-root > div > hr {
5449    display: none;
5450  }
5451  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5452    border-top: none;
5453  }
5454  .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5455    overflow-y: auto;
5456    padding-right: 0;
5457    padding-left: 0;
5458  }
5459  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5460    padding: 12px;
5461    outline: none;
5462  }
5463  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen .global-styles-ui-color-palette__tablist-container {
5464    margin-inline: -12px;
5465    width: calc(100% + 24px);
5466    padding-inline: 12px;
5467  }
5468  .edit-site-styles .edit-site-sidebar-button {
5469    color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5470  }
5471  
5472  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5473    width: auto;
5474    padding: 0 var(--wpds-dimension-padding-xs, 4px);
5475  }
5476  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon svg {
5477    display: none;
5478  }
5479  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5480    content: attr(aria-label);
5481    font-size: var(--wpds-typography-font-size-sm, 12px);
5482  }
5483  
5484  ::view-transition-image-pair(root) {
5485    isolation: auto;
5486  }
5487  
5488  ::view-transition-old(root),
5489  ::view-transition-new(root) {
5490    animation: none;
5491    mix-blend-mode: normal;
5492    display: block;
5493  }
5494  
5495  body.js #wpbody {
5496    padding-top: 0;
5497  }
5498  
5499  body.js.appearance_page_gutenberg-template-parts,
5500  body.js.site-editor-php {
5501    background: #fff;
5502  }
5503  body.js.appearance_page_gutenberg-template-parts #wpcontent,
5504  body.js.site-editor-php #wpcontent {
5505    padding-right: 0;
5506  }
5507  body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5508  body.js.site-editor-php #wpbody-content {
5509    padding-bottom: 0;
5510  }
5511  body.js.appearance_page_gutenberg-template-parts,
5512  body.js.site-editor-php {
5513    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5514       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5515  }
5516  body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5517  body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5518    display: none;
5519  }
5520  body.js.appearance_page_gutenberg-template-parts #wpfooter,
5521  body.js.site-editor-php #wpfooter {
5522    display: none;
5523  }
5524  body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5525  body.js.site-editor-php .a11y-speak-region {
5526    right: -1px;
5527    top: -1px;
5528  }
5529  body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5530  body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5531  body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5532  body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5533    border-left-color: #fff;
5534  }
5535  body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5536  body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5537    width: auto;
5538    max-width: 100%;
5539  }
5540  
5541  body.js.site-editor-php {
5542    background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5543  }
5544  @media (min-width: 782px) {
5545    body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) {
5546      --wp-admin--admin-bar--height: 0px;
5547    }
5548    body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5549      display: none;
5550    }
5551  }
5552  
5553  .edit-site {
5554    box-sizing: border-box;
5555  }
5556  .edit-site *,
5557  .edit-site *::before,
5558  .edit-site *::after {
5559    box-sizing: inherit;
5560  }
5561  .edit-site {
5562    padding-top: var(--wp-admin--admin-bar--height, 0);
5563    height: 100vh;
5564  }
5565  @media (min-width: 600px) {
5566    .edit-site {
5567      bottom: 0;
5568      right: 0;
5569      height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
5570      padding-top: 0;
5571      position: fixed;
5572      left: 0;
5573      top: var(--wp-admin--admin-bar--height, 0);
5574    }
5575  }
5576  .no-js .edit-site {
5577    min-height: 0;
5578    position: static;
5579  }
5580  .edit-site .interface-interface-skeleton {
5581    top: 0;
5582  }