$error-tablet-breakpoint: 768px;
$error-title-color: #606571;
$error-description-color: #718096;
$error-btn-color: #2B6CB0;
$error-delimiter-color: #D9D9D9;

// In order to center vertically

main:has(section.error-container) {
	display: flex;
}

.error-container {
	margin: auto;
}

// Block Not Found

.block-not-found {
	display: flex;
	flex-direction: column;
	padding: 6rem 0 9rem 0;
	@media (min-width: $error-tablet-breakpoint) {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	gap: 50px;
}

.block-not-found-img {
	order: -1;
	margin-bottom: 40px;
	text-align: center;
	@media (min-width: $error-tablet-breakpoint) {
		margin-bottom: 0;
		text-align: left;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}

.block-not-found::before {
	align-self: stretch;
	border: 1px solid $error-delimiter-color;
	border-radius: 10px;
	content: "";
}

.block-not-found-content {
	text-align: center;
	@media (min-width: $error-tablet-breakpoint) {
		text-align: left;
		max-width: 466px;
	}
}

.error-title {
	margin-bottom: 20px !important;
	font-weight: 500;
	font-size: 48px;
	line-height: 58px;
	color: $error-title-color;
}

.error-descr {
	display: block;
	font-size: 16px;
	color: $error-description-color;
	line-height: 30px;
	margin-bottom: 22px;
	word-wrap: break-word;
}

.error-btn {
	@include btn-line($btn-line-bg, $error-btn-color, 16px);
	border-width: 2px;
	background: transparent;
	display: inline-flex !important;
	border-radius: 8px;
	font-weight: 600;
	line-height: 24px;
}

.dark-theme-applied .error-btn {
	color: $error-btn-color;
}

// TX Not Found
.tx-nf {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	margin: auto;
	padding: 6rem 0 9rem 0;
	max-width: 827px;
	gap: 12px;

	.error-title {
		margin-bottom: 0 !important;
	}
}

.tx-nf-block {
	.error-descr {
		margin-bottom: 0;
	}
}
