﻿[ML_PageControl_WrapperKey=CHANGE_LOG] {
	display: flex;
	flex-direction: column;
	width: min(1000px, 100%);
	align-self: center;
}

	[ML_PageControl_WrapperKey=CHANGE_LOG] .Header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
	}

		[ML_PageControl_WrapperKey=CHANGE_LOG] .Header .Title {
			font-size: xx-large;
			font-weight: bold;
			color: var(--text);
		}

.ChangeLog {
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.ChangeLog .Version {
		display: grid;
		width: 100%;
		grid-template-columns: 125px auto;
	}


		.ChangeLog .Version.Unreleased {
			--accent: var(--info);
			--accent-700: var(--info);
		}

			.ChangeLog .Version.Unreleased .Version_Side::before {
				content: '\e0d2';
			}

		.ChangeLog .Version.Deleted {
			--accent: var(--error);
			--accent-700: var(--error);
		}

			.ChangeLog .Version.Deleted .Version_Side::before {
				content: '\f308';
			}


		.ChangeLog .Version .VersionInfo {
			display: flex;
			flex-direction: column;
			border-right: 2px solid var(--accent-700);
			padding-right: 40px;
			padding-top: 5px;
			width: 125px;
		}

			.ChangeLog .Version .VersionInfo .Date {
				font-weight: bold;
				color: var(--primary)
			}

			.ChangeLog .Version .VersionInfo .VersionCode {
				display: flex;
			}

				.ChangeLog .Version .VersionInfo .VersionCode * {
					padding: 0
				}

		.ChangeLog .Version:last-child .VersionInfo {
			border-right-color: transparent;
		}

		.ChangeLog .Version .Version_Side {
			display: flex;
			flex-direction: column;
			margin: 2px 0 50px 50px;
			position: relative;
			/* width:min(750px, 70vw); */
		}

			.ChangeLog .Version .Version_Side::before {
				content: '\f111';
				font-family: 'Font Awesome 6 Pro';
				font-weight: 900;
				position: absolute;
				top: -2px;
				left: -70px;
				font-size: large;
				padding: 10px;
				color: var(--accent);
				background-color: var(--background);
			}

			.ChangeLog .Version .Version_Side .VersionHeader {
				display: flex;
				flex-direction: column
			}

				.ChangeLog .Version .Version_Side .VersionHeader .Title {
					font-size: large;
					font-weight: bold;
				}

				.ChangeLog .Version .Version_Side .VersionHeader .Description {
				}

			.ChangeLog .Version .Version_Side .Changes {
				display: flex;
				flex-direction: column;
				padding: 10px;
				margin: 5px 10px;
			}

				.ChangeLog .Version .Version_Side .Changes .Change {
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 20px;
					margin-bottom: 15px;
					background-color: var(--content-color);
					border: 1px solid var(--border-color);
					border-radius: 16px;
				}

					.ChangeLog .Version .Version_Side .Changes .Change.Deleted {
						--border-color: var(--error);
						--success: var(--error);
						--info: var(--error);
						--warning: var(--error);
					}

						.ChangeLog .Version .Version_Side .Changes .Change.Deleted .Title {
							color: var(--error)
						}

					.ChangeLog .Version .Version_Side .Changes .Change .Title {
						font-weight: bold;
					}

					.ChangeLog .Version .Version_Side .Changes .Change .Order {
						position: absolute;
						left: -50px;
						background-color: var(--background);
						padding: 3px 13px;
						border: 2px solid var(--primary);
						border-radius: 25px;
						color: var(--primary);
						font-size: larger;
						font-weight: bold;
					}

						.ChangeLog .Version .Version_Side .Changes .Change .Order:empty {
							display: none;
						}

					.ChangeLog .Version .Version_Side .Changes .Change .ChangeType {
						--type-color: var(--primary);
						font-weight: bold;
						position: absolute;
						top: -10px;
						left: -10px;
						background-color: color-mix(in srgb, var(--type-color) 10%, white);
						padding: 2px 10px;
						border-radius: 25px;
						display: flex;
						gap: 5px;
						border: 1px solid var(--type-color);
						color: var(--type-color);
						align-items: baseline;
					}

						.ChangeLog .Version .Version_Side .Changes .Change .ChangeType.NEW {
							--type-color: var(--success);
						}

						.ChangeLog .Version .Version_Side .Changes .Change .ChangeType.UPDATE {
							--type-color: var(--info);
						}

						.ChangeLog .Version .Version_Side .Changes .Change .ChangeType.FIX {
							--type-color: var(--warning);
						}

	.ChangeLog .CommandContainer {
		display: flex;
		gap: 5px;
	}
