// 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/Section/Section.less stylesheet snapshot', () => {
  it('compiled CSS with tokens inlined', async () => {
    const css = await compileLessWithTokens(join(__dirname, 'Section.less'), DEFAULT_TOKEN_CSS_FILES, {
      lessPreludes: DEFAULT_LESS_PRELUDES,
    });
    expect(css).toMatchTokensInlineSnapshot(`
.section {
  position: relative;
  background-color: oklch(1 0 none);
}
@media only screen and (min-width: 1024px) {
  .section:not(.section--no-space) {
    padding-top: 64px;
  }
}
@media only screen and (min-width: 1400px) {
  .section:not(.section--no-space) {
    padding-top: 80px;
  }
}
.section--grow {
  flex-grow: 1;
}
@media only screen and (min-width: 576px) {
  .section {
    padding: 12px;
    box-shadow: 0px 3px 7px 0px oklch(0 0 none / 0.1);
  }
}
@media only screen and (min-width: 992px) {
  .section {
    padding: 16px;
  }
}
@media only screen and (min-width: 1400px) {
  .section {
    padding: 24px;
  }
}
body.iframe-section {
  background-color: oklch(1 0 none);
}
.section__header {
  margin-bottom: calc(0.834 * 36px);
}
.section__header .section__headline {
  clear: unset;
}
.section__header .section__headline,
.section__header .section__headline:nth-child(n + 2) {
  display: inline-block;
  margin: 0;
}
.section__header:not(:first-child) {
  margin-top: 16px;
}
.section__navigationLinks {
  float: right;
  display: inline-flex;
  flex-direction: row;
  gap: 4px;
}
@media only screen and (min-width: 576px) {
  .section__navigationLinks {
    margin: 6px 0 4px 4px;
  }
}
.section__navigationLink {
  --color: oklch(0.7247 0.1478 233.0429);
  --borderRadius: ;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.section__navigationLink,
.section__navigationLink:hover,
.section__navigationLink:focus,
.section__navigationLink:active {
  color: var(--color);
  border: 1px solid var(--color);
  border-radius: var(--borderRadius);
}
.section__navigationLink--disabled {
  --color: oklch(0.7252 0 none);
}
.section__controlsFooter {
  position: fixed;
  z-index: 1002;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: white;
  box-shadow: 0px -3px 7px 0px oklch(0 0 none / 0.1);
  transition: max-height 0.2s;
}
.section__controlsFooterStack {
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
  background-color: inherit;
}
.section__controlsFooterStack > * {
  width: calc(50% - 0.5rem);
  max-width: 250px;
}
.section__controlsFooterStart,
.section__controlsFooterEnd {
  display: flex;
}
.section__controlsFooterStart .btn,
.section__controlsFooterEnd .btn {
  flex-grow: 1;
}
.section__controlsHelp {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .section__controlsHelp {
    display: inline-block;
    margin-left: 15px;
  }
}
.section__controlsHeader {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: unset;
  left: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 1px;
  justify-content: flex-end;
  padding: 16px;
}
.section__controlsHeader .btn-sm {
  padding: calc(4px - 1px) calc(12px - 1px);
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.4px;
}
.section__controlsHeader .btn-sm.btn--iconLeft {
  padding-left: calc(8px - 1px);
}
.section__controlsHeader .btn-sm.btn--iconRight {
  padding-right: calc(8px - 1px);
}
.section__controlsHeader .icon--sm {
  width: 24px;
  height: 24px;
}
.section__controlsHeader .icon--sm::before {
  font-size: 24px;
}
@media only screen and (min-width: 1024px) {
  .section__controlsHeader {
    padding-right: 16px;
    padding-left: 16px;
  }
}
@media only screen and (min-width: 1400px) {
  .section__controlsHeader {
    padding-right: 24px;
    padding-left: 24px;
  }
}
.section__controlsHeader--isFloating {
  position: fixed;
  z-index: 9999;
  top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: oklch(1 0 none);
  box-shadow: 0px 3px 7px 0px oklch(0 0 none / 0.1);
}
@media only screen and (min-width: 1024px) {
  .section__controlsHeader--isFloating {
    padding-right: clamp(calc(16px + 16px), calc(50vw - 684px), 90000px);
    padding-left: 16px;
  }
}
@media only screen and (min-width: 1400px) {
  .section__controlsHeader--isFloating {
    padding-right: clamp(calc(16px + 24px), calc(50vw - 672px), 90000px);
    padding-left: 24px;
  }
}
`);
  });
});