@use "~admin-stylesheets/colors";

.nab-recently-finished-experiment {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid #eef2f7;

	&__status {
		display: grid;
		place-items: center;
		width: 20px;
		height: 20px;
		border-radius: 999px;
		font-weight: 700;
	}

	&__status--positive {
		color: colors.$nab-experiment-winner;
		border: 1px solid colors.$nab-text-green;
	}

	&__status--negative {
		color: colors.$nab-experiment-testing;
		border: 1px solid colors.$nab-text-red;
	}

	&__status--neutral {
		color: colors.$nab-background-metal-blue;
		border: 1px solid colors.$nab-text-dark-greyish;
	}

	&__content {
		min-width: 0;
	}

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

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

	&__metric {
		text-align: right;
	}

	&__improvement {
		display: block;
	}

	&__improvement--positive {
		color: colors.$nab-text-green;
	}

	&__improvement--negative {
		color: colors.$nab-text-red;
	}

	&__improvement--neutral {
		color: colors.$nab-text-dark-greyish;
	}
}