"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlIconCircleWrapper = exports.ControlIconGradientBackground = exports.ControlIconContainer = exports.ChipListContainer = exports.OutterContainer = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const core_1 = require("../../../core");
const react_1 = require("@emotion/react");
const index_styled_1 = require("../ChipItem/index.styled");
const common_1 = require("../../../style/common");
const zIndex = {
    ControlIconContainer: 2,
};
const ControlIconWidthPx = index_styled_1.CHIP_ITEM_HEIGHT;
const ControlIconGradientPx = 25;
const CongrolIconBackground = core_1.basicColors.white;
exports.OutterContainer = styled_1.default.div `
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;

	width: 100%;
`;
exports.ChipListContainer = styled_1.default.div `
	${common_1.scrollStyle}

	display: flex;
	gap: 5px;
	z-index: ${zIndex.ControlIconContainer - 1};

	${({ hasIconArea }) => hasIconArea &&
    (0, react_1.css) `
			padding-left: ${ControlIconWidthPx + 8}px;
		`}
	padding-right: 20px;
`;
exports.ControlIconContainer = styled_1.default.div `
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;

	z-index: ${zIndex.ControlIconContainer};

	background-color: ${CongrolIconBackground};
	width: ${ControlIconWidthPx}px;
	height: ${ControlIconWidthPx}px;
`;
exports.ControlIconGradientBackground = styled_1.default.div `
	width: ${ControlIconGradientPx}px;
	height: 100%;

	/* TODO: 컬러, 범위, 여백 수정 필요 */
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.01) 100%);

	position: absolute;
	left: ${ControlIconWidthPx}px;
	top: 0;
`;
exports.ControlIconCircleWrapper = styled_1.default.div `
	width: 100%;
	height: 100%;
	border-radius: 50%;

	background: ${core_1.basicColors.gray50};
	display: flex;
	align-items: center;
	justify-content: center;

	position: absolute;
	left: 0;
	top: 0;
`;
