.action-checkin,
.action-checkout,
.action-undo,
.action-cancelled-from,
.action-cancelled-to,
.action-share {
	cursor: pointer;
}

.config a {
	cursor: pointer;
}

.navbar-fixed {
	z-index: 1001;
}

.brand-logo span {
	transition: color 1s;
}

.brand-logo:hover .ca,
.brand-logo:hover .ce {
	color: #a8e3fa !important;
}

.brand-logo:hover .cb,
.brand-logo:hover .cd {
	color: #f5c4ce !important;
}

.wagons span {
	margin-right: 0.5ex;
	color: #808080;
}

.wagons .wagonclass {
	font-weight: bold;
	color: inherit;
}

.wagons .wagonnum {
	margin-right: 0;
	color: inherit;
}

.wagons .checksum:before {
	content: "-";
}

h1 {
	font-size: 2.92rem;
	margin: 1.9466666667rem 0 1.168rem 0;
}

h2 {
	font-size: 2.28rem;
	margin: 1.52rem 0 .912rem 0;
}

h3 {
	font-size: 1.64rem;
	margin: 1.0933333333rem 0 .656rem 0;
}

.geolocation {
	i.material-icons {
		font-size: 16px;
	}
}

ul.suggestions {
	li {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

// departure board and history - focus highlight
.collection.departures > li,
.collection.history > li {
	transition: background .3s;
	display: grid;
	&:not(#now,.history-date-change ):hover, &:focus-within {
		background-color: $departures-highlight-color;
		outline: 2px solid $link-color;
	}
}

// departure board - layout

.collection.departures li {
	grid-template-columns: 10ch 10ch 1fr;
	align-items: center;
	&#now {
		background-color: $departures-highlight-color;
		padding: 2rem 20px;
		grid-template-columns: 10ch 1fr;
		strong {
			font-weight: bold;
		}
	}
	&.cancelled {
		background-color: $departures-cancelled-color;
		font-style: italic;
		.dep-line {
			background-color: transparent;
			border: 1px solid;
			color: $off-black;
		}
		.dep-time::after {
		  content: " ⊖";
		  font-style: normal;
		}
	}
}
.departures .dep-time {
	color: $off-black;
	&:focus {
		outline: none;
	}
}
.departures .dep-dest {
	margin-left: 0.8rem;
	.followee-checkin {
		font-size: 0.9rem;
		display: block;
		i.material-icons {
			vertical-align: middle;
		}
	}
}

// history - layout

.collection.history > li {
	display: grid;
	grid-template-columns: 10ch 1fr;
	grid-template-rows: 1fr;
	a:first-child {
		align-self: center;
		text-align: center;
		display: flex;
	}
	&.history-date-change {
		display: block;
		font-weight: bold;
	}
}

ul.route-history > li {
	list-style: none;

	position: relative;
	display: grid;
	grid-template-columns: 1rem 1fr;
	gap: 0.5rem;
	a {
		font-family: $font-stack;
	}
	strong {
		font-weight: 600;
	}

	// route icon bubble
	i.material-icons {
		&[aria-label=nach] {
			padding-top: 0.4rem;
		}
		&[aria-label=von] {
			display: block;
			transform: rotate(-90deg);
			height: 1rem;
			margin-top: 0.4rem;
		}
	}

	// route line / "perlenschnur"
	&::before {
		content: '';
		background: $off-black;
		position: absolute;
		width: 2px;
		left: calc( (1rem - 2px) / 2  );
		bottom: 0;
		top: 0;
	}
	&:first-of-type::before {
		top: 1.3rem;
	}
	&:last-of-type::before {
		bottom: unset;
		height: 0.5rem;
	}
}

// train color bubbles
.dep-line {
	text-align: center;
	padding: .2rem;
	color: white;
	background: color('grey', 'darken-3');
	border-radius: .2rem;
	display: inline-block;
	font-weight: 600;
	line-height: 1;
	height: fit-content;
	width: fit-content;
	min-width: 6ch;
	margin: 0 auto;

	&.Bus, &.RUF, &.AST {
		background-color: #a3167e;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.STR {
		background-color: #c5161c;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.S, &.RS, &.RER, &.SKW {
		background-color: #008d4f;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.U, &.STB, &.M  {
		background-color: #014e8d;
		border-radius: 5rem;
		padding: .2rem .5rem;
	}
	&.RE, &.IRE, &.REX {
		background-color: #ff4f00;
	}
	&.RB, &.MEX, &.TER, &.R {
		background-color: #1f4a87;
	}
	// DE
	&.IC, &.ICE, &.EC, &.ECE, &.D,
	// CH
	&.IR,
	// FR
	&.TGV, &.OGV, &.EST,
	// PL
	&.TLK, &.EIC {
		background-color: #ff0404;
		font-weight: 900;
		font-style: italic;
		padding: .2rem;
	}
	&.RJ, &.RJX {
		background-color: #c63131;
	}
	&.NJ, &.EN {
		background-color: #29255b;
	}
	&.WB {
		background-color: #2e85ce;
	}
	&.FLX {
		background-color: #71d800;
		color: black;
	}
}

.departures.connections {
	li {
		grid-template-columns: 15ch 10ch 1fr;
	}
	.connect-platform-wrapper {
		text-align: center;
		span {
			display: block;
		}
	}
}


@media screen and (max-width: 600px) {
	.collection.departures li {
		grid-template-columns: 10ch 1fr;
		.dep-line, .dep-time, .connect-platform-wrapper {
			grid-column: 1;
			text-align: center;
		}
		.dep-dest {
			grid-column: 2;
			grid-row: 1 / span 2;
		}
	}
	.departures.connections li {
		grid-template-columns: 15ch 1fr;
		.connect-platform-wrapper span {
			display: inline-block;
		}
	}
}
