import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

import React from 'react';
import styled, { css, keyframes } from 'styled-components';
import { ANIMATION_DURATION } from '../AnimatedDrawer';
export var SlideLeft = (_ref) => {
  var {
    isLeft,
    children
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Slider, {
    isLeft: Boolean(isLeft),
    isAnimatable: isLeft !== null
  }, children));
};
var slideLeft = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n"])));
var slideRight = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n"])));
var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n"])));
var Slider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  transform: translateX(0);\n\n  ", "\n"])), props => {
  if (!props.isAnimatable) return '';

  if (props.isLeft) {
    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1\n          normal forwards running ", ";\n      "])), ANIMATION_DURATION, slideLeft);
  }

  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      animation: ", "ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1\n        normal forwards running ", ";\n    "])), ANIMATION_DURATION, slideRight);
});
//# sourceMappingURL=index.js.map