/**
 * @prop --dashboard-widget-header-background-color: Defines the background color of the header of the widget. If the widget is used on the start page, it inherits the header color from there via `--start-page-grid-widget-header-color`. Otherwise (e.g. on the overview tab of the object card), it defaults to `--contrast-300`.
 * @prop --dashboard-widget-background-color: Background color of the widget. If the widget is used on the start page, it inherits the header color from there via `--start-page-grid-widget-background-color`. Otherwise (e.g. on the overview tab of the object card), it defaults to `--contrast-100`.
 * @prop --dashboard-widget-icon-color: Color of header icon.
 */
:host(limebb-dashboard-widget) {
  --dashboard-widget-background-color: var(
      --start-page-grid-widget-background-color,
      rgb(var(--contrast-100))
  );
  --header-icon-color: var(--dashboard-widget-icon-color);
  --header-background-color: var(
      --dashboard-widget-header-background-color,
      var(--start-page-grid-widget-header-color)
  );
  --dashboard-widget-border-radius: var(
      --start-page-grid-widget-border-radius,
      1rem
  );
  --header-top-right-left-border-radius: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--dashboard-widget-border-radius);
  background-color: var(--dashboard-widget-background-color);
  height: 100%;
  width: 100%;
  overflow: hidden;
}

::slotted(limebb-navigation-button[slot=header-actions]) {
  --navigation-button-background-color: var(
      --dashboard-widget-header-background-color,
      var(--start-page-grid-widget-header-color, rgb(var(--contrast-300)))
  );
}