"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentContainer = exports.Wrapper = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const Colors_1 = require("../../core/Colors");
exports.Wrapper = styled_1.default.div `
	box-sizing: border-box;
	width: 100%;
	background-color: ${Colors_1.basicColors.white};

	${({ clickable }) => clickable
    ? (0, react_1.css) `
					cursor: pointer;
			  `
    : (0, react_1.css) `
					cursor: default;
			  `};

	${({ disabled }) => disabled &&
    (0, react_1.css) `
			cursor: not-allowed;
		`};

	${({ disabled, clickable }) => !disabled &&
    clickable &&
    (0, react_1.css) `
			&:hover {
				background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.white, '50%')};
			}

			&:active {
				background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.white, '30%')};
			}
		`}

	${({ size }) => {
    switch (size) {
        case 'm':
            return (0, react_1.css) `
					border-radius: 20px;
				`;
        case 's':
            return (0, react_1.css) `
					border-radius: 10px;
				`;
        default:
            return undefined;
    }
}}
`;
exports.ContentContainer = styled_1.default.div `
	${({ disabled }) => disabled &&
    (0, react_1.css) `
			opacity: 0.3;
		`};
`;
