/**
 * Booking Calendar
 * 
 * Styles for the litepicker javascript
 *
 */
@use "../mixins/calendar";
@use "../../../global/sass/partials/extends";

:root {
	--litepickerBgColor: transparent;

	--litepickerMonthHeaderTextColor: var(--commonsbooking-textcolor-dark);
	--litepickerMonthButton: #9e9e9e;
	--litepickerMonthButtonHover: #2196f3;
	--litepickerDayWidth: 36px;
	--litepickerMonthWidth: calc(var(--litepickerDayWidth) * 7); // 7 days
	--litepickerMonthWeekdayColor: var(--commonsbooking-textcolor-light);

	--litepickerDayColor: var(--commonsbooking-textcolor-dark);
	--litepickerDayColorBg: var(--commonsbooking-color-success);
	--litepickerDayColorHover: var(--commonsbooking-color-secondary);
	--litepickerDayIsTodayColor: var(--commonsbooking-textcolor-dark);
	--litepickerDayIsInRange: #2096f3;
	--litepickerDayIsLockedColor: var(--commonsbooking-textcolor-light);
	--litepickerDayIsLockedColorBg: var(--commonsbooking-color-greyedout);
	--litepickerDayIsHolidayColor: #000000;
	--litepickerDayIsHolidayColorBg: var(--commonsbooking-color-holiday);
	--litepickerDayIsPartiallyLockedColor: #333;
	--litepickerDayIsPartiallyLockedColorBgOne: var(--commonsbooking-color-accept);
	--litepickerDayIsPartiallyLockedColorBgTwo: var(--commonsbooking-color-error);
	--litepickerDayIsBookedColor: #333;
	--litepickerDayIsBookedColorBg: var(--commonsbooking-color-error);
	--litepickerDayIsStartColor: #fff;
	--litepickerDayIsStartBg: #2196f3;
	--litepickerDayIsEndColor: #fff;
	--litepickerDayIsEndBg: #2196f3;


	--litepickerButtonCancelColor: #fff;
	--litepickerButtonCancelBg: #9e9e9e;
	--litepickerButtonApplyColor: #fff;
	--litepickerButtonApplyBg: #2196f3;

	--litepickerButtonResetBtn: #909090;
	--litepickerButtonResetBtnHover: #2196f3;

	--litepickerHighlightedDayColor: #333;
	--litepickerHighlightedDayBg: #ffeb3b;

	--litePickerDayBorderColor: #FFFFFF;
    --litePickerDayTodayBorderColor: #9e9e9e;
}
.show-week-numbers {
	--litepickerMonthWidth: calc(var(--litepickerDayWidth) * 8);
}

.litepicker {

	font-size: 1.2em;
	display: none;
	
	width: 100%; // Fix: calendars would not adjust correctly (one below the other) on mobile

	a {
		text-decoration: none !important;
	}
	
	.container {
		&__main {
			display: flex;
			justify-content: space-around;
			
		}
		&__months {
			@extend .cb-box-inner;

			background: transparent; 
			box-shadow: none;
			display: flex;
			justify-content: center;
			padding: 0;

			width: calc(var(--litepickerMonthWidth) + 10px); // 10px is padding (left 5px, right: 5px)
			box-sizing: content-box;

			&.columns-2 {
				width: calc((var(--litepickerMonthWidth) * 2) + 20px);
			}

			&.columns-3 {
				width: calc((var(--litepickerMonthWidth) * 3) + 30px);
			}

			&.columns-4 {
				width: calc((var(--litepickerMonthWidth) * 4) + 40px);
			}

			&.split-view {
				.month-item {
					&-header {
						.button-previous-month,
						.button-next-month {
							visibility: visible;
						}
					}
				}
			}

			.month-item {
				padding: 5px;
				width: var(--litepickerMonthWidth);
				box-sizing: content-box;

				&-header {
					display: flex;
					justify-content: space-between;
					font-weight: 500;
					padding: 5px 0px;
					text-align: center;
					align-items: center;
					color: var(--litepickerMonthHeaderTextColor);

					div {
						flex: 1;

						> .month-item-name {
							margin-right: 5px;
						}

						> .month-item-year {
							padding: 0;
						}
					}

					.reset-button {
						display: none;
						color: var(--litepickerButtonResetBtn);

						> svg,
						> img {
							fill: var(--litepickerButtonResetBtn);
							pointer-events: none;
						}

						&:hover {
							color: var(--litepickerButtonResetBtnHover);

							> svg {
								fill: var(--litepickerButtonResetBtnHover);
							}
						}
					}

					.button-previous-month,
					.button-next-month {
						visibility: hidden;
						text-decoration: none;
						color: var(--litepickerMonthButton);
						padding: 3px 5px;
						border-radius: 3px;
						transition: color 0.3s, border 0.3s;
						cursor: default;

						> svg,
						> img {
							fill: var(--litepickerMonthButton);
							pointer-events: none;
						}

						&:hover {
							color: var(--litepickerMonthButtonHover);

							> svg {
								fill: var(--litepickerMonthButtonHover);
							}
						}
					}
				}

				&-weekdays-row {
					display: flex;
					justify-self: center;
					justify-content: flex-start;
					color: var(--litepickerMonthWeekdayColor);

					> div {
						padding: 5px 0;
						font-size: 85%;
						flex: 1;
						width: var(--litepickerDayWidth);
						text-align: center;
					}
				}

				&:first-child {
					.button-previous-month {
						visibility: visible;
					}
				}

				&:last-child {
					.button-next-month {
						visibility: visible;
					}
				}

				&.no-previous-month {
					.button-previous-month {
						visibility: hidden;
					}
				}

				&.no-next-month {
					.button-next-month {
						visibility: hidden;
					}
				}
			}
		}

		&__days {
			display: flex;
			flex-wrap: wrap;
			justify-self: center;
			justify-content: flex-start;
			text-align: center;
			box-sizing: content-box;

			> div,
			> a {
				padding: 5px 0;
				width: var(--litepickerDayWidth);
				border-color: var(--litePickerDayBorderColor);
				border-width: 1px;
				text-decoration: none;
			}

			.day-item {
                @include calendar.day-item;
			}

			.week-number {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #9e9e9e;
				font-size: 85%;
			}
		}

		&__footer {
			text-align: right;
			padding: 10px 5px;
			margin: 0 5px;
			background-color: #fafafa;
			box-shadow: inset 0px 3px 3px 0px #ddd;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;

			.preview-date-range {
				margin-right: 10px;
				font-size: 90%;
			}

			.button-cancel {
				background-color: var(--litepickerButtonCancelBg);
				color: var(--litepickerButtonCancelColor);
				border: 0;
				padding: 3px 7px 4px;
				border-radius: 3px;

				> svg,
				> img {
					pointer-events: none;
				}
			}

			.button-apply {
				background-color: var(--litepickerButtonApplyBg);
				color: var(--litepickerButtonApplyColor);
				border: 0;
				padding: 3px 7px 4px;
				border-radius: 3px;
				margin-left: 10px;
				margin-right: 10px;

				&:disabled {
					opacity: 0.7;
				}

				> svg,
				> img {
					pointer-events: none;
				}
			}
		}

		&__tooltip {
			position: absolute;
			margin-top: -4px;
			padding: 4px 8px;
			border-radius: 4px;
			background-color: #fff;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
			white-space: nowrap;
			font-size: 11px;
			pointer-events: none;
			visibility: hidden;

			&:before {
				position: absolute;
				bottom: -5px;
				left: calc(50% - 5px);
				border-top: 5px solid rgba(0, 0, 0, 0.12);
				border-right: 5px solid transparent;
				border-left: 5px solid transparent;
				content: "";
			}

			&:after {
				position: absolute;
				bottom: -4px;
				left: calc(50% - 4px);
				border-top: 4px solid #fff;
				border-right: 4px solid transparent;
				border-left: 4px solid transparent;
				content: "";
			}
		}
	}

	&-open {
		overflow: hidden;
	}

	&-backdrop {
		display: none;
		background-color: #000;
		opacity: 0.3;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

#booking-form {

	#fullDayInfo {
		clear: left;
	}

	span.restrictions {
		width: 100% !important;
	}

	span.restrictions li {
		margin-top: 1em;
		//padding-left: 1em;
		//list-style-type:armenian;
		//margin-left: 1em;
	}

	#resetPicker {
		font-size: var(--commonsbooking-font-size-normal);
		padding: var(--commonsbooking-spacer-small);
		display: none;
		cursor: pointer;
	}

	#calendarNotice {
		display: none;
		font-size: var(--commonsbooking-font-size-normal);
	}
}
