"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VirtualPlaceHolderSevenTypeInput = exports.FakeSecurityInput = exports.VirtualPlaceHolder = exports.SecurityPlaceHolder = exports.FakeInputWrapper = exports.GenderNumberInput = exports.Hyphen = exports.BirthInput = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const TextStyles_1 = require("../../../core/TextStyles");
const Colors_1 = require("../../../core/Colors");
const react_1 = require("@emotion/react");
const constant_1 = require("../common/InputFrame/constant");
const index_styled_1 = require("../common/InputFrame/index.styled");
const CommonTypo = (0, react_1.css) `
	${TextStyles_1.typography.title1}
`;
const CommonPaddingStyle = ({ hasLabel }) => hasLabel &&
    (0, react_1.css) `
		padding: ${constant_1.INNER_POSITION_TOP.hasLabel}px 0 ${constant_1.INNER_POSITION_BOTTOM.hasLabel}px 0;
	`;
exports.BirthInput = styled_1.default.input `
	${CommonTypo};
	${CommonPaddingStyle};

	padding-left: ${constant_1.INNER_POSITION_LEFT}px;

	width: ${({ focused }) => (focused ? '150px' : '100%')};
	height: 100%;
	border: none;
	background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.white, '0%')};

	&:focus {
		outline: none;
	}

	&:disabled {
		color: ${index_styled_1.InputDisabledTextColor};
	}

	&::placeholder {
		${({ hasLabel }) => (0, index_styled_1.NotActivePlaceholderOrLabelStyle)({ hasLabel })}
		top: initial;
	}
`;
exports.Hyphen = styled_1.default.div `
	${CommonTypo};
	${CommonPaddingStyle};

	margin-right: 5px;
	visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};

	${({ disabled }) => disabled &&
    (0, react_1.css) `
			color: ${index_styled_1.InputDisabledTextColor};
		`}
`;
exports.GenderNumberInput = styled_1.default.input `
	${CommonTypo};
	${CommonPaddingStyle};

	width: 20px;
	height: ${constant_1.INPUT_HEIGHT - 2}px;

	outline: none;
	border: none;
	pointer-events: none;

	&:disabled {
		color: ${index_styled_1.InputDisabledTextColor};
	}
`;
exports.FakeInputWrapper = styled_1.default.div `
	${CommonPaddingStyle};

	position: relative;
	height: 65px;
	box-sizing: border-box;
`;
const CommonSecurityInputStyle = (0, react_1.css) `
	height: 23px;
	line-height: 23px;
`;
exports.SecurityPlaceHolder = styled_1.default.div `
	${CommonTypo};
	${CommonSecurityInputStyle};

	color: ${Colors_1.basicColors.gray200};
	position: absolute;
	z-index: 1;
	visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
	pointer-events: none;
`;
exports.VirtualPlaceHolder = styled_1.default.div `
	${CommonTypo};
	${CommonSecurityInputStyle};

	position: absolute;
	pointer-events: none;
	z-index: 2;
	color: ${({ disabled }) => (disabled ? index_styled_1.InputDisabledTextColor : Colors_1.basicColors.gray900)};
`;
exports.FakeSecurityInput = (0, styled_1.default)(exports.BirthInput) `
	${CommonSecurityInputStyle};

	width: 105px;
	padding: 0;
	color: transparent !important;
	caret-color: transparent !important;

	&:focus {
		outline: none;
	}
`;
exports.VirtualPlaceHolderSevenTypeInput = styled_1.default.div `
	${CommonSecurityInputStyle};
	color: ${({ disabled }) => (disabled ? index_styled_1.InputDisabledTextColor : Colors_1.basicColors.gray900)};

	visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
	pointer-events: all;
`;
