@use "~admin-stylesheets/colors";

.nab-running-tests {

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 12px;
	}

	&__title {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		font-size: 16px;
		font-weight: 700;
	}

	&__count {
		display: inline-grid;
		place-items: center;
		min-width: 22px;
		height: 22px;
		border-radius: 999px;
		background: colors.$wp-components-color-accent;
		color: colors.$wp-components-color-accent-inverted;
		font-size: 12px;
	}

	&__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	&__empty {
		display: grid;
		place-items: center;
		padding: 32px 20px;
		text-align: center;
	}

	&__empty-graphic {
		display: grid;
		place-items: center;
		width: 64px;
		height: 64px;
		margin-bottom: 14px;
		border-radius: 999px;
		background: colors.$nab-background-light-greyish;
		font-size: 30px;
	}

	&__empty-title {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
	}

	&__empty-text {
		max-width: 320px;
		margin: 6px 0 0;
		color: colors.$nab-text-light-greyish;
		line-height: 1.45;
	}
}