"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardContainer = exports.ListContainer = exports.CommonContainer = exports.IconWrapper = exports.SubTitle = exports.Title = exports.TitleWrapper = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const core_1 = require("../../core");
const utils_1 = require("../../utils");
exports.TitleWrapper = styled_1.default.div `
	display: flex;
	flex-direction: column;
	justify-content: center;
`;
exports.Title = (0, styled_1.default)(core_1.Headline6) `
	color: ${core_1.basicColors.gray900};
`;
exports.SubTitle = (0, styled_1.default)(core_1.Title4) `
	color: ${core_1.basicColors.gray600};
	margin-bottom: 5px;
`;
exports.IconWrapper = styled_1.default.div `
	display: flex;
	gap: 15px;
	align-items: center;

	svg {
		cursor: pointer;
	}
`;
exports.CommonContainer = styled_1.default.div `
	display: flex;
	width: 100%;
	justify-content: space-between;
`;
exports.ListContainer = (0, styled_1.default)(exports.CommonContainer) `
	padding: 20px;

	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 20px 80px;
	`)}
`;
exports.CardContainer = (0, styled_1.default)(exports.CommonContainer) `
	padding: 20px;
	border-radius: 10px;

	${({ background }) => {
    switch (background) {
        case 'gray':
            return (0, react_1.css) `
					background-color: ${core_1.basicColors.gray25};
				`;
        default:
            return (0, react_1.css) `
					background-color: ${core_1.basicColors.white};
				`;
    }
}}
`;
