"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubTitle = exports.Title = exports.ImageWrapper = exports.Wrapper = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const Typography_1 = require("../../core/Typography");
const utils_1 = require("../../utils");
exports.Wrapper = styled_1.default.div `
	${(0, utils_1.Smaller)((0, react_1.css) `
		padding: 25px 0;
	`)}

	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 80px 80px 25px;
	`)}

	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */

	${({ deletePaddingTop }) => deletePaddingTop &&
    (0, utils_1.Smaller)((0, react_1.css) `
			padding-top: 0px;
		`)}

	${({ deletePaddingTop }) => deletePaddingTop &&
    (0, utils_1.Larger)((0, react_1.css) `
			padding-top: 0px;
		`)}
`;
exports.ImageWrapper = styled_1.default.div `
	padding: 0 20px;
	margin-bottom: 15px;
	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 0;
	`)}
`;
exports.Title = (0, styled_1.default)(Typography_1.Headline3) `
	padding: 0 25px;
	white-space: pre-wrap;
	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 0;
	`)}
`;
exports.SubTitle = (0, styled_1.default)(Typography_1.Title3) `
	margin-top: 10px;
	padding: 0 25px;
	color: ${({ color }) => color};
	white-space: pre-wrap;
	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 0;
	`)}
`;
