// 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/DataList/DataList.less stylesheet snapshot', () => {
  it('compiled CSS with tokens inlined', async () => {
    const css = await compileLessWithTokens(join(__dirname, 'DataList.less'), DEFAULT_TOKEN_CSS_FILES, {
      lessPreludes: DEFAULT_LESS_PRELUDES,
    });
    expect(css).toMatchTokensInlineSnapshot(`
.dataList {
  --dataListGap: ;
  --dataListItemMinHeight: 44px;
  display: flex;
  flex-direction: column;
  gap: var(--dataListGap);
  margin: 0;
  padding: 0;
}
.dataList .typography {
  margin: unset;
}
.dataList--dense {
  --dataListItemMinHeight: auto;
}
.dataList--inset {
  margin-right: calc(-2 * 4px);
  margin-left: calc(-2 * 4px);
}
.dataList--inset:first-child {
  margin-top: calc(-2 * 4px);
}
.dataList--inset:last-child {
  margin-bottom: calc(-2 * 4px);
}
.dataList--noGap {
  --dataListGap: 0px;
}
.dataList--gapXxs {
  --dataListGap: 2px;
}
.dataList--gap,
.dataList--gapXs {
  --dataListGap: 4px;
}
.dataList--gapSm {
  --dataListGap: 8px;
}
.dataList--gapMd {
  --dataListGap: 12px;
}
.dataList__item,
.dataList__sectionHeader {
  --dataListItemGap: ;
  --dataListItemMinHeight: ;
  display: flex;
  flex-direction: row;
  gap: var(--dataListItemGap);
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  min-height: var(--dataListItemMinHeight);
  padding: 4px;
}
.dataList,
.dataList__item {
  outline: none;
}
.dataList[disabled],
.dataList__item[disabled],
.dataList[aria-disabled="true"],
.dataList__item[aria-disabled="true"],
.dataList[data-disabled="true"],
.dataList__item[data-disabled="true"] {
  pointer-events: none;
  color: oklch(0.7252 0 none);
}
.dataList[disabled] .dataList__item,
.dataList__item[disabled] .dataList__item,
.dataList[aria-disabled="true"] .dataList__item,
.dataList__item[aria-disabled="true"] .dataList__item,
.dataList[data-disabled="true"] .dataList__item,
.dataList__item[data-disabled="true"] .dataList__item {
  background-color: unset;
}
.dataList[disabled] a:not([href]),
.dataList__item[disabled] a:not([href]),
.dataList[aria-disabled="true"] a:not([href]),
.dataList__item[aria-disabled="true"] a:not([href]),
.dataList[data-disabled="true"] a:not([href]),
.dataList__item[data-disabled="true"] a:not([href]),
.dataList[disabled] .typography,
.dataList__item[disabled] .typography,
.dataList[aria-disabled="true"] .typography,
.dataList__item[aria-disabled="true"] .typography,
.dataList[data-disabled="true"] .typography,
.dataList__item[data-disabled="true"] .typography {
  color: inherit;
}
.dataList[data-focused][data-focus-visible="true"],
.dataList__item[data-focused][data-focus-visible="true"],
[data-focused][data-focus-visible="true"] > .dataList__item {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}
.dataList__item[data-hovered="true"],
.dataList__item[data-focused="true"][data-focus-visible="true"],
.dataList__item[data-active="true"],
[data-hovered="true"] > .dataList__item,
[data-focused="true"][data-focus-visible="true"] > .dataList__item {
  cursor: pointer;
  background-color: oklch(0.8761 0 none);
}
.dataList__item[data-hovered="true"] .typography,
.dataList__item[data-focused="true"][data-focus-visible="true"] .typography,
.dataList__item[data-active="true"] .typography,
[data-hovered="true"] > .dataList__item .typography,
[data-focused="true"][data-focus-visible="true"] > .dataList__item .typography {
  color: inherit;
}
.dataList__item[data-selected="true"] {
  background-color: oklch(0.9496 0.0283 234.8404);
}
.dataList__item[data-selected="true"] a,
.dataList__item[data-selected="true"] .typography {
  color: inherit;
}
.dataList__item[data-selected="true"][data-focused="true"],
.dataList__item[data-selected="true"][data-hovered="true"],
.dataList__item[data-selected="true"][data-active="true"],
[data-focused="true"] > .dataList__item[data-selected="true"],
[data-hovered="true"] > .dataList__item[data-selected="true"] {
  background-color: oklch(0.8749 0.0739 232.8465);
}
.dataList__item[data-selected="true"][data-focused="true"] .typography,
.dataList__item[data-selected="true"][data-hovered="true"] .typography,
.dataList__item[data-selected="true"][data-active="true"] .typography,
[data-focused="true"] > .dataList__item[data-selected="true"] .typography,
[data-hovered="true"] > .dataList__item[data-selected="true"] .typography {
  color: inherit;
}
.dataList__item {
  position: relative;
  appearance: none;
  background-color: unset;
  border: unset;
}
.dataList__item--noMinHeight {
  --dataListItemMinHeight: auto;
}
.dataList__item--noGap {
  --dataListItemGap: 0px;
}
.dataList__item--hasDivider::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.5px;
  left: 0;
  display: block;
  border-bottom: 1px solid oklch(0.8761 0 none);
}
.dataList--inset .dataList__item--hasDivider::after {
  right: calc(2 * 4px);
  left: calc(2 * 4px);
}
.dataList__itemCell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  justify-content: center;
  padding: 4px;
}
.dataList__itemCell.typography {
  padding-top: 0;
  padding-bottom: 0;
}
.dataList__itemCell--grow {
  flex-grow: 1;
}
.dataList__itemCell--shrink {
  flex-shrink: 1;
  min-width: 0;
}
a.dataList__item .typography,
.dataList__item[data-selected="true"] .typography {
  color: inherit;
}
.dataList__section {
  display: flex;
  flex-direction: column;
}
.dataList__sectionHeader {
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
  line-height: 16px;
  color: oklch(0.5999 0 none);
  letter-spacing: 0.06px;
}
.dataList__sectionHeader .typography {
  color: inherit;
}
.dataList__item--gapXxs,
.dataList__sectionHeader--gapXxs {
  --dataListItemGap: 2px;
}
.dataList__item--gap,
.dataList__item--gapXs,
.dataList__sectionHeader--gap,
.dataList__sectionHeader--gapXs {
  --dataListItemGap: 4px;
}
.dataList__item--gapSm,
.dataList__sectionHeader--gapSm {
  --dataListItemGap: 8px;
}
.dataList__item--gapMd,
.dataList__sectionHeader--gapMd {
  --dataListItemGap: 12px;
}
`);
  });
});