"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DecorationItemWrapper = exports.InputTag = 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("../common/InputFrame/constant");
const index_styled_1 = require("../common/InputFrame/index.styled");
exports.InputTag = styled_1.default.input `
	${TextStyles_1.typography.title1};

	box-sizing: border-box;
	width: 100%;
	height: ${constant_1.INPUT_HEIGHT}px;

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

	${({ hasLabel }) => hasLabel
    ? (0, react_1.css) `
					padding-top: ${constant_1.INNER_POSITION_TOP.hasLabel}px;
					padding-bottom: ${constant_1.INNER_POSITION_BOTTOM.hasLabel}px;
			  `
    : (0, react_1.css) `
					padding-bottom: ${constant_1.INNER_POSITION_BOTTOM.noLabel}px;
			  `};

	color: ${Colors_1.basicColors.gray900};
	transition: all 0.2s;
	border: none;
	background-color: transparent;
	-webkit-appearance: none;

	&::-webkit-date-and-time-value {
		text-align: initial;
	}

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	${({ decoration }) => decoration
    ? (0, react_1.css) `
					border-top-left-radius: 10px;
					border-bottom-left-radius: 10px;
			  `
    : (0, react_1.css) `
					border-radius: 10px;
			  `}

	&:disabled {
		color: ${index_styled_1.InputDisabledTextColor};
		-webkit-text-fill-color: ${Colors_1.basicColors.gray200};
		opacity: 1;
	}

	&:focus {
		outline: none;
	}

	&::placeholder {
		${({ hasLabel }) => (0, index_styled_1.NotActivePlaceholderOrLabelStyle)({ hasLabel })}
	}
`;
exports.DecorationItemWrapper = styled_1.default.div `
	height: 100%;
	display: flex;
	align-items: center;
	padding-right: 15px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: ${({ disabled }) => (disabled ? Colors_1.basicColors.gray25 : Colors_1.basicColors.white)};
`;
