:root {
	color-scheme: light;
	--sidebar-width: 200px;
	--main: #eaf0fa;
	--secondary: #7fa8e0;
	--text: #1a2233;
	--github-logo: #24292f;

	--color-palette-1: #4f8cff;
	--color-palette-2: #ffb347;
	--color-palette-3: #6edc7b;
	--color-palette-4: #ff6f91;
	--color-palette-5: #ffd166;
	--color-palette-6: #7e6fff;

	--water: #c8ebff;
	--land: gainsboro;
	--russia: azure;
	--foreign-border: gray;

	--new-russia: var(--color-palette-1);
	--komi: var(--color-palette-2);
	--khakassia: var(--color-palette-3);
	--sakha: var(--color-palette-4);
	--buryat: var(--color-palette-5);
	--altai: var(--color-palette-2);
	--tuva: var(--color-palette-4);
	--bashkortostan: var(--color-palette-3);
	--mordovia: var(--color-palette-3);
	--chuvashia: var(--color-palette-6);
	--mari-el: var(--color-palette-5);
	--udmurtia: var(--color-palette-4);
	--tatarstan: var(--color-palette-2);
	--karachay-cherkess: var(--color-palette-2);
	--kabardino-balkar: var(--color-palette-3);
	--alania: var(--color-palette-4);
	--ingushetia: var(--color-palette-5);
	--ichkeria: var(--color-palette-6);
	--kalmykia: var(--color-palette-4);
	--dagestan: var(--color-palette-2);
	--karelia: var(--color-palette-3);
	--nenets: var(--color-palette-4);
	--ural: var(--color-palette-5);
	--siberia: var(--color-palette-6);
	--far-east: var(--color-palette-3);
	--kralovec: var(--color-palette-2);
	--adygea: var(--color-palette-3);
	--selkup: var(--color-palette-1);
	--khanty: var(--color-palette-3);
	--mansi: var(--color-palette-6);
	--enets: var(--color-palette-2);
	--taymyria: var(--color-palette-2);
	--evenki: var(--color-palette-2);
	--chukotka: var(--color-palette-2);
	--kamchatka: var(--color-palette-6);
	--karachay-balkar: var(--color-palette-5);

	@media (max-width: 1024px) {
		--toggler-height: 65px;
	}
}

.dark {
	color-scheme: dark;
	--main: #0e1123;
	--secondary: #253060;
	--text: rgb(230, 230, 230);
	--github-logo: white;

	--color-palette-1: #4671bc;
	--color-palette-2: #c7a04a;
	--color-palette-3: #43a36e;
	--color-palette-4: #bc526b;
	--color-palette-5: #cbc25a;
	--color-palette-6: #7269cc;

	--water: #306481;
	--land: rgb(21, 31, 31);
	--russia: rgb(31, 63, 63);
	--foreign-border: rgb(180, 180, 180);
}

body,
html {
	margin: 0;
	padding: 0;
	background-color: var(--water);
	overflow-y: hidden;
	font-family: Ubuntu, Helvetica, 'Noto Sans', system-ui, Roboto, Arial, sans-serif;
	color: var(--text);

	@media (max-width: 1024px) {
		font-size: 18pt;
	}
}

*::-webkit-scrollbar {
	background-color: var(--main);
	width: 8px;

	@media (max-width: 1024px) {
		width: 12px;
	}
}

*::-webkit-scrollbar-thumb {
	background-color: var(--secondary);
}

.hidden {
	visibility: hidden;
}

@keyframes appear {
	from {
		translate: calc(-1 * var(--sidebar-width)) 0;
	}
	to {
		translate: 0 0;
	}
}

@keyframes hide {
	from {
		visibility: visible;
		translate: 0 0;
	}
	to {
		visibility: hidden;
		translate: calc(-1 * var(--sidebar-width)) 0;
	}
}

@media (max-width: 1024px) {
	@keyframes appear {
		from {
			translate: 0 100vh;
		}
		to {
			translate: 0 0;
		}
	}

	@keyframes hide {
		from {
			visibility: visible;
			translate: 0 0;
		}
		to {
			visibility: hidden;
			translate: 0 100vh;
		}
	}
}

#sidebar {
	background-color: var(--main);
	min-width: var(--sidebar-width);
	height: 100%;
	width: 10%;
	overflow-y: auto;
	position: absolute;
	left: 0;
	top: 0;
	overflow-x: hidden;
	animation: appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&.hidden {
		animation: hide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 5px;
		padding: 5px 5px;

		section {
			display: flex;
			flex-direction: column;
		}
	}

	.head-bar {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;

		:nth-child(2) {
			height: 30px;
			text-align: center;
		}
	}

	h3 {
		margin: 10px 0;
	}

	label {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		cursor: pointer;
		gap: 5px;
		user-select: none;
	}

	input[type='checkbox'] {
		appearance: none;
		min-width: 18px;
		min-height: 18px;
		border-radius: 4px;
		position: relative;
		cursor: pointer;
		transition: background 0.3s ease;
		background-color: rgba(255, 255, 255, 0.85);

		&:checked {
			background-color: var(--secondary);

			&::after {
				display: block;
			}
		}

		&::after {
			content: '';
			position: absolute;
			width: 10px;
			height: 6px;
			border: 2px solid white;
			border-width: 0 2px 2px 0;
			transform: rotate(-45deg) scaleX(-1);
			left: 3px;
			top: 4px;
			display: none;
		}
	}

	select {
		appearance: none;
		height: 30px;
		background-color: var(--main);
		border-color: var(--secondary);
		border-radius: 4px;
		width: 100%;
		text-align: center;

		option {
			padding: 10px;
		}
	}

	@media (min-width: 1024px) {
		&:not(.hidden) ~ #map {
			margin-left: max(var(--sidebar-width), 10%);
		}

		&:not(.hidden) ~ #toggler path {
			d: path('M14.4,20.8l-2.7,2.7L0,11.8,11.8,0l2.7,2.7L5.5,11.7l8.9,9.1Z');
		}

		&.hidden ~ #toggler {
			left: 0;

			path {
				d: path('M.1,2.7L2.8,0l11.7,11.7L2.7,23.5l-2.7-2.7,9-9L.1,2.7Z');
			}
		}
	}

	@media (max-width: 1024px) {
		width: 100%;
		height: 100%;

		&:not(.hidden) ~ #toggler path {
			d: path(
				'M2.8,23.8l-2.3-2.4,9.2-9.5L.4,2.5,2.8.2l9.2,9.5L21.2.2l2.3,2.4-9.2,9.5,9.2,9.5-2.3,2.4-9.2-9.5L2.8,23.8Z'
			);
		}

		&.hidden ~ #toggler path {
			d: path('M3,19.2l-2.7-2.7L12,4.8l11.8,11.8-2.7,2.7-9-9L3,19.2Z');
		}

		select {
			height: 40px;
		}

		input[type='checkbox'] {
			width: 30px;
			height: 30px;

			&::after {
				width: 16px;
				height: 10px;
				left: 6px;
				top: 8px;
			}
		}
	}
}

#toggler {
	transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
	/* all: unset; */
	appearance: none;
	position: absolute;
	border-color: var(--secondary);
	background-color: var(--main);
	color: var(--secondary);
	fill: var(--text);
	left: var(--sidebar-width);
	top: calc(50% - 50px);
	height: 100px;
	border-radius: 0 8px 8px 0;

	@media (max-width: 1024px) {
		left: unset;
		top: unset;
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		height: var(--toggler-height);
		width: var(--toggler-height);
		margin: 0 5px 5px 0;
		border-color: transparent;
		border-radius: 8px;
		opacity: 0.8;
		background-color: var(--secondary);

		svg {
			fill: var(--text);
		}
	}
}

#map {
	height: 100dvh;
	overflow-x: scroll;

	@media (min-width: 1024px) {
		transition: margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	&.flag {
		.new-republic-of-russia {
			fill: url(#liberal-russian-flag);
		}
		.komi-republic {
			fill: url(#komi-flag);
		}
		.khakassia-republic {
			fill: url(#khakassia-flag);
		}
		.sakha-republic * {
			fill: url(#sakha-flag);
		}
		.buryat-republic {
			fill: url(#buryat-flag);
		}
		.altai-republic {
			fill: url(#altai-flag);
		}
		.tuva-republic {
			fill: url(#tuva-flag);
		}
		.bashkortostan-republic {
			fill: url(#bashkortostan-flag);
		}
		.mordovia-republic {
			fill: url(#mordovia-flag);
		}
		.chuvashia-republic {
			fill: url(#chuvashia-flag);
		}
		.mari-el-republic {
			fill: url(#mari-el-flag);
		}
		.udmurtia-republic {
			fill: url(#udmurtia-flag);
		}
		.tatarstan-republic {
			fill: url(#tatarstan-flag);
		}
		.karachay-cherkess-republic {
			fill: url(#karachay-cherkess-flag);
		}
		.kabardino-balkar-republic {
			fill: url(#kabardino-balkar-flag);
		}
		.alania-republic {
			fill: url(#alania-flag);
		}
		.ingushetia-republic {
			fill: url(#ingushetia-flag);
		}
		.ichkeria-republic {
			fill: url(#ichkeria-flag);
		}
		.kalmykia-republic {
			fill: url(#kalmykia-flag);
		}
		.dagestan-republic * {
			fill: url(#dagestan-flag);
		}
		.karelia {
			fill: url(#karelia-flag);
		}
		.nenets-state * {
			fill: url(#nenets-flag);
		}
		.ural-republic * {
			fill: url(#ural-flag);
		}
		.siberian-republic * {
			fill: url(#siberian-flag);
		}
		.far-eastern-republic * {
			fill: url(#far-eastern-flag);
		}
		.kralovec-republic {
			fill: url(#kralovec-flag);
		}
		.adygea-republic {
			fill: url(#adygea-flag);
		}
		.greater-karelia-republic {
			fill: url(#karelia-flag);
		}
		.greater-buryatia {
			fill: url(#buryat-flag);
		}
		.nenets-nation {
			fill: url(#nenets-nation-flag);
		}
		.circassia {
			fill: url(#circassia-flag);
		}
		.enets-country {
			fill: url(#enets-flag);
		}
		.komi-permyak-union {
			fill: url(#komi-flag);
		}
		.khanty {
			fill: url(#khanty-flag);
		}
		.mansi {
			fill: url(#mansi-flag);
		}
		.selkup-territory {
			fill: url(#selkup-flag);
		}
		.evenkia {
			fill: url(#evenkia-flag);
		}
		.taymyria {
			fill: url(#taymyria-flag);
		}
		.chukotka {
			fill: url(#chukotka-flag);
		}
		.kamchatka {
			fill: url(#kamchatka-flag);
		}
		.karachay-balkar {
			fill: url(#karachay-balkar-flag);
		}
		.altai-mountains {
			fill: url(#altai-flag);
		}
	}
}

.admin-borders,
.admin-borders * {
	stroke: black;
	fill: none;
	stroke-width: 0.33pt;
}

#rivers path {
	stroke: var(--water);
	fill: none;
}

#lakes path {
	fill: var(--water);
	stroke: none;
}

.foreign-territory,
.foreign-territory * {
	fill: var(--land) !important;
	stroke: none !important;
	stroke-width: 0;
}

.foreign-borders * {
	stroke: var(--foreign-border);
	stroke-width: 1pt;
	fill: none;
}

#republics {
	fill: var(--russia);
	stroke: black;

	.new-republic-of-russia {
		fill: var(--new-russia);

		* {
			fill: inherit;
		}
	}

	.komi-republic {
		fill: var(--komi);
	}

	.khakassia-republic {
		fill: var(--khakassia);
	}

	.sakha-republic * {
		fill: var(--sakha);
	}

	.buryat-republic {
		fill: var(--buryat);
	}

	.altai-republic {
		fill: var(--altai);
	}

	.tuva-republic {
		fill: var(--tuva);
	}

	.bashkortostan-republic {
		fill: var(--bashkortostan);
	}

	.mordovia-republic {
		fill: var(--mordovia);
	}

	.chuvashia-republic {
		fill: var(--chuvashia);
	}

	.mari-el-republic {
		fill: var(--mari-el);
	}

	.udmurtia-republic {
		fill: var(--udmurtia);
	}

	.tatarstan-republic {
		fill: var(--tatarstan);
	}

	.karachay-cherkess-republic {
		fill: var(--karachay-cherkess);
	}

	.kabardino-balkar-republic {
		fill: var(--kabardino-balkar);
	}

	.alania-republic {
		fill: var(--alania);
	}

	.ingushetia-republic {
		fill: var(--ingushetia);
	}

	.ichkeria-republic {
		fill: var(--ichkeria);
	}

	.kalmykia-republic {
		fill: var(--kalmykia);
	}

	.dagestan-republic * {
		fill: var(--dagestan);
	}

	.karelia {
		fill: var(--karelia);
	}

	.nenets-state * {
		fill: var(--nenets);
	}

	.ural-republic * {
		fill: var(--ural);
	}

	.siberian-republic * {
		fill: var(--siberia);
	}

	.far-eastern-republic * {
		fill: var(--far-east);
	}

	.kralovec-republic {
		fill: var(--kralovec);
	}

	.adygea-republic {
		fill: var(--adygea);
	}
}

#claims {
	fill: var(--russia);
	stroke-width: 1pt;

	.greater-karelia-republic {
		stroke-width: 0.5pt;
		stroke: black;
		fill: var(--karelia);
	}

	.kralovec-city {
		stroke-width: 1.5pt;
		stroke: var(--foreign-border);
	}

	.greater-buryatia {
		stroke-width: 0.5pt;
		stroke: black;
		fill: var(--buryat);
	}

	.land {
		fill: var(--land);
		stroke: none;
	}

	.border {
		fill: none;
		stroke: var(--foreign-border);
		stroke-width: 1pt;
	}

	.foreign-territory.foreign-borders {
		stroke: var(--foreign-border) !important;
		stroke-width: 1pt !important;
	}

	.stroke {
		stroke-width: 0.5pt;
		stroke: black;
	}

	.nenets-nation {
		fill: var(--nenets);
	}

	.circassia {
		fill: var(--adygea);
	}

	.enets-country {
		fill: var(--enets);
	}

	.komi-permyak-union {
		fill: var(--komi);
	}

	.khanty {
		fill: var(--khanty);
	}

	.mansi {
		fill: var(--mansi);
	}

	.selkup-territory {
		fill: var(--selkup);
	}

	.evenkia {
		fill: var(--evenki);
	}

	.taymyria {
		fill: var(--taymyria);
	}

	.chukotka {
		fill: var(--chukotka);
	}

	.kamchatka {
		fill: var(--kamchatka);
	}

	.altai-mountains {
		fill: var(--altai);
	}

	.karachay-balkar {
		fill: var(--karachay-balkar);
	}
}

path,
polygon,
polyline {
	stroke-width: 0.5pt;
}

#popup {
	position: absolute;
	margin: 5px;
	max-width: 35%;
	border-color: var(--secondary);
	border-width: 2pt;
	border-radius: 4pt;
	background-color: var(--main);
	fill: var(--text);
	flex-direction: column;
	gap: 10px;
	font-size: small;

	&[open] {
		display: flex;
	}

	span {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;

		p {
			margin: 0;
		}
	}

	h2,h5 {
		margin: 0;
		color: var(--secondary);
		margin: 0;
	}

	h1 {
		margin: 0;
		padding: 0;
	}

	&:focus {
		outline: none;
	}

	@media (max-width: 1024px) {
		&[open] {
			display: none;
		}
	}
}

#info {
	fill: rgb(230, 230, 230);
	background-color: rgba(0, 0, 0, 0.5);
	max-width: 40%;
	max-height: 90%;
	overflow: hidden;
	border-color: var(--secondary);
	background-blend-mode: overlay;
	border-radius: 4px;
	border-width: 2pt;
	padding: 5%;
	background-origin: border-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	h1 {
		font-size: 36pt;
	}

	* {
		color: rgb(230, 230, 230);
	}

	span {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-direction: row;
	}

	svg {
		min-width: 24px;
		min-height: 24px;
	}

	form button {
		position: absolute;
		top: 0;
		right: 0;
		appearance: none;
		width: 40px;
		height: 40px;
		border: none;
		cursor: pointer;
		background-color: transparent;
		border-radius: 4px;
		border-top-right-radius: 0;

		svg {
			width: 18px;
			height: 18px;
		}

		&:hover {
			background-color: rgb(165, 65, 65);
		}
	}

	@media (max-width: 1024px) {
		max-width: 100%;
		min-width: 100%;
		max-height: 100%;
		min-height: 100%;
		padding: 0;
		overflow-y: auto;
		overflow-x: auto;
		border: none;

		h1 {
			margin-top: 20px;
		}

		& > * {
			margin: 0 10px;
		}

		& > p {
			margin-top: 20px;
		}

		form button {
			position: fixed;
			top: unset;
			bottom: 0;
			border-color: transparent;
			border-radius: 8px;
			margin: 0 5px 5px 0;
			height: var(--toggler-height);
			width: var(--toggler-height);
			opacity: 0.8;
			background-color: var(--secondary);

			&:hover {
				background-color: unset;
			}

			svg {
				width: unset;
				height: unset;
			}
		}
	}
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}