@use "~admin-stylesheets/colors";

.nab-running-test {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	grid-template-areas:
		"icon main action"
		"icon stats action";
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid #eef2f7;
	gap: 0.5em 2em;

	&__icon {
		display: grid;
		place-items: center;
		width: 1em;
		height: 1em;
		font-size: 26px;
		padding: 0.4em;
		border-radius: 100%;
		color: colors.$wp-components-color-accent;
		position: relative;
		z-index: 0;
		grid-area: icon;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentcolor;
			border-radius: 100%;
			opacity: 0.15;
		}

		> svg {
			z-index: 1;
		}

		> svg * {
			fill: currentcolor !important;

			&.icon_svg__inverted {
				fill: colors.$nab-background-white !important;
			}

			&.icon_svg__transparent {
				fill: transparent !important;
			}
		}
	}

	&__main {
		min-width: 0;
		grid-area: main;
	}

	&__name {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__date {
		display: block;
		margin-top: 3px;
		color: colors.$nab-text-light-greyish;
	}

	&__stats {
		display: grid;
		grid-template-columns: repeat(4, auto);
		gap: 14px;
		color: colors.$nab-text-light-greyish;
		grid-area: stats;
	}

	&__stats strong {
		display: block;
		color: colors.$nab-text;
	}

	&__leader {
		min-width: 120px;
		text-align: right;
	}

	&__leader strong {
		display: block;
		color: colors.$nab-text-green;
	}

	&__leader--winning-a strong {
		color: colors.$nab-text-red;
	}

	&__leader--winning-none strong {
		color: colors.$nab-text-dark-greyish;
	}

	&__leader span {
		display: block;
		margin-top: 3px;
		color: colors.$nab-text-light-greyish;
	}

	&__button {
		grid-area: action;
	}
}