@use "sass:color";
@use "~admin-stylesheets/breakpoints";
@use "~admin-stylesheets/colors";

span.nab-experiment__icon svg {
	height: 24px;
	width: 24px;
}

th#type {
	display: none;

	@include breakpoints.break-medium {
		display: table-cell;
		width: 3em;
	}
}

th#status {
	width: 10em;
}

/* stylelint-disable-next-line */
th#nab_page_views {
	width: 10em;
}

/* stylelint-disable-next-line */
th#nab_date {
	width: 12em;
}

td.type.column-type {
	display: none !important;

	@include breakpoints.break-medium {
		display: table-cell !important;
		font-size: 2em;
		padding-top: 2px;
	}
}

.nab-experiment__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-size: 12px;
	font-weight: 400;
	margin-left: 0.2em;
	margin-top: 0.2em;
	padding: 0.5em 0.8em;
	text-decoration: none;
	text-shadow: none;

	/*
	&--draft {
	}
	*/

	&--paused {
		background: colors.$nab-background-metal-blue;
		border-color: colors.$nab-background-metal-blue;
		color: colors.$nab-text-inverted;
	}

	&--ready {
		background: colors.$nab-background-orange;
		border-color: colors.$nab-background-orange;
		color: colors.$nab-text-inverted;
	}

	&--scheduled {
		background: colors.$nab-background-green;
		border-color: colors.$nab-background-green;
		color: colors.$nab-text-inverted;
	}

	&--running {
		animation: nab-experiment__running-animation 2s linear infinite;
		background: colors.$nab-background-green;
		background-image: linear-gradient(
			-45deg,
			colors.$nab-experiment-running-overlay 25%,
			transparent 25%,
			transparent 50%,
			colors.$nab-experiment-running-overlay 50%,
			colors.$nab-experiment-running-overlay 75%,
			transparent 75%,
			transparent
		);
		background-size: 35px 35px;
		border-color: colors.$nab-background-green;
		color: colors.$nab-text-inverted;
		text-shadow: colors.$nab-text-shadow;

		&-with-no-quota {
			animation: none;
			background-image: none;

			> .dashicons {
				margin-right: 3px;
				font-size: 1.5em;
			}
		}
	}

	&--finished {
		background: colors.$nab-experiment-finished;
		border-color: colors.$nab-experiment-finished;
		color: colors.$nab-text-inverted;
	}

	&--trash {
		background: colors.$nab-background-red;
		border-color: colors.$nab-background-red;
		color: colors.$nab-text-inverted;
	}
}

.nab-quota-meter {
	margin-bottom: 1em;

	&__bar-container {
		background-color: color.adjust(
			colors.$nab-background-light-grey,
			$lightness: -10%
		);
	}
}

@keyframes nab-experiment__running-animation {

	0% {
		background-position: 0 0;
	}

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