// 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/Fields/InputDialog/InputDialog.less stylesheet snapshot', () => {
  it('compiled CSS with tokens inlined', async () => {
    const css = await compileLessWithTokens(join(__dirname, 'InputDialog.less'), DEFAULT_TOKEN_CSS_FILES, {
      lessPreludes: DEFAULT_LESS_PRELUDES,
    });
    expect(css).toMatchTokensInlineSnapshot(`
.inputDialog {
  --animationDuration: 300ms;
  --modalAnimationDelay: 100ms;
  --maxWidth: auto;
  position: fixed;
  z-index: 11000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: oklch(0 0 none / 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .inputDialog {
    --animationDuration: 0ms;
  }
}
.inputDialog--maxWidthSm {
  --maxWidth: 576px;
}
.inputDialog--maxWidthMd {
  --maxWidth: 768px;
}
.inputDialog--maxWidthLg {
  --maxWidth: 992px;
}
.inputDialog--maxWidthXl {
  --maxWidth: 1024px;
}
.inputDialog--maxWidthXxl {
  --maxWidth: 1400px;
}
@keyframes input-dialog--modal-overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes input-dialog--presentation-sheet {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.inputDialog--presentationSheet {
  --animationName: input-dialog--presentation-sheet;
  justify-content: flex-end;
}
@keyframes input-dialog--presentation-prompt {
  from {
    transform: scale(0.98) translateY(10%);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.inputDialog--presentationPrompt {
  --animationName: input-dialog--presentation-prompt;
}
.inputDialog--presentationPrompt:not(.inputDialog--sizeFullScreen) {
  padding: 16px;
}
.inputDialog[data-entering] {
  animation-name: input-dialog--modal-overlay-fade;
  animation-duration: var(--animationDuration);
  animation-timing-function: ease;
}
.inputDialog[data-exiting] {
  animation-name: input-dialog--modal-overlay-fade;
  animation-duration: var(--animationDuration);
  animation-timing-function: ease;
  animation-direction: reverse;
}
.inputDialog__modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  padding-bottom: calc(100vh - 0px);
  padding-bottom: calc(100dvh - 0px);
  background-color: oklch(1 0 none);
  box-shadow: 0px 3px 7px 0px oklch(0 0 none / 0.1), 0px -3px 7px 0px oklch(0 0 none / 0.1);
  animation-duration: var(--animationDuration);
  animation-timing-function: ease;
}
.inputDialog__modal[data-entering] {
  animation-name: var(--animationName);
}
.inputDialog__modal[data-exiting] {
  animation-name: var(--animationName);
  animation-direction: reverse;
}
:where(.inputDialog--presentationSheet) .inputDialog__modal {
  width: 100vw;
  width: 100dvw;
}
:where(.inputDialog--presentationPrompt.inputDialog--sizeFitContent) .inputDialog__modal {
  width: 100%;
  max-width: var(--maxWidth);
  margin: auto;
}
:where(.inputDialog--sizeFullScreen) .inputDialog__modal {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
}
.inputDialog__dialog {
  --padding: 12px;
  --gap: 8px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--gap);
  align-items: stretch;
  min-height: 0;
  padding: var(--padding);
}
.inputDialog__header,
.inputDialog__input,
.inputDialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inputDialog__headerInner,
.inputDialog__bodyInner {
  display: flex;
  flex: 1 1 100%;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: var(--maxWidth);
}
.inputDialog__headerInner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.inputDialog__headerTitle .typography {
  margin: 0;
}
.inputDialog__inputInner {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: var(--maxWidth);
}
.inputDialog__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 100%;
  align-items: stretch;
  margin-top: calc(-1 * var(--gap));
  margin-right: calc(-1 * var(--padding));
  margin-bottom: calc(-1 * var(--padding));
  margin-left: calc(-1 * var(--padding));
}
.inputDialog__bodyInner {
  flex-direction: column;
  align-self: center;
  max-width: calc(var(--maxWidth) + 2 * var(--padding));
  padding-right: var(--padding);
  padding-bottom: var(--padding);
  padding-left: var(--padding);
}
.inputDialog__divider {
  width: 100%;
  max-width: var(--maxWidth);
  margin: auto;
}
.inputDialog__divider::before {
  content: '';
  display: block;
  min-width: 1px;
  min-height: 1px;
  margin: -0.5px;
  background-color: oklch(0.8761 0 none);
}
`);
  });
});