@reference "tailwindcss";

:host {
	@apply flex flex-col flex-auto overflow-hidden;
}

table {
	thead {
		th {
			@apply sticky top-0 border-t-0 bg-gray-50 z-100;

			&:first-child {
				@apply left-0 border-l-0 z-103;
			}

			&:last-child {
				@apply border-r-0;
			}
		}
	}

	tbody {
		td {
			&:first-child {
				@apply sticky left-0 border-l-0 bg-gray-50 z-100;
			}

			&:last-child {
				@apply border-r-0;
			}
		}
	}

	th,
	td {
		@apply border-2 border-gray-400 p-2;
	}
}

.time-divider {
	@apply absolute;

	&__wrapper {
		@apply relative h-full;

		&__line {
			@apply w-0.5 border border-black h-full;
		}

		&__circle {
			@apply sticky top-12 -ml-0.75 w-2 h-2 rounded-full z-101 border-2 border-black;
		}
	}
}

.late {
	@apply bg-red-500;
}