@use "~admin-stylesheets/colors";

.nab-summary {
	--summary-accent: #{colors.$nab-text-dark-greyish};
	--summary-accent-soft: #{colors.$nab-background-light-greyish};
	--summary-border: #{colors.$nab-border-light};
	--secondary-opacity: 0.65;

	background: var(--summary-accent-soft);
	border: 1px solid var(--summary-border);
	border-radius: 3px;
	container-type: inline-size;
	transition:
		border 200ms ease-in-out,
		background 200ms ease-in-out;

	&--loading {

		/* Use default colors */
		background: colors.$nab-background-white;
	}

	&--collecting-results {
		--summary-accent: #{colors.$nab-tag-blue-fg};
		--summary-accent-soft: #{colors.$nab-tag-blue-bg};
		--summary-border: #{colors.$nab-tag-blue-fg};
	}

	&--no-winner {

		/* Use default colors */
	}

	&--possible-winner {
		--summary-accent: #{colors.$nab-tag-orange-fg};
		--summary-accent-soft: #{colors.$nab-tag-orange-bg};
		--summary-border: #{colors.$nab-tag-orange-fg};
	}

	&--winner {
		--summary-accent: #{colors.$nab-tag-green-fg};
		--summary-accent-soft: #{colors.$nab-tag-green-bg};
		--summary-border: #{colors.$nab-tag-green-fg};
	}

	&__main {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 1em;
		padding: 2em;
	}

	&__overview {
		display: flex;
		flex-direction: row;
		gap: 1em;
		margin-bottom: 1em;
		width: 100%;
	}

	&__metrics {
		display: flex;
		flex-direction: column;
		gap: 1em;
		width: 100%;
		max-width: 20em;
	}

	&__icon {
		display: grid;
		width: 72px;
		height: 72px;
		place-items: center;
		border-radius: 50%;
		background: colors.$nab-background-white;
		flex-shrink: 0;
		color: var(--summary-accent);
		transition:
			background 200ms ease-in-out,
			color 200ms ease-in-out;
	}

	&__icon svg {
		width: 38px;
		height: 38px;
	}

	&__conclusion {
		min-width: 0;
	}

	&__eyebrow {
		margin: 0 0 8px;
		color: var(--summary-accent);
		font-size: 1.01em;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		transition: color 200ms ease-in-out;
	}

	&__title {
		margin: 0;
		font-size: clamp(1.2em, 3vw, 1.3em);
		line-height: 1.15;
	}

	&__subtitle {
		margin: 8px 0 0;
		font-size: 1.1em;
		line-height: 1.4;
	}

	&__description {
		max-width: 560px;
		margin: 14px 0 0;
		opacity: var(--secondary-opacity);
		line-height: 1.55;
	}

	&__typical-sample-size {
		margin: 14px 0 0;
		opacity: var(--secondary-opacity);
		line-height: 1.55;
	}

	&__metric {
		display: flex;
		align-items: center;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		padding: 1em;
		min-width: 15em;
		border-top: 1px solid colors.$nab-border-light;
	}

	&__metric-label {
		display: flex;
		align-items: center;
		gap: 0.2em;
		margin-bottom: 14px;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	&__metric-value {
		color: var(--summary-accent);
		font-size: 2em;
		line-height: 1;
		transition: color 200ms ease-in-out;
	}

	&__metric-detail {
		margin-top: 8px;
		opacity: var(--secondary-opacity);
		line-height: 1.35;
	}

	&__status {
		background: colors.$nab-background-light-grey;
		border: 1px solid colors.$nab-border;
		border-radius: 2px;
		color: colors.$nab-text-dark-grey;
		display: inline-block;
		font-weight: 400;
		margin-left: 0.2em;
		margin-top: 0.2em;
		padding: 0.5em 0.8em;
		text-decoration: none;
		text-shadow: none;
	}

	&__status--running {
		--color-one: #{colors.$nab-background-light-greyish};
		--color-two: transparent;
		animation: nab-experiment__running-animation 2s linear infinite;
		background: colors.$nab-background-white;
		background-image: linear-gradient(
			-45deg,
			var(--color-one) 25%,
			var(--color-two) 25%,
			var(--color-two) 50%,
			var(--color-one) 50%,
			var(--color-one) 75%,
			var(--color-two) 75%,
			var(--color-two)
		);
		background-size: 35px 35px;
		color: colors.$nab-text;
		border-color: colors.$nab-background-white;
	}

	&__status--finished {
		color: colors.$nab-text-dark-greyish;
		background: colors.$nab-background-light-greyish;
	}

	&--success #{&}__status--finished {
		background: colors.$nab-text-inverted;
		color: colors.$nab-experiment-winner;
	}

	&__actions {
		display: flex;
		justify-content: flex-end;
		gap: 16px;
		padding: 1em;
		background: colors.$nab-background-white;
		border-top: 1px solid var(--summary-border);
	}

	&__skeleton {
		border-radius: 2px;
		background: linear-gradient(
			90deg,
			#edf0f3 25%,
			#f8f9fa 50%,
			#edf0f3 75%
		);
		background-size: 200% 100%;
		animation: nab-summary-loading 1.4s infinite;

		&-overview {
			width: 100%;
		}

		&-icon {
			width: 72px;
			height: 72px;
			border-radius: 50%;
			flex-shrink: 0;
		}

		&-content {
			height: 128px;
			width: 100%;
		}

		&-metrics {
			width: 100%;
		}

		&-metric {
			height: 110px;
		}
	}
}

@container (min-width: 600px) {

	.nab-summary__metrics {
		flex-direction: row;
		width: auto;
		max-width: none;
	}

	.nab-summary__metric {
		border-top: none;
		padding: 0 1em;

		&:not(:first-child) {
			border-left: 1px solid colors.$nab-border-light;
		}
	}

	.nab-summary__skeleton {

		&-metrics {
			width: 100%;
		}

		&-metric {
			flex: 1;
		}
	}
}

@container (min-width: 850px) {

	.nab-summary__main {
		flex-direction: row;
	}

	.nab-summary__metric {
		min-width: 10em;
	}

	.nab-summary__metric:first-child {
		border-left: 1px solid colors.$nab-border-light;
	}
}

@keyframes nab-summary-loading {

	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

@keyframes nab-experiment__running-animation {

	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 35px 35px;
	}
}