$orange: #fb3b11;
$orange_light: #f9694c;
$orange_lightest: #fdd28a;
$navy: #011e2f;

$dark_navy: #011826;
$darkest_navy: #011e2f;
$white: #ffffff;
$black: #1e1e1e;

$grey: #f5f5f5;
$medium_grey: #dcdcdc;
$dark_grey: #5b6670;

$charcoal: #252525;
$light_charcoal: #696969;
$lightest_charcoal: #c6c6c6;


$yellow: #f9d74d;
$yellow_light: #ffe57a;
$pink: #f7a289;
$teal: #3ab18a;
$teal_light: #5ed5b7;
$teal_lightest: #7ee0d8;
$cool_grey: #f2f2f2;

$success: #28a744;
$danger: #dc3644;

$booked: rgba($lightest_charcoal, 0.3);

.sas-calendar {
	.calendar-container {
		margin: 0 -15px;
		text-align: center;

		.calendar-month {
			background-color: $white;
			margin: 5px 0;
			padding: 0;
			min-width: 296px;
			height: 100%;

			.calendar-nav {
				.calendar-nav-arrow {
					color: $charcoal;
					font-size: 18px;
					width: 27px;
					aspect-ratio: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 2px;

					&.disabled {
						color: $medium_grey;
					}
				}

				.calendar-month-title {
					padding: 5px;
					margin: 0;
				}
			}

			.calendar-month-body {
				* {
					font-size: 14px;
				}

				.calendar-month-week-header {
					font-weight: bold;
					// display: flex;
					// flex-wrap: nowrap;
					// .calendar-month-week-grid {
					// 	margin: 0 10px;
					// }
					display: grid;
					grid-template-columns: repeat(7, 1fr);

					&:after {
						content: '';
						display: table;
						clear: both;
					}
				}

				.calendar-month-days {
					display: grid;
					grid-template-columns: repeat(7, 1fr);

					.calendar-month-week-grid {
						//float: left;
						//width: 14.28%;
						// padding: 6px 6px;
						//padding: 12px 3px;
						display: flex;
						width: 100%;
						justify-content: center;
						align-items: center;

						.calendar-month-week-grid-day-parent {
							width: 100%;

							.calendar-month-week-grid-day {
								cursor: default;
								padding: 8px 0;
								border: 1px solid transparent;
								border-radius: 50%;
								background-origin: border-box;
								aspect-ratio: 1;
								display: flex;
								align-items: center;
								justify-content: center;
								line-height: 1;

								&.blocked:not(.blockedFull):not(.booked) {
									&.blockedAfternoon {
										&.booked {
											background-image: linear-gradient(
													135deg,
													$white 50%,
													$booked 50%
											);
										}
									}

									&.blockedMorning {
										&.booked {
											cursor: not-allowed;
											background-image: linear-gradient(
													135deg,
													$booked 50%,
													$white 50%
											);
										}
									}
								}

								&.booked {
									&:not(.blocked) {
										&.checkout:not(.checkin):not(
												.isSelected
											),
										&.checkin:not(.checkout):not(
												.isSelected
											) {
											cursor: pointer;

											&.bookingAfternoon {
												background-image: linear-gradient(
														135deg,
														$white 50%,
														$booked 50%
												);
											}

											&.bookingMorning {
												background-image: linear-gradient(
														135deg,
														$booked 50%,
														$white 50%
												);
											}
										}
									}

									&.blocked {
										cursor: not-allowed;
										background-color: $booked;
										background-image: none;
									}
								}
							}

							.blocked:not(.booked) {
								background-color: $booked;
								background-blend-mode: soft-light;
								cursor: not-allowed;

								&.blockedAfternoon:not(.blockedFull):not(
										.restricted
									) {
									cursor: pointer;
									background-color: transparent;
									background-image: linear-gradient(
											315deg,
											$booked 50%,
											transparent 50%
									);
								}

								&.blockedMorning:not(.blockedFull):not(
										.restricted
									) {
									cursor: pointer;
									background-color: transparent;
									background-image: linear-gradient(
											135deg,
											$booked 50%,
											transparent 50%
									);
								}

								&.blockedFull {
									color: $light_charcoal;
									cursor: not-allowed;
									background-color: $booked;
									background-blend-mode: soft-light;
								}
							}

							.today {
								border-color: $orange;
								color: $orange;
								font-weight: bolder;
								// background-color: $white;
							}

							.restricted {
								background-color: $white;
							}

							.booked:not(.blocked) {
								background-color: $booked;
								background-blend-mode: soft-light;
								cursor: not-allowed;

								&.checkin {
									&.bookingAfternoon {
										background-color: transparent;
										background-image: linear-gradient(
												315deg,
												$booked 50%,
												transparent 50%
										);
									}
								}

								&.checkout {
									&.bookingMorning {
										background-color: transparent;
										background-image: linear-gradient(
												135deg,
												$booked 50%,
												transparent 50%
										);
									}

									&.checkin {
										background-color: $booked;
										background-image: none;
									}
								}

								&.cleaning {
									&.bookingMorning {
										&.cleaningAfternoon {
											background-color: transparent;
											background-image: linear-gradient(
													135deg,
													$booked 49%,
													transparent 51%
											),
											linear-gradient(
													315deg,
													$yellow 49%,
													transparent 51%
											);
										}
									}
								}
							}

							.cleaning {
								background-color: $yellow;
								background-blend-mode: soft-light;
								cursor: not-allowed;

								&.checkin {
									&.cleaningAfternoon {
										background-color: transparent;
										background-image: linear-gradient(
												315deg,
												$yellow 50%,
												transparent 50%
										);
									}
								}

								&.checkout {
									&.cleaningMorning {
										background-color: transparent;
										background-image: linear-gradient(
												135deg,
												$yellow 50%,
												transparent 50%
										);
										cursor: pointer;
									}
								}
							}
						}
					}
				}

				&:after {
					content: '';
					display: table;
					clear: both;
				}

				&.picker,
				&.notDetailed {
					.calendar-month-week-grid {
						.restricted {
							background-color: transparent;
						}

						.booked {
							cursor: not-allowed;

							&.checkin {
								&.bookingAfternoon {
									cursor: not-allowed;
								}
							}

							&.checkout {
								&.bookingMorning {
									cursor: pointer;
								}

								&.checkin {
									cursor: not-allowed;
								}
							}

							&.cleaning {
								&.bookingMorning {
									&.cleaningAfternoon {
										cursor: pointer;
									}
								}
							}
						}
					}
				}

				&.picker {
					.calendar-month-week-grid {
						.calendar-month-week-grid-day {
							&.isRange {
								&:not(.booked):not(.blocked) {
									background-color: rgba(
											$orange,
											0.4
									) !important;
									color: $white;
								}

								&.booked {
									&.checkout:not(.checkin):not(.isSelected) {
										&.bookingMorning {
											background-image: linear-gradient(
													135deg,
													$booked 50%,
													$orange 50%
											);
										}
									}
								}
							}

							&.isSelected {
								&:not(.booked):not(.blocked) {
									color: $white;
									background-color: $orange !important;
								}

								&.booked {
									&.checkout:not(.checkin),
									&.checkin:not(.checkout) {
										&.bookingAfternoon:not(.blocked) {
											background-image: linear-gradient(
													135deg,
													$orange 50%,
													$booked 50%
											);
										}

										&.bookingMorning:not(.blocked) {
											background-image: linear-gradient(
													135deg,
													$booked 50%,
													$orange 50%
											);
										}
									}
								}

								&.blocked {
									&.blockedAfternoon:not(.booked):not(
											.restricted
										) {
										background-image: linear-gradient(
												135deg,
												$orange 50%,
												$booked 50%
										);
									}

									&.blockedMorning:not(.booked):not(
											.restricted
										) {
										background-image: linear-gradient(
												135deg,
												$booked 50%,
												$orange 50%
										);
									}
								}
							}

							&:not(.booked):not(.blocked):not(.isSelected):not(
									.restricted
								).afterToday {
								cursor: pointer;

								&:not(.isRange) {
									background-color: $white;
								}

								&:hover {
									background-color: $orange;
									color: $white;
								}
							}

							&.restricted.afterToday:not(.blocked):not(
									.isRange
								):not(.isSelected) {
								color: $light_charcoal;
								background-color: rgba($lightest_charcoal, 0.3);
							}

							&.blocked:not(.blockedFull):not(.booked) {
								&.blockedAfternoon {
									&.booked {
										background-image: linear-gradient(
												135deg,
												$white 50%,
												$booked 50%
										);
									}

									&:not(.booked) {
										&:hover {
											background-image: linear-gradient(
													135deg,
													$orange 50%,
													$booked 50%
											);
										}
									}
								}

								&.blockedMorning {
									&.booked {
										cursor: not-allowed;
										background-image: linear-gradient(
												135deg,
												$booked 50%,
												$white 50%
										);
									}

									&:not(.booked):not(.restricted) {
										&:hover {
											background-image: linear-gradient(
													135deg,
													$booked 50%,
													$orange 50%
											);
										}
									}
								}
							}

							&.booked {
								&:not(.blocked) {
									&.checkout:not(.checkin):not(.isSelected),
									&.checkin:not(.checkout):not(.isSelected) {
										cursor: pointer;

										&.bookingAfternoon {
											background-image: linear-gradient(
													135deg,
													$white 50%,
													$booked 50%
											);

											&:hover {
												background-image: linear-gradient(
														135deg,
														$orange 50%,
														$booked 50%
												);
											}
										}

										&.bookingMorning {
											background-image: linear-gradient(
													135deg,
													$booked 50%,
													$white 50%
											);

											&:hover {
												background-image: linear-gradient(
														135deg,
														$booked 50%,
														$orange 50%
												);
											}
										}
									}
								}

								&.blocked {
									cursor: not-allowed;
									background-color: $booked;
									background-image: none;
								}
							}
						}
					}

					&.isCheckouting {
						.calendar-month-week-grid {
							.calendar-month-week-grid-day {
								&.restricted.afterToday.validCheckout:not(
										.blocked
									):not(.isRange) {
									background-color: $white;

									&:hover {
										background-color: $orange;
										color: $white;
									}
								}
							}
						}
					}
				}
			}

			&.dark {
				background-color: $medium_grey;

				.calendar-nav {
					.calendar-nav-arrow {
						color: $charcoal;

						&.disabled {
							color: $dark_grey;
						}
					}
				}

				.calendar-month-body {
					.calendar-month-week-grid {
						.calendar-month-week-grid-day {
							border-color: $medium_grey;
						}

						.today {
							border-color: $booked;
						}

						.restricted {
							background-color: $grey;
						}
					}
				}
			}

			&.light {
				background-color: $white;

				.calendar-nav {
					.calendar-nav-arrow {
						color: $charcoal;

						&.disabled {
							color: $dark_grey;
						}
					}
				}

				.calendar-month-body {
					.calendar-month-week-grid {
						.calendar-month-week-grid-day {
							border-color: $white;
						}

						.today {
							border-color: $booked;
						}

						.restricted {
							background-color: $grey;
						}
					}
				}
			}
		}
	}
}

.calendar-active-field {
	.btn-display {
		color: #ff5314 !important;
	}
}

.sas-calendar-popover {
	max-width: 638px;

	.popover-body {
		padding: 8px 22px;

		.calendar-container {
			> .row > .col {
				flex-grow: 0;
				flex-shrink: 1;
			}
		}
	}
}
