@layer components {
  /* Cost Dashboard — list of billable charges inside expanded day rows */
  .cost-dashboard__charges {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--block-space-half);
  }

  .cost-dashboard__billable {
    padding: 0.4em var(--inline-space);
    background: color-mix(in srgb, var(--color-link) 5%, transparent);
    border-block-end: 1px solid color-mix(in srgb, var(--color-ink-lighter) 50%, transparent);
  }

  .cost-dashboard__charge {
    padding: 0.3em var(--inline-space);
    padding-inline-start: 2rem;
    border-block-end: 1px solid color-mix(in srgb, var(--color-ink-lighter) 50%, transparent);
  }

  .cost-dashboard__charge:last-child,
  .cost-dashboard__billable:last-child {
    border-block-end: none;
  }

  .cost-dashboard__billable-link,
  .cost-dashboard__charge-link {
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .cost-dashboard__billable-context-link {
    color: var(--color-link);
  }

  .cost-dashboard__charge-model {
    background: var(--color-ink-lightest);
    padding: 0.0625rem 0.25rem;
    border-radius: 0.25rem;
    font-family: var(--font-mono);
  }

  /* Progress bar — used by quota dashboard */
  .progress-bar {
    height: 0.4em;
    width: 4rem;
    flex-shrink: 0;
    border-radius: 99rem;
    background: var(--color-ink-lightest);

    &::after {
      content: "";
      display: block;
      height: 100%;
      width: var(--progress, 0%);
      border-radius: inherit;
      background: currentColor;
      transition: width 300ms ease;
    }
  }

  .progress-bar--full {
    width: 100%;
    height: 0.35em;
    margin-block-start: 0.5em;
  }
}