"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Overlay = exports.modalSettings = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const Colors_1 = require("../../core/Colors");
const react_1 = require("@emotion/react");
const fadeIn = (0, react_1.keyframes) `
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;
const fadeOut = (0, react_1.keyframes) `
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`;
const modalSettings = (visible) => (0, react_1.css) `
	visibility: ${visible ? 'visible' : 'hidden'};
	animation: ${visible ? fadeIn : fadeOut} 0.4s ease-out;
	transition: visibility 0.4s ease-out;
`;
exports.modalSettings = modalSettings;
exports.Overlay = styled_1.default.div `
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.black, '60%')};
	z-index: ${(el) => el.zIndex};

	${({ visible }) => (0, exports.modalSettings)(visible)};
`;
