:root
{
	--border-radius: 0.5rem;
	--border-thickness: 0.2rem;

	--object-height: 5rem;
	--object-gap: 1rem;
	--checkbox-size: 2rem;

	--font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

html
{
	width: 100%;
	min-height: 100vh;
	margin: 0;
	border: none;
	padding: 0;
}
body
{
	width: 100%;
	min-height: 100vh;
	margin: 0;
	border: none;
	padding: 0;

	display: flex;
	flex-direction: column;

	box-sizing: border-box;

	background-color: var(--color-background);
	color: var(--color-text);

	font-family: var(--font-family);
	line-height: 1.5;
}

header,
footer
{
	position: relative;

	width: 100%;
	height: 6rem;
	display: flex;
	flex-direction: column;

	justify-content: center;
	align-items: center;

	overflow: hidden;
}
header
{
	border-bottom: 0.1rem solid var(--color-text);

	& > h1
	{
		position: relative;

		font-size: 2.2rem;
		padding: 0;
		margin: 0;

		z-index: 1;
	}
}
footer
{
	border-top: 0.1rem solid var(--color-text);
}


main
{
	position: relative;
	width: 100%;
	margin: 0;
	border: none;
	padding: 1rem 0;
	box-sizing: border-box;

	flex: 1;

	background-color: var(--color-background);
	color: var(--color-text);

	font-family: var(--font-family);
	line-height: 1.5;
}
main > *
{
	width: 100%;
	box-sizing: border-box;
}


a,
a:active,
a:visited
{
	color: var(--color-text);
	text-decoration: none !important;
}
a
{
	position: relative;
	display: flex;
	flex-direction: row;
	gap: var(--object-gap);
}
a > button
{
	flex: 1 1 auto;
}

button
{
	position: relative;

	border-radius: var(--border-radius);
	background-color: var(--color-element);
	color: var(--color-text);

	min-height: var(--object-height);
	padding: 1rem;
	box-sizing: border-box;

	border: 0.15rem solid var(--color-text);
	outline: none;

	font-size: 1.4rem;
	text-align: center;

	transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
button[disabled]
{
	cursor: not-allowed;
}
button:not([disabled])
{
	cursor: pointer;
}
button:not([disabled]):hover
{
	background-color: var(--color-element-highlight);
}

h1
{
	width: 100%;
	text-align: center;
}


main > * + *
{
	margin-top: 2rem;
}
main > button,
main > a:has(> button)
{
	display: block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: calc(min(100%, 50rem) - var(--object-gap) * 2);
}
main > a > button
{
	width: 100%;
}

rice-journey
{
	padding: 1rem 1.5rem 1.5rem 1.5rem;
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;

	border: 0.15rem solid var(--color-text);
	border-radius: var(--border-radius);

	background-color: var(--color-element);


	display: grid;
	grid-template-columns: 2rem max-content max-content max-content;
	grid-template-rows: max-content 0.75rem max-content max-content max-content max-content max-content;
	grid-template-areas:
		"extend-icon title title title"
		"none2 none2 none2 none2"
		"deco start-station start-time start-eztime"
		"deco start-station start-time start-eztime"
		"deco stops stops stops"
		"deco end-station end-time end-eztime"
		"deco end-station end-time end-eztime";
	column-gap: 1rem;

	font-size: var(--font-size);

	transition: background 0.2s ease-out;


	& rice-journey-station
	{
		padding: 0.15rem 0;
		align-self: center;

		&[data-stop="start"],
		&[data-stop="end"]
		{
			font-size: 1.6rem;
		}
		&[data-stop="mid"]
		{
			font-size: 1.4rem;
		}
	}
	& rice-journey-time
	{
		&:has(+ rice-journey-eztime[data-ez="late"])
		{
			/*text-decoration: line-through;*/
		}
	}
	& rice-journey-eztime
	{
		&[data-ez="ontime"]
		{
			color: #44ff44;
		}
		&[data-ez="late"]
		{
			color: red;
		}
	}
	& rice-journey-time,
	& rice-journey-eztime
	{
		align-self: center;

		font-size: 1.2rem;
	}
	& rice-journey-line-dot
	{
		position: absolute;
		height: 100%;
		width: 100%;

		&::before
		{
			content: "";
			background-color: var(--color-text);
			border-radius: 100%;
			height: 1.5rem;
			width: 1.5rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		&[data-stop="mid"]::before
		{
			height: 1rem;
			width: 1rem;
		}
	}
	& rice-journey-line-line
	{
		position: absolute;
		height: 100%;
		width: 100%;

		&::before
		{
			content: "";
			background-color: var(--color-text);
			height: 100%;
			width: 0.2rem;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	& > rice-journey-extend
	{
		position: relative;

		grid-row: 1 / 2;
		grid-column: 1 / 4;

		min-height: 2rem;

		& > input[type="checkbox"]
		{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;

			opacity: 0;

			cursor: pointer;
		}
	}
	& > rice-journey-extend-icon
	{
		position: relative;

		grid-area: extend-icon;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		min-height: 2rem;

		&::before,
		&::after
		{
			content: "";

			position: absolute;

			height: 0.3rem;
			width: 1.5rem;
			background-color: var(--color-text);

			border-radius: 0.15rem;
		}
		&::before
		{
		}
		&::after
		{
			transition: transform ease-out 0.2s;
			/*transform: rotate(90deg);*/
		}
	}
	& > rice-journey-iceline
	{
		grid-area: title;

		font-size: 2rem;
		font-weight: bold;
	}
	& > rice-journey-station[data-stop="start"]
	{
		grid-area: start-station;
	}
	& > rice-journey-time[data-stop="start"]
	{
		grid-area: start-time;
	}
	& > rice-journey-eztime[data-stop="start"]
	{
		grid-area: start-eztime;
	}
	& > rice-journey-station[data-stop="end"]
	{
		grid-area: end-station;
	}
	& > rice-journey-time[data-stop="end"]
	{
		grid-area: end-time;
	}
	& > rice-journey-eztime[data-stop="end"]
	{
		grid-area: end-eztime;
	}

	& rice-journey-station[data-stop="start"],
	& rice-journey-station[data-stop="end"]
	{
		font-weight: bold;
	}

	& > rice-journey-deco
	{
		position: relative;

		grid-area: deco;

		display: grid;
		grid-template-rows: subgrid;
		grid-template-columns: auto;

		height: 100%;
		width: 2rem;

		& > rice-journey-line-dot:first-of-type
		{
			grid-row: 1 / 3;
		}
		& > rice-journey-line-line
		{
			grid-row: 2 / 5;
		}
		& > rice-journey-line-dot:last-of-type
		{
			grid-row: 4 / 6;
		}
	}

	& > rice-journey-stops
	{
		grid-row: 5 / 5;
		grid-column: 1 / 5;

		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: max-content;

		& > rice-journey-stop
		{
			position: relative;

			grid-column: 1 / 5;

			display: grid;
			grid-template-columns: subgrid;
			grid-template-rows: max-content;

			& > rice-journey-line-dot
			{
				grid-column: 1 / 2;
			}
			& > rice-journey-station
			{
				grid-column: 2 / 3;
			}
			& > rice-journey-time
			{
				grid-column: 3 / 4;
			}
			& > rice-journey-eztime
			{
				grid-column: 4 / 5;
			}
		}
	}

	&:not(:has(> rice-journey-extend > input:checked))
	{
		rice-journey-eztime
		{
			display: none;
		}
		& > rice-journey-stops
		{
			display: none;
		}
		& > rice-journey-extend-icon::after
		{
			transform: rotate(90deg);
		}
	}
}
a:has(rice-journey)
{
	display: inline-block;
	width: max-content;
	height: max-content;
}
a > rice-journey:hover
{
	background-color: var(--color-element-highlight);
}

rice-journey-carousel
{
	width: 100%;

	display: flex;
	flex-direction: row;
	gap: 1rem;
	overflow: auto;

	& > rice-journey,
	& > a:has(rice-journey)
	{
		min-width: min(30rem, calc(100vw - 2rem - 2px));
	}

	&::before,
	&::after
	{
		content: "";
		flex: 1;
		/*There's some weird behaviour (at least in Firefox)
		where the ::after element and its gap to the previous
		element is just ignored when ::after has a width of 0*/
		min-width: 1px;
	}
}
main > rice-journey-carousel
{
	padding: 0;
}

rice-journey-line
{
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;

	& > rice-journey,
	& > a:has(rice-journey)
	{
		min-width: min(30rem, 100%);
		max-width: 100%;
	}
}