// 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/Tooltip/Tooltip.less stylesheet snapshot', () => {
  it('compiled CSS with tokens inlined', async () => {
    const css = await compileLessWithTokens(join(__dirname, 'Tooltip.less'), DEFAULT_TOKEN_CSS_FILES, {
      lessPreludes: DEFAULT_LESS_PRELUDES,
    });
    expect(css).toMatchTokensInlineSnapshot(`
.tooltip__trigger {
  cursor: help;
  display: inline-block;
  border-bottom: 1px dashed oklch(0.4749 0.1935 259.9826);
}
.tooltip__trigger:hover {
  color: oklch(0.5496 0.2249 260.0592);
  border-bottom-color: currentColor;
}
.tooltip {
  --tooltipPadding: 12px;
  --tooltipAnimationDuration: 200ms;
  --tooltipAnimationOrigin: translateY(8px);
  cursor: help;
  transform: rotate(0deg);
  max-width: 300px;
  padding: var(--tooltipPadding);
  color: oklch(1 0 none);
  text-align: center;
  word-wrap: break-word;
  background-color: oklch(0.325 0 none);
  outline: none;
  fill: oklch(0.325 0 none);
}
.tooltip[data-placement='bottom'] {
  --tooltipAnimationOrigin: translateY(calc(-1 * 8px));
}
.tooltip[data-placement='left'] {
  --tooltipAnimationOrigin: translateX(8px);
}
.tooltip[data-placement='right'] {
  --tooltipAnimationOrigin: translateX(calc(-1 * 8px));
}
.tooltip[data-placement='bottom'] .tooltip__arrow > svg {
  transform: rotate(180deg);
}
.tooltip[data-placement='right'] .tooltip__arrow > svg {
  transform: rotate(90deg);
}
.tooltip[data-placement='left'] .tooltip__arrow > svg {
  transform: rotate(-90deg);
}
.tooltip .tooltip__arrow svg {
  display: block;
}
.tooltip[data-state='opened'] {
  animation: tooltipSlideIn var(--tooltipAnimationDuration) forwards;
}
.tooltip[data-state='closed'] {
  animation: tooltipSlideOut var(--tooltipAnimationDuration) ease-in forwards;
}
.tooltip a {
  color: inherit;
  text-decoration: underline;
}
.tooltip .typography {
  color: inherit;
}
.tooltip .typography strong {
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .tooltip {
    --tooltipAnimationDuration: 0ms;
  }
}
@keyframes tooltipSlideIn {
  from {
    transform: var(--tooltipAnimationOrigin);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes tooltipSlideOut {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
  to {
    transform: var(--tooltipAnimationOrigin);
    opacity: 0;
  }
}
`);
  });
});