@use '../color-defaults' as *;
@use '../tokens/c8y-design-tokens' as tokens;
@use '../color-vars' as *;

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
body .dashboard-preview-slot.panel-content-white,
.dashboard-preview-slot.dashboard-theme-white,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white,
.c8y-grid-dashboard c8y-dashboard-child .panel-content-white {
  @include tokens.c8y-light-theme();

}

.dashboard-preview-slot.dashboard-theme-white {
  background: white !important;
}

.dashboard-preview-slot.dashboard-theme-light {
  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color));
  background:var(--c8y-dashboard-background);

}

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-white,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-white {
  --c8y-dashboard-background: var(--c8y-palette-high);
  background-color: var(--c8y-dashboard-background);
}

c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-light,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-light {
  --c8y-dashboard-background: var(--body-background-color, var(--c8y-body-background-color)) ;

  .c8y-dark-theme & {
    --c8y-dashboard-background: var(--c8y-palette-low);
  }
  .c8y-system-theme &{
    @media(prefers-color-scheme: dark) {
      --c8y-dashboard-background: var(--c8y-palette-low);
    }
  }


}