"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Children = exports.TippyWrapper = exports.CloseButtonWrapper = exports.TippyContentAndCloseButtonWrapper = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const react_1 = __importDefault(require("@tippyjs/react"));
const TextStyles_1 = require("../../../core/TextStyles");
exports.TippyContentAndCloseButtonWrapper = styled_1.default.div `
	display: flex;
	justify-content: space-between;
	gap: 5px;
`;
exports.CloseButtonWrapper = styled_1.default.div `
	width: 16px;
	height: 100%;

	svg {
		/* close buttons */
		cursor: pointer;
		width: 16px;
		height: 16px;
	}
`;
exports.TippyWrapper = (0, styled_1.default)(react_1.default) `
	background-color: ${({ backgroundColor }) => backgroundColor};
	border-radius: 8px;
	border: 1px solid ${({ borderColor }) => borderColor};
	transform: translate3d(0, 0, 0);

	& > .tippy-content {
		/* 툴팁 내부 박스 */
		${(0, TextStyles_1.body2)()}
		color: ${({ contentColor }) => contentColor} !important;

		position: relative;
		white-space: pre-wrap;
		padding: 12.5px 15px;

		#custom-tippy-content-close-btn {
			/* TODO: 클릭 후 닫히기 기능 점검 필요 */
			cursor: pointer;
		}
	}

	& > .tippy-svg-arrow {
		& > svg {
			transform: translate3d(0, 0, 0);
		}
	}

	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow {
		bottom: 0;
	}
	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow:after,
	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow > svg {
		top: 16px;
		transform: rotate(180deg);
	}
	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow {
		top: 0;
	}
	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow > svg {
		bottom: 16px;
	}
	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow {
		right: 0;
	}
	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow:after,
	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow > svg {
		transform: rotate(90deg);
		top: calc(50% - 3px);
		left: 11px;
	}
	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow {
		left: 0;
	}
	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow:after,
	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow > svg {
		transform: rotate(-90deg);
		top: calc(50% - 3px);
		right: 11px;
	}
	.tippy-svg-arrow {
		width: 16px;
		height: 16px;
		fill: #333;
		text-align: initial;
	}
	.tippy-svg-arrow,
	.tippy-svg-arrow > svg {
		position: absolute;
	}
`;
exports.Children = styled_1.default.div `
	display: inline-block;
	${({ isChildrenFullWidth }) => isChildrenFullWidth && 'width: 100%'};
`;
