"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Mobile = exports.Desktop = exports.IconWrapper = exports.Item = exports.ItemList = exports.ListBottomMargin = exports.ItemListWrapper = exports.Wrapper = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const utils_1 = require("../../utils");
const TextStyles_1 = require("../../core/TextStyles");
const Colors_1 = require("../../core/Colors");
const style_constants_1 = require("../../constants/style.constants");
exports.Wrapper = styled_1.default.div `
	& > div > .select-box {
		cursor: pointer;
	}
	position: relative;
`;
exports.ItemListWrapper = styled_1.default.div `
	position: absolute;
	z-index: ${style_constants_1.zIndex.basicLayer + 1};
	width: 100%;
	height: max-content;

	${(0, utils_1.Larger)((0, react_1.css) `
		top: 70px;
	`)}
`;
exports.ListBottomMargin = styled_1.default.div `
	height: 80px;
	pointer-events: none;
`;
exports.ItemList = styled_1.default.div `
	box-shadow: 0 2px 10px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.black, '20%')};
	background-color: ${Colors_1.basicColors.white};
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: ${65 * 4.5}px;
	overflow-y: scroll;
`;
exports.Item = styled_1.default.div `
	width: 100%;
	height: 50px;
	padding: 15px 25px;
	cursor: pointer;
	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })};
	background-color: ${Colors_1.basicColors.white};

	&:first-of-type {
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	&:last-of-type {
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	&:hover {
		background-color: ${Colors_1.basicColors.gray25};
	}

	&:active {
		background-color: ${Colors_1.basicColors.gray50};
	}
`;
exports.IconWrapper = styled_1.default.div `
	position: absolute;
	z-index: 10;
	right: 20px;
	top: ${({ rotateArrow }) => (rotateArrow ? '18px' : '20px')};
	cursor: pointer;
	transform: ${({ rotateArrow }) => (rotateArrow ? 'rotate(180deg)' : 'rotate(0)')};
	pointer-events: none;
`;
exports.Desktop = styled_1.default.div `
	${(0, utils_1.Smaller)((0, react_1.css) `
		display: none;
	`)}
`;
exports.Mobile = styled_1.default.div `
	${(0, utils_1.Larger)((0, react_1.css) `
		display: none;
	`)}
`;
