"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const dialog_1 = require("@reach/dialog");
const renderprops_1 = require("react-spring/renderprops");
const styles_1 = require("../../styles");
const Card_1 = require("../Card");
const IconButton_1 = require("../IconButton");
const types_1 = require("./types");
const statusBarHeight = '8px';
exports.Container = renderprops_1.animated(styles_1.styled(dialog_1.DialogContent)({
    outline: 'none',
    maxHeight: '100%',
    pointerEvents: 'none',
}));
exports.Dialog = styles_1.styled(Card_1.Card)(({ theme, scroll, status }) => (Object.assign({ display: 'flex', flexDirection: 'column', position: 'relative', pointerEvents: 'auto', margin: theme.space.xl, maxHeight: scroll === 'body' ? 'none' : `calc(100vh - (${theme.space.xl} * 2))` }, (status && {
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0,
}))));
const StatusBarStyles = ({ theme }) => ({
    position: 'absolute',
    top: `-${statusBarHeight}`,
    left: 0,
    right: 0,
    width: '100%',
    height: statusBarHeight,
    borderRadius: theme.radii[3],
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 0,
});
const loadingStyles = `
  background: linear-gradient(60deg, #252e6a, #5495e5, #5495e5, #5495e5, #252e6a);
  background-size: 300% 300%;
  animation: AnimatedGradient 3s infinite;
`;
// Not object-style due to a bug in SC https://github.com/styled-components/styled-components/issues/2561
exports.StatusBar = styles_1.styled.div `
  ${StatusBarStyles}
  ${({ status, theme }) => status &&
    (status === types_1.ModalStatus.Loading
        ? loadingStyles
        : `background: ${theme.colors[status]}`)};
  @keyframes AnimatedGradient {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
`;
exports.CloseButton = styles_1.styled(IconButton_1.IconButton) `
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  cursor: pointer;
  :hover {
    color: ${({ theme }) => theme.colors.gray[3]};
  }
`;
//# sourceMappingURL=styles.js.map