.wc-bookings-time-slots {
	--wc-bookings--time-slots--cell-padding: 0.75rem 0.5rem;
	--wc-bookings--time-slots--nav-padding: 0.75rem 1rem;
	margin-top: 3rem;

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

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

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

	&__placeholder {
		text-align: center;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		padding: 0 2rem calc(3rem - 25px); // 25px is the modal container padding.
	}

	&__timezone {
		text-align: center;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		opacity: 0.6;
		padding: 0.5em 0;
	}

	&__navigation-arrows {

		button {
			cursor: pointer;
			user-select: none;
			font-size: var(--wp--preset--font-size--large, 1.8rem);
			padding: var(--wc-bookings--time-slots--nav-padding);
			border: none;
			background: transparent;
			color: var(--wc-bookings--calendar--color);

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

		&.previous {
			margin-right: 0.5em;
		}

		&.next {
			margin-left: 0.5em;
		}
	}

	&__pagination {
		text-align: center;

		&-pages {
			user-select: none;
		}

		button {
			cursor: pointer;
			user-select: none;
			background: var(--wc-bookings--calendar--color);
			border: none;
			border-radius: 50%;
			padding: 0;
			margin: 0 0.25em;
			width: 0.5em;
			height: 0.5em;
			opacity: 0.4;

			&.selected {
				background: var(--wc-bookings--calendar--color);
				opacity: 1;
			}
		}
	}

	&__slot {
		text-align: center;
		cursor: pointer;
		user-select: none;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		padding: var(--wc-bookings--time-slots--cell-padding);
		position: relative;
		border: none;
		color: inherit;
		background: transparent;
		border: 1px solid var(--wc-bookings--calendar--color);

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