.summary {
	padding: var(--s-2) var(--s-3);
	border: 2px solid var(--color-border);
	border-radius: var(--rounded-sm);
	background-color: var(--color-bg);
	font-weight: var(--bold);
	font-size: var(--fonts-xs);

	& div {
		display: inline-flex;
	}

	& svg {
		width: 24px;
		color: var(--color-accent);
		position: absolute;
		right: 20px;
		top: 14px;
	}

	& + div {
		margin-block-start: var(--s-4);
	}
}

.container {
	width: 100%;
	font-size: var(--fonts-sm);
	font-weight: var(--bold);
	padding: var(--s-3);
	border: 2px solid var(--color-border);
	border-radius: var(--rounded-sm);
	background-color: var(--color-bg);
	margin-bottom: var(--s-3);
	overflow-x: auto;
}

.grid {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(3, max-content);
	gap: var(--s-3);
}

.table {
	width: 100%;
	border-spacing: 0;
	text-indent: 0;
	text-align: left;
	font-size: var(--fonts-xs);

	& svg {
		width: 1rem;
		height: 1rem;
		display: inline;
		vertical-align: sub;
		margin-right: 2px;
	}

	& td {
		padding-block: var(--s-2);
	}

	& tr:last-child td {
		border-bottom: none;
		padding-bottom: 0;
	}
}

.contrast {
	text-wrap-mode: nowrap;
}

.fail {
	color: var(--color-error);
}

.success {
	color: var(--color-success);
}