@reference "tailwindcss";

.timeslot-picker {
	@apply grid grid-cols-5 gap-0 mt-3 justify-items-center;

	.slot {
		@apply flex items-center justify-center text-center cursor-pointer w-full h-8 text-black font-medium bg-transparent;
		border: none;

		&:hover {
			@apply bg-gray-300 rounded-xl;
		}

		&.disabled {
			@apply pointer-events-none text-gray-300;
		}

		&.active {
			@apply bg-gray-800 text-white z-10;
		}

		&.in-range {
			@apply bg-gray-800 text-white rounded-none;
		}

		&.first-in-range {
			@apply bg-gray-800 text-white rounded-l-xl rounded-r-none;
		}

		&.last-in-range {
			@apply bg-gray-800 text-white rounded-r-xl rounded-l-none;
		}

		&.single-slot {
			@apply bg-gray-800 text-white rounded-xl;
		}
	}
}