"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Scroll = exports.Fixed = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const common_1 = require("../../../style/common");
const TextStyles_1 = require("../../../core/TextStyles");
const utils_1 = require("../../../utils");
const Colors_1 = require("../../../core/Colors");
exports.Fixed = {
    Item: styled_1.default.div `
		display: inline-block;
		padding-top: 15px;
		padding-bottom: 11px;
		cursor: pointer;
		text-align: center;

		flex-grow: 1;

		position: relative;
		${({ active, colorType }) => active
        ? (0, react_1.css) `
						${(0, TextStyles_1.headline6)({ color: (0, utils_1.textTabColorStyle)(colorType).on.textColor })};
						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).on.barColor};
				  `
        : (0, react_1.css) `
						${(0, TextStyles_1.title3)({ color: (0, utils_1.textTabColorStyle)(colorType).off.textColor })};
						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).off.barColor};
				  `};
	`,
    Wrapper: styled_1.default.div `
		display: flex;
		gap: 0px;

		width: 100%;
		background-color: transparent;

		white-space: nowrap;

		border-bottom: 1px solid ${Colors_1.basicColors.gray50};
	`,
};
exports.Scroll = {
    Item: styled_1.default.div `
		display: inline-block;
		padding: 16px 0;
		cursor: pointer;
		text-align: center;

		min-width: max-content;

		position: relative;
		${({ active, colorType }) => active
        ? (0, react_1.css) `
						${(0, TextStyles_1.headline6)({ color: (0, utils_1.textTabColorStyle)(colorType).on.textColor })};
						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).on.barColor};
				  `
        : (0, react_1.css) `
						${(0, TextStyles_1.title3)({ color: (0, utils_1.textTabColorStyle)(colorType).off.textColor })};
						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).off.barColor};
				  `};
	`,
    Wrapper: styled_1.default.div `
		${common_1.scrollStyle}

		display: flex;
		gap: 30px;

		width: 100%;
		background-color: transparent;

		white-space: nowrap;

		${(0, utils_1.Smaller)((0, react_1.css) `
			/* Mobile) 에만 좌우 여백 추가  */
			padding-left: 20px;
			padding-right: 20px;
		`)}

		border-bottom: 1px solid ${Colors_1.basicColors.gray50};
	`,
};
