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

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { Typography } from '../../../Typography';
import { FadeTransition } from '../../../Animations';
export var ErrorMessage = (_ref) => {
  var {
    error = 'Promo code not recognized. Please check and try again.'
  } = _ref;
  return /*#__PURE__*/React.createElement(FadeTransition, {
    fromStyles: {
      opacity: 0
    },
    toStyles: {
      opacity: 1
    }
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Inner, null, error)));
};
var Inner = styled(Typography).attrs({
  as: 'p',
  variant: 5
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  padding: 3rem;\n  position: relative;\n  line-height: 1.4;\n\n  margin-bottom: 2rem;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
var Container = styled.div.attrs({
  className: 'p-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-left: 0;\n  margin-right: 0;\n  margin-bottom: 1rem;\n  background-color: ", ";\n  color: ", ";\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath stroke='%23000' stroke-miterlimit='10' stroke-width='2' d='M0-1l14 14m-15-2l3 3M12-2l3 3'/%3E%3C/svg%3E\");\n  background-position: 0 0;\n  background-repeat: repeat;\n  background-size: 0.7rem;\n  max-width: 72.9rem;\n  overflow: hidden;\n  position: relative;\n\n  &:before,\n  &:after {\n    content: '';\n    background-color: currentColor;\n    display: block;\n    height: 2rem;\n    pointer-events: none;\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    top: auto;\n  }\n\n  &:after {\n    transform: skew(-30deg);\n    transform-origin: left bottom;\n    left: 5.5rem;\n    right: 0;\n  }\n\n  &:before {\n    left: 0;\n    width: 5.5rem;\n    transform: skew(30deg);\n    transform-origin: right bottom;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.disabled;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map