"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Content = exports.Toast = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const style_constants_1 = require("../../../constants/style.constants");
const Colors_1 = require("../../../core/Colors");
const TextStyles_1 = require("../../../core/TextStyles");
const utils_1 = require("../../../utils");
const DEFAULT_BOTTOM_VALUE = '-55px';
const PC_BOTTOM_UP_VALUE = '50px';
const MOBILE_BOTTOM_UP_VALUE = '25px';
const up = (0, react_1.keyframes) `
	0% {
		bottom: ${DEFAULT_BOTTOM_VALUE};
	}
	100% {
		${(0, utils_1.Smaller)((0, react_1.css) `
			bottom: ${MOBILE_BOTTOM_UP_VALUE};
		`)};
		${(0, utils_1.Larger)((0, react_1.css) `
			bottom: ${PC_BOTTOM_UP_VALUE};
		`)};
	}
`;
const down = (0, react_1.keyframes) `
	0% {
		${(0, utils_1.Smaller)((0, react_1.css) `
			bottom: ${MOBILE_BOTTOM_UP_VALUE};
		`)};
		${(0, utils_1.Larger)((0, react_1.css) `
			bottom: ${PC_BOTTOM_UP_VALUE};
		`)};
	}
	100% {
		bottom: ${DEFAULT_BOTTOM_VALUE};
	}
`;
const toastMessageStyle = (visible) => (0, react_1.css) `
	visibility: ${visible ? 'visible' : 'hidden'};
	z-index: ${style_constants_1.zIndex.basicLayer + 11};
	animation: ${visible ? up : down} 0.4s ease-out;
	transition: all 0.4s ease-out;
`;
exports.Toast = styled_1.default.div `
	min-width: 320px;
	max-width: max-content;

	${(0, utils_1.Larger)((0, react_1.css) `
		min-width: 440px;
	`)}
	height: 55px;
	box-sizing: border-box;
	background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.gray900, '80%')};
	border-radius: 15px;
	padding: 17px 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0);
	${(0, utils_1.Smaller)((0, react_1.css) `
		bottom: ${MOBILE_BOTTOM_UP_VALUE};
	`)};
	${(0, utils_1.Larger)((0, react_1.css) `
		bottom: ${PC_BOTTOM_UP_VALUE};
	`)};
	${({ visible }) => toastMessageStyle(visible)};
`;
exports.Content = styled_1.default.div `
	${TextStyles_1.typography.title3};
	color: ${Colors_1.basicColors.white};
	width: 100%;
`;
