import styled from 'styled-components';
import Box from './ui/box.js';

var ThemedModalWrapper = styled(Box)({
  fontFamily: "Proxima Nova",
  position: "fixed",
  top: 0,
  left: 0,
  width: "100vw",
  height: "100%",
  zIndex: 1000000009,
  overflow: "hidden",
  pointerEvents: "none",
  justifyContent: "center",
  alignItems: "center"
});
var themedOverlay = function themedOverlay(props) {
  return {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    backgroundColor: props.theme.colors.text,
    opacity: props.active ? "0.4" : "0",
    transition: "0.2s linear",
    pointerEvents: "auto"
  };
};
var ThemedModalOverlay = styled(Box)(themedOverlay);
var themedModal = function themedModal(props) {
  return {
    opacity: props.active ? "1" : "0",
    justifyContent: "space-between",
    flexDirection: "column",
    position: "absolute",
    padding: 0,
    zIndex: 2,
    backgroundColor: props.theme.colors.grey.pastel,
    outline: "none",
    boxShadow: "0px 5px 25px rgba(0, 0, 0, 0.15)",
    boxSizing: "border-box",
    transition: "0.5s cubic-bezier(0.175, 0.5, 0.12, 1)",
    minWidth: 480,
    maxWidth: 1200,
    maxHeight: 648,
    borderRadius: props.theme.radii.sm,
    pointerEvents: "auto",
    // For smaller screens, have to adjust max-height and max-width
    "@media (max-width: 1400px)": {
      maxWidth: "80vw"
    }
  };
};
var ThemedModal = styled(Box)(themedModal);
var bodyWrapperStyles = function bodyWrapperStyles(props) {
  return {
    // When header is not there then there should be a extra padding on
    // right, otherwise close icon will overlap the content
    padding: props.isHeader ? 16 : "16px 40px 16px 16px",
    // When header & footer will be there, then keeping a margin for them
    // according to design
    maxHeight: props.isHeader && props.isFooter ? 524 : 648,
    overflowY: "auto",
    borderRadius: props.theme.radii.sm,
    "::-webkit-scrollbar": {
      width: 8
    },
    "::-webkit-scrollbar-track": {
      background: "transparent"
    },
    "::-webkit-scrollbar-thumb": {
      background: "#b0b0b0",
      borderRadius: 10
    },
    // For smaller screens, have to adjust the max-height otherwise it will overflow
    "@media (max-height: 750px)": {
      maxHeight: props.isHeader && props.isFooter ? "calc(80vh - 120px)" : "80vh"
    }
  };
};
var BodyWrapper = styled(Box)(bodyWrapperStyles);
var ThemedIconWrapper = styled(Box)({
  position: "absolute",
  top: 12,
  right: 12,
  padding: 0
});
var HeaderWrapper = styled(Box)({
  borderBottom: "1px solid #D5D5D5",
  borderRadius: "4px 4px 0px 0px",
  // Extra padding on right for the close icon
  padding: "8px 40px 8px 16px"
});
var FooterWrapper = styled(Box)({
  borderTop: "1px solid #D5D5D5",
  borderRadius: "0px 0px 4px 4px",
  padding: "8px 16px"
});

export { BodyWrapper as B, FooterWrapper as F, HeaderWrapper as H, ThemedModalWrapper as T, ThemedModalOverlay as a, ThemedModal as b, ThemedIconWrapper as c };
