import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import Flex from '../Flex';
import Box from '../Box';

var _ref2 = /*#__PURE__*/React.createElement("span", null);

var _ref3 = /*#__PURE__*/React.createElement("span", null);

var _ref4 = /*#__PURE__*/React.createElement("span", null);

const Hamburger = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    isOpen
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["isOpen"]);

  return /*#__PURE__*/React.createElement(Flex, _extends({
    ref: ref,
    sx: {
      variant: isOpen ? 'hamburger.opened' : 'hamburger.closed',
      transition: 'background-color .25s ease-in',
      height: 64,
      width: 64,
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer'
    }
  }, rest), /*#__PURE__*/React.createElement(Box, {
    sx: {
      variant: isOpen ? 'hamburgerInner.opened' : 'hamburgerInner.closed',
      position: 'relative',
      width: '24px',
      height: '18px',
      transform: 'rotate(0deg)',
      transition: '.3s ease-in-out',
      span: {
        variant: isOpen ? 'hamburgerBar.opened' : 'hamburgerBar.closed',
        display: 'block',
        position: 'absolute',
        height: '2px',
        width: '100%',
        opacity: 1,
        transform: 'translateX(0)',
        transition: 'transform .25s ease-in, opacity .25s ease-in'
      },
      'span:nth-of-type(1)': _objectSpread({
        variant: 'hamburgerBar.closed',
        top: 0
      }, isOpen ? {
        transform: 'translateX(200%)',
        variant: 'hamburgerBar.opened',
        opacity: 0
      } : {}),
      'span:nth-of-type(2)': _objectSpread(_objectSpread({
        variant: 'hamburgerBar.closed',
        top: 'calc(( 100% / 2 ) - 1px )'
      }, isOpen ? {
        variant: 'hamburgerBar.opened',
        transform: 'rotate(-45deg)'
      } : {}), {}, {
        '&:after': _objectSpread({
          variant: 'hamburgerBar.closed',
          content: '""',
          display: 'block',
          position: 'absolute',
          height: '2px',
          width: '100%',
          opacity: 0,
          left: 0,
          transform: 'rotate(0) translateX(0)',
          transition: 'opacity .25s ease-in, transform .25s ease-in'
        }, isOpen ? {
          variant: 'hamburgerBar.opened',
          transform: 'rotate(90deg)',
          opacity: 1
        } : {})
      }),
      'span:nth-of-type(3)': _objectSpread({
        variant: 'hamburgerBar.closed',
        bottom: 0
      }, isOpen ? {
        variant: 'hamburgerBar.opened',
        transform: 'translateX(200%)',
        opacity: 0
      } : {})
    }
  }, _ref2, _ref3, _ref4));
});
Hamburger.displayName = 'Hamburger';
Hamburger.propTypes = {
  isOpen: PropTypes.bool
};
export default Hamburger;