.wc-bookings-calendar {
	margin: 0 auto;
	overflow: hidden;
	--wc-bookings--calendar--cell-padding: 0.75rem 0.5rem;
	--wc-bookings--calendar--nav-padding: 0.75rem 1rem;

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2px; // Necessary to make the buttons focus outline visible.
	}

	&__nav {
		border: none;
		cursor: pointer;
		padding: var(--wc-bookings--calendar--nav-padding);
		font-size: var(--wp--preset--font-size--large, 1.8rem);
		color: inherit;
		background: transparent;

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	&__title {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		font-weight: 600;
		font-size: var(--wp--preset--font-size--medium, 1.2rem);
	}

	&__spinner {
		width: 12px;
		height: 12px;
		border: 2px solid var(--wc-bookings--calendar--color);
		border-top: 2px solid transparent;
		border-radius: 50%;
		animation: booking_loading_spinner 1s linear infinite;
		display: none;
		position: relative;
		top: -2px;

		&.visible {
			display: block;
		}
	}

	&__weekdays {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
	}

	&__weekday {
		padding: var(--wc-bookings--calendar--cell-padding);
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		text-align: center;
	}

	&__grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		padding: 2px; // Necessary to make the buttons focus outline visible.

		&.loading {
			opacity: 0.6;
			pointer-events: none;
		}
	}

	&__day-container {
		text-align: center;
	}

	&__day {
		cursor: pointer;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		padding: var(--wc-bookings--calendar--cell-padding);
		position: relative;
		border: none;
		color: inherit;
		background: transparent;
		border-radius: 50%;
		width: 3em;
		height: 3em;

		> span {
			user-select: none;
		}

		&.other-month:not(.selected) {
			opacity: 0.5;
		}

		&.disabled {
			text-decoration: line-through;
			opacity: 0.4;
			cursor: not-allowed;
		}

		&.today {
			font-weight: bold;

			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 85%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 5px;
				height: 5px;
				background: var(--wc-bookings--calendar--color);
				border-radius: 50%;
			}
		}

		&.selected {
			color: var(--wc-bookings--calendar--primary-color);
			background-color: var(--wc-bookings--calendar--primary-background-color);

			&:after {
				background-color: var(--wc-bookings--calendar--primary-color);
			}
		}
	}
}

@keyframes booking_loading_spinner {
	0% {
		animation-timing-function: cubic-bezier(.5856, .0703, .4143, .9297);
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(1turn);
	}
}