"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserName = exports.Greeting = exports.GreetingWrapper = exports.ProductWrapper = exports.LastStep = exports.FirstStep = void 0;
const styled_1 = require("../styled");
const Typography_1 = require("../Typography");
const constants_1 = require("./constants");
const createStepKeyframes = (stepStartShowing, stepEndShowing) => `
  from {
    opacity: 0;
  }
  ${stepStartShowing} {
    opacity: 1;
  }
  ${stepEndShowing} {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
`;
const fadeFirstStep = (0, styled_1.keyframes) `${createStepKeyframes('30%', '60%')}`;
const fadeLastStep = (0, styled_1.keyframes) `${createStepKeyframes('20%', '90%')}`;
const appearTextKeyframes = (0, styled_1.keyframes) `
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;
exports.FirstStep = styled_1.styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100vh;

  /* Причина игнора: Прогрессивное улучшение */
  /* stylelint-disable plugin/no-unsupported-browser-features */
  @supports (height: 100dvh) {
    height: 100dvh;
  }
  /* stylelint-enable plugin/no-unsupported-browser-features */

  opacity: 0;
  background-color: ${({ theme }) => theme.palette.background.paper};

  animation: ${fadeFirstStep} ${constants_1.FIRST_STEP_DURATION_MS}ms linear;
  animation-fill-mode: both;
`;
exports.LastStep = styled_1.styled.div `
  position: absolute;
  top: 0;

  display: grid;
  grid-template-rows: max-content 1fr;
  gap: ${({ theme }) => theme.spacing(10)};

  width: 100%;
  height: 100%;
  padding: ${({ theme }) => theme.spacing(10, 7)};

  opacity: 0;
  background-color: ${({ theme }) => theme.palette.background.paper};

  animation: ${fadeLastStep} ${constants_1.LAST_STEP_DURATION_MS}ms linear;
  animation-fill-mode: both;
  animation-delay: ${constants_1.FIRST_STEP_DURATION_MS}ms;
`;
exports.ProductWrapper = styled_1.styled.div `
  display: flex;
  gap: ${({ theme }) => theme.spacing(3)};
  align-items: center;

  font-size: ${({ theme }) => theme.typography.pxToRem(20)};

  svg {
    width: 48px;
    height: 48px;
  }
`;
exports.GreetingWrapper = styled_1.styled.div `
  display: flex;
  flex-direction: column;
  justify-content: center;
`;
exports.Greeting = (0, styled_1.styled)(Typography_1.Typography) `
  margin-top: -50%;

  font-size: ${({ theme }) => theme.typography.pxToRem(24)};
  line-height: ${({ theme }) => theme.typography.pxToRem(28)};

  opacity: 0;

  animation: ${appearTextKeyframes} ${constants_1.APPEAR_DURATION_TEXT_IN_LAST_STEP_MS}ms
    linear;
  animation-fill-mode: both;
  animation-delay: ${constants_1.FIRST_STEP_DURATION_MS + constants_1.APPEAR_DURATION_TEXT_IN_LAST_STEP_MS}ms;
`;
exports.UserName = (0, styled_1.styled)(Typography_1.Typography) `
  font-size: ${({ theme }) => theme.typography.pxToRem(28)};
  line-height: ${({ theme }) => theme.typography.pxToRem(32)};

  opacity: 0;

  animation: ${appearTextKeyframes} ${constants_1.APPEAR_DURATION_TEXT_IN_LAST_STEP_MS}ms
    linear;
  animation-fill-mode: both;
  animation-delay: ${constants_1.FIRST_STEP_DURATION_MS + constants_1.APPEAR_DURATION_TEXT_IN_LAST_STEP_MS * 2}ms;
`;
