#page-history {
	container-type: inline-size;
}

/* View when two columns doesn't fit on screen. */
@container (width < 1100px) {
	n2-pagehistory {
		grid-template-columns: 1fr minmax(300px, 900px) 1fr !important;

		.column-2 {
			grid-column: 2 / 3 !important;
		}
	}
}

/* View when not even one column with well on screen */
/* Node name is placed on a separate row. */
@container (width < 500px) {
	.el-nodes {
		grid-template-columns: min-content minmax(min-content, max-content) 1fr !important;
		background-color: unset !important;
		border: unset !important;
		gap: unset !important;

		.el-index {
			border-top-left-radius: 6px;
			border-left: 1px solid var(--line-color);
		}

		.el-index, .el-updated, .el-size {
			border-top: 1px solid var(--line-color);
		}

		.el-size {
			text-align: right;
			border-right: 1px solid var(--line-color);
			border-top-right-radius: 6px;
			padding-right: 8px !important;
		}

		.el-name {
			grid-column: 1 / -1;
			padding-bottom: 8px;
			padding-top: 0px;
			border-bottom: 1px solid var(--line-color);
			border-left: 1px solid var(--line-color);
			border-right: 1px solid var(--line-color);
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			margin-bottom: 16px;
		}

		n2-pagehistorynode > * {
			padding-left: 8px !important;
			padding-right: 0px !important;
		}
	}
}

n2-pagehistory {
	display: grid;
	grid-template-rows: min-content min-content min-content;
	grid-template-columns: 1fr minmax(600px, 800px) minmax(400px, 900px) 1fr;
	grid-gap: 0px 32px;

	.column-1 {
		grid-column: 2 / 3;
	}

	.column-2 {
		grid-column: 3 / 4;
		max-width: 900px;

		.group {
			background-color: #fff;
		}
	}

	.back,
	.node-name {
		grid-column: 2 / 4;
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 8px;
		align-items: center;
	}

	.group-label {
		font-weight: bold;
		background-color: #444;
		color: #fff;
		padding: 8px 32px;
		display: inline-block;
		margin-left: 32px;
		transform: translateY(14px);
		border-radius: 6px;
	}

	.group {
		border: 1px solid #ccc;
		padding: 32px;
		margin-bottom: 32px;
		border-radius: 8px;
		background-color: #fafafa;

		box-shadow:
			rgba(0, 0, 0, 0.4) 0px 2px 4px,
			rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
			rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	}

	.el-stats {
		margin-bottom: 16px;
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 8px 12px;
		white-space: nowrap;
	}

	.el-fetch-history-progress {
		margin-top: 16px;
	}

	.el-back-image,
	.el-back-text {
		cursor: pointer;
	}

	.el-node-name {
		margin-left: 8px;
	}

	.el-nodes {
		grid-column: 1 / -1;

		display: grid;
		grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;

		background-color: var(--line-color);
		gap: 1px;
		border: 1px solid var(--line-color);

		n2-pagehistorynode>* {
			padding: 8px 12px;
			background-color: #fff;
			white-space: nowrap;
		}

		n2-pagehistorynode {

			&.selected .el-index:after {
				position: absolute;
				left: -20px;

				content: '>';
				color: var(--color1);
				font-weight: bold;
				margin-right: 8px;
			}

			.el-index {
				position: relative;
				text-align: right;
			}

			.el-updated {
				white-space: initial;
			}

			.el-date {
				white-space: nowrap;
				font-weight: bold;
			}

			.el-time {
				white-space: nowrap;
				color: #555;
			}

			.el-name {
				white-space: initial;
				/*overflow-wrap: anywhere;*/
				word-break: break-all;
				color: var(--color1);
			}
		}
	}

	.el-pagination {
		grid-column: 1 / -1;
		margin-top: 16px;

		display: grid;
		grid-template-columns: repeat(3, min-content);
		grid-gap: 16px;
		align-items: center;
		white-space: nowrap;
		user-select: none;

		.el-prev,
		.el-next {
			font-weight: bold;
			cursor: pointer;
			border: 1px solid #aaa;
			background-color: #eee;
			padding: 8px 16px;
			border-radius: 4px;
		}
	}
}