"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ErrorText = exports.InputLabel = exports.InputWrapper = exports.InputDisabledTextColor = exports.NotActivePlaceholderOrLabelStyle = 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 constant_1 = require("./constant");
const NotActivePlaceholderOrLabelStyle = ({ hasLabel }) => (0, react_1.css) `
	${TextStyles_1.typography.title1}

	position: absolute;
	top: ${hasLabel ? constant_1.INNER_POSITION_TOP.hasLabel : constant_1.INNER_POSITION_TOP.noLabel}px;
	left: ${constant_1.INNER_POSITION_LEFT}px;
	color: ${Colors_1.basicColors.gray100};
`;
exports.NotActivePlaceholderOrLabelStyle = NotActivePlaceholderOrLabelStyle;
exports.InputDisabledTextColor = Colors_1.basicColors.gray200;
exports.InputWrapper = styled_1.default.div `
	width: 100%;
	height: ${constant_1.INPUT_HEIGHT}px;
	position: relative;
	box-sizing: border-box;
	background-color: ${Colors_1.basicColors.white};
	border: 1px solid ${({ active }) => (active ? Colors_1.basicColors.gray600 : Colors_1.basicColors.gray50)};
	border-radius: 10px;
	display: flex;
	align-items: center;

	${({ error }) => error &&
    (0, react_1.css) `
			border: 1px solid ${Colors_1.basicColors.red400};
		`}

	${({ active }) => active &&
    (0, react_1.css) `
			box-shadow: 0 2px 5px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.gray900, '10%')};
		`}

	${({ disabled, error }) => !error
    ? !disabled
        ? (0, react_1.css) `
						&:hover {
							border: 1px solid ${Colors_1.basicColors.gray600};
							box-shadow: 0 2px 5px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.gray900, '10%')};
						}
						&:focus {
							border: 1px solid ${Colors_1.basicColors.gray600};
							outline: none;
						}
				  `
        : (0, react_1.css) `
						background-color: ${Colors_1.basicColors.gray25};
						color: ${exports.InputDisabledTextColor};
				  `
    : null};
`;
exports.InputLabel = styled_1.default.label `
	position: absolute;
	color: ${Colors_1.basicColors.gray200};
	left: ${constant_1.INNER_POSITION_LEFT}px;
	pointer-events: none;
	transition-property: font-size, transform;
	transition-duration: 0.4s;

	${({ active }) => !active
    ? (0, react_1.css) `
					bottom: 50%;
					transform: translate(0%, 50%);
					${TextStyles_1.typography.title1}
			  `
    : (0, react_1.css) `
					top: 11px;
					${TextStyles_1.typography.body2}
			  `};
`;
exports.ErrorText = styled_1.default.div `
	bottom: 0px;
	position: relative;
	${TextStyles_1.typography.body2};
	color: ${Colors_1.basicColors.red400};
	margin-top: 10px;
	left: 5px;
`;
