import { describe, it, expect } from 'vitest';
import { readFileSync } from 'fs';

const css = readFileSync(new URL('../dist/sidebar.css', import.meta.url), 'utf-8');

describe('sidebar.css', () => {
  it('is non-empty', () => { expect(css.length).toBeGreaterThan(0); });
  it('references --fg', () => { expect(css).toContain('var(--fg)'); });
  it('references --bg', () => { expect(css).toContain('var(--bg)'); });
  it('references --border', () => { expect(css).toMatch(/var\(--border/); });
  it('references --radius', () => { expect(css).toContain('var(--radius)'); });
  it('references --fg-muted', () => { expect(css).toContain('var(--fg-muted)'); });
  it('includes responsive breakpoint at 768px', () => { expect(css).toContain('768px'); });
  it('hides sidebar on mobile', () => { expect(css).toMatch(/\.sidebar\s*\{\s*display\s*:\s*none/); });
  it('styles .nav-link', () => { expect(css).toContain('.nav-link'); });
  it('styles .nav-active', () => { expect(css).toContain('nav-active'); });
});