@import '~shared/styles/colors';

.root {
	align-content: center;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	box-sizing: border-box;
	display: flex;
	height: 23px;
	padding: 2px;
	width: 23px;

	//
	// success
	//

	&.success {
		border-color: @green;

		svg {
			fill: @green;
		}
	}

	//
	// failure
	//

	&.declined,
	&.failure,
	&.killed,
	&.error {
		border-color: @red;

		svg {
			fill: @red;
		}
	}

	//
	// blocked, running, started
	//

	&.blocked,
	&.running,
	&.started {
		border-color: @yellow;

		svg {
			fill: @yellow;
		}
	}

	&.started svg,
	&.running svg {
		animation: spinner 1.2s ease infinite;
	}

	//
	// pending, skipped
	//

	&.pending,
	&.skipped {
		border-color: @gray;

		svg {
			fill: @gray;
		}
	}

	&.pending svg {
		animation: wrench 2.5s ease infinite;
		transform-origin: center 54%;
	}
}

@keyframes spinner {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(359deg);
	}
}

@keyframes wrench {
	0% {
		transform: rotate(-12deg);
	}

	8% {
		transform: rotate(12deg);
	}

	10% {
		transform: rotate(24deg);
	}

	18% {
		transform: rotate(-24deg);
	}

	20% {
		transform: rotate(-24deg);
	}

	28% {
		transform: rotate(24deg);
	}

	30% {
		transform: rotate(24deg);
	}

	38% {
		transform: rotate(-24deg);
	}

	40% {
		transform: rotate(-24deg);
	}

	48% {
		transform: rotate(24deg);
	}

	50% {
		transform: rotate(24deg);
	}

	58% {
		transform: rotate(-24deg);
	}

	60% {
		transform: rotate(-24deg);
	}

	68% {
		transform: rotate(24deg);
	}

	75%,
	100% {
		transform: rotate(0);
	}
}

.label {
	background-color: @green;
	border-radius: 2px;
	color: @white;
	display: flex;
	padding: 10px 20px;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);

	div {
		flex: 1;
		font-size: 15px;
		line-height: 22px;
		vertical-align: middle;
	}

	//
	// success
	//

	&.success {
		background-color: @green;
	}

	//
	// failure
	//

	&.declined,
	&.failure,
	&.killed,
	&.error {
		background-color: @red;
	}

	//
	// blocked, running, started
	//

	&.blocked,
	&.running,
	&.started {
		background-color: @yellow;
	}

	//
	// pending, skipped
	//

	&.pending,
	&.skipped {
		background-color: @gray;
	}
}
