"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RangeEndFocusDateOfMonthWrapper = exports.RangeStartFocusDateOfMonthWrapper = exports.SingleFocusDateOfMonthWrapper = exports.DisabledDateOfMonthWrapper = exports.ActiveDateOfMonthWrapper = exports.NoneDateOfMonthWrapper = exports.InnerWrapper = exports.RangeBackgroundWrapper = exports.CommonDateOfMonthWrapper = exports.CommonDateOfMonthSizeStyle = exports.Dot = exports.className = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const Colors_1 = require("../../../../core/Colors");
const react_1 = require("@emotion/react");
const utils_1 = require("../../../../utils");
exports.className = {
    innerWrapper: 'datepicker-inner-wrapper',
    dot: 'datepicker-dot',
    rangeBackgroundWrapper: 'datepicker-range-background-wrapper',
};
const SIZE_PERCENT = 100;
exports.Dot = styled_1.default.div `
	width: 5px;
	height: 5px;
	border-radius: 50%;

	position: absolute;
	left: 47%;
	bottom: 5.86px;
`;
exports.CommonDateOfMonthSizeStyle = (0, react_1.css) `
	width: ${SIZE_PERCENT}%;
	height: ${SIZE_PERCENT}%;
`;
exports.CommonDateOfMonthWrapper = styled_1.default.div `
	${exports.CommonDateOfMonthSizeStyle};
	position: relative;
	/* height가 안 정해진 상태에서 height = width 적용되는 방법 */
	padding-bottom: ${SIZE_PERCENT}%;
`;
exports.RangeBackgroundWrapper = styled_1.default.div `
	${exports.CommonDateOfMonthSizeStyle};

	position: absolute;
	left: 0;

	${({ rangeBackgroundColor }) => rangeBackgroundColor &&
    (0, react_1.css) `
			background: ${rangeBackgroundColor};
		`}
`;
exports.InnerWrapper = styled_1.default.div `
	${exports.CommonDateOfMonthSizeStyle};

	position: absolute;
	left: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	border-radius: 50%;

	${({ circleBackgroundColor }) => circleBackgroundColor &&
    (0, react_1.css) `
			background-color: ${circleBackgroundColor};
		`};
`;
exports.NoneDateOfMonthWrapper = (0, styled_1.default)(exports.CommonDateOfMonthWrapper) ``;
exports.ActiveDateOfMonthWrapper = (0, styled_1.default)(exports.CommonDateOfMonthWrapper) `
	cursor: pointer;

	.${exports.className.innerWrapper} {
		:hover {
			background-color: ${({ colorType }) => (0, utils_1.datepickerColorStyle)(colorType).hoverContainerColor};
		}
	}

	.${exports.className.dot} {
		background-color: ${Colors_1.basicColors.gray200};
	}
`;
exports.DisabledDateOfMonthWrapper = (0, styled_1.default)(exports.CommonDateOfMonthWrapper) `
	cursor: not-allowed;

	.${exports.className.dot} {
		background-color: ${Colors_1.basicColors.gray100};
	}
`;
exports.SingleFocusDateOfMonthWrapper = (0, styled_1.default)(exports.CommonDateOfMonthWrapper) `
	cursor: pointer;

	.${exports.className.dot} {
		background-color: ${Colors_1.basicColors.white};
	}
`;
exports.RangeStartFocusDateOfMonthWrapper = (0, styled_1.default)(exports.SingleFocusDateOfMonthWrapper) `
	.${exports.className.rangeBackgroundWrapper} {
		left: ${SIZE_PERCENT / 2}%;
		width: ${SIZE_PERCENT / 2}%;
	}
`;
exports.RangeEndFocusDateOfMonthWrapper = (0, styled_1.default)(exports.SingleFocusDateOfMonthWrapper) `
	.${exports.className.rangeBackgroundWrapper} {
		width: ${SIZE_PERCENT / 2}%;
	}
`;
