/* Theme-aware dashboard cards. Glance's theme variables contain complete
   colors, so they can be blended directly with each card's accent. */
.dashboard-tint-card {
  --dashboard-accent: hsl(210 20% 55%);
  color: var(--color-text-highlight);
  border: 1px solid color-mix(
    in srgb,
    var(--color-separator) 72%,
    var(--dashboard-accent) 28%
  );
  background: color-mix(
    in srgb,
    var(--color-widget-background) 84%,
    var(--dashboard-accent) 16%
  );
  box-shadow: inset 0 1px 0 color-mix(
    in srgb,
    var(--color-text-highlight) 8%,
    transparent
  );
  transition: border-color 150ms ease, filter 150ms ease;
}

.dashboard-tint-card:hover {
  border-color: color-mix(
    in srgb,
    var(--color-separator) 48%,
    var(--dashboard-accent) 52%
  );
  filter: brightness(1.04);
}

.dashboard-tint-formula { --dashboard-accent: hsl(18 72% 58%); }
.dashboard-tint-bowel { --dashboard-accent: hsl(46 72% 53%); }
.dashboard-tint-medicine { --dashboard-accent: hsl(270 62% 65%); }
.dashboard-tint-orders { --dashboard-accent: hsl(112 48% 51%); }
.dashboard-tint-imports { --dashboard-accent: hsl(38 78% 54%); }

.dashboard-tint-icon {
  background: color-mix(
    in srgb,
    var(--color-widget-background) 62%,
    var(--dashboard-accent) 38%
  );
  box-shadow: inset 0 0 0 1px color-mix(
    in srgb,
    var(--dashboard-accent) 42%,
    transparent
  );
}

.dashboard-status-warning {
  color: var(--color-text-highlight);
  background: color-mix(
    in srgb,
    var(--color-widget-background) 68%,
    hsl(38 82% 54%) 32%
  );
  box-shadow: inset 0 0 0 1px color-mix(
    in srgb,
    var(--color-separator) 68%,
    hsl(38 82% 54%) 32%
  );
}