$c-flow-bp-1: 650;
$c-flow-height: space(6);

.c-flow {
	@include mq($c-flow-bp-1) {
		display: flex;
	}

	justify-content: stretch;
	list-style: none;
	counter-reset: flow-counter;
	margin-left: 0;
}


.c-flow__item {
	flex: 1 1 25%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: $c-flow-height;
	padding: 0 space(3);
	background-color: palette(action, 100);
	counter-increment: flow-counter;

	&::before {
		content: counter(flow-counter) ". ";
		margin-right: space(0.5);
	}

	&.is-ready {
		color: palette(neutral, 0);
		background-color: palette(action);
	}

	&.is-active {
		@include font-weight('bold');
		color: palette(neutral, 0);
		background-color: palette(action);

		@include mq($c-flow-bp-1) {
			// Triangle on the right to indicate active
			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				background-color: palette(action, 100);
				border-style: solid;
				border-width: halve($c-flow-height) 0 halve($c-flow-height) space(2);
				border-color: transparent transparent transparent palette(action);
			}
		}
	}

	&:first-child {
		border-radius: map-get($border-radius, s) map-get($border-radius, s) 0 0;

		@include mq($c-flow-bp-1) {
			border-radius: map-get($border-radius, s) 0 0 map-get($border-radius, s);
		}
	}

	&:last-child {
		border-radius: 0 0 map-get($border-radius, s) map-get($border-radius, s);

		@include mq($c-flow-bp-1) {
			border-radius: 0 map-get($border-radius, s) map-get($border-radius, s) 0;
		}
		
		&::after {
			display: none;
		}
	}
}


.c-flow__icon {
	&::after {
		display: none;
	}

	.c-flow__item.is-ready & {
		display: block;
		content: '';
		flex: none;
		width: 15px;
		height: 12px;
		margin-left: space(1);
		background-image: url(/img/check--white.svg);
		transform: scale(0.6667);
		transform-origin: bottom;
	}
}