"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Wrapper = exports.Item = 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.Item = styled_1.default.div `
	display: inline-block;
	padding: 16px 0;
	cursor: pointer;
	text-align: center;

	${({ widthPerItem, tabType }) => {
    switch (tabType) {
        case 'fixed':
            return (0, react_1.css) `
					width: ${widthPerItem}%;
				`;
        case 'scroll':
            return (0, react_1.css) `
					min-width: max-content;
				`;
    }
}};

	${({ active }) => active
    ? (0, react_1.css) `
					${(0, TextStyles_1.headline6)()};
					border-bottom: 2px solid ${Colors_1.basicColors.gray900};
			  `
    : (0, react_1.css) `
					${(0, TextStyles_1.title3)({ color: Colors_1.basicColors.gray100 })};
			  `};

	&:first-of-type {
		margin-left: 20px;
		${(0, utils_1.Larger)((0, react_1.css) `
			margin-left: 0;
		`)}
	}

	margin-right: ${({ tabType }) => (tabType === 'fixed' ? '10px' : '30px')};

	&:last-of-type {
		margin-right: 20px;
		${(0, utils_1.Larger)((0, react_1.css) `
			margin-right: 0;
		`)}
	}
`;
exports.Wrapper = styled_1.default.div `
	width: 100%;
	background-color: transparent;

	overflow-x: ${({ tabType }) => (tabType === 'fixed' ? 'hidden' : 'scroll')};
	white-space: nowrap;

	${(0, utils_1.Smaller)((0, react_1.css) `
		/* Mobile) 스크롤바 미노출 */
		scrollbar-width: none; /* 파이어폭스 */

		::-webkit-scrollbar {
			display: none; /* 크롬, 사파리, 오페라, 엣지 */
		}
	`)}
`;
