// 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/SystemMessage/SystemMessage.less stylesheet snapshot', () => {
  it('compiled CSS with tokens inlined', async () => {
    const css = await compileLessWithTokens(join(__dirname, 'SystemMessage.less'), DEFAULT_TOKEN_CSS_FILES, {
      lessPreludes: DEFAULT_LESS_PRELUDES,
    });
    expect(css).toMatchTokensInlineSnapshot(`
.systemMessage__wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media only screen and (min-width: 1024px) {
  .systemMessage__wrapper {
    gap: 16px;
  }
}
.systemMessage--error {
  --message-color: oklch(0.5999 0.246 28.9803);
  --message-icon: "\\e911";
}
.systemMessage--alert {
  --message-color: oklch(0.7251 0.1625 65.1153);
  --message-icon: "\\e984";
}
.systemMessage--success {
  --message-color: oklch(0.6007 0.1894 139.0123);
  --message-icon: "\\e939";
}
.systemMessage--notice {
  --message-color: oklch(0.7248 0.1476 233.1072);
  --message-icon: "\\e912";
}
.systemMessage {
  --systemMessageAnimationDuration: 200ms;
  --systemMessageAnimationOrigin: translateY(8px);
  position: relative;
  margin: 12px 0;
  padding: 12px 48px 12px 12px;
  font-size: 14px;
  background-color: oklch(1 0 none);
  border: 2px solid var(--message-color);
  border-radius: 8px;
}
.message-hidden .systemMessage {
  display: none;
}
.systemMessage__wrapper .systemMessage {
  margin: 0;
}
.systemMessage a {
  color: oklch(0.4749 0.1935 259.9826);
}
@media (hover: hover) {
  .systemMessage a:hover {
    color: oklch(0.5496 0.2249 260.0592);
    text-decoration: underline;
  }
}
.systemMessage[data-state='opened'] {
  animation: systemMessageSlideIn var(--systemMessageAnimationDuration) forwards;
}
.systemMessage[data-state='closed'] {
  animation: systemMessageSlideOut var(--systemMessageAnimationDuration) ease-in forwards;
}
@media only screen and (min-width: 768px) {
  .systemMessage {
    padding: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .systemMessage {
    --systemMessageAnimationDuration: 0ms;
  }
}
@keyframes systemMessageSlideIn {
  from {
    transform: var(--systemMessageAnimationOrigin);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes systemMessageSlideOut {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
  to {
    transform: var(--systemMessageAnimationOrigin);
    opacity: 0;
  }
}
.systemMessage__content {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
.systemMessage__content::before {
  content: var(--message-icon);
  transform: translateZ(0);
  font-family: 'shp';
  font-size: 24px;
  color: var(--message-color);
}
.systemMessage__content h2,
.systemMessage__content h3,
.systemMessage__content h4,
.systemMessage__content h5,
.systemMessage__content h6,
.systemMessage__content .typography {
  font-family: 'Inter', 'Arial', sans-serif;
}
.systemMessage__content h2,
.systemMessage__content .typography__headline2 {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: var(--message-color);
  text-transform: uppercase;
  letter-spacing: 0.16px;
}
@media only screen and (min-width: 768px) {
  .systemMessage__content {
    flex-wrap: nowrap;
  }
}
.systemMessage__text {
  transform: translateZ(0);
  align-self: center;
  width: calc(100% - 32px);
}
.systemMessage__text > h2:only-child,
.systemMessage__text > .typography__headline2:only-child {
  margin-bottom: 0;
}
.systemMessage__text p {
  margin: 0 0 8px;
}
.systemMessage__text p:last-child {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .systemMessage__text {
    max-width: 1024px;
    margin-right: auto;
  }
}
.systemMessage__textDescription {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.systemMessage__textDescription > p {
  margin: 0;
}
.systemMessage__buttons {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-left: 32px;
}
.systemMessage__buttons a:hover {
  text-decoration: none;
}
.systemMessage__buttons > :not(.systemMessage__close) {
  transform: translateZ(0);
  margin-top: 8px;
}
@media only screen and (min-width: 768px) {
  .systemMessage__buttons > :not(.systemMessage__close) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .systemMessage__buttons {
    flex-shrink: 0;
    max-width: 50%;
    margin-left: 8px;
  }
}
.systemMessage__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
}
.systemMessage__close::before {
  content: "\\e93c";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'shp';
  font-size: 24px;
  color: oklch(0.7252 0 none);
  transition: color 0.2s ease-out;
}
@media (hover: hover) {
  .systemMessage__close:hover::before {
    color: oklch(0.4239 0 none);
    transition: color 0.2s ease-out;
  }
}
@media only screen and (min-width: 768px) {
  .systemMessage__close {
    position: relative;
    top: auto;
    right: auto;
    margin-left: 8px;
  }
}
.systemMessage__proformaInvoice {
  transform: translateZ(0);
  display: flex;
  flex-wrap: wrap;
  gap: 0 48px;
}
@media only screen and (min-width: 768px) {
  .systemMessage__proformaInvoice {
    margin-right: 24px;
  }
}
.proformaInvoice__headline {
  flex-basis: 100%;
}
.proformaInvoice__note {
  flex-basis: 100%;
  color: oklch(0.5999 0 none);
}
/* another feedback messages solution that is populated by calling $.notifier (see jquery.notifier.js) */
/* Also used by Notification react component (legacy class-driven) */
.systemMessage__notification > ul {
  margin: 0;
  padding: 0;
}
.systemMessage__notification > ul > li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.systemMessage__notification,
.js-notifier.systemMessage {
  position: fixed;
  z-index: 11000;
  right: 12px;
  bottom: 24px;
  left: 12px;
  max-width: 1150px;
  margin: 0 auto;
}
@media only screen and (min-width: 1024px) {
  .systemMessage__notification--right,
  .js-notifier.systemMessage {
    right: 16px;
    left: calc(250px + 16px);
  }
}
@media only screen and (min-width: 1400px) {
  .systemMessage__notification--right,
  .js-notifier.systemMessage {
    right: 24px;
    left: calc(250px + 24px);
  }
}
`);
  });
});