@layer pagetheme_apply, pagetheme_themes, pagetheme_controls;

@layer pagetheme_themes
{
	:root
	{
		--pagetheme_sky_color: #002025;
		--pagetheme_sky_bg: #eeeeee;
		--pagetheme_sky_body_bg: #1894CB;
		--pagetheme_sky_body_bordercolor: #033333;

		--pagetheme_nightsky_color: #eeeeee;
		--pagetheme_nightsky_bg: #002025;
		--pagetheme_nightsky_body_bg: #000404;
		--pagetheme_nightsky_body_bordercolor: #033333;
		--pagetheme_nightsky_a_color: #ff6c00;
		--pagetheme_nightsky_a_visited_color: #973f00;

		--pagetheme_hotpink_bg: pink;
		--pagetheme_hotpink_color: #002025;
		--pagetheme_hotpink_body_bg: hotpink;
		--pagetheme_hotpink_body_bordercolor: #7b0323;
		--pagetheme_hotpink_font: small monospace;

		--pagetheme_sizeofcat_color: #f0b047;
		--pagetheme_sizeofcat_bg: #191201;
		--pagetheme_sizeofcat_body_bordercolor: transparent;
		--pagetheme_sizeofcat_font: 1em helvetica,arial,sans-serif;
	}

	html:not(.pagetheme_user):not(:has(#pagetheme_selector input[name="pagetheme_radio"]:checked))
	{
		--pagetheme_color: var(--pagetheme_sky_color);
		--pagetheme_bg: var(--pagetheme_sky_bg);
		--pagetheme_body_bg: var(--pagetheme_sky_body_bg);
		--pagetheme_body_bordercolor: var(--pagetheme_sky_body_bordercolor);
	}

	@media(prefers-color-scheme: dark)
	{
		html:not(.pagetheme_user):not(:has(#pagetheme_selector input[name="pagetheme_radio"]:checked))
		{
			--pagetheme_color: var(--pagetheme_nightsky_color);
			--pagetheme_bg: var(--pagetheme_nightsky_bg);
			--pagetheme_body_bg: var(--pagetheme_nightsky_body_bg);
			--pagetheme_body_bordercolor: var(--pagetheme_nightsky_body_bordercolor);
		}
	}

	.pagetheme_sky, html:has(#pagetheme_selector .pagetheme_sky input[name="pagetheme_radio"]:checked)
	{
		--pagetheme_color: var(--pagetheme_sky_color);
		--pagetheme_bg: var(--pagetheme_sky_bg);
		--pagetheme_body_bg: var(--pagetheme_sky_body_bg);
		--pagetheme_body_bordercolor: var(--pagetheme_sky_body_bordercolor);
	}

	.pagetheme_nightsky, html:has(#pagetheme_selector .pagetheme_nightsky input[name="pagetheme_radio"]:checked)
	{
		--pagetheme_color: var(--pagetheme_nightsky_color);
		--pagetheme_bg: var(--pagetheme_nightsky_bg);
		--pagetheme_body_bg: var(--pagetheme_nightsky_body_bg);
		--pagetheme_body_bordercolor: var(--pagetheme_nightsky_body_bordercolor);
		--pagetheme_a_color: var(--pagetheme_nightsky_a_color);
		--pagetheme_a_visited_color: var(--pagetheme_nightsky_a_visited_color);
	}

	.pagetheme_hotpink, html:has(#pagetheme_selector .pagetheme_hotpink input[name="pagetheme_radio"]:checked)
	{
		--pagetheme_color: var(--pagetheme_hotpink_color);
		--pagetheme_bg: var(--pagetheme_hotpink_bg);
		--pagetheme_body_bg: var(--pagetheme_hotpink_body_bg);
		--pagetheme_body_bordercolor: var(--pagetheme_hotpink_body_bordercolor);
		--pagetheme_font: var(--pagetheme_hotpink_font);
	}

	.pagetheme_sizeofcat, html:has(#pagetheme_selector .pagetheme_sizeofcat input[name="pagetheme_radio"]:checked)
	{
		--pagetheme_color: var(--pagetheme_sizeofcat_color);
		--pagetheme_bg: var(--pagetheme_sizeofcat_bg);
		--pagetheme_body_bordercolor: var(--pagetheme_sizeofcat_body_bordercolor);
		--pagetheme_font: var(--pagetheme_sizeofcat_font);
	}
}

@layer pagetheme_apply
{
	body:has(#pagetheme_transition input:checked)
	{
		&, .bodycontainer, a, a:visited
		{
			transition-property: background, color, border-color, width;
			transition-duration: 1s;
		}
	}

	:root, #pagetheme_selector > div:not(#pagetheme_transition)
	{
		--pagetheme_body_bg: var(--pagetheme_bg,);
		--pagetheme_body_color: var(--pagetheme_color,);
		--pagetheme_font: initial;
	}

	body, .pagetheme_selector
	{
		color: var(--pagetheme_body_color,);
		background: var(--pagetheme_body_bg,);
		font: var(--pagetheme_font);
	}

	.bodycontainer, .pagetheme_selector
	{
		border-color: var(--pagetheme_body_bordercolor,);
		color: var(--pagetheme_color,);
		background: var(--pagetheme_bg,);
	}

	a
	{
		color: var(--pagetheme_a_color,revert);
	}

	a:visited
	{
		color: var(--pagetheme_a_visited_color,revert);
	}
}

@layer pagetheme_controls
{
	#pagetheme_selector
	{
		all: initial;
		display: flex;
		justify-content: flex-end;
		margin: 1em;
		font-family: initial;

		& > div
		{
			color: var(--pagetheme_body_color);
			background: var(--pagetheme_body_bg);
		}
	}


	#pagetheme_selector > div:has(.pagetheme_selector)
	{
		&, .pagetheme_selector
		{
			border-radius: 50%;
			display: flex;
			justify-content: center;
			text-align: center;
			align-items: center;
		}

		.pagetheme_selector
		{
			border-style: solid;
			position: relative;
			margin: 0px;

			& > input[name="pagetheme_radio"]
			{
				position: absolute;
				top: 0;
				left: 0;
				margin: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
	}

	#pagetheme_transition#pagetheme_transition
	{
		position: relative;
		background: inherit;
		margin: auto 0 auto 0;
		--bg: rgba(0, 0, 0, 0);
		--color: var(--pagetheme_color, black);

		input
		{
			position: absolute;
			left: 0;
			top: 0;
			margin: 0;
			width: 1.2em;
			height: 1.2em;
			opacity: 0;
			z-index: 2;
		}

		&::before
		{
			content: "";
			width: 1em;
			height: 1em;
			display: block;
			background-image: linear-gradient(135deg, var(--bg), var(--bg) 49%, var(--color) 50%, var(--color));
		}

		&:has(input:checked)::before
		{
			border: none;
			background-image: linear-gradient(135deg, var(--bg), var(--bg) 35%, var(--color) 80%, var(--color));
		}
	}

	div:has(.pagetheme_selector)
	{
		width: 2.2rem;
		height: 2.2rem;
		margin: 0 0.2em 0;
	}

	.pagetheme_selector
	{
		width: 1.5rem;
		height: 1.5rem;
		border-width: 0.1416rem;
	}
}

@media only screen and (max-width: 600px)
{
	@layer pagetheme_controls
	{
		div:has(.pagetheme_selector)
		{
			width: 3rem;
			height: 3rem;
		}

		.pagetheme_selector
		{
			width: 2rem;
			height: 2rem;
			font-size: 141.6%;
		}
	}
}

@media only screen and (min-width: 1000px)
{
	@layer pagetheme_controls
	{
		.pagetheme_selector
		{
			font-size: 90%;
		}
	}
}