.schedule {
	margin: 5px;
	table-layout: fixed;
}

.schedule-header-time,
.schedule-header-day {
	border-bottom: 2px solid $body-bg;
}

.schedule-header-time {
	text-align: center;
}

.schedule-header-day {
	background-color: $black;
	border-color: $body-bg;
	border-style: solid;
	border-width: 0 2px 2px;
	color: $white;
	font-weight: bold;
	padding: 5px;
	text-align: center;
}

.schedule-time {
	vertical-align: top;
}

.schedule-time-interval {
	background: $black;
	color: $white;
	font-weight: bold;
	margin-top: 2px;
	padding: 5px 10px;
	text-align: center;
	width: 100%;
}

.schedule-header-time,
.schedule-time {
	width: 100px;
}

.schedule-slot {
	margin: 2px;
	vertical-align: top;
}

.schedule-event {
	color: $black;
	margin: 2px;
	padding: 5px;
	transition-duration: .1s;
	transition-property: #{'box-shadow transform'};


	&:hover {
		box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
		transform: scale(1.2, 1.2);
		transition-duration: .3s;
		transition-property: #{'box-shadow transform'};
	}
}

$schedule-event-types: (
	1:  rgb(192, 218, 33),
	2:  rgb(238, 228, 92),
	3:  rgb(196, 80, 43),
	4:  rgb(92, 174, 241),
	5:  rgb(146, 106, 246),
	6:  rgb(121, 250, 242),
	7:  rgb(237, 135, 237),
	8:  rgb(122, 242, 120),
	9:  rgb(247, 162, 83),
	10: rgb(151, 167, 244),
	11: rgb(85, 143, 85),
	12: rgb(185, 91, 98),
	13: rgb(152, 117, 74),
	14: rgb(105, 149, 168),
	15: rgb(118, 177, 165),
	other: rgb(114, 140, 86)
);

@each $i, $background-color in $schedule-event-types {
	.schedule-event-type-#{$i} {
		background-color: $background-color;
	}
}

.schedule-event-time {
	background: $black;
	color: $white;
	font-size: small;
	font-weight: bold;
	padding: 0 3px;
}
