/**********************/
/* XIAHDEH - CALENDAR */
/**********************/

/* GLOBAL */
.calendar {
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: relative;
	width: 100%;
	margin: auto;
	padding: 15px;
	background: var(--gray-color, #f5f8f9);
}
.calendar nav.month,
.calendar nav.week,
.calendar nav.days {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 100%;
	font-size: calc(100% - 2px);
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

/* MONTH */
.calendar nav.month {
	align-items: stretch;
	gap: 5px;
}
.calendar nav.month button.month {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50px;
	color: inherit;
	background-color: #fff;
	aspect-ratio: 1 / 1;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .05);
	font-weight: bold;
}
.calendar nav.month div.month.current {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 150px);
	background-color: #fff;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .05);
}

/* WEEK */
.calendar nav.week div {
	width: calc(100% * (57 / 450));
}

/* DAY */
.calendar nav.days {
	flex-wrap: wrap;
}
.calendar .days > * {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: calc(100% * (57 / 450));
	margin-top: 1.5%;
	padding: 5px 0;
	aspect-ratio: 1 / 1;
	font-weight: 700;
	overflow: visible;
	transition: all .35s ease;
}
.calendar nav.days .day {
	font-size: calc(100%);
	text-transform: none;
}
.calendar nav.days .day.empty {
	background: #fff;
}
.calendar nav.days .day:not(.empty) {
	color: var(--white-color, white);
	background-color: var(--primary-color, black);
	border: .125em solid var(--white-color, white);
	cursor: pointer;
}
.calendar nav.days .day:not(.empty):hover,
.calendar nav.day .day:not(.empty):focus-within {
	color: var(--white-color, white);
	background-color: var(--secondary-color, black);
}
.calendar nav.days .day nav.events {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	bottom: calc(100% - 1px);
	left: 0;
	width: 20rem;
	height: auto;
	max-height: 192px;
	margin: 0;
	padding: 0;
	color: var(--white-color, white);
	background: var(--black-color, black);
	box-shadow: 0 5px 10px rgba(0, 0, 0, .35);
	opacity: 0;
	overflow: auto;
	text-align: left;
	transition: none;
	visibility: hidden;
	z-index: 1;
}
.days> :nth-child(7n+3) nav.events,
.days> :nth-child(7n+4) nav.events,
.days> :nth-child(7n+5) nav.events {
	left: 50% !important;
	transform: translateX(-50%) !important;
}
.days> :nth-child(7n+6) nav.events,
.days> :nth-child(7n+7) nav.events {
	right: 0 !important;
	left: auto !important;
}
.calendar nav.days .day:hover nav.events,
.calendar nav.days .day:focus-within nav.events {
	opacity: 1;
	visibility: visible;
}
.calendar nav.days .day nav.events a.event {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 5px;
	position: relative;
	width: 100%;
	padding: 5px;
}
.calendar nav.days .day nav.events a.event:hover:after,
.calendar nav.days .day nav.events a.event:focus:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white-color, white);
	opacity: .25;
}
.calendar nav.days .day nav.events a.event .event-image {
	max-width: 25px;
}
.calendar nav.days .day nav.events a.event .event-title {
	color: inherit;
	font-size: calc(100%);
}
.calendar nav.days .day nav.events a.event .event-title .hour {
	font-weight: normal;
}

/* LOADING */
.calendar.loading .loading {
	display: block !important;
}
.calendar.loading:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .25);
	z-index: 1;
}
.calendar .loading {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 80px;
	margin: auto;
}
.calendar .loading div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	background: var(--black-color, black);
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
	border-radius: 50%;
}
.calendar .loading div:nth-child(1) {
	left: 8px;
	animation: calendar-loading-1 0.6s infinite;
}
.calendar .loading div:nth-child(2) {
	left: 8px;
	animation: calendar-loading-2 0.6s infinite;
}
.calendar .loading div:nth-child(3) {
	left: 32px;
	animation: calendar-loading-2 0.6s infinite;
}
.calendar .loading div:nth-child(4) {
	left: 56px;
	animation: calendar-loading-3 0.6s infinite;
}

/* ANIMATIONS */
@keyframes calendar-loading-1 {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes calendar-loading-2 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(24px, 0);
	}
}
@keyframes calendar-loading-3 {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}