.span-logs {
	margin-inline: 16px;
	height: calc(100% - 64px - 55px - 56px);

	&-virtuoso {
		background: rgba(171, 189, 255, 0.04);
	}
	&-list-container .logs-loading-skeleton {
		height: 100%;
		border: 1px solid var(--bg-slate-500);
		border-top: none;
		color: var(--bg-vanilla-400);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8px 0;
	}

	&-empty-content {
		height: 100%;
		border: 1px solid var(--bg-slate-500);
		border-top: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 96px;
		gap: 12px;

		.description {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 0.75rem;
			width: 320px;

			.no-data-img {
				height: 2rem;
				width: 2rem;
			}

			.no-data-text-1 {
				color: var(--bg-vanilla-400);
				font-weight: 400;
				line-height: 18px;
				letter-spacing: -0.07px;
			}
			.no-data-text-2 {
				font-weight: 500;
			}
		}

		.action-section {
			width: 320px;

			.action-btn {
				border-radius: 2px;
				border: 1px solid var(--bg-slate-400);
				background: var(--bg-slate-500);
				color: var(--bg-vanilla-400);
				padding: 4px 8px;
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;
			}
		}
	}
}

.lightMode {
	.span-logs {
		&-empty-content {
			.description {
				.no-data-text-1 {
					color: var(--bg-ink-400);

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

			.action-section {
				.action-btn {
					border: 1px solid var(--bg-vanilla-300);
					background: var(--bg-vanilla-300);
					color: var(--bg-ink-400);

					&:hover {
						border-color: var(--bg-vanilla-200);
						background: var(--bg-vanilla-200);
						color: var(--bg-ink-500);
					}
				}
			}
		}
	}
}
