"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputSizer = exports.Unit = exports.UnitWrapper = exports.InputAndUnitWrapper = exports.InputTag = exports.className = void 0;
const BaseStyled = __importStar(require("../BaseInput/index.styled"));
const styled_1 = __importDefault(require("@emotion/styled"));
const TextStyles_1 = require("../../../core/TextStyles");
const constant_1 = require("../common/InputFrame/constant");
const react_1 = require("@emotion/react");
exports.className = {
    inputTag: 'postfix-input-tag',
};
exports.InputTag = (0, styled_1.default)(BaseStyled.InputTag) `
	background-color: transparent;
	padding-right: 0;
	border-radius: 0;
	height: ${constant_1.INPUT_HEIGHT}px; /** input, unit 아랫선 맞추기 */
`;
exports.InputAndUnitWrapper = styled_1.default.div `
	display: flex;
	width: 100%;
`;
exports.UnitWrapper = styled_1.default.div `
	display: block;
	position: relative;
	flex: 1;
`;
exports.Unit = styled_1.default.div `
	position: absolute;

	${({ hasLabel }) => hasLabel
    ? (0, react_1.css) `
					top: ${constant_1.INNER_POSITION_TOP.hasLabel}px;
			  `
    : (0, react_1.css) `
					top: ${constant_1.INNER_POSITION_TOP.noLabel}px;
			  `}
`;
/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
exports.InputSizer = styled_1.default.div `
	display: inline-grid;
	flex: none;

	${({ focused }) => focused &&
    (0, react_1.css) `
			width: fit-content;
			padding-right: 4px;
		`}

	&::after {
		content: '${({ displayValue }) => displayValue + ' '}';

		visibility: hidden;
		white-space: pre-wrap;
		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
		padding-left: ${constant_1.INNER_POSITION_LEFT + 5}px;
		${TextStyles_1.typography.title1}
	}

	&::after,
	.${exports.className.inputTag} {
		grid-area: 1 / 2;
		resize: none;
		background: none;
		appearance: none;
		border: none;

		-webkit-appearance: none;
		-ms-appearance: none;
		-moz-appearance: none;
	}
`;
