@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-spectrum-chart {
    display: grid;
    gap: var(--cinder-space-3);
    color: var(--_cinder-chart-foreground, currentColor);
    background: var(--_cinder-chart-background, transparent);
  }

  .cinder-spectrum-chart__description {
    margin: 0;
    color: var(--_cinder-chart-muted, currentColor);
    font-size: var(--cinder-text-sm);
  }

  .cinder-spectrum-chart__viewport {
    position: relative;
  }

  .cinder-spectrum-chart svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .cinder-spectrum-chart__bar {
    fill: var(--_cinder-chart-series-color, currentColor);
    rx: 2;
  }

  .cinder-spectrum-chart__grid-line {
    stroke: var(--_cinder-chart-grid, currentColor);
    stroke-dasharray: 3 3;
  }

  .cinder-spectrum-chart__tick-label {
    fill: var(--_cinder-chart-muted, currentColor);
    font-size: var(--cinder-text-xs);
  }

  .cinder-spectrum-chart__state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--_cinder-chart-muted, currentColor);
    background: var(--_cinder-chart-background, transparent);
    z-index: 1;
  }
}