@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-sparkbar {
    display: grid;
    gap: 0.375rem;
    min-inline-size: 0;
    inline-size: 100%;
    color: var(--_cinder-chart-foreground, currentColor);
    background: var(--_cinder-chart-background, transparent);
  }

  .cinder-sparkbar__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-inline-size: 0;
  }

  .cinder-sparkbar__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--cinder-font-medium);
  }

  .cinder-sparkbar__trailing {
    flex: none;
    color: var(--_cinder-chart-muted, currentColor);
    font-variant-numeric: tabular-nums;
  }

  .cinder-sparkbar__track {
    position: relative;
    overflow: hidden;
    inline-size: 100%;
    border-radius: var(--cinder-radius-full);
    background: var(--_cinder-sparkbar-track-background, var(--cinder-surface-inset));
    isolation: isolate;
  }

  .cinder-sparkbar__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    border-radius: inherit;
    background: var(--_cinder-chart-accent, currentColor);
    transform: scaleX(var(--_cinder-sparkbar-progress, 0));
    transform-origin: center left;
    transition: transform var(--cinder-duration-moderate) var(--cinder-ease-in-out);
  }

  .cinder-sparkbar:dir(rtl) .cinder-sparkbar__fill {
    transform-origin: center right;
  }

  .cinder-sparkbar[data-cinder-size='sm'] {
    font-size: var(--cinder-text-xs);
  }

  .cinder-sparkbar[data-cinder-size='md'] {
    font-size: var(--cinder-text-sm);
  }

  .cinder-sparkbar[data-cinder-size='lg'] {
    font-size: var(--cinder-text-md);
  }

  .cinder-sparkbar[data-cinder-size='sm'] .cinder-sparkbar__track {
    block-size: 0.1875rem;
  }

  .cinder-sparkbar[data-cinder-size='md'] .cinder-sparkbar__track {
    block-size: 0.25rem;
  }

  .cinder-sparkbar[data-cinder-size='lg'] .cinder-sparkbar__track {
    block-size: 0.375rem;
  }

  .cinder-sparkbar[data-cinder-variant='success'] .cinder-sparkbar__fill {
    background: var(--cinder-status-success-solid);
  }

  .cinder-sparkbar[data-cinder-variant='warning'] .cinder-sparkbar__fill {
    background: var(--cinder-status-warning-solid);
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-sparkbar__fill {
      transition: none;
    }
  }
}