[Summary view] [Print] [Text view]

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