"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ItemWrapper = exports.FillTabsListContainer = exports.OutterWrapper = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const react_1 = require("@emotion/react");
const TextStyles_1 = require("../../../core/TextStyles");
const GenerateColorStyle_1 = require("../../../utils/GenerateColorStyle");
const common_1 = require("../../../style/common");
const utils_1 = require("../../../utils");
exports.OutterWrapper = styled_1.default.div `
	overflow: hidden;
`;
exports.FillTabsListContainer = styled_1.default.div `
	${common_1.scrollStyle}

	display: flex;
	gap: 7px;

	padding: 0 20px;
	${(0, utils_1.Larger)((0, react_1.css) `
		padding: 0;
	`)}
`;
exports.ItemWrapper = styled_1.default.div `
	cursor: pointer;
	padding: 8px 12px;
	min-width: fit-content;
	border-radius: 8px;
	${(0, TextStyles_1.title4)()}

	${({ colorType, status }) => {
    const { textColor, containerColor } = (0, GenerateColorStyle_1.fillTabColorStyle)(colorType)[status];
    return (0, react_1.css) `
			color: ${textColor};
			background: ${containerColor};
		`;
}}
`;
