/* Same value / context / progress hierarchy as the Team screen. */
.snack-analytics__viewport { overflow-x: auto; }
.snack-analytics__canvas { min-width: 1024px; }
.snack-widget__body--utilisation {
  gap: 10px;
  padding-inline: 14px;
}

.snack-widget__body--utilisation > strong {
  flex: 0 0 42px;
  font-variant-numeric: tabular-nums;
}

.snack-widget__body--utilisation .snack-utilisation {
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.snack-utilisation__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.snack-utilisation__labels > span {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.snack-utilisation__labels img {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.snack-utilisation__labels > span > span {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}

.snack-utilisation__labels b,
.snack-utilisation__labels small {
  display: block;
  color: inherit;
  font-size: 10.5px;
  line-height: 13px;
  letter-spacing: -.16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.snack-utilisation__labels b { font-weight: 600; }
.snack-utilisation__labels small { font-weight: 500; }
.snack-utilisation__used { color: #2a9366; }
.snack-utilisation__left { color: #919192; }
.snack-widget--budget .snack-utilisation__used img { filter: invert(44%) sepia(36%) saturate(875%) hue-rotate(102deg) brightness(96%) contrast(83%); }
.snack-widget--budget .snack-utilisation__left img { opacity: .46; }

.snack-utilisation > i,
.snack-utilisation > i b {
  border-radius: 2px;
}

.snack-analytics.is-running .snack-utilisation > i b {
  transition-delay: calc(var(--reveal-order, 0) * 55ms + 120ms);
}

@media (prefers-reduced-motion: reduce) {
  .snack-analytics.is-running .snack-utilisation > i b {
    transition-delay: 0s;
  }
}