/* The admin pages are made of Polaris components; these rules only cover what Polaris has no component for (the charts, the
   storage bar and their tooltip), with Polaris's own tokens (see the token bridge in admin-chart.js). */
body {
  margin: 0;
  background: var(--p-color-bg);
  color: var(--p-color-text);
  font-family: var(--p-font-family-sans);
}

/* Polaris's elements set their own display, which would win over the hidden attribute. */
[hidden] {
  display: none !important;
}

/* Polaris Viz's light theme (Shopify's charts): its first series colours, in order. */
:root {
  --series-1: #13acf0;
  --series-2: #6a42e9;
  --series-3: #597eed;
  --series-4: #d147ac;
}

/* The figure of a large card, as Shopify's analytics cards show it. On the figure itself: Polaris's layout components set their
   own text size on what they hold. */
.card-value {
  color: var(--p-color-text);
  font-size: var(--p-font-size-500);
  font-weight: var(--p-font-weight-semibold);
  line-height: var(--p-font-line-height-500);
}

.card-figure:empty {
  display: none;
}

.sparkline {
  flex: none;
  line-height: 0;
}

.drawn-tooltip {
  position: fixed;
  z-index: 10;
  display: none;
  max-width: 250px;
  padding: var(--p-space-100) var(--p-space-200);
  border-radius: var(--p-border-radius-element);
  background: var(--p-color-bg-surface);
  box-shadow: var(--p-shadow-popover);
  color: var(--p-color-text);
  font-size: var(--p-font-size-325);
  line-height: var(--p-font-line-height-500);
  white-space: pre-line;
  pointer-events: none;
}

.chart {
  width: 100%;
}

.chart svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.chart text {
  fill: var(--p-color-text-secondary);
  font-size: var(--p-font-size-300);
  font-variant-numeric: tabular-nums;
}

.chart .grid-line {
  stroke: var(--p-color-border-secondary);
  stroke-width: 1;
}

.chart .hit {
  fill: transparent;
}

.chart .hit:hover {
  fill: var(--p-color-text);
  fill-opacity: 0.04;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-300);
  margin-top: var(--p-space-200);
}

.swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--p-border-radius-050);
  background: var(--swatch);
}

.storage-bar {
  display: flex;
  gap: var(--p-space-050);
  height: 12px;
}

/* Each bucket keeps a visible share of the bar, even a tiny one beside a huge one: the largest give way, the figures stay exact. */
.storage-bar > div {
  flex: 0 1 auto;
  min-width: var(--p-space-300);
  height: 100%;
  border-radius: var(--p-border-radius-full);
}