.not-found-trace {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60vh;
	width: 500px;
	gap: 24px;
	margin: 0 auto;

	.description {
		display: flex;
		flex-direction: column;
		gap: 6px;

		.not-found-img {
			height: 32px;
			width: 32px;
		}

		.not-found-text-1 {
			color: var(--bg-vanilla-400);
			font-family: Inter;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: 20px; /* 142.857% */
			letter-spacing: -0.07px;
			.not-found-text-2 {
				color: var(--bg-vanilla-100);
			}
		}
	}

	.reasons {
		display: flex;
		flex-direction: column;
		gap: 12px;

		.reason-1 {
			display: flex;
			padding: 12px;
			align-items: flex-start;
			gap: 12px;
			border-radius: 4px;
			background: rgba(171, 189, 255, 0.04);

			.construction-img {
				height: 16px;
				width: 16px;
			}

			.text {
				color: var(--bg-vanilla-400);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}
		.reason-2 {
			display: flex;
			padding: 12px;
			align-items: flex-start;
			gap: 12px;
			border-radius: 4px;
			background: rgba(171, 189, 255, 0.04);

			.broom-img {
				height: 16px;
				width: 16px;
			}

			.text {
				color: var(--bg-vanilla-400);
				font-family: Inter;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}
	}

	.none-of-above {
		display: flex;
		flex-direction: column;
		gap: 12px;

		.text {
			color: var(--bg-vanilla-400);
			font-family: Inter;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: 20px; /* 142.857% */
			letter-spacing: -0.07px;
		}

		.action-btns {
			display: flex;
			gap: 8px;

			.action-btn {
				display: flex;
				width: 160px;
				padding: 4px 8px;
				justify-content: center;
				align-items: center;
				gap: 8px;
				border-radius: 2px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-slate-500);
				box-shadow: none;

				.ant-btn-icon {
					margin-inline-end: 0px;
				}
			}
		}
	}
}

.lightMode {
	.not-found-trace {
		.description {
			.not-found-text-1 {
				color: var(--bg-ink-400);
				.not-found-text-2 {
					color: var(--bg-ink-100);
				}
			}
		}

		.reasons {
			.reason-1 {
				background: var(--bg-vanilla-300);
				.text {
					color: var(--bg-ink-400);
				}
			}
			.reason-2 {
				background: var(--bg-vanilla-300);

				.text {
					color: var(--bg-ink-400);
				}
			}
		}

		.none-of-above {
			.text {
				color: var(--bg-ink-400);
			}

			.action-btns {
				.action-btn {
					border: 1px solid var(--bg-vanilla-300);
					background: var(--bg-vanilla-300);
				}
			}
		}
	}
}
