@import (reference) "color";

.status-pause,
.status-draft,
.status-success,
.status-failed,
.status-running-abnormal,
.status-running-normal,
.status-loading,
.status-disabled,
.status-unactived,
.status-computing,
.status-end {
	margin: 5px 0;
	color: @Dark;
	display: inline-block;
	text-align: center;
	line-height: 24px;
	margin-left: 20px;
	position: relative;

	&:before {
		content: "";
		border-radius: 4px;
		width: 8px;
		display: block;
		height: 8px;
		position: absolute;
		left: -20px;
		top: 8px;
	}
}

.status-pause:before {
    background: #FAAD14;
}

.status-draft:before {
    background: @DarkGrey;
}

.status-success:before {
	background: @GreenStatus;
}

.status-failed:before {
	background: @RedStatus;
}

.status-running-abnormal {
    &:before {
		background: #FAAD14;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation: twinkling 1s infinite ease-in-out;
	}

	&:after {
		background: #FAAD14;
		content: "";
		border-radius: 4px;
		width: 8px;
		display: block;
		height: 8px;
		position: absolute;
		left: -20px;
		top: 8px;
	}
}

.status-running-normal {
    &:before {
		background: @Blue;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation: twinkling 1s infinite ease-in-out;
	}

	&:after {
		background: @Blue;
		content: "";
		border-radius: 4px;
		width: 8px;
		display: block;
		height: 8px;
		position: absolute;
		left: -20px;
		top: 8px;
	}
}

.status-loading:before {
	background: @GreenStatus;
}

.status-disabled:before {
	background: @Dark;
}

.status-unactived:before {
	background: @DarkGrey;
}

.status-computing {
	&:before {
		background: #FAAD14;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation: twinkling 1s infinite ease-in-out;
	}

	&:after {
		background: #FAAD14;
		content: "";
		border-radius: 4px;
		width: 8px;
		display: block;
		height: 8px;
		position: absolute;
		left: -20px;
		top: 8px;
	}
}
.status-end:before {
	background: @Dark;
}

@keyframes twinkling{
	0% {
		transform: scale(.8);
		opacity: .5
	}

	to {
		transform: scale(2.4);
		opacity: 0
	}
}