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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled, { css } from 'styled-components';
var Dot = styled.button.attrs({
  className: 'p-1 d-flex justify-content-center;'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  width: 3.5rem;\n  height: 2rem;\n  margin-right: -0.5rem;\n  border: 0;\n  display: flex;\n  align-items: center;\n\n  @media (max-width: ", ") {\n    margin-right: -1rem;\n  }\n\n  &::after {\n    background-color: ", ";\n    text-align: center;\n    width: 1.2rem;\n    height: 1.2rem;\n    @media (max-width: ", ") {\n      width: 0.8rem;\n      height: 0.8rem;\n    }\n    content: '';\n    border-radius: 50%;\n\n    ", "\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.md.max;
}, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
}, props => props.selected && "\n        background-color: " + props.theme.palette.primary + ";\n        opacity: 1;\n      ");
export var DotButton = (_ref4) => {
  var {
    selected,
    onClick
  } = _ref4;
  return /*#__PURE__*/React.createElement(Dot, {
    selected: selected,
    onClick: onClick
  });
};
var sharedButtonStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 0;\n  width: 5rem;\n  height: 5rem;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n  outline: none;\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n\n  &:not(:disabled) {\n    cursor: pointer;\n    fill: #383838;\n  }\n\n  &:disabled {\n    fill: #d3d3d3;\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
});
var ButtonPrev = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n  left: 0.7rem;\n"])), sharedButtonStyles);
var ButtonSvg = styled.svg(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  width: 3.5rem;\n  height: 3.5rem;\n"])));
export var PrevButton = (_ref6) => {
  var {
    enabled,
    onClick
  } = _ref6;
  return /*#__PURE__*/React.createElement(ButtonPrev, {
    onClick: onClick,
    disabled: !enabled
  }, /*#__PURE__*/React.createElement(ButtonSvg, {
    viewBox: "137.718 -1.001 366.563 644"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z"
  })));
};
var ButtonNext = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n  right: 0.7rem;\n"])), sharedButtonStyles);
export var NextButton = (_ref7) => {
  var {
    enabled,
    onClick
  } = _ref7;
  return /*#__PURE__*/React.createElement(ButtonNext, {
    onClick: onClick,
    disabled: !enabled
  }, /*#__PURE__*/React.createElement(ButtonSvg, {
    viewBox: "0 0 238.003 238.003"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"
  })));
};
//# sourceMappingURL=index.js.map