"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CancelIconWrapper = exports.Container = exports.CHIP_ITEM_HEIGHT = exports.className = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const react_1 = require("@emotion/react");
const GenerateColorStyle_1 = require("../../../utils/GenerateColorStyle");
exports.className = {
    Text: 'chip-item-text',
};
exports.CHIP_ITEM_HEIGHT = 38;
exports.Container = styled_1.default.span `
	display: inline-flex;
	min-width: max-content;
	height: ${exports.CHIP_ITEM_HEIGHT}px;
	gap: 2px;
	padding: 8px 0 8px 12px;
	padding-right: ${({ hasRightIcon }) => (hasRightIcon ? '7px' : '12px')};
	align-items: center;

	border-radius: 22px;

	${({ disabled, selected, colorType }) => {
    const colorStyle = (0, GenerateColorStyle_1.chipColorStyle)(colorType);
    const state = disabled ? 'disabled' : 'default';
    const status = selected ? 'on' : 'off';
    return (0, react_1.css) `
			background-color: ${colorStyle[state][status].containerColor};
			border: 1px solid ${colorStyle[state][status].borderColor};
			.${exports.className.Text} {
				color: ${colorStyle[state][status].textColor};
			}
			svg > path {
				fill: ${colorStyle[state][status].iconColor};
			}
		`;
}}

	${({ selected }) => !selected &&
    (0, react_1.css) `
			cursor: pointer;
		`}
`;
exports.CancelIconWrapper = styled_1.default.span `
	cursor: pointer;
	display: flex;
`;
