import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import { jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import 'react-dynamic-multi-render';
import '@crystaldesign/diva-core';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/toConsumableArray';
import '@crystaldesign/diva-utils';
import 'mobx';
import '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var wrapper = "wrapper-8LcgO";
var icon = "icon-TWMmb";
var visible = "visible-RvpD0";
var tablet = "tablet-XGdK1";
var css_248z = ".wrapper-8LcgO {\n  position: absolute;\n  transform: translateZ(0);\n  bottom: 12px;\n  right: 12px;\n  width: 42px;\n  height: 42px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--diva-theme-palette-primary-main);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 12000;\n  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  transition:\n    opacity 1.5s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: none;\n}\n\n.wrapper-8LcgO:hover {\n  scale: 0.8;\n}\n\n.wrapper-8LcgO:focus {\n  scale: 0.9;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.icon-TWMmb {\n  width: 20px;\n  height: 20px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.visible-RvpD0 {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.vaul-dragging .wrapper-8LcgO {\n  opacity: 0;\n  transition:\n    opacity 0s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.tablet-XGdK1 {\n  bottom: 16px;\n  right: 16px;\n  width: 52px;\n  height: 52px;\n}\n\n.tablet-XGdK1 .icon-TWMmb {\n  width: 26px;\n  height: 26px;\n}\n";
styleInject(css_248z);

var NavForwardButton = function NavForwardButton(props) {
  var viewHandler = useViewHandler();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isVisible = _useState2[0],
    setIsVisible = _useState2[1];
  useEffect(function () {
    setTimeout(function () {
      setIsVisible(!viewHandler.actionButtonState.isOnLastStep && !viewHandler.actionButtonState.isOnFirstStepDisabled);
    }, 400);
  }, [viewHandler.actionButtonState.isOnLastStep, viewHandler.actionButtonState.isOnFirstStepDisabled]);
  return /*#__PURE__*/jsx("div", {
    className: classnames(wrapper, isVisible && visible, viewHandler.uiState.isTablet ? tablet : undefined),
    onClick: function onClick() {
      window.lastNavigationType = 'SETTINGS_SWIPER_FORWARD_BUTTON';
      viewHandler.actionButtonState.onClickConfiguratorSettingsForth();
    },
    children: /*#__PURE__*/jsx("div", {
      className: icon
    })
  });
};
var NavForwardButton$1 = observer(NavForwardButton);

export { NavForwardButton$1 as default };
