[Summary view] [Print] [Text view]

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