nav {
	text-align: center;
	margin-bottom: 3.2rem;
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
	border-top: 2px solid $primary;
	border-bottom: 2px solid $primary;

	a {
		&::before {
			display: inline-block;
			position: relative;
			width: auto;
			background: none;
		}

		&::after {
			display: none;
		}

		&.active,
		&.is-active {
			color: $white;
			background: $primary_color;
		}
	}
}
a {
	color: $primary_color;
	&,
	&:hover {
		text-decoration: none;
	}

	&::before,
	&::after {
		content: '';
	}

	&.next::before,
	&.prev::after {
		position: absolute;
		top: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 0.6rem;
		margin: auto;
		background-color: $secondary_color;
		z-index: -1;
	}

	&.next::after,
	&.prev::before {
		display: inline-block;
		width: 1rem;
		height: 1rem;
		border-bottom: 2px solid #000;
	}

	&.next::after {
		margin-right: 1rem;
		border-right: 2px solid #000;
		transform: rotate(-45deg);
	}

	&.prev::before {
		margin-left: 1rem;
		border-left: 2px solid #000;
		transform: rotate(45deg);
	}

	&:hover {
		&.next::before,
		&.prev::after {
			background-color: rgba($primary_color, 0.7);
		}
	}

	span {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}
// material override
.navbar {
	margin-bottom: 0;
}
a span.ui-steps-number {
	padding: 0;
}