[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    left: 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-right: 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    right: 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-right: 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    left: 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    left: 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-right: 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 0 0 -5px;
 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: left;
 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    left: 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 var(--wpds-dimension-padding-sm, 8px) 0 calc(var(--wpds-dimension-base, 4px) * 8);
 864    width: 100%;
 865    height: calc(var(--wpds-dimension-base, 4px) * 8);
 866    margin-left: 0;
 867    margin-right: 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    right: 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-left: 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    left: 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    right: 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    left: 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    left: 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    left: 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    right: 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    left: 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: left;
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: right;
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    right: 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    left: 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-right: 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-left: 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-right: 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    left: 0;
1836    right: 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-left: var(--wpds-dimension-padding-xs, 4px);
1856    padding-right: 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-left: var(--wpds-dimension-padding-lg, 16px);
1865  }
1866  
1867  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1868    padding-right: 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-left: 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-left: 0;
1925  }
1926  
1927  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
1928    padding-right: 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-right: 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    left: 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    left: 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    left: 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: left;
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    right: 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    left: 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    left: 0;
3314    right: 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    right: 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: left;
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-left: -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-left: 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-left: -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    left: 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 16px 16px 17px;
3804  }
3805  
3806  .font-library__select-all .components-checkbox-control__label {
3807    padding-left: 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    left: 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    left: 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 12px 4px 40px;
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 12px 12px 40px;
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: left;
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-right: 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: left;
3955    line-height: 1.4;
3956    margin-left: 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    left: -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-left: 0;
4100    padding-right: 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    /*rtl:begin:ignore*/
4154    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);
4155    background-position: 0 0, 8px 8px;
4156    /*rtl:end:ignore*/
4157    background-size: 16px 16px;
4158  }
4159  
4160  .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4161    border: #ddd 1px solid;
4162    border-radius: 2px;
4163    background-color: #fff;
4164    width: 60%;
4165    height: 60px;
4166  }
4167  
4168  .global-styles-ui__shadow-editor__dropdown-content {
4169    width: 280px;
4170  }
4171  
4172  .global-styles-ui__shadow-editor-panel {
4173    margin-bottom: 4px;
4174  }
4175  
4176  .global-styles-ui__shadow-editor__dropdown {
4177    width: 100%;
4178    position: relative;
4179  }
4180  
4181  .global-styles-ui__shadow-editor__dropdown-toggle {
4182    width: 100%;
4183    height: auto;
4184    padding-top: 8px;
4185    padding-bottom: 8px;
4186    text-align: left;
4187    border-radius: inherit;
4188  }
4189  
4190  .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4191    background: #f0f0f0;
4192    color: var(--wp-admin-theme-color);
4193  }
4194  
4195  .global-styles-ui__shadow-editor__remove-button {
4196    position: absolute;
4197    right: 8px;
4198    top: 8px;
4199    opacity: 0;
4200  }
4201  
4202  .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4203    border: none;
4204  }
4205  
4206  .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 {
4207    opacity: 1;
4208  }
4209  
4210  @media (hover: none) {
4211    .global-styles-ui__shadow-editor__remove-button {
4212      opacity: 1;
4213    }
4214  }
4215  .global-styles-ui-screen-css {
4216    flex: 1 1 auto;
4217    display: flex;
4218    flex-direction: column;
4219    margin: 16px;
4220  }
4221  
4222  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel {
4223    flex: 1 1 auto;
4224  }
4225  
4226  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input {
4227    flex: 1 1 auto;
4228    display: flex;
4229    flex-direction: column;
4230  }
4231  
4232  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4233    flex: 1 1 auto;
4234    display: flex;
4235    flex-direction: column;
4236  }
4237  
4238  .global-styles-ui-screen-css .block-editor-global-styles-advanced-panel__custom-css-input textarea {
4239    flex: 1 1 auto;
4240  }
4241  
4242  .global-styles-ui-screen-css-help-link {
4243    display: inline-block;
4244    margin-top: 8px;
4245  }
4246  
4247  .global-styles-ui-screen-variations {
4248    margin-top: 16px;
4249    border-top: 1px solid #ddd;
4250  }
4251  
4252  .global-styles-ui-screen-variations > * {
4253    margin: 24px 16px;
4254  }
4255  
4256  .global-styles-ui-sidebar__navigator-provider {
4257    height: 100%;
4258  }
4259  
4260  .global-styles-ui-sidebar__navigator-screen {
4261    display: flex;
4262    flex-direction: column;
4263    height: 100%;
4264  }
4265  
4266  .global-styles-ui-sidebar__navigator-screen .single-column {
4267    grid-column: span 1;
4268  }
4269  
4270  .global-styles-ui-screen-root.global-styles-ui-screen-root,
4271  .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4272    background: unset;
4273    color: inherit;
4274  }
4275  
4276  .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4277    fill: currentColor;
4278  }
4279  
4280  .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 {
4281    border-radius: 2px;
4282  }
4283  
4284  .global-styles-ui-screen-root__active-style-tile-preview {
4285    clip-path: border-box;
4286  }
4287  
4288  .global-styles-ui-color-palette-panel,
4289  .global-styles-ui-gradient-palette-panel {
4290    padding: 16px;
4291  }
4292  
4293  .edit-site-custom-template-modal__contents-wrapper {
4294    height: 100%;
4295    justify-content: flex-start !important;
4296  }
4297  .edit-site-custom-template-modal__contents-wrapper > * {
4298    width: 100%;
4299  }
4300  .edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4301    margin-left: -12px;
4302    margin-right: -12px;
4303    width: calc(100% + 24px);
4304  }
4305  .edit-site-custom-template-modal__contents > .components-button {
4306    height: auto;
4307    justify-content: center;
4308  }
4309  @media (min-width: 782px) {
4310    .edit-site-custom-template-modal {
4311      width: 456px;
4312    }
4313  }
4314  @media (min-width: 600px) {
4315    .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4316      max-height: 224px;
4317      overflow-y: auto;
4318    }
4319  }
4320  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4321    display: block;
4322    width: 100%;
4323    text-align: left;
4324    white-space: pre-wrap;
4325    overflow-wrap: break-word;
4326    height: auto;
4327    padding: 8px 12px;
4328  }
4329  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4330    font-weight: 700;
4331    background: none;
4332  }
4333  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4334    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4335  }
4336  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4337    color: var(--wp-admin-theme-color);
4338  }
4339  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4340    color: var(--wp-admin-theme-color);
4341  }
4342  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4343    background-color: #f0f0f0;
4344  }
4345  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4346    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4347  }
4348  .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 {
4349    overflow: hidden;
4350    text-overflow: ellipsis;
4351    display: block;
4352  }
4353  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4354    word-break: break-all;
4355    color: #757575;
4356  }
4357  
4358  .edit-site-custom-template-modal__no-results {
4359    border: 1px solid #ccc;
4360    border-radius: 2px;
4361    padding: 16px;
4362  }
4363  
4364  .edit-site-custom-generic-template__modal .components-modal__header {
4365    border-bottom: none;
4366  }
4367  .edit-site-custom-generic-template__modal .components-modal__content::before {
4368    margin-bottom: 4px;
4369  }
4370  
4371  @media (min-width: 960px) {
4372    .edit-site-add-new-template__modal {
4373      max-width: 832px;
4374      margin-top: 64px;
4375      width: calc(100% - 128px);
4376      max-height: calc(100% - 128px);
4377    }
4378  }
4379  .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4380  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4381    fill: var(--wp-admin-theme-color);
4382  }
4383  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4384    flex-grow: 1;
4385    align-items: flex-start;
4386  }
4387  .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4388    padding: 8px;
4389    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4390    border-radius: 100%;
4391    max-height: 40px;
4392    max-width: 40px;
4393  }
4394  
4395  .edit-site-custom-template-modal__contents > .components-button,
4396  .edit-site-add-new-template__template-list__contents > .components-button {
4397    padding: 32px;
4398    display: flex;
4399    flex-direction: column;
4400    border: 1px solid #ddd;
4401    justify-content: center;
4402    outline: 1px solid transparent;
4403  }
4404  .edit-site-custom-template-modal__contents > .components-button span:first-child,
4405  .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4406    color: #1e1e1e;
4407  }
4408  .edit-site-custom-template-modal__contents > .components-button span,
4409  .edit-site-add-new-template__template-list__contents > .components-button span {
4410    color: #757575;
4411  }
4412  .edit-site-custom-template-modal__contents > .components-button:hover,
4413  .edit-site-add-new-template__template-list__contents > .components-button:hover {
4414    color: var(--wp-admin-theme-color-darker-10);
4415    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4416    border-color: transparent;
4417  }
4418  .edit-site-custom-template-modal__contents > .components-button:hover span,
4419  .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4420    color: var(--wp-admin-theme-color);
4421  }
4422  .edit-site-custom-template-modal__contents > .components-button:focus,
4423  .edit-site-add-new-template__template-list__contents > .components-button:focus {
4424    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4425    border-color: transparent;
4426    outline: 3px solid transparent;
4427  }
4428  .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4429  .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4430    color: var(--wp-admin-theme-color);
4431  }
4432  .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4433  .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4434  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4435  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4436    grid-column: 1/-1;
4437  }
4438  
4439  .edit-site-add-new-template__template-list__contents > .components-button {
4440    height: 100%;
4441    text-align: start;
4442    align-items: flex-start;
4443  }
4444  
4445  .edit-site-visual-editor__editor-canvas.is-focused {
4446    outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4447    outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4448  }
4449  
4450  .edit-site-canvas-loader {
4451    width: 100%;
4452    height: 100%;
4453    display: flex;
4454    position: absolute;
4455    top: 0;
4456    left: 0;
4457    opacity: 0;
4458    align-items: center;
4459    justify-content: center;
4460  }
4461  @media not (prefers-reduced-motion) {
4462    .edit-site-canvas-loader {
4463      animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4464      animation-fill-mode: forwards;
4465    }
4466  }
4467  .edit-site-canvas-loader > div {
4468    width: 160px;
4469  }
4470  
4471  @keyframes edit-site-canvas-loader__fade-in-animation {
4472    from {
4473      opacity: 0;
4474    }
4475    to {
4476      opacity: 1;
4477    }
4478  }
4479  .edit-site-patterns__delete-modal {
4480    width: 400px;
4481  }
4482  
4483  .page-patterns-preview-field {
4484    display: flex;
4485    justify-content: center;
4486    align-items: center;
4487    flex-direction: column;
4488    height: 100%;
4489    border-radius: 4px;
4490  }
4491  .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4492    height: 100%;
4493  }
4494  .dataviews-view-table .page-patterns-preview-field {
4495    width: 96px;
4496    flex-grow: 0;
4497    text-wrap: balance;
4498    text-wrap: pretty;
4499  }
4500  
4501  .edit-site-patterns__pattern-icon {
4502    fill: var(--wp-block-synced-color);
4503    flex-shrink: 0;
4504  }
4505  
4506  .edit-site-patterns__section-header {
4507    border-bottom: 1px solid #f0f0f0;
4508    padding: 16px 48px;
4509    position: sticky;
4510    top: 0;
4511    z-index: 2;
4512    flex-shrink: 0;
4513    min-height: 40px;
4514  }
4515  @media not (prefers-reduced-motion) {
4516    .edit-site-patterns__section-header {
4517      transition: padding ease-out 0.1s;
4518    }
4519  }
4520  .edit-site-patterns__section-header .edit-site-patterns__title {
4521    min-height: 40px;
4522  }
4523  .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4524    flex-grow: 1;
4525    flex-basis: 0;
4526    white-space: nowrap;
4527  }
4528  .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4529    margin-bottom: 8px;
4530  }
4531  .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4532    top: 0;
4533  }
4534  
4535  .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4536    background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4537    color: var(--wp-block-synced-color);
4538  }
4539  
4540  .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4541    width: 350px;
4542  }
4543  .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4544    position: relative;
4545  }
4546  .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4547    position: absolute;
4548    border: 1px solid var(--wp-admin-theme-color);
4549    border-bottom-left-radius: 2px;
4550    border-bottom-right-radius: 2px;
4551    box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4552    box-sizing: border-box;
4553    z-index: 1;
4554    background-color: var(--wpds-color-bg-surface-neutral-strong, #fff);
4555    width: calc(100% + 2px);
4556    left: -1px;
4557    min-width: initial;
4558    max-height: 96px;
4559  }
4560  
4561  @media (min-width: 600px) {
4562    .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4563      max-width: 500px;
4564    }
4565  }
4566  
4567  @container (max-width: 430px) {
4568    .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4569      padding-left: 24px;
4570      padding-right: 24px;
4571    }
4572  }
4573  .show-icon-labels .edit-site-patterns__button.has-icon {
4574    width: auto;
4575    padding: 0 var(--wpds-dimension-padding-xs, 4px);
4576  }
4577  .show-icon-labels .edit-site-patterns__button.has-icon svg {
4578    display: none;
4579  }
4580  .show-icon-labels .edit-site-patterns__button.has-icon::after {
4581    content: attr(aria-label);
4582    font-size: var(--wpds-typography-font-size-sm, 12px);
4583  }
4584  
4585  .page-templates-preview-field {
4586    display: flex;
4587    justify-content: center;
4588    align-items: center;
4589    flex-direction: column;
4590    height: 100%;
4591    width: 100%;
4592    border-radius: 4px;
4593  }
4594  .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4595    height: 120px;
4596  }
4597  .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4598    height: 100%;
4599  }
4600  .dataviews-view-table .page-templates-preview-field {
4601    position: relative;
4602    width: 120px;
4603    max-height: 160px;
4604    text-wrap: balance;
4605    text-wrap: pretty;
4606  }
4607  
4608  .edit-site-list__rename-modal {
4609    z-index: 1000001;
4610  }
4611  @media (min-width: 782px) {
4612    .edit-site-list__rename-modal .components-base-control {
4613      width: 320px;
4614    }
4615  }
4616  
4617  .edit-site-editor__editor-interface {
4618    opacity: 1;
4619  }
4620  @media not (prefers-reduced-motion) {
4621    .edit-site-editor__editor-interface {
4622      transition: opacity 0.1s ease-out;
4623    }
4624  }
4625  .edit-site-editor__editor-interface.is-loading {
4626    opacity: 0;
4627  }
4628  
4629  .edit-site-editor__toggle-save-panel {
4630    box-sizing: border-box;
4631    width: 280px;
4632    background-color: #fff;
4633    border: 1px dotted #ddd;
4634    padding: 24px;
4635    display: flex;
4636    justify-content: center;
4637  }
4638  
4639  .edit-site-editor__view-mode-toggle {
4640    /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4641    view-transition-name: toggle;
4642    /* stylelint-enable */
4643    top: 0;
4644    left: 0;
4645    height: 64px;
4646    width: 64px;
4647    z-index: 100;
4648  }
4649  .edit-site-editor__view-mode-toggle .components-button {
4650    color: #fff;
4651    height: 100%;
4652    width: 100%;
4653    border-radius: 0;
4654    overflow: hidden;
4655    padding: 0;
4656    display: flex;
4657    align-items: center;
4658    justify-content: center;
4659  }
4660  .edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4661    color: #fff;
4662  }
4663  .edit-site-editor__view-mode-toggle .components-button:focus {
4664    box-shadow: none;
4665  }
4666  .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4667  .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4668    background: #1e1e1e;
4669    display: block;
4670  }
4671  
4672  .edit-site-editor__back-icon {
4673    position: absolute;
4674    top: 0;
4675    left: 0;
4676    width: 64px;
4677    height: 64px;
4678    display: flex;
4679    align-items: center;
4680    justify-content: center;
4681    background-color: hsl(0, 0%, 80%);
4682    pointer-events: none;
4683  }
4684  .edit-site-editor__back-icon svg {
4685    fill: currentColor;
4686  }
4687  .edit-site-editor__back-icon.has-site-icon {
4688    background-color: hsla(0, 0%, 100%, 0.6);
4689    backdrop-filter: saturate(180%) blur(15px);
4690  }
4691  
4692  .edit-site-welcome-guide {
4693    width: 312px;
4694  }
4695  .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4696    background: #00a0d2;
4697  }
4698  .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4699    border-right: #3858e9 16px solid;
4700    border-top: #3858e9 16px solid;
4701  }
4702  .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4703    border-left: #3858e9 16px solid;
4704    border-top: #3858e9 16px solid;
4705  }
4706  .edit-site-welcome-guide__image {
4707    margin: 0 0 16px;
4708  }
4709  .edit-site-welcome-guide__image > img {
4710    display: block;
4711    max-width: 100%;
4712    -o-object-fit: cover;
4713       object-fit: cover;
4714  }
4715  .edit-site-welcome-guide__heading {
4716    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4717    font-size: 24px;
4718    line-height: 1.4;
4719    margin: 16px 0 16px 0;
4720    padding: 0 32px;
4721  }
4722  .edit-site-welcome-guide__text {
4723    font-size: 13px;
4724    line-height: 1.4;
4725    margin: 0 0 16px 0;
4726    padding: 0 32px;
4727  }
4728  .edit-site-welcome-guide__text img {
4729    vertical-align: bottom;
4730  }
4731  .edit-site-welcome-guide__inserter-icon {
4732    margin: 0 4px;
4733    vertical-align: text-top;
4734  }
4735  .edit-site-welcome-guide .components-button:hover svg {
4736    fill: #fff;
4737  }
4738  
4739  .edit-site-layout {
4740    height: 100%;
4741    background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4742    color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4743    display: flex;
4744    flex-direction: column;
4745  }
4746  .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4747    background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4748  }
4749  
4750  .edit-site-layout__content {
4751    height: 100%;
4752    flex-grow: 1;
4753    display: flex;
4754  }
4755  
4756  .edit-site-layout__sidebar-region {
4757    z-index: 1;
4758    width: 100vw;
4759    flex-shrink: 0;
4760  }
4761  @media (min-width: 782px) {
4762    .edit-site-layout__sidebar-region {
4763      width: 300px;
4764    }
4765  }
4766  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4767    position: fixed !important;
4768    height: 100vh;
4769    left: 0;
4770    top: 0;
4771  }
4772  .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4773    display: flex;
4774    flex-direction: column;
4775    height: 100%;
4776  }
4777  .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4778    right: 0;
4779  }
4780  
4781  .edit-site-layout__main {
4782    flex-grow: 1;
4783    overflow: hidden;
4784    display: flex;
4785    flex-direction: column;
4786  }
4787  
4788  .edit-site-layout__mobile {
4789    position: relative;
4790    width: 100%;
4791    z-index: 2;
4792    display: flex;
4793    flex-direction: column;
4794    /*
4795     * The SiteHubMobile component is displayed
4796     * for pages that do not have a sidebar,
4797     * yet it needs the Sidebar component for the React context.
4798     *
4799     * This removes the padding in this scenario.
4800     * See https://github.com/WordPress/gutenberg/pull/63118
4801     */
4802  }
4803  .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4804    padding: 0;
4805  }
4806  .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4807    padding: 0 12px;
4808  }
4809  
4810  .edit-site-layout__mobile-content {
4811    display: flex;
4812    flex-direction: column;
4813    flex-grow: 1;
4814    background: var(--wpds-color-bg-surface-neutral, #fcfcfc);
4815  }
4816  
4817  .edit-site-layout__canvas-container {
4818    position: relative;
4819    flex-grow: 1;
4820    z-index: 2;
4821    overflow: visible;
4822  }
4823  
4824  .edit-site-layout__canvas {
4825    position: absolute;
4826    top: 0;
4827    left: 0;
4828    bottom: 0;
4829    width: 100%;
4830    display: flex;
4831    justify-content: center;
4832    align-items: center;
4833  }
4834  .edit-site-layout__canvas.is-right-aligned {
4835    justify-content: flex-end;
4836  }
4837  .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4838    color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4839  }
4840  @media (min-width: 782px) {
4841    .edit-site-layout__canvas {
4842      top: 16px;
4843      bottom: 16px;
4844      width: calc(100% - 16px);
4845    }
4846    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4847      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);
4848      overflow: hidden;
4849    }
4850  }
4851  @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4852    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4853      transition: border-radius, box-shadow 0.4s;
4854    }
4855  }
4856  @media (min-width: 782px) {
4857    .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4858      border-radius: 8px;
4859    }
4860    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4861      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);
4862    }
4863  }
4864  .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4865    top: 0;
4866    bottom: 0;
4867    width: 100%;
4868  }
4869  
4870  .edit-site-layout__mobile .interface-interface-skeleton,
4871  .edit-site-layout__canvas .interface-interface-skeleton,
4872  .edit-site-template-pages-preview .interface-interface-skeleton {
4873    position: relative !important;
4874    min-height: 100% !important;
4875  }
4876  
4877  .edit-site-template-pages-preview {
4878    height: 100%;
4879  }
4880  
4881  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4882  html.canvas-mode-edit-transition::view-transition-group(toggle) {
4883    animation-delay: 255ms;
4884  }
4885  
4886  @media (prefers-reduced-motion) {
4887    ::view-transition-group(*),
4888    ::view-transition-old(*),
4889    ::view-transition-new(*) {
4890      animation: none !important;
4891    }
4892  }
4893  /* stylelint-enable  */
4894  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4895    display: none;
4896  }
4897  
4898  .edit-site-layout__view-mode-toggle.components-button {
4899    /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4900    view-transition-name: toggle;
4901    /* stylelint-enable  */
4902    position: relative;
4903    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
4904    height: 64px;
4905    width: 64px;
4906    overflow: hidden;
4907    padding: 0;
4908    display: flex;
4909    align-items: center;
4910    justify-content: center;
4911    background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
4912    border-radius: 0;
4913  }
4914  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4915    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
4916  }
4917  .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4918    box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4919    outline: 4px solid rgba(0, 0, 0, 0);
4920    outline-offset: 4px;
4921  }
4922  .edit-site-layout__view-mode-toggle.components-button::before {
4923    content: "";
4924    display: block;
4925    position: absolute;
4926    top: 9px;
4927    right: 9px;
4928    bottom: 9px;
4929    left: 17px;
4930    border-radius: 4px;
4931    box-shadow: none;
4932  }
4933  @media not (prefers-reduced-motion) {
4934    .edit-site-layout__view-mode-toggle.components-button::before {
4935      transition: box-shadow 0.1s ease;
4936    }
4937  }
4938  .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4939    display: flex;
4940    height: 64px;
4941    width: 64px;
4942    justify-content: center;
4943    align-items: center;
4944  }
4945  
4946  .edit-site-layout__actions {
4947    z-index: 100000;
4948    position: fixed !important;
4949    top: -9999em;
4950    bottom: auto;
4951    left: auto;
4952    right: 0;
4953    width: 280px;
4954    color: var(--wpds-color-fg-content-neutral, #1e1e1e);
4955    background: var(--wpds-color-bg-surface-neutral-strong, #fff);
4956  }
4957  .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4958    top: auto;
4959    bottom: 0;
4960  }
4961  .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4962    top: 0;
4963  }
4964  @media (min-width: 782px) {
4965    .edit-site-layout__actions {
4966      border-left: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4967    }
4968  }
4969  
4970  .edit-site-layout__area {
4971    flex-grow: 1;
4972    margin: 0;
4973    overflow: hidden;
4974    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);
4975  }
4976  @media (min-width: 782px) {
4977    .edit-site-layout__area {
4978      border-radius: 8px;
4979      margin: 16px 16px 16px 0;
4980    }
4981  }
4982  
4983  .edit-site-layout__snackbar {
4984    position: fixed;
4985    bottom: 24px;
4986    left: 0;
4987    right: 0;
4988    padding-inline: 16px;
4989    box-sizing: border-box;
4990    display: flex;
4991    flex-direction: column;
4992    pointer-events: none;
4993  }
4994  .edit-site-layout__snackbar .components-snackbar {
4995    margin-inline: auto;
4996  }
4997  
4998  .edit-site-save-hub {
4999    color: var(--wpds-color-fg-content-neutral, #1e1e1e);
5000    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5001    flex-shrink: 0;
5002    margin: 0;
5003    padding: 16px 16px;
5004  }
5005  
5006  .edit-site-save-hub__button {
5007    color: inherit;
5008    width: 100%;
5009    justify-content: center;
5010  }
5011  .edit-site-save-hub__button[aria-disabled=true] {
5012    opacity: 1;
5013  }
5014  .edit-site-save-hub__button[aria-disabled=true], .edit-site-save-hub__button[aria-disabled=true]:hover {
5015    color: inherit;
5016  }
5017  .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
5018    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5019  }
5020  
5021  @media (min-width: 600px) {
5022    .edit-site-save-panel__modal {
5023      width: 600px;
5024    }
5025  }
5026  
5027  .edit-site-sidebar__content {
5028    flex-grow: 1;
5029    overflow-y: auto;
5030    overflow-x: hidden;
5031    contain: content;
5032  }
5033  
5034  @keyframes local--slide-from-right {
5035    from {
5036      transform: translateX(50px);
5037      opacity: 0;
5038    }
5039    to {
5040      transform: none;
5041      opacity: 1;
5042    }
5043  }
5044  @keyframes local--slide-from-left {
5045    from {
5046      transform: translateX(-50px);
5047      opacity: 0;
5048    }
5049    to {
5050      transform: none;
5051      opacity: 1;
5052    }
5053  }
5054  .edit-site-sidebar__screen-wrapper {
5055    overflow-x: auto;
5056  }
5057  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
5058    width: 12px;
5059    height: 12px;
5060  }
5061  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
5062    background-color: transparent;
5063  }
5064  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
5065    background-color: transparent;
5066    border-radius: 8px;
5067    border: 3px solid transparent;
5068    background-clip: padding-box;
5069  }
5070  .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 {
5071    background-color: #757575;
5072  }
5073  .edit-site-sidebar__screen-wrapper {
5074    scrollbar-width: thin;
5075    scrollbar-gutter: stable both-edges;
5076    scrollbar-color: transparent transparent;
5077  }
5078  .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
5079    scrollbar-color: #757575 transparent;
5080  }
5081  .edit-site-sidebar__screen-wrapper {
5082    will-change: transform;
5083  }
5084  @media (hover: none) {
5085    .edit-site-sidebar__screen-wrapper {
5086      scrollbar-color: #757575 transparent;
5087    }
5088  }
5089  .edit-site-sidebar__screen-wrapper {
5090    scrollbar-gutter: stable;
5091    display: flex;
5092    flex-direction: column;
5093    height: 100%;
5094    max-height: 100%;
5095    padding: 0 12px;
5096    animation-duration: 0.14s;
5097    animation-timing-function: ease-in-out;
5098    will-change: transform, opacity;
5099  }
5100  @media (prefers-reduced-motion: reduce) {
5101    .edit-site-sidebar__screen-wrapper {
5102      animation-duration: 0s;
5103    }
5104  }
5105  .edit-site-sidebar__screen-wrapper.slide-from-left {
5106    animation-name: local--slide-from-left;
5107  }
5108  .edit-site-sidebar__screen-wrapper.slide-from-right {
5109    animation-name: local--slide-from-right;
5110  }
5111  
5112  .edit-site-sidebar-button {
5113    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5114    flex-shrink: 0;
5115  }
5116  .edit-site-sidebar-button:focus:not(:disabled) {
5117    box-shadow: none;
5118    outline: none;
5119  }
5120  .edit-site-sidebar-button:focus-visible:not(:disabled) {
5121    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5122    outline: 3px solid transparent;
5123  }
5124  .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] {
5125    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5126  }
5127  
5128  .edit-site-sidebar-navigation-item.components-item {
5129    color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5130    padding: 8px 6px 8px 16px;
5131    border: none;
5132    min-height: 40px;
5133  }
5134  .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] {
5135    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5136  }
5137  .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 {
5138    fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5139  }
5140  .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5141    background: var(--wpds-color-bg-interactive-neutral-weak-active, #ededed);
5142    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5143    font-weight: 499;
5144  }
5145  .edit-site-sidebar-navigation-item.components-item:focus-visible {
5146    transform: translateZ(0);
5147  }
5148  .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5149    fill: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5150  }
5151  .edit-site-sidebar-navigation-item.components-item.with-suffix {
5152    padding-right: 16px;
5153  }
5154  
5155  .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
5156    cursor: grab;
5157    padding: 8px 8px 8px 0;
5158  }
5159  
5160  .edit-site-sidebar-navigation-screen {
5161    display: flex;
5162    flex-direction: column;
5163    overflow-x: unset !important;
5164    position: relative;
5165  }
5166  
5167  .edit-site-sidebar-navigation-screen__main {
5168    flex-grow: 1;
5169    margin-bottom: 16px;
5170  }
5171  .edit-site-sidebar-navigation-screen__main.has-footer {
5172    margin-bottom: 0;
5173  }
5174  
5175  .edit-site-sidebar-navigation-screen__content {
5176    padding: 0 16px;
5177  }
5178  .edit-site-sidebar-navigation-screen__content .components-text {
5179    color: var(--wpds-color-fg-content-neutral, #1e1e1e);
5180  }
5181  .edit-site-sidebar-navigation-screen__content .components-heading {
5182    margin-bottom: 8px;
5183  }
5184  
5185  .edit-site-sidebar-navigation-screen__title-icon {
5186    position: sticky;
5187    top: 0;
5188    background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5189    padding-top: 48px;
5190    margin-bottom: 8px;
5191    padding-bottom: 8px;
5192    z-index: 1;
5193  }
5194  
5195  .edit-site-sidebar-navigation-screen__title {
5196    flex-grow: 1;
5197    overflow-wrap: break-word;
5198  }
5199  .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 {
5200    line-height: 32px;
5201  }
5202  
5203  .edit-site-sidebar-navigation-screen__actions {
5204    display: flex;
5205    flex-shrink: 0;
5206  }
5207  
5208  @media (min-width: 782px) {
5209    .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5210      max-width: 292px;
5211    }
5212  }
5213  
5214  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5215    outline-color: rgba(255, 255, 255, 0.05);
5216  }
5217  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5218    outline-color: rgba(255, 255, 255, 0.15);
5219  }
5220  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5221    outline-color: #fff;
5222  }
5223  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5224    outline-color: var(--wp-admin-theme-color);
5225  }
5226  
5227  .edit-site-sidebar-navigation-screen__footer {
5228    position: sticky;
5229    bottom: 0;
5230    background-color: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5231    gap: 0;
5232    padding: 8px 16px;
5233    margin: 16px 0 0;
5234    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5235  }
5236  .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5237    margin-left: -16px;
5238    margin-right: -16px;
5239  }
5240  
5241  /* In general style overrides are discouraged.
5242   * This is a temporary solution to override the InputControl component's styles.
5243   * The `Theme` component will potentially be the more appropriate approach
5244   * once that component is stabilized.
5245   * See: packages/components/src/theme
5246   */
5247  .edit-site-sidebar-navigation-screen__input-control {
5248    width: 100%;
5249  }
5250  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5251    background: var(--wpds-color-bg-interactive-neutral-weak, #0000);
5252  }
5253  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5254    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e) !important;
5255  }
5256  .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5257    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e) !important;
5258    background: var(--wpds-color-bg-interactive-neutral-weak, #0000) !important;
5259  }
5260  .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5261    border: 4px !important;
5262  }
5263  .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5264    color: var(--wpds-color-fg-content-neutral-weak, #707070);
5265  }
5266  
5267  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5268  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5269  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5270    background: none;
5271  }
5272  
5273  .sidebar-navigation__more-menu .components-button {
5274    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5275  }
5276  .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5277    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5278  }
5279  
5280  .edit-site-sidebar-navigation-screen-patterns__group {
5281    margin-bottom: 24px;
5282    margin-left: -16px;
5283    margin-right: -16px;
5284  }
5285  .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5286    border-bottom: 0;
5287    padding-bottom: 0;
5288    margin-bottom: 0;
5289  }
5290  
5291  .edit-site-sidebar-navigation-screen-patterns__group-header {
5292    margin-top: 16px;
5293  }
5294  .edit-site-sidebar-navigation-screen-patterns__group-header p {
5295    color: var(--wpds-color-fg-content-neutral-weak, #707070);
5296  }
5297  .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5298    font-size: 11px;
5299    font-weight: 499;
5300    text-transform: uppercase;
5301  }
5302  
5303  .edit-site-sidebar-navigation-screen-patterns__divider {
5304    border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
5305    margin: 16px 0;
5306  }
5307  
5308  .edit-site-sidebar-navigation-screen__description {
5309    margin: 0 0 32px 0;
5310  }
5311  
5312  .edit-site-sidebar-navigation-screen-navigation-menus {
5313    margin-left: -16px;
5314    margin-right: -16px;
5315  }
5316  
5317  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5318    white-space: normal;
5319  }
5320  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5321    margin-top: 3px;
5322  }
5323  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5324    padding-right: 0;
5325  }
5326  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5327    color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5328  }
5329  .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] {
5330    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5331  }
5332  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5333    color: var(--wpds-color-fg-interactive-neutral-weak, #707070);
5334  }
5335  .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 {
5336    color: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5337  }
5338  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5339    background: var(--wpds-color-bg-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5340    color: var(--wpds-color-fg-interactive-brand-strong, #fff);
5341  }
5342  .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 {
5343    background: var(--wpds-color-bg-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
5344    color: var(--wpds-color-fg-interactive-brand-strong-active, #fff);
5345  }
5346  
5347  .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5348    margin-left: auto;
5349    margin-right: auto;
5350    display: block;
5351  }
5352  
5353  .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5354    display: none;
5355  }
5356  
5357  .edit-site-sidebar-navigation-screen-main {
5358    margin-left: -16px;
5359    margin-right: -16px;
5360  }
5361  
5362  .edit-site-sidebar-navigation-screen-templates-browse {
5363    margin-left: -16px;
5364    margin-right: -16px;
5365  }
5366  
5367  .edit-site-sidebar-dataviews {
5368    margin-left: -16px;
5369    margin-right: -16px;
5370  }
5371  
5372  .edit-site-site-hub {
5373    display: flex;
5374    align-items: center;
5375    justify-content: space-between;
5376    gap: 8px;
5377    margin-right: 12px;
5378    height: 64px;
5379  }
5380  
5381  .edit-site-site-hub__actions {
5382    flex-shrink: 0;
5383  }
5384  
5385  .edit-site-site-hub__view-mode-toggle-container {
5386    height: 64px;
5387    width: 64px;
5388    flex-shrink: 0;
5389  }
5390  .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5391    background: transparent;
5392  }
5393  
5394  .edit-site-site-hub__title .components-button {
5395    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5396    display: block;
5397    flex-grow: 1;
5398    font-size: 15px;
5399    font-weight: 499;
5400    overflow: hidden;
5401    padding-right: 16px;
5402    margin-left: -4px;
5403    position: relative;
5404    text-decoration: none;
5405    text-overflow: ellipsis;
5406    white-space: nowrap;
5407  }
5408  .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5409    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5410  }
5411  .edit-site-site-hub__title .components-button:focus {
5412    box-shadow: none;
5413    outline: none;
5414  }
5415  .edit-site-site-hub__title .components-button:focus-visible {
5416    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);
5417    outline: 2px solid transparent;
5418    outline-offset: 2px;
5419  }
5420  .edit-site-site-hub__title .components-button::after {
5421    content: "↗";
5422    font-weight: 400;
5423    opacity: 0;
5424    position: absolute;
5425    right: 0;
5426  }
5427  @media not (prefers-reduced-motion) {
5428    .edit-site-site-hub__title .components-button::after {
5429      transition: opacity 0.1s linear;
5430    }
5431  }
5432  .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 {
5433    opacity: 1;
5434  }
5435  
5436  .edit-site-site-hub_toggle-command-center {
5437    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5438  }
5439  .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5440    fill: var(--wpds-color-fg-interactive-neutral-active, #1e1e1e);
5441  }
5442  
5443  .edit-site-site-icon__icon {
5444    fill: currentColor;
5445    width: 100%;
5446    height: 100%;
5447  }
5448  .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5449    padding: 12px;
5450  }
5451  
5452  .edit-site-site-icon__image {
5453    width: 100%;
5454    height: 100%;
5455    -o-object-fit: cover;
5456       object-fit: cover;
5457    background: #333;
5458    aspect-ratio: 1/1;
5459  }
5460  .edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5461    border-radius: 0;
5462  }
5463  
5464  .edit-site-editor__view-mode-toggle button:focus {
5465    position: relative;
5466  }
5467  .edit-site-editor__view-mode-toggle button:focus::before {
5468    content: "";
5469    display: block;
5470    position: absolute;
5471    z-index: 1;
5472    top: 0;
5473    right: 0;
5474    bottom: 0;
5475    left: 0;
5476    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;
5477  }
5478  
5479  .fields-controls__password {
5480    border-top: 1px solid #e0e0e0;
5481    padding-top: 16px;
5482  }
5483  
5484  .dataviews-action-modal__quick-edit {
5485    justify-content: flex-end;
5486    align-items: stretch;
5487  }
5488  .dataviews-action-modal__quick-edit .components-modal__frame {
5489    margin: 16px 16px 16px 0;
5490    height: calc(100% - 32px);
5491    max-height: calc(100% - 32px);
5492    max-width: 400px;
5493    border-radius: 8px;
5494    position: relative;
5495    animation-name: none;
5496  }
5497  @media (prefers-reduced-motion: no-preference) {
5498    .dataviews-action-modal__quick-edit .components-modal__frame {
5499      animation-name: quick-edit-slide-in-right;
5500      animation-duration: 0.2s;
5501      animation-timing-function: ease-out;
5502    }
5503  }
5504  .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5505    animation-name: none;
5506  }
5507  @media (prefers-reduced-motion: no-preference) {
5508    .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5509      animation-name: quick-edit-slide-out-right;
5510      animation-duration: 0.2s;
5511      animation-timing-function: ease-out;
5512    }
5513  }
5514  .dataviews-action-modal__quick-edit .components-modal__content {
5515    display: flex;
5516    flex-direction: column;
5517    overflow: hidden;
5518    padding: 0;
5519  }
5520  .dataviews-action-modal__quick-edit .components-modal__content > * {
5521    display: flex;
5522    flex-direction: column;
5523    flex: 1;
5524    min-height: 0;
5525  }
5526  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5527    padding: 24px 24px 0;
5528  }
5529  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5530    flex: 1;
5531    min-height: 0;
5532    overflow-y: auto;
5533    padding-top: 16px;
5534  }
5535  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5536    flex: 1;
5537    padding: 0 24px 4px;
5538  }
5539  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5540    position: sticky;
5541    bottom: 0;
5542    flex-shrink: 0;
5543    padding: 16px 24px 24px;
5544  }
5545  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5546    flex: 1;
5547    justify-content: center;
5548  }
5549  
5550  @keyframes quick-edit-slide-in-right {
5551    from {
5552      transform: translateX(100%);
5553    }
5554    to {
5555      transform: translateX(0);
5556    }
5557  }
5558  @keyframes quick-edit-slide-out-right {
5559    from {
5560      transform: translateX(0);
5561    }
5562    to {
5563      transform: translateX(100%);
5564    }
5565  }
5566  .edit-site-resizable-frame__inner {
5567    position: relative;
5568  }
5569  body:has(.edit-site-resizable-frame__inner.is-resizing) {
5570    cursor: col-resize;
5571    -webkit-user-select: none;
5572       -moz-user-select: none;
5573            user-select: none;
5574  }
5575  
5576  .edit-site-resizable-frame__inner.is-resizing::before {
5577    position: absolute;
5578    z-index: 1;
5579    inset: 0;
5580    content: "";
5581  }
5582  
5583  .edit-site-resizable-frame__inner-content {
5584    position: absolute;
5585    z-index: 0;
5586    inset: 0;
5587  }
5588  
5589  .edit-site-resizable-frame__handle {
5590    align-items: center;
5591    background-color: rgba(117, 117, 117, 0.4);
5592    border: 0;
5593    border-radius: 4px;
5594    cursor: col-resize;
5595    display: flex;
5596    height: 64px;
5597    justify-content: flex-end;
5598    padding: 0;
5599    position: absolute;
5600    top: calc(50% - 32px);
5601    width: 4px;
5602    z-index: 100;
5603  }
5604  .edit-site-resizable-frame__handle::before {
5605    content: "";
5606    height: 100%;
5607    left: 100%;
5608    position: absolute;
5609    width: 32px;
5610  }
5611  .edit-site-resizable-frame__handle::after {
5612    content: "";
5613    height: 100%;
5614    position: absolute;
5615    right: 100%;
5616    width: 32px;
5617  }
5618  .edit-site-resizable-frame__handle:focus-visible {
5619    outline: 2px solid transparent;
5620  }
5621  .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5622    background-color: var(--wp-admin-theme-color);
5623  }
5624  
5625  .edit-site-pagination .components-button.is-tertiary {
5626    width: 32px;
5627    height: 32px;
5628    justify-content: center;
5629  }
5630  
5631  .edit-site-styles .global-styles-ui-screen-root {
5632    box-shadow: none;
5633  }
5634  .edit-site-styles .global-styles-ui-screen-root > div > hr {
5635    display: none;
5636  }
5637  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5638    border-top: none;
5639  }
5640  .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5641    overflow-y: auto;
5642    padding-left: 0;
5643    padding-right: 0;
5644  }
5645  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5646    padding-top: 12px;
5647    padding-left: 12px;
5648    padding-right: 12px;
5649    padding-bottom: 12px;
5650    outline: none;
5651  }
5652  .edit-site-styles .edit-site-sidebar-button {
5653    color: var(--wpds-color-fg-interactive-neutral, #1e1e1e);
5654  }
5655  
5656  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5657    width: auto;
5658    padding: 0 var(--wpds-dimension-padding-xs, 4px);
5659  }
5660  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon svg {
5661    display: none;
5662  }
5663  .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5664    content: attr(aria-label);
5665    font-size: var(--wpds-typography-font-size-sm, 12px);
5666  }
5667  
5668  body.has-admin-bar-in-editor {
5669    margin-top: 0;
5670    height: 100%;
5671  }
5672  body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
5673    --wp-admin--admin-bar--height: 0;
5674  }
5675  body.has-admin-bar-in-editor .edit-site-site-hub__title,
5676  body.has-admin-bar-in-editor .edit-site-site-hub__actions {
5677    display: none;
5678  }
5679  body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
5680    background: transparent;
5681  }
5682  body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
5683    color: var(--wp-admin-theme-color);
5684  }
5685  body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5686    padding-top: 16px;
5687  }
5688  body.has-admin-bar-in-editor .edit-site-layout__content,
5689  body.has-admin-bar-in-editor .edit-site-layout__sidebar {
5690    min-height: 0;
5691  }
5692  body.has-admin-bar-in-editor .edit-site-sidebar__content {
5693    flex-basis: 0;
5694    min-height: 0;
5695  }
5696  body.has-admin-bar-in-editor .edit-site {
5697    box-sizing: border-box;
5698    padding-top: var(--wp-admin--admin-bar--height, 0);
5699    height: 100vh;
5700    min-height: 100vh;
5701  }
5702  @media (min-width: 600px) {
5703    body.has-admin-bar-in-editor .edit-site {
5704      padding-top: 0;
5705      top: var(--wp-admin--admin-bar--height, 0);
5706      height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5707      min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5708    }
5709  }
5710  body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
5711    top: var(--wp-admin--admin-bar--height, 0);
5712    height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5713  }
5714  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5715  body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
5716  body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus,
5717  body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus-within {
5718    top: var(--wp-admin--admin-bar--height, 0);
5719  }
5720  body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
5721    display: block;
5722  }
5723  body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5724    display: none;
5725  }
5726  
5727  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5728  ::view-transition-image-pair(root) {
5729    isolation: auto;
5730  }
5731  
5732  ::view-transition-old(root),
5733  ::view-transition-new(root) {
5734    animation: none;
5735    mix-blend-mode: normal;
5736    display: block;
5737  }
5738  
5739  /* stylelint-enable */
5740  body.js #wpadminbar {
5741    display: none;
5742  }
5743  
5744  body.js #wpbody {
5745    padding-top: 0;
5746  }
5747  
5748  body.js.appearance_page_gutenberg-template-parts,
5749  body.js.site-editor-php {
5750    background: #fff;
5751  }
5752  body.js.appearance_page_gutenberg-template-parts #wpcontent,
5753  body.js.site-editor-php #wpcontent {
5754    padding-left: 0;
5755  }
5756  body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5757  body.js.site-editor-php #wpbody-content {
5758    padding-bottom: 0;
5759  }
5760  body.js.appearance_page_gutenberg-template-parts,
5761  body.js.site-editor-php {
5762    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5763       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5764  }
5765  body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5766  body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5767    display: none;
5768  }
5769  body.js.appearance_page_gutenberg-template-parts #wpfooter,
5770  body.js.site-editor-php #wpfooter {
5771    display: none;
5772  }
5773  body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5774  body.js.site-editor-php .a11y-speak-region {
5775    left: -1px;
5776    top: -1px;
5777  }
5778  body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5779  body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5780  body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5781  body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5782    border-right-color: #fff;
5783  }
5784  body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5785  body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5786    width: auto;
5787    max-width: 100%;
5788  }
5789  
5790  body.js.site-editor-php {
5791    background: var(--wpds-color-bg-surface-neutral-weak, #f4f4f4);
5792  }
5793  
5794  .edit-site {
5795    box-sizing: border-box;
5796  }
5797  .edit-site *,
5798  .edit-site *::before,
5799  .edit-site *::after {
5800    box-sizing: inherit;
5801  }
5802  .edit-site {
5803    height: 100vh;
5804  }
5805  @media (min-width: 600px) {
5806    .edit-site {
5807      bottom: 0;
5808      left: 0;
5809      min-height: 100vh;
5810      position: fixed;
5811      right: 0;
5812      top: 0;
5813    }
5814  }
5815  .no-js .edit-site {
5816    min-height: 0;
5817    position: static;
5818  }
5819  .edit-site .interface-interface-skeleton {
5820    top: 0;
5821  }