@import '../less/variables/colors.less';

@wrap-dimensions: 20px;
@bounce-easing-curve: cubic-bezier(0.75, 0.7, 0.3, 1.75); // http://cubic-bezier.com/#.75,.7,.2,1.75

.c-progress-circle__wrapper {
	background-color: @color-gray-xxx-light;
	border-radius: 50%;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
	height: @wrap-dimensions;
	overflow: hidden;
	position: relative;
	transition: all 0.3s @bounce-easing-curve;
	width: @wrap-dimensions;

	// Initial state when showing
	.ng-hide > & {
		transform: scale(0.8);
	}

	// Because the element is already shown when the complete class is applied, we
	// need to trigger an animation instead of relying on CSS transitions only.
	&.is-complete {
		animation-duration: 0.25s;
		animation-iteration-count: 1;
		animation-name: bounce_size;
	}
}

@keyframes bounce_size {
	0% {
		transform: scale(1);
	}

	80% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

// There's a dashed outline which sits outside the entire timer
.c-progress-circle__outline {
	border: 2px solid #fff;
	border-radius: 50%;
	height: @wrap-dimensions;
	position: absolute;
	width: @wrap-dimensions;
	z-index: 50;
}

// There are two half-circles which are positioned next to each other
.c-progress-circle__left,
.c-progress-circle__right {
	background-color: @color-gray-x-light;
	border: 1px solid @color-gray-medium;
	height: 100%;
	position: absolute;
	transition: opacity 0.2s;
	width: 50%;
}

.c-progress-circle__left {
	border-bottom-left-radius: @wrap-dimensions / 2;
	border-right: none;
	border-top-left-radius: @wrap-dimensions / 2;
	left: 0;
	opacity: 0;
	top: 0;
	z-index: 10;

	// The left segment should be invisible if progress is < 50%
	.is-over-50 > & {
		opacity: 1;
	}
}

.c-progress-circle__right {
	border-bottom-right-radius: @wrap-dimensions / 2;
	border-left: none;
	border-top-right-radius: @wrap-dimensions / 2;
	opacity: 1;
	right: 0;
	top: 0;
	z-index: 10;

	// The right segment should be in front of the mask if progress is > 50%
	.is-over-50 > & {
		z-index: 30;
	}

	.is-under-20 > & {
		opacity: 0;
	}
}

// The mask is the same color as the background and gets rotated around
// to reveal the remaining percentage of the segments. Its dimensions are
// increased by 1 pixel to avoid overlap issues.
.c-progress-circle__mask {
	background-color: inherit;
	height: @wrap-dimensions + 2;
	position: absolute;
	right: -1px;
	top: -1px;
	transform-origin: 0 50%;
	transition: transform 0.1s;
	width: (@wrap-dimensions / 2) + 1;
	z-index: 20;
}

.c-progress-circle__check {
	color: #fff;
	font-size: 12px;
	left: 20%;
	opacity: 0;
	position: absolute;
	top: 20%;
	transform: scale(0.6);
	transition: transform 0.25s @bounce-easing-curve;
	z-index: 60;

	.is-complete > & {
		opacity: 1;
		transform: scale(1);
	}
}

.c-progress-circle__hourglass {
	color: @color-gray-medium;
	font-size: 11px;
	left: 30%;
	opacity: 0;
	position: absolute;
	top: 20%;
	transform: scale(0.6);
	transition: transform 0.25s @bounce-easing-curve;
	z-index: 60;

	.is-under-20 > & {
		opacity: 1;
		transform: scale(1);
	}
}