"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CloseButton = exports.StatusBar = exports.Dialog = exports.Container = void 0;
const react_1 = __importStar(require("react"));
const dialog_1 = require("@reach/dialog");
const renderprops_cjs_1 = require("react-spring/renderprops.cjs");
const styles_1 = require("../../styles");
const Card_1 = require("../Card");
const IconButton_1 = require("../IconButton");
const types_1 = require("./types");
const statusBarHeight = '8px';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const DialogContent = react_1.forwardRef((_a, ref) => {
    var { maxWidth } = _a, props = __rest(_a, ["maxWidth"]);
    return (react_1.default.createElement(dialog_1.DialogContent, Object.assign({}, props, { ref: ref })));
});
DialogContent.displayName = 'DialogContent';
exports.Container = renderprops_cjs_1.animated(styles_1.styled(DialogContent)(({ maxWidth }) => ({
    outline: 'none',
    maxHeight: '100%',
    maxWidth: maxWidth || 600,
    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