// Auto-generated by: pnpm test:stylesheets:update
import { join } from 'node:path';

import { compileLessWithTokens } from '../../../scripts/testStylesheets/compileLessWithTokens';
import { DEFAULT_LESS_PRELUDES, DEFAULT_TOKEN_CSS_FILES } from '../../../scripts/testStylesheets/config';

describe('components/StatusIndicator/StatusIndicator.less stylesheet snapshot', () => {
  it('compiled CSS with tokens inlined', async () => {
    const css = await compileLessWithTokens(join(__dirname, 'StatusIndicator.less'), DEFAULT_TOKEN_CSS_FILES, {
      lessPreludes: DEFAULT_LESS_PRELUDES,
    });
    expect(css).toMatchTokensInlineSnapshot(`
.status-indicator {
  --si-box: 16px;
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: max-content;
  color: inherit;
}
.status-indicator--medium {
  --si-box: 20px;
}
.status-indicator--interactive {
  cursor: pointer;
}
.status-indicator--critical {
  --si-color: 255 79 79;
  --si-color-hover: 139 0 1;
}
.status-indicator--warning {
  --si-color: 213 128 0;
  --si-color-hover: 152 89 0;
}
.status-indicator--positive {
  --si-color: 95 174 44;
  --si-color-hover: 27 86 0;
}
.status-indicator--informative {
  --si-color: 98 145 255;
  --si-color-hover: 53 105 252;
}
.status-indicator--notice {
  --si-color: 0 164 222;
  --si-color-hover: 0 116 158;
}
.status-indicator--neutral {
  --si-color: 106 106 106;
  --si-color-hover: 72 72 72;
}
.status-indicator__shape {
  display: block;
  flex: none;
  width: var(--si-box);
  height: var(--si-box);
  font-style: initial;
}
.status-indicator--full .status-indicator__geometry {
  fill: rgb(var(--si-color));
  stroke: none;
}
.status-indicator--full .status-indicator__symbol {
  fill: oklch(1 0 none);
}
.status-indicator--outlined .status-indicator__geometry {
  fill: oklch(1 0 none);
  stroke: rgb(var(--si-color));
  stroke-width: 2;
}
.status-indicator--outlined .status-indicator__symbol {
  fill: rgb(var(--si-color));
}
.status-indicator__symbol {
  font-family: 'shp';
  font-size: 20px;
  stroke: none;
}
.status-indicator__label {
  margin-left: 0.5rem;
}
.status-indicator .status-indicator__label > * {
  margin-block: 0;
}
.status-indicator--interactive:hover,
.status-indicator--interactive:focus-within {
  --si-color: var(--si-color-hover);
}
`);
  });
});