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

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

  .cinder-spectrogram__viewport {
    position: relative;
  }

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

  .cinder-spectrogram__cell {
    stroke: color-mix(in oklch, var(--_cinder-chart-grid, currentColor), transparent 88%);
    stroke-width: 0.5;
  }

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

  .cinder-spectrogram__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;
  }
}