<main>
	<nav class="tab-arrow">
		<input id="tab-arrow-1" name="tab-arrow" type="radio"/>
		<input id="tab-arrow-2" name="tab-arrow" type="radio"/>
		<input id="tab-arrow-3" name="tab-arrow" type="radio"/>
		<input id="tab-arrow-4" name="tab-arrow" type="radio"/>
		<input id="tab-arrow-5" name="tab-arrow" type="radio"/>
		<label for="tab-arrow-1">1</label>
		<label for="tab-arrow-2">2</label>
		<label for="tab-arrow-3">3</label>
		<label for="tab-arrow-4">4</label>
		<label for="tab-arrow-5">5</label>
		<hr/>
	</nav>
</main>

$p: 12px;
$n: 5;

// container
.tab-arrow {
	display: flex;
	position: relative;
	background: white;
	border-radius: 2px;
	overflow: hidden;
	// border
	hr {
		transition: all 375ms ease-out;
		will-change: transform, background;
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		margin: 0;
		border: 0;
		border-radius: 2px;
		height: 100%;
		width: calc(100% / #{$n});
		background: lighten($slate, 50%);
		&:before, &:after {
			transition: all 375ms ease-out;
			will-change: border-color;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			border: 32px solid lighten($slate, 50%);
			border-left-width: $p;
			border-right-width: $p;
		}
		&:before {
			left: 0;
			border-left-color: white!important;
		}
		&:after {
			right: -$p/2;
			border-top-color: white!important;
			border-bottom-color: white!important;
			border-right-color: white!important;
		}
	}
	// text for the radio inputs
	label {
		cursor: pointer;
		display: block;
		position: relative;
		z-index: 2;
		width: calc(100% / #{$n});
		padding: $p*2;
		text-align: center;
		text-transform: capitalize;
	}
	// radio inputs
	input {
		cursor: pointer;
		opacity: 0;
		appearance: none;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		width: calc(100% / #{$n});
		height: 100%;
		z-index: 2;
		&:hover {
			~ hr {
				background: mix(lighten($slate, 50%), $blue, 75%);
				transition: transform 250ms cubic-bezier(0,.5,.5,1.1), background 250ms ease-out;
				&:before, &:after {
					border-color: mix(lighten($slate, 50%), $blue, 75%);
					transition: all 250ms ease-out;
				}
			}
		}
		&:active {
			~ hr {
				background: $blue;
				transition: all 250ms ease-out;
				&:before, &:after {
					border-color: $blue;
					transition: all 250ms ease-out;
				}
			}
		}
		// loop for positioning inputs over labels
		@for $i from 1 through $n {
			&:nth-of-type(#{$i}) {
				left: calc(100% / #{$n} * #{$i - 1});
				&:checked {
					~ hr {
						transform: translateX(#{($i - 1) * 100%});
					}
				}
				&:hover, &:focus, &:active {
					~ hr, ~ input:checked ~ hr {
						transform: translateX(#{($i - 1) * 100%});
					}
				}
			}
		}
	}
}

// additional styling
body {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
}

main {
	width: 100%;
	max-width: 800px;
	padding: $p/2;
	background: lighten($slate, 75%);
	@media only screen and (min-width: 800px) {
		border-radius: 2px;
	}
}