[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    right: 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-left: 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    left: 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-left: 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    right: 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    right: 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-left: 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 -5px 0 0;
 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: right;
 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    right: 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 32px 0 8px;
 973    width: 100%;
 974    height: 32px;
 975    margin-right: 0;
 976    margin-left: 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    left: 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-right: 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    right: 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    left: 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    right: 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    right: 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    right: 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    left: 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    right: 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: right;
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: left;
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    left: 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    right: 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-left: 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-right: 24px;
1845  }
1846  
1847  .dataviews-view-table tr td:last-child,
1848  .dataviews-view-table tr th:last-child {
1849    padding-left: 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-right: 4px;
1912    padding-left: 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-right: 16px;
1921  }
1922  
1923  .dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
1924    padding-left: 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-right: 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-right: 0;
1981  }
1982  
1983  .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
1984    padding-left: 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-left: 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    right: 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    right: 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    right: 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    left: 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    right: 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    right: 0;
3132    left: 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    left: 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-right: 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    right: 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 17px 16px 16px;
3574  }
3575  
3576  .font-library__select-all .components-checkbox-control__label {
3577    padding-right: 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    right: 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    right: 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 40px 4px 12px;
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 40px 12px 12px;
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: right;
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-left: 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: right;
3725    line-height: 1.4;
3726    margin-right: 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    right: -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-right: 0;
3874    padding-left: 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    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);
3927    background-position: 0 0, 8px 8px;
3928    background-size: 16px 16px;
3929  }
3930  
3931  .global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
3932    border: #ddd 1px solid;
3933    border-radius: 2px;
3934    background-color: #fff;
3935    width: 60%;
3936    height: 60px;
3937  }
3938  
3939  .global-styles-ui__shadow-editor__dropdown-content {
3940    width: 280px;
3941  }
3942  
3943  .global-styles-ui__shadow-editor-panel {
3944    margin-bottom: 4px;
3945  }
3946  
3947  .global-styles-ui__shadow-editor__dropdown {
3948    width: 100%;
3949    position: relative;
3950  }
3951  
3952  .global-styles-ui__shadow-editor__dropdown-toggle {
3953    width: 100%;
3954    height: auto;
3955    padding-top: 8px;
3956    padding-bottom: 8px;
3957    text-align: right;
3958    border-radius: inherit;
3959  }
3960  
3961  .global-styles-ui__shadow-editor__dropdown-toggle.is-open {
3962    background: #f0f0f0;
3963    color: var(--wp-admin-theme-color);
3964  }
3965  
3966  .global-styles-ui__shadow-editor__remove-button {
3967    position: absolute;
3968    left: 8px;
3969    top: 8px;
3970    opacity: 0;
3971  }
3972  
3973  .global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
3974    border: none;
3975  }
3976  
3977  .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 {
3978    opacity: 1;
3979  }
3980  
3981  @media (hover: none) {
3982    .global-styles-ui__shadow-editor__remove-button {
3983      opacity: 1;
3984    }
3985  }
3986  .global-styles-ui-screen-css {
3987    flex: 1 1 auto;
3988    display: flex;
3989    flex-direction: column;
3990    margin: 16px;
3991  }
3992  
3993  .global-styles-ui-screen-css .components-v-stack {
3994    flex: 1 1 auto;
3995  }
3996  
3997  .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input {
3998    flex: 1 1 auto;
3999    display: flex;
4000    flex-direction: column;
4001  }
4002  
4003  .global-styles-ui-screen-css .components-v-stack .block-editor-global-styles-advanced-panel__custom-css-input .components-base-control__field {
4004    flex: 1 1 auto;
4005    display: flex;
4006    flex-direction: column;
4007  }
4008  
4009  .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 {
4010    flex: 1 1 auto;
4011    direction: ltr;
4012  }
4013  
4014  .global-styles-ui-screen-css-help-link {
4015    display: inline-block;
4016    margin-top: 8px;
4017  }
4018  
4019  .global-styles-ui-screen-variations {
4020    margin-top: 16px;
4021    border-top: 1px solid #ddd;
4022  }
4023  
4024  .global-styles-ui-screen-variations > * {
4025    margin: 24px 16px;
4026  }
4027  
4028  .global-styles-ui-sidebar__navigator-provider {
4029    height: 100%;
4030  }
4031  
4032  .global-styles-ui-sidebar__navigator-screen {
4033    display: flex;
4034    flex-direction: column;
4035    height: 100%;
4036  }
4037  
4038  .global-styles-ui-sidebar__navigator-screen .single-column {
4039    grid-column: span 1;
4040  }
4041  
4042  .global-styles-ui-screen-root.global-styles-ui-screen-root,
4043  .global-styles-ui-screen-style-variations.global-styles-ui-screen-style-variations {
4044    background: unset;
4045    color: inherit;
4046  }
4047  
4048  .global-styles-ui-sidebar__panel .block-editor-block-icon svg {
4049    fill: currentColor;
4050  }
4051  
4052  .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 {
4053    border-radius: 2px;
4054  }
4055  
4056  .global-styles-ui-screen-root__active-style-tile-preview {
4057    clip-path: border-box;
4058  }
4059  
4060  .global-styles-ui-color-palette-panel,
4061  .global-styles-ui-gradient-palette-panel {
4062    padding: 16px;
4063  }
4064  
4065  .edit-site-custom-template-modal__contents-wrapper {
4066    height: 100%;
4067    justify-content: flex-start !important;
4068  }
4069  .edit-site-custom-template-modal__contents-wrapper > * {
4070    width: 100%;
4071  }
4072  .edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4073    margin-right: -12px;
4074    margin-left: -12px;
4075    width: calc(100% + 24px);
4076  }
4077  .edit-site-custom-template-modal__contents > .components-button {
4078    height: auto;
4079    justify-content: center;
4080  }
4081  @media (min-width: 782px) {
4082    .edit-site-custom-template-modal {
4083      width: 456px;
4084    }
4085  }
4086  @media (min-width: 600px) {
4087    .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4088      max-height: 224px;
4089      overflow-y: auto;
4090    }
4091  }
4092  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4093    display: block;
4094    width: 100%;
4095    text-align: right;
4096    white-space: pre-wrap;
4097    overflow-wrap: break-word;
4098    height: auto;
4099    padding: 8px 12px;
4100  }
4101  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item mark {
4102    font-weight: 700;
4103    background: none;
4104  }
4105  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover {
4106    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4107  }
4108  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover * {
4109    color: var(--wp-admin-theme-color);
4110  }
4111  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:hover mark {
4112    color: var(--wp-admin-theme-color);
4113  }
4114  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4115    background-color: #f0f0f0;
4116  }
4117  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4118    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4119  }
4120  .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 {
4121    overflow: hidden;
4122    text-overflow: ellipsis;
4123    display: block;
4124  }
4125  .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4126    word-break: break-all;
4127    color: #757575;
4128  }
4129  
4130  .edit-site-custom-template-modal__no-results {
4131    border: 1px solid #ccc;
4132    border-radius: 2px;
4133    padding: 16px;
4134  }
4135  
4136  .edit-site-custom-generic-template__modal .components-modal__header {
4137    border-bottom: none;
4138  }
4139  .edit-site-custom-generic-template__modal .components-modal__content::before {
4140    margin-bottom: 4px;
4141  }
4142  
4143  @media (min-width: 960px) {
4144    .edit-site-add-new-template__modal {
4145      max-width: 832px;
4146      margin-top: 64px;
4147      width: calc(100% - 128px);
4148      max-height: calc(100% - 128px);
4149    }
4150  }
4151  .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4152  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4153    fill: var(--wp-admin-theme-color);
4154  }
4155  .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4156    flex-grow: 1;
4157    align-items: flex-start;
4158  }
4159  .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4160    padding: 8px;
4161    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4162    border-radius: 100%;
4163    max-height: 40px;
4164    max-width: 40px;
4165  }
4166  
4167  .edit-site-custom-template-modal__contents > .components-button,
4168  .edit-site-add-new-template__template-list__contents > .components-button {
4169    padding: 32px;
4170    display: flex;
4171    flex-direction: column;
4172    border: 1px solid #ddd;
4173    justify-content: center;
4174    outline: 1px solid transparent;
4175  }
4176  .edit-site-custom-template-modal__contents > .components-button span:first-child,
4177  .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4178    color: #1e1e1e;
4179  }
4180  .edit-site-custom-template-modal__contents > .components-button span,
4181  .edit-site-add-new-template__template-list__contents > .components-button span {
4182    color: #757575;
4183  }
4184  .edit-site-custom-template-modal__contents > .components-button:hover,
4185  .edit-site-add-new-template__template-list__contents > .components-button:hover {
4186    color: var(--wp-admin-theme-color-darker-10);
4187    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4188    border-color: transparent;
4189  }
4190  .edit-site-custom-template-modal__contents > .components-button:hover span,
4191  .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4192    color: var(--wp-admin-theme-color);
4193  }
4194  .edit-site-custom-template-modal__contents > .components-button:focus,
4195  .edit-site-add-new-template__template-list__contents > .components-button:focus {
4196    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4197    border-color: transparent;
4198    outline: 3px solid transparent;
4199  }
4200  .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4201  .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4202    color: var(--wp-admin-theme-color);
4203  }
4204  .edit-site-custom-template-modal__contents .edit-site-add-new-template__custom-template-button,
4205  .edit-site-custom-template-modal__contents .edit-site-add-new-template__template-list__prompt,
4206  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__custom-template-button,
4207  .edit-site-add-new-template__template-list__contents .edit-site-add-new-template__template-list__prompt {
4208    grid-column: 1/-1;
4209  }
4210  
4211  .edit-site-add-new-template__template-list__contents > .components-button {
4212    height: 100%;
4213    text-align: start;
4214    align-items: flex-start;
4215  }
4216  
4217  .edit-site-visual-editor__editor-canvas.is-focused {
4218    outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
4219    outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4220  }
4221  
4222  .edit-site-canvas-loader {
4223    width: 100%;
4224    height: 100%;
4225    display: flex;
4226    position: absolute;
4227    top: 0;
4228    right: 0;
4229    opacity: 0;
4230    align-items: center;
4231    justify-content: center;
4232  }
4233  @media not (prefers-reduced-motion) {
4234    .edit-site-canvas-loader {
4235      animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4236      animation-fill-mode: forwards;
4237    }
4238  }
4239  .edit-site-canvas-loader > div {
4240    width: 160px;
4241  }
4242  
4243  @keyframes edit-site-canvas-loader__fade-in-animation {
4244    from {
4245      opacity: 0;
4246    }
4247    to {
4248      opacity: 1;
4249    }
4250  }
4251  .edit-site-patterns__delete-modal {
4252    width: 384px;
4253  }
4254  
4255  .page-patterns-preview-field {
4256    display: flex;
4257    justify-content: center;
4258    align-items: center;
4259    flex-direction: column;
4260    height: 100%;
4261    border-radius: 4px;
4262  }
4263  .dataviews-view-grid .page-patterns-preview-field .block-editor-block-preview__container {
4264    height: 100%;
4265  }
4266  .dataviews-view-table .page-patterns-preview-field {
4267    width: 96px;
4268    flex-grow: 0;
4269    text-wrap: balance;
4270    text-wrap: pretty;
4271  }
4272  
4273  .edit-site-patterns__pattern-icon {
4274    fill: var(--wp-block-synced-color);
4275    flex-shrink: 0;
4276  }
4277  
4278  .edit-site-patterns__section-header {
4279    border-bottom: 1px solid #f0f0f0;
4280    padding: 16px 48px;
4281    position: sticky;
4282    top: 0;
4283    z-index: 2;
4284    flex-shrink: 0;
4285    min-height: 40px;
4286  }
4287  @media not (prefers-reduced-motion) {
4288    .edit-site-patterns__section-header {
4289      transition: padding ease-out 0.1s;
4290    }
4291  }
4292  .edit-site-patterns__section-header .edit-site-patterns__title {
4293    min-height: 40px;
4294  }
4295  .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
4296    flex-grow: 1;
4297    flex-basis: 0;
4298    white-space: nowrap;
4299  }
4300  .edit-site-patterns__section-header .edit-site-patterns__sub-title {
4301    margin-bottom: 8px;
4302  }
4303  .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4304    top: 0;
4305  }
4306  
4307  .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4308    background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4309    color: var(--wp-block-synced-color);
4310  }
4311  
4312  .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4313    width: 350px;
4314  }
4315  .dataviews-action-modal__duplicate-pattern .patterns-menu-items__convert-modal-categories {
4316    position: relative;
4317  }
4318  .dataviews-action-modal__duplicate-pattern .components-form-token-field__suggestions-list:not(:empty) {
4319    position: absolute;
4320    border: 1px solid var(--wp-admin-theme-color);
4321    border-bottom-right-radius: 2px;
4322    border-bottom-left-radius: 2px;
4323    box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
4324    box-sizing: border-box;
4325    z-index: 1;
4326    background-color: #fff;
4327    width: calc(100% + 2px);
4328    right: -1px;
4329    min-width: initial;
4330    max-height: 96px;
4331  }
4332  
4333  @media (min-width: 600px) {
4334    .dataviews-action-modal__duplicate-template-part .components-modal__frame {
4335      max-width: 500px;
4336    }
4337  }
4338  
4339  @container (max-width: 430px) {
4340    .edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
4341      padding-right: 24px;
4342      padding-left: 24px;
4343    }
4344  }
4345  .page-templates-preview-field {
4346    display: flex;
4347    justify-content: center;
4348    align-items: center;
4349    flex-direction: column;
4350    height: 100%;
4351    width: 100%;
4352    border-radius: 4px;
4353  }
4354  .dataviews-view-list .page-templates-preview-field .block-editor-block-preview__container {
4355    height: 120px;
4356  }
4357  .dataviews-view-grid .page-templates-preview-field .block-editor-block-preview__container {
4358    height: 100%;
4359  }
4360  .dataviews-view-table .page-templates-preview-field {
4361    position: relative;
4362    width: 120px;
4363    max-height: 160px;
4364    text-wrap: balance;
4365    text-wrap: pretty;
4366  }
4367  
4368  .edit-site-page-templates .dataviews-pagination {
4369    z-index: 2;
4370  }
4371  
4372  .page-templates-author-field__avatar {
4373    flex-shrink: 0;
4374    overflow: hidden;
4375    width: 24px;
4376    height: 24px;
4377    align-items: center;
4378    justify-content: right;
4379    display: flex;
4380  }
4381  .page-templates-author-field__avatar img {
4382    width: 16px;
4383    height: 16px;
4384    object-fit: cover;
4385    opacity: 0;
4386    border-radius: 100%;
4387  }
4388  @media not (prefers-reduced-motion) {
4389    .page-templates-author-field__avatar img {
4390      transition: opacity 0.1s linear;
4391    }
4392  }
4393  .page-templates-author-field__avatar.is-loaded img {
4394    opacity: 1;
4395  }
4396  
4397  .page-templates-author-field__icon {
4398    display: flex;
4399    flex-shrink: 0;
4400    width: 24px;
4401    height: 24px;
4402  }
4403  .page-templates-author-field__icon svg {
4404    margin-right: -4px;
4405    fill: currentColor;
4406  }
4407  
4408  .page-templates-author-field__name {
4409    text-overflow: ellipsis;
4410    overflow: hidden;
4411  }
4412  
4413  .edit-site-list__rename-modal {
4414    z-index: 1000001;
4415  }
4416  @media (min-width: 782px) {
4417    .edit-site-list__rename-modal .components-base-control {
4418      width: 320px;
4419    }
4420  }
4421  
4422  .edit-site-editor__editor-interface {
4423    opacity: 1;
4424  }
4425  @media not (prefers-reduced-motion) {
4426    .edit-site-editor__editor-interface {
4427      transition: opacity 0.1s ease-out;
4428    }
4429  }
4430  .edit-site-editor__editor-interface.is-loading {
4431    opacity: 0;
4432  }
4433  
4434  .edit-site-editor__toggle-save-panel {
4435    box-sizing: border-box;
4436    width: 280px;
4437    background-color: #fff;
4438    border: 1px dotted #ddd;
4439    padding: 24px;
4440    display: flex;
4441    justify-content: center;
4442  }
4443  
4444  .edit-site-editor__view-mode-toggle {
4445    /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4446    view-transition-name: toggle;
4447    /* stylelint-enable */
4448    top: 0;
4449    right: 0;
4450    height: 64px;
4451    width: 64px;
4452    z-index: 100;
4453  }
4454  .edit-site-editor__view-mode-toggle .components-button {
4455    color: #fff;
4456    height: 100%;
4457    width: 100%;
4458    border-radius: 0;
4459    overflow: hidden;
4460    padding: 0;
4461    display: flex;
4462    align-items: center;
4463    justify-content: center;
4464  }
4465  .edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4466    color: #fff;
4467  }
4468  .edit-site-editor__view-mode-toggle .components-button:focus {
4469    box-shadow: none;
4470  }
4471  .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4472  .edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4473    background: #1e1e1e;
4474    display: block;
4475  }
4476  
4477  .edit-site-editor__back-icon {
4478    position: absolute;
4479    top: 0;
4480    right: 0;
4481    width: 64px;
4482    height: 64px;
4483    display: flex;
4484    align-items: center;
4485    justify-content: center;
4486    background-color: hsl(0, 0%, 80%);
4487    pointer-events: none;
4488  }
4489  .edit-site-editor__back-icon svg {
4490    fill: currentColor;
4491  }
4492  .edit-site-editor__back-icon.has-site-icon {
4493    background-color: hsla(0, 0%, 100%, 0.6);
4494    backdrop-filter: saturate(180%) blur(15px);
4495  }
4496  
4497  .edit-site-welcome-guide {
4498    width: 312px;
4499  }
4500  .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
4501    background: #00a0d2;
4502  }
4503  .edit-site-welcome-guide.guide-page .edit-site-welcome-guide__video {
4504    border-left: #3858e9 16px solid;
4505    border-top: #3858e9 16px solid;
4506  }
4507  .edit-site-welcome-guide.guide-template .edit-site-welcome-guide__video {
4508    border-right: #3858e9 16px solid;
4509    border-top: #3858e9 16px solid;
4510  }
4511  .edit-site-welcome-guide__image {
4512    margin: 0 0 16px;
4513  }
4514  .edit-site-welcome-guide__image > img {
4515    display: block;
4516    max-width: 100%;
4517    object-fit: cover;
4518  }
4519  .edit-site-welcome-guide__heading {
4520    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4521    font-size: 24px;
4522    line-height: 1.4;
4523    margin: 16px 0 16px 0;
4524    padding: 0 32px;
4525  }
4526  .edit-site-welcome-guide__text {
4527    font-size: 13px;
4528    line-height: 1.4;
4529    margin: 0 0 16px 0;
4530    padding: 0 32px;
4531  }
4532  .edit-site-welcome-guide__text img {
4533    vertical-align: bottom;
4534  }
4535  .edit-site-welcome-guide__inserter-icon {
4536    margin: 0 4px;
4537    vertical-align: text-top;
4538  }
4539  .edit-site-welcome-guide .components-button:hover svg {
4540    fill: #fff;
4541  }
4542  
4543  .edit-site-layout {
4544    height: 100%;
4545    background: #1e1e1e;
4546    color: #ccc;
4547    display: flex;
4548    flex-direction: column;
4549  }
4550  .edit-site-layout:not(.is-full-canvas) .editor-visual-editor {
4551    background: #1e1e1e;
4552  }
4553  
4554  .edit-site-layout__content {
4555    height: 100%;
4556    flex-grow: 1;
4557    display: flex;
4558  }
4559  
4560  .edit-site-layout__sidebar-region {
4561    z-index: 1;
4562    width: 100vw;
4563    flex-shrink: 0;
4564  }
4565  @media (min-width: 782px) {
4566    .edit-site-layout__sidebar-region {
4567      width: 300px;
4568    }
4569  }
4570  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4571    position: fixed !important;
4572    height: 100vh;
4573    right: 0;
4574    top: 0;
4575  }
4576  .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4577    display: flex;
4578    flex-direction: column;
4579    height: 100%;
4580  }
4581  .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4582    left: 0;
4583  }
4584  
4585  .edit-site-layout__main {
4586    flex-grow: 1;
4587    overflow: hidden;
4588    display: flex;
4589    flex-direction: column;
4590  }
4591  
4592  .edit-site-layout__mobile {
4593    position: relative;
4594    width: 100%;
4595    z-index: 2;
4596    display: flex;
4597    flex-direction: column;
4598    /*
4599     * The SiteHubMobile component is displayed
4600     * for pages that do not have a sidebar,
4601     * yet it needs the Sidebar component for the React context.
4602     *
4603     * This removes the padding in this scenario.
4604     * See https://github.com/WordPress/gutenberg/pull/63118
4605     */
4606  }
4607  .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
4608    padding: 0;
4609  }
4610  .edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
4611    padding: 0 12px;
4612  }
4613  
4614  .edit-site-layout__canvas-container {
4615    position: relative;
4616    flex-grow: 1;
4617    z-index: 2;
4618    overflow: visible;
4619  }
4620  .edit-site-layout__canvas-container.is-resizing::after {
4621    position: absolute;
4622    top: 0;
4623    right: 0;
4624    left: 0;
4625    bottom: 0;
4626    content: "";
4627    z-index: 100;
4628  }
4629  
4630  .edit-site-layout__canvas {
4631    position: absolute;
4632    top: 0;
4633    right: 0;
4634    bottom: 0;
4635    width: 100%;
4636    display: flex;
4637    justify-content: center;
4638    align-items: center;
4639  }
4640  .edit-site-layout__canvas.is-right-aligned {
4641    justify-content: flex-end;
4642  }
4643  .edit-site-layout__canvas .edit-site-resizable-frame__inner {
4644    color: #1e1e1e;
4645  }
4646  @media (min-width: 782px) {
4647    .edit-site-layout__canvas {
4648      top: 16px;
4649      bottom: 16px;
4650      width: calc(100% - 16px);
4651    }
4652    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4653      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);
4654      overflow: hidden;
4655    }
4656  }
4657  @media (min-width: 782px) and (not (prefers-reduced-motion)) {
4658    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4659      transition: border-radius, box-shadow 0.4s;
4660    }
4661  }
4662  @media (min-width: 782px) {
4663    .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
4664      border-radius: 8px;
4665    }
4666    .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
4667      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);
4668    }
4669  }
4670  .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
4671    top: 0;
4672    bottom: 0;
4673    width: 100%;
4674  }
4675  
4676  .edit-site-layout__mobile .interface-interface-skeleton,
4677  .edit-site-layout__canvas .interface-interface-skeleton,
4678  .edit-site-template-pages-preview .interface-interface-skeleton {
4679    position: relative !important;
4680    min-height: 100% !important;
4681  }
4682  
4683  .edit-site-template-pages-preview {
4684    height: 100%;
4685  }
4686  
4687  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4688  html.canvas-mode-edit-transition::view-transition-group(toggle) {
4689    animation-delay: 255ms;
4690  }
4691  
4692  @media (prefers-reduced-motion) {
4693    ::view-transition-group(*),
4694    ::view-transition-old(*),
4695    ::view-transition-new(*) {
4696      animation: none !important;
4697    }
4698  }
4699  /* stylelint-enable  */
4700  .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4701    display: none;
4702  }
4703  
4704  .edit-site-layout__view-mode-toggle.components-button {
4705    /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4706    view-transition-name: toggle;
4707    /* stylelint-enable  */
4708    position: relative;
4709    color: #fff;
4710    height: 64px;
4711    width: 64px;
4712    overflow: hidden;
4713    padding: 0;
4714    display: flex;
4715    align-items: center;
4716    justify-content: center;
4717    background: #1e1e1e;
4718    border-radius: 0;
4719  }
4720  .edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4721    color: #fff;
4722  }
4723  .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4724    box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4725    outline: 4px solid rgba(0, 0, 0, 0);
4726    outline-offset: 4px;
4727  }
4728  .edit-site-layout__view-mode-toggle.components-button::before {
4729    content: "";
4730    display: block;
4731    position: absolute;
4732    top: 9px;
4733    left: 9px;
4734    bottom: 9px;
4735    right: 17px;
4736    border-radius: 4px;
4737    box-shadow: none;
4738  }
4739  @media not (prefers-reduced-motion) {
4740    .edit-site-layout__view-mode-toggle.components-button::before {
4741      transition: box-shadow 0.1s ease;
4742    }
4743  }
4744  .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4745    display: flex;
4746    height: 64px;
4747    width: 64px;
4748    justify-content: center;
4749    align-items: center;
4750  }
4751  
4752  .edit-site-layout__actions {
4753    z-index: 100000;
4754    position: fixed !important;
4755    top: -9999em;
4756    bottom: auto;
4757    right: auto;
4758    left: 0;
4759    width: 280px;
4760    color: #1e1e1e;
4761    background: #fff;
4762  }
4763  .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
4764    top: auto;
4765    bottom: 0;
4766  }
4767  .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4768    top: 0;
4769  }
4770  @media (min-width: 782px) {
4771    .edit-site-layout__actions {
4772      border-right: 1px solid #ddd;
4773    }
4774  }
4775  
4776  .edit-site-layout__area {
4777    flex-grow: 1;
4778    margin: 0;
4779    overflow: hidden;
4780    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);
4781  }
4782  @media (min-width: 782px) {
4783    .edit-site-layout__area {
4784      border-radius: 8px;
4785      margin: 16px 0 16px 16px;
4786    }
4787  }
4788  
4789  .edit-site-layout__snackbar {
4790    position: fixed;
4791    bottom: 24px;
4792    right: 0;
4793    left: 0;
4794    padding-inline: 16px;
4795    box-sizing: border-box;
4796    display: flex;
4797    flex-direction: column;
4798    pointer-events: none;
4799  }
4800  .edit-site-layout__snackbar .components-snackbar {
4801    margin-inline: auto;
4802  }
4803  
4804  .edit-site-save-hub {
4805    color: #949494;
4806    border-top: 1px solid #2f2f2f;
4807    flex-shrink: 0;
4808    margin: 0;
4809    padding: 16px 16px;
4810  }
4811  
4812  .edit-site-save-hub__button {
4813    color: inherit;
4814    width: 100%;
4815    justify-content: center;
4816  }
4817  .edit-site-save-hub__button[aria-disabled=true] {
4818    opacity: 1;
4819  }
4820  .edit-site-save-hub__button[aria-disabled=true]:hover {
4821    color: inherit;
4822  }
4823  .edit-site-save-hub__button:not(.is-primary).is-busy, .edit-site-save-hub__button:not(.is-primary).is-busy[aria-disabled=true]:hover {
4824    color: #1e1e1e;
4825  }
4826  
4827  @media (min-width: 600px) {
4828    .edit-site-save-panel__modal {
4829      width: 600px;
4830    }
4831  }
4832  
4833  .edit-site-sidebar__content {
4834    flex-grow: 1;
4835    overflow-y: auto;
4836    overflow-x: hidden;
4837    contain: content;
4838  }
4839  
4840  @keyframes local--slide-from-right {
4841    from {
4842      transform: translateX(-50px);
4843      opacity: 0;
4844    }
4845    to {
4846      transform: none;
4847      opacity: 1;
4848    }
4849  }
4850  @keyframes local--slide-from-left {
4851    from {
4852      transform: translateX(50px);
4853      opacity: 0;
4854    }
4855    to {
4856      transform: none;
4857      opacity: 1;
4858    }
4859  }
4860  .edit-site-sidebar__screen-wrapper {
4861    overflow-x: auto;
4862  }
4863  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar {
4864    width: 12px;
4865    height: 12px;
4866  }
4867  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-track {
4868    background-color: transparent;
4869  }
4870  .edit-site-sidebar__screen-wrapper::-webkit-scrollbar-thumb {
4871    background-color: transparent;
4872    border-radius: 8px;
4873    border: 3px solid transparent;
4874    background-clip: padding-box;
4875  }
4876  .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 {
4877    background-color: #757575;
4878  }
4879  .edit-site-sidebar__screen-wrapper {
4880    scrollbar-width: thin;
4881    scrollbar-gutter: stable both-edges;
4882    scrollbar-color: transparent transparent;
4883  }
4884  .edit-site-sidebar__screen-wrapper:hover, .edit-site-sidebar__screen-wrapper:focus, .edit-site-sidebar__screen-wrapper:focus-within {
4885    scrollbar-color: #757575 transparent;
4886  }
4887  .edit-site-sidebar__screen-wrapper {
4888    will-change: transform;
4889  }
4890  @media (hover: none) {
4891    .edit-site-sidebar__screen-wrapper {
4892      scrollbar-color: #757575 transparent;
4893    }
4894  }
4895  .edit-site-sidebar__screen-wrapper {
4896    scrollbar-gutter: stable;
4897    display: flex;
4898    flex-direction: column;
4899    height: 100%;
4900    max-height: 100%;
4901    padding: 0 12px;
4902    animation-duration: 0.14s;
4903    animation-timing-function: ease-in-out;
4904    will-change: transform, opacity;
4905  }
4906  @media (prefers-reduced-motion: reduce) {
4907    .edit-site-sidebar__screen-wrapper {
4908      animation-duration: 0s;
4909    }
4910  }
4911  .edit-site-sidebar__screen-wrapper.slide-from-left {
4912    animation-name: local--slide-from-left;
4913  }
4914  .edit-site-sidebar__screen-wrapper.slide-from-right {
4915    animation-name: local--slide-from-right;
4916  }
4917  
4918  .edit-site-sidebar-button {
4919    color: #e0e0e0;
4920    flex-shrink: 0;
4921  }
4922  .edit-site-sidebar-button:focus:not(:disabled) {
4923    box-shadow: none;
4924    outline: none;
4925  }
4926  .edit-site-sidebar-button:focus-visible:not(:disabled) {
4927    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4928    outline: 3px solid transparent;
4929  }
4930  .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] {
4931    color: #f0f0f0;
4932  }
4933  
4934  .edit-site-sidebar-navigation-item.components-item {
4935    color: #949494;
4936    padding: 8px 16px 8px 6px;
4937    border: none;
4938    min-height: 40px;
4939  }
4940  .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] {
4941    color: #e0e0e0;
4942  }
4943  .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 {
4944    fill: #e0e0e0;
4945  }
4946  .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
4947    background: #2f2f2f;
4948    color: #fff;
4949    font-weight: 499;
4950  }
4951  .edit-site-sidebar-navigation-item.components-item:focus-visible {
4952    transform: translateZ(0);
4953  }
4954  .edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
4955    fill: #949494;
4956  }
4957  .edit-site-sidebar-navigation-item.components-item.with-suffix {
4958    padding-left: 16px;
4959  }
4960  
4961  .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
4962    cursor: grab;
4963    padding: 8px 0 8px 8px;
4964  }
4965  
4966  .edit-site-sidebar-navigation-screen {
4967    display: flex;
4968    flex-direction: column;
4969    overflow-x: unset !important;
4970    position: relative;
4971  }
4972  
4973  .edit-site-sidebar-navigation-screen__main {
4974    flex-grow: 1;
4975    margin-bottom: 16px;
4976  }
4977  .edit-site-sidebar-navigation-screen__main.has-footer {
4978    margin-bottom: 0;
4979  }
4980  
4981  .edit-site-sidebar-navigation-screen__content {
4982    padding: 0 16px;
4983  }
4984  .edit-site-sidebar-navigation-screen__content .components-text {
4985    color: #ccc;
4986  }
4987  .edit-site-sidebar-navigation-screen__content .components-heading {
4988    margin-bottom: 8px;
4989  }
4990  
4991  .edit-site-sidebar-navigation-screen__title-icon {
4992    position: sticky;
4993    top: 0;
4994    background: #1e1e1e;
4995    padding-top: 48px;
4996    margin-bottom: 8px;
4997    padding-bottom: 8px;
4998    z-index: 1;
4999  }
5000  
5001  .edit-site-sidebar-navigation-screen__title {
5002    flex-grow: 1;
5003    overflow-wrap: break-word;
5004  }
5005  .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 {
5006    line-height: 32px;
5007  }
5008  
5009  .edit-site-sidebar-navigation-screen__actions {
5010    display: flex;
5011    flex-shrink: 0;
5012  }
5013  
5014  @media (min-width: 782px) {
5015    .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
5016      max-width: 292px;
5017    }
5018  }
5019  
5020  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item .global-styles-ui-variations_item-preview {
5021    outline-color: rgba(255, 255, 255, 0.05);
5022  }
5023  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:not(.is-active):hover .global-styles-ui-variations_item-preview {
5024    outline-color: rgba(255, 255, 255, 0.15);
5025  }
5026  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item.is-active .global-styles-ui-variations_item-preview {
5027    outline-color: #fff;
5028  }
5029  .edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item:focus-visible .global-styles-ui-variations_item-preview {
5030    outline-color: var(--wp-admin-theme-color);
5031  }
5032  
5033  .edit-site-sidebar-navigation-screen__footer {
5034    position: sticky;
5035    bottom: 0;
5036    background-color: #1e1e1e;
5037    gap: 0;
5038    padding: 8px 16px;
5039    margin: 16px 0 0;
5040    border-top: 1px solid #2f2f2f;
5041  }
5042  .edit-site-sidebar-navigation-screen__footer .edit-site-sidebar-navigation-screen-details-footer {
5043    margin-right: -16px;
5044    margin-left: -16px;
5045  }
5046  
5047  /* In general style overrides are discouraged.
5048   * This is a temporary solution to override the InputControl component's styles.
5049   * The `Theme` component will potentially be the more appropriate approach
5050   * once that component is stabilized.
5051   * See: packages/components/src/theme
5052   */
5053  .edit-site-sidebar-navigation-screen__input-control {
5054    width: 100%;
5055  }
5056  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container {
5057    background: #2f2f2f;
5058  }
5059  .edit-site-sidebar-navigation-screen__input-control .components-input-control__container .components-button {
5060    color: #e0e0e0 !important;
5061  }
5062  .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
5063    color: #e0e0e0 !important;
5064    background: #2f2f2f !important;
5065  }
5066  .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
5067    border: 4px !important;
5068  }
5069  .edit-site-sidebar-navigation-screen__input-control .components-base-control__help {
5070    color: #949494;
5071  }
5072  
5073  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
5074  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
5075  .edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
5076    background: none;
5077  }
5078  
5079  .sidebar-navigation__more-menu .components-button {
5080    color: #e0e0e0;
5081  }
5082  .sidebar-navigation__more-menu .components-button:hover, .sidebar-navigation__more-menu .components-button:focus, .sidebar-navigation__more-menu .components-button[aria-current] {
5083    color: #f0f0f0;
5084  }
5085  
5086  .edit-site-sidebar-navigation-screen-patterns__group {
5087    margin-bottom: 24px;
5088    margin-right: -16px;
5089    margin-left: -16px;
5090  }
5091  .edit-site-sidebar-navigation-screen-patterns__group:last-of-type {
5092    border-bottom: 0;
5093    padding-bottom: 0;
5094    margin-bottom: 0;
5095  }
5096  
5097  .edit-site-sidebar-navigation-screen-patterns__group-header {
5098    margin-top: 16px;
5099  }
5100  .edit-site-sidebar-navigation-screen-patterns__group-header p {
5101    color: #949494;
5102  }
5103  .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5104    font-size: 11px;
5105    font-weight: 499;
5106    text-transform: uppercase;
5107  }
5108  
5109  .edit-site-sidebar-navigation-screen-patterns__divider {
5110    border-top: 1px solid #2f2f2f;
5111    margin: 16px 0;
5112  }
5113  
5114  .edit-site-sidebar-navigation-screen__description {
5115    margin: 0 0 32px 0;
5116  }
5117  
5118  .edit-site-sidebar-navigation-screen-navigation-menus {
5119    margin-right: -16px;
5120    margin-left: -16px;
5121  }
5122  
5123  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
5124    white-space: normal;
5125  }
5126  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__title {
5127    margin-top: 3px;
5128  }
5129  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu-cell {
5130    padding-left: 0;
5131  }
5132  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5133    color: #949494;
5134  }
5135  .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] {
5136    color: #fff;
5137  }
5138  .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5139    color: #949494;
5140  }
5141  .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 {
5142    color: #fff;
5143  }
5144  
5145  .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
5146    margin-right: auto;
5147    margin-left: auto;
5148    display: block;
5149  }
5150  
5151  .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
5152    display: none;
5153  }
5154  
5155  .edit-site-sidebar-navigation-screen-main {
5156    margin-right: -16px;
5157    margin-left: -16px;
5158  }
5159  
5160  .edit-site-sidebar-navigation-screen-templates-browse {
5161    margin-right: -16px;
5162    margin-left: -16px;
5163  }
5164  
5165  .edit-site-sidebar-dataviews {
5166    margin-right: -16px;
5167    margin-left: -16px;
5168  }
5169  
5170  .edit-site-sidebar-dataviews-dataview-item {
5171    border-radius: 2px;
5172  }
5173  .edit-site-sidebar-dataviews-dataview-item:hover, .edit-site-sidebar-dataviews-dataview-item:focus, .edit-site-sidebar-dataviews-dataview-item[aria-current] {
5174    color: #e0e0e0;
5175  }
5176  .edit-site-sidebar-dataviews-dataview-item.is-selected {
5177    background: #2f2f2f;
5178    font-weight: 499;
5179    color: #fff;
5180  }
5181  
5182  .edit-site-site-hub {
5183    display: flex;
5184    align-items: center;
5185    justify-content: space-between;
5186    gap: 8px;
5187    margin-left: 12px;
5188    height: 64px;
5189  }
5190  
5191  .edit-site-site-hub__actions {
5192    flex-shrink: 0;
5193  }
5194  
5195  .edit-site-site-hub__view-mode-toggle-container {
5196    height: 64px;
5197    width: 64px;
5198    flex-shrink: 0;
5199  }
5200  .edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5201    background: transparent;
5202  }
5203  
5204  .edit-site-site-hub__title .components-button {
5205    color: #e0e0e0;
5206    display: block;
5207    flex-grow: 1;
5208    font-size: 15px;
5209    font-weight: 499;
5210    overflow: hidden;
5211    padding-left: 16px;
5212    margin-right: -4px;
5213    position: relative;
5214    text-decoration: none;
5215    text-overflow: ellipsis;
5216    white-space: nowrap;
5217  }
5218  .edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5219    color: #e0e0e0;
5220  }
5221  .edit-site-site-hub__title .components-button:focus {
5222    box-shadow: none;
5223    outline: none;
5224  }
5225  .edit-site-site-hub__title .components-button:focus-visible {
5226    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);
5227    outline: 2px solid transparent;
5228    outline-offset: 2px;
5229  }
5230  .edit-site-site-hub__title .components-button::after {
5231    content: "↗";
5232    font-weight: 400;
5233    opacity: 0;
5234    position: absolute;
5235    left: 0;
5236  }
5237  @media not (prefers-reduced-motion) {
5238    .edit-site-site-hub__title .components-button::after {
5239      transition: opacity 0.1s linear;
5240    }
5241  }
5242  .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 {
5243    opacity: 1;
5244  }
5245  
5246  .edit-site-site-hub_toggle-command-center {
5247    color: #e0e0e0;
5248  }
5249  .edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5250    fill: #f0f0f0;
5251  }
5252  
5253  .edit-site-site-icon__icon {
5254    fill: currentColor;
5255    width: 100%;
5256    height: 100%;
5257  }
5258  .edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5259    padding: 12px;
5260  }
5261  
5262  .edit-site-site-icon__image {
5263    width: 100%;
5264    height: 100%;
5265    object-fit: cover;
5266    background: #333;
5267    aspect-ratio: 1/1;
5268  }
5269  .edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5270    border-radius: 0;
5271  }
5272  
5273  .edit-site-editor__view-mode-toggle button:focus {
5274    position: relative;
5275  }
5276  .edit-site-editor__view-mode-toggle button:focus::before {
5277    content: "";
5278    display: block;
5279    position: absolute;
5280    z-index: 1;
5281    top: 0;
5282    left: 0;
5283    bottom: 0;
5284    right: 0;
5285    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;
5286  }
5287  
5288  .edit-site-post-list__featured-image {
5289    height: 100%;
5290    object-fit: cover;
5291    width: 100%;
5292  }
5293  
5294  .edit-site-post-list__featured-image-wrapper {
5295    height: 100%;
5296    width: 100%;
5297    border-radius: 4px;
5298  }
5299  .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 {
5300    width: 32px;
5301    height: 32px;
5302    display: block;
5303    border-radius: 4px;
5304    position: relative;
5305    overflow: hidden;
5306    background-color: #f0f0f0;
5307    flex-grow: 0 !important;
5308  }
5309  .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 {
5310    border-radius: 4px;
5311    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
5312    content: "";
5313    height: 100%;
5314    right: 0;
5315    position: absolute;
5316    top: 0;
5317    width: 100%;
5318  }
5319  
5320  .edit-site-post-list__featured-image-button {
5321    box-shadow: none;
5322    border: none;
5323    padding: 0;
5324    background-color: unset;
5325    box-sizing: border-box;
5326    cursor: pointer;
5327    overflow: hidden;
5328    height: 100%;
5329    width: 100%;
5330    border-radius: 4px;
5331  }
5332  .edit-site-post-list__featured-image-button:focus-visible {
5333    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5334    outline: 2px solid transparent;
5335  }
5336  
5337  .dataviews-view-grid__card.is-selected .edit-site-post-list__featured-image-button::after {
5338    box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5339    background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
5340  }
5341  
5342  .edit-site-post-list__status-icon {
5343    height: 24px;
5344    width: 24px;
5345  }
5346  .edit-site-post-list__status-icon svg {
5347    fill: currentColor;
5348    margin-right: -4px;
5349  }
5350  
5351  .fields-controls__password {
5352    border-top: 1px solid #e0e0e0;
5353    padding-top: 16px;
5354  }
5355  
5356  .dataviews-action-modal__quick-edit {
5357    justify-content: flex-end;
5358    align-items: stretch;
5359  }
5360  .dataviews-action-modal__quick-edit .components-modal__frame {
5361    margin: 16px 0 16px 16px;
5362    height: calc(100% - 32px);
5363    max-height: calc(100% - 32px);
5364    max-width: 400px;
5365    border-radius: 8px;
5366    position: relative;
5367    animation-name: none;
5368  }
5369  @media (prefers-reduced-motion: no-preference) {
5370    .dataviews-action-modal__quick-edit .components-modal__frame {
5371      animation-name: quick-edit-slide-in-right;
5372      animation-duration: 0.2s;
5373      animation-timing-function: ease-out;
5374    }
5375  }
5376  .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5377    animation-name: none;
5378  }
5379  @media (prefers-reduced-motion: no-preference) {
5380    .dataviews-action-modal__quick-edit.is-animating-out .components-modal__frame {
5381      animation-name: quick-edit-slide-out-right;
5382      animation-duration: 0.2s;
5383      animation-timing-function: ease-out;
5384    }
5385  }
5386  .dataviews-action-modal__quick-edit .components-modal__content {
5387    display: flex;
5388    flex-direction: column;
5389    overflow: hidden;
5390    padding: 0;
5391  }
5392  .dataviews-action-modal__quick-edit .components-modal__content > * {
5393    display: flex;
5394    flex-direction: column;
5395    flex: 1;
5396    min-height: 0;
5397  }
5398  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-header {
5399    padding: 24px 24px 0;
5400  }
5401  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content {
5402    flex: 1;
5403    min-height: 0;
5404    overflow-y: auto;
5405    padding-top: 16px;
5406  }
5407  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-content .dataforms-layouts__wrapper {
5408    flex: 1;
5409    padding: 0 24px 4px;
5410  }
5411  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer {
5412    position: sticky;
5413    bottom: 0;
5414    flex-shrink: 0;
5415    padding: 16px 24px 24px;
5416  }
5417  .dataviews-action-modal__quick-edit .dataviews-action-modal__quick-edit-footer .components-button {
5418    flex: 1;
5419    justify-content: center;
5420  }
5421  
5422  @keyframes quick-edit-slide-in-right {
5423    from {
5424      transform: translateX(-100%);
5425    }
5426    to {
5427      transform: translateX(0);
5428    }
5429  }
5430  @keyframes quick-edit-slide-out-right {
5431    from {
5432      transform: translateX(0);
5433    }
5434    to {
5435      transform: translateX(-100%);
5436    }
5437  }
5438  .edit-site-resizable-frame__inner {
5439    position: relative;
5440  }
5441  body:has(.edit-site-resizable-frame__inner.is-resizing) {
5442    cursor: col-resize;
5443    -webkit-user-select: none;
5444            user-select: none;
5445  }
5446  
5447  .edit-site-resizable-frame__inner.is-resizing::before {
5448    position: absolute;
5449    z-index: 1;
5450    inset: 0;
5451    content: "";
5452  }
5453  
5454  .edit-site-resizable-frame__inner-content {
5455    position: absolute;
5456    z-index: 0;
5457    inset: 0;
5458  }
5459  
5460  .edit-site-resizable-frame__handle {
5461    align-items: center;
5462    background-color: rgba(117, 117, 117, 0.4);
5463    border: 0;
5464    border-radius: 4px;
5465    cursor: col-resize;
5466    display: flex;
5467    height: 64px;
5468    justify-content: flex-end;
5469    padding: 0;
5470    position: absolute;
5471    top: calc(50% - 32px);
5472    width: 4px;
5473    z-index: 100;
5474  }
5475  .edit-site-resizable-frame__handle::before {
5476    content: "";
5477    height: 100%;
5478    right: 100%;
5479    position: absolute;
5480    width: 32px;
5481  }
5482  .edit-site-resizable-frame__handle::after {
5483    content: "";
5484    height: 100%;
5485    position: absolute;
5486    left: 100%;
5487    width: 32px;
5488  }
5489  .edit-site-resizable-frame__handle:focus-visible {
5490    outline: 2px solid transparent;
5491  }
5492  .edit-site-resizable-frame__handle:hover, .edit-site-resizable-frame__handle:focus, .edit-site-resizable-frame__handle.is-resizing {
5493    background-color: var(--wp-admin-theme-color);
5494  }
5495  
5496  .edit-site-pagination .components-button.is-tertiary {
5497    width: 32px;
5498    height: 32px;
5499    justify-content: center;
5500  }
5501  
5502  .edit-site-styles .global-styles-ui-screen-root {
5503    box-shadow: none;
5504  }
5505  .edit-site-styles .global-styles-ui-screen-root > div > hr {
5506    display: none;
5507  }
5508  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .components-tools-panel {
5509    border-top: none;
5510  }
5511  .edit-site-styles .global-styles-ui-sidebar__navigator-provider {
5512    overflow-y: auto;
5513    padding-right: 0;
5514    padding-left: 0;
5515  }
5516  .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5517    padding-top: 12px;
5518    padding-right: 12px;
5519    padding-left: 12px;
5520    padding-bottom: 12px;
5521    outline: none;
5522  }
5523  .edit-site-styles .edit-site-sidebar-button {
5524    color: #1e1e1e;
5525  }
5526  
5527  /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5528  ::view-transition-image-pair(root) {
5529    isolation: auto;
5530  }
5531  
5532  ::view-transition-old(root),
5533  ::view-transition-new(root) {
5534    animation: none;
5535    mix-blend-mode: normal;
5536    display: block;
5537  }
5538  
5539  /* stylelint-enable */
5540  body.js #wpadminbar {
5541    display: none;
5542  }
5543  
5544  body.js #wpbody {
5545    padding-top: 0;
5546  }
5547  
5548  body.js.appearance_page_gutenberg-template-parts,
5549  body.js.site-editor-php {
5550    background: #fff;
5551  }
5552  body.js.appearance_page_gutenberg-template-parts #wpcontent,
5553  body.js.site-editor-php #wpcontent {
5554    padding-right: 0;
5555  }
5556  body.js.appearance_page_gutenberg-template-parts #wpbody-content,
5557  body.js.site-editor-php #wpbody-content {
5558    padding-bottom: 0;
5559  }
5560  body.js.appearance_page_gutenberg-template-parts,
5561  body.js.site-editor-php {
5562    /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
5563       Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
5564  }
5565  body.js.appearance_page_gutenberg-template-parts #wpbody-content > div:not(.edit-site):not(#screen-meta),
5566  body.js.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
5567    display: none;
5568  }
5569  body.js.appearance_page_gutenberg-template-parts #wpfooter,
5570  body.js.site-editor-php #wpfooter {
5571    display: none;
5572  }
5573  body.js.appearance_page_gutenberg-template-parts .a11y-speak-region,
5574  body.js.site-editor-php .a11y-speak-region {
5575    right: -1px;
5576    top: -1px;
5577  }
5578  body.js.appearance_page_gutenberg-template-parts ul#adminmenu a.wp-has-current-submenu::after,
5579  body.js.appearance_page_gutenberg-template-parts ul#adminmenu > li.current > a.current::after,
5580  body.js.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
5581  body.js.site-editor-php ul#adminmenu > li.current > a.current::after {
5582    border-left-color: #fff;
5583  }
5584  body.js.appearance_page_gutenberg-template-parts .media-frame select.attachment-filters:last-of-type,
5585  body.js.site-editor-php .media-frame select.attachment-filters:last-of-type {
5586    width: auto;
5587    max-width: 100%;
5588  }
5589  
5590  body.js.site-editor-php {
5591    background: #1e1e1e;
5592  }
5593  
5594  .edit-site {
5595    box-sizing: border-box;
5596  }
5597  .edit-site *,
5598  .edit-site *::before,
5599  .edit-site *::after {
5600    box-sizing: inherit;
5601  }
5602  .edit-site {
5603    height: 100vh;
5604  }
5605  @media (min-width: 600px) {
5606    .edit-site {
5607      bottom: 0;
5608      right: 0;
5609      min-height: 100vh;
5610      position: fixed;
5611      left: 0;
5612      top: 0;
5613    }
5614  }
5615  .no-js .edit-site {
5616    min-height: 0;
5617    position: static;
5618  }
5619  .edit-site .interface-interface-skeleton {
5620    top: 0;
5621  }