"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Footer = exports.LineButtonWrapper = exports.Comment = exports.Body = exports.SubTitle = exports.Header = exports.Wrapper = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const style_constants_1 = require("../../constants/style.constants");
const TextStyles_1 = require("../../core/TextStyles");
const Colors_1 = require("../../core/Colors");
const Typography_1 = require("../../core/Typography");
exports.Wrapper = styled_1.default.div `
	width: 320px;
	background-color: ${Colors_1.basicColors.white};
	z-index: ${style_constants_1.zIndex.modal};
	border-radius: 10px;
	padding: 30px 0 15px;
`;
exports.Header = styled_1.default.div `
	text-align: center;
	white-space: pre-wrap;
	padding: 0 15px;
`;
exports.SubTitle = (0, styled_1.default)(Typography_1.Title3) `
	margin-top: 10px;

	text-align: center;
	white-space: pre-wrap;
	color: ${Colors_1.basicColors.gray400};
	font-weight: 500;
`;
exports.Body = styled_1.default.div `
	padding-left: ${(props) => (props.contentPadding ? '20px' : '0')};
	padding-right: ${(props) => (props.contentPadding ? '20px' : '0')};
	padding-bottom: 30px;

	> * {
		margin-top: 20px;
	}
`;
exports.Comment = styled_1.default.div `
	${TextStyles_1.typography.body1};

	color: ${Colors_1.basicColors.gray400};
	background: ${Colors_1.basicColors.gray25};
	border-radius: 10px;
	padding: 12px;
	text-align: center;
	white-space: pre-wrap;
`;
exports.LineButtonWrapper = styled_1.default.div `
	display: flex;
	justify-content: center;
	padding: 0 11px;
`;
exports.Footer = styled_1.default.div `
	box-sizing: border-box;
	padding: 0 15px;
`;
