"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonTag = exports.MiniButtonSidePaddingPx = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const TextStyles_1 = require("../../../core/TextStyles");
const Colors_1 = require("../../../core/Colors");
const utils_1 = require("../../../utils");
exports.MiniButtonSidePaddingPx = 5;
exports.ButtonTag = styled_1.default.button `
	/* initialize button */
	border: none;
	outline: none;
	background-color: initial;
	padding: 0;

	width: max-content;
	border-radius: 5px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	user-select: none;

	&:hover {
		background-color: ${Colors_1.basicColors.gray50};
	}

	&:active {
		background-color: ${Colors_1.basicColors.gray100};
	}

	${({ colorType }) => (0, react_1.css) `
		cursor: pointer;
		color: ${(0, utils_1.miniButtonColorStyle)(colorType).textColor};
	`}

	&:disabled {
		${({ colorType }) => (0, react_1.css) `
			cursor: not-allowed;
			background-color: initial;
			color: ${(0, utils_1.miniButtonColorStyle)(colorType).disabledTextColor};
		`}
	}
	${({ styleType, colorType, size }) => {
    switch (styleType) {
        case 'icon':
            return (0, react_1.css) `
					height: 25px;
					svg > path {
						fill: ${(0, utils_1.miniButtonColorStyle)(colorType).iconColor};
					}
					&:disabled svg > path {
						fill: ${(0, utils_1.miniButtonColorStyle)(colorType).iconDisabledColor};
					}
				`;
        case 'underline':
            return (0, react_1.css) `
					${(() => {
                switch (size) {
                    case 's':
                        return (0, react_1.css) `
									height: 28px;
								`;
                    case 'm':
                        return (0, react_1.css) `
									height: 32px;
								`;
                }
            })()};
					&:disabled {
						> * {
							text-decoration: none;
						}
					}
				`;
    }
}}
	${({ size }) => {
    switch (size) {
        case 's':
            return (0, react_1.css) `
					${TextStyles_1.typography.title4};
				`;
        case 'm':
            return (0, react_1.css) `
					${TextStyles_1.typography.title3};
				`;
    }
}}
`;
