/* usage-bar.css: Usage bar (component 16). Owner: group B (P2.T5).
   Track --size-bar (6) tall in --border, --radius-bar; fill --text-secondary below 80 %, --warning from 80, --critical from 95; the
   fill width is the one computed inline style. In a table cell the bar is --size-bar-w (72) with the percentage in --type-table at its
   inline-end, --space-3 gap; in a header or overview it is full column width above the amounts. The percentage never wraps. */
[data-component="usage-bar"] { min-inline-size: 0; color: var(--text); }
[data-component="usage-bar"][data-layout="cell"] { display: inline-flex; align-items: center; gap: var(--space-3); vertical-align: middle; }
[data-component="usage-bar"][data-layout="block"],
[data-component="usage-bar"][data-variant="completeness"],
[data-component="usage-bar"][data-variant="progress"] { display: grid; gap: var(--space-3); }
[data-component="usage-bar"][data-variant="progress"][data-layout="cell"],
[data-component="usage-bar"][data-variant="completeness"][data-layout="cell"] { display: grid; gap: var(--space-3); }

.usage-bar__meter { display: block; min-inline-size: 0; }
[data-layout="cell"][data-variant="limit"] > .usage-bar__meter { flex: none; inline-size: var(--size-bar-w); }
.usage-bar__track {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--size-bar);
  border-radius: var(--radius-bar);
  background: var(--border);
  overflow: hidden;
}
.usage-bar__fill { display: block; block-size: 100%; border-radius: var(--radius-bar); background: var(--text-secondary); }
.usage-bar__fill[data-tone="warning"] { background: var(--warning); }
.usage-bar__fill[data-tone="critical"] { background: var(--critical); }
.usage-bar__fill[data-tone="brand"] { background: var(--brand); }

.usage-bar__percent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-table);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--text);
}
[data-level="critical"] .usage-bar__percent .icon { color: var(--critical); }
.usage-bar__percent[data-reached="true"] { color: var(--critical); }

/* The block layout prints the amounts under the bar in --type-body. */
.usage-bar__numbers { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font: var(--type-body); }
.usage-bar__numbers .usage-bar__percent { font: var(--type-body); }
.usage-bar__amount { font-variant-numeric: tabular-nums lining-nums; }
.usage-bar__available { font: var(--type-body); color: var(--text-secondary); font-variant-numeric: tabular-nums lining-nums; }

/* Completeness: the missing items are links beneath. */
.usage-bar__missing { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.usage-bar__missing-item { max-inline-size: none; }
.usage-bar__missing-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: var(--type-body);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.usage-bar__missing-link:hover { text-decoration: underline; }

/* Skeleton: a track-shaped bar of --border that pulses (static under reduced motion, which base.css enforces). */
[data-component="usage-bar"][data-loading="true"] { display: block; inline-size: var(--size-bar-w); }
[data-component="usage-bar"][data-loading="true"][data-layout="block"] { inline-size: 100%; }
[data-component="usage-bar"][data-loading="true"] .usage-bar__track { animation: skeleton-pulse var(--duration-pulse) ease-in-out infinite; }

/* Kitchen sink only: layout of the sample rows. */
.usage-bar-demo__rows { display: grid; gap: var(--space-3); }
.usage-bar-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.usage-bar-demo__caption { min-inline-size: var(--size-field-mid); font: var(--type-table); color: var(--text-secondary); }
.usage-bar-demo__wide { inline-size: var(--size-field-max); max-inline-size: 100%; }