<div class="container">
  <div class="row">
    <div class="col-xs-12">
      
      <div class="h5">Basic</div>
      <div class="multi-step">
        <ul class="multi-step-list">
          <li class="multi-step-item current">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
            </div>
          </li>
          <li class="multi-step-item">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
            </div>
          </li>
          <li class="multi-step-item">
            <div class="item-wrap">
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Clickable</div>
      <div class="multi-step">
        <ul class="multi-step-list">
          <li class="multi-step-item active current">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Numbered - <code>.numbered</code></div>
      <div class="multi-step numbered">
        <ul class="multi-step-list">
          <li class="multi-step-item active current">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Checked - <code>.checked</code></div>
      <div class="multi-step checked">
        <ul class="multi-step-list">
          <li class="multi-step-item active completed">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
            </div>
          </li>
          <li class="multi-step-item active completed">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item active completed">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
            </div>
          </li>
          <li class="multi-step-item active current">
            <div class="item-wrap">
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Validation</div>
      <div class="multi-step">
        <ul class="multi-step-list">
          <li class="multi-step-item active current">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
            </div>
          </li>
          <li class="multi-step-item active error">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item active error">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
            </div>
          </li>
          <li class="multi-step-item active error">
            <div class="item-wrap">
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Subtitle</div>
      <div class="multi-step">
        <ul class="multi-step-list">
          <li class="multi-step-item active current">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
              <p class="item-subtitle">Information about this step.</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
              <p class="item-subtitle">Information about this step.</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
              <p class="item-subtitle">Information about this step.</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Badges</div>
      <div class="multi-step">
        <ul class="multi-step-list">
          <li class="multi-step-item active current">
            <div class="item-wrap">
              <p class="item-title">Step One</p>
              <p class="badge">10</p>
            </div>
          </li>
          <li class="multi-step-item active">
            <div class="item-wrap">
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item active error">
            <div class="item-wrap">
              <p class="item-title">Step Three</p>
              <p class="badge">2</p>
            </div>
          </li>
          <li class="multi-step-item active error">
            <div class="item-wrap">
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="h5">Loading Step</div>
      <div class="multi-step">
        <ul class="multi-step-list">
          <li class="multi-step-item active current multi-step-loading">
            <div class="item-wrap">
              <div class="busy-css"></div>
              <p class="item-title">Step One</p>
            </div>
          </li>
          <li class="multi-step-item active multi-step-loading">
            <div class="item-wrap">
              <div class="busy-css"></div>
              <p class="item-title">Step Two</p>
            </div>
          </li>
          <li class="multi-step-item active error multi-step-loading">
            <div class="item-wrap">
              <div class="busy-css"></div>
              <p class="item-title">Step Three</p>
            </div>
          </li>
          <li class="multi-step-item active error multi-step-loading">
            <div class="item-wrap">
              <div class="busy-css"></div>
              <p class="item-title">Step Four</p>
            </div>
          </li>
        </ul>
      </div>
      
    </div>
  </div>
</div>

// Variables
$base-margin: 2em;
$base-padding: 1em;
$base-border-radius: .2em;
$screen-xs-max: 786px;

$text-color: #263238;
$text-color-inverted: #fff;
$clickable-hover: #d8f1ff;

$brand-primary: #3e5fd6;
$brand-success: #26a25f;
$brand-danger: #f82502;

$accent-dark: #253c8e;
$accent-light: #3855bd;
$accent-lighter: #ffffff;

$icon-danger: '!';
$icon-success: '✓';

$animation-time: 0.5s;

html, body {
  background-color: #efefef;
}


// Multi-step code

.multi-step {
	margin: ($base-margin / 2) 0;
}

// Setting up flexbox for list
.multi-step-list {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	list-style-type: none;
	padding: 0;
	.multi-step-item:first-child { margin-left: 0; }
	.multi-step-item:last-child { margin-right: 0; }
}

// Defaults for each 'step'
.multi-step-item {
	position: relative;
	width: 100%;
	margin: 0 ($base-margin / 6);
	@media only screen and (max-width: $screen-xs-max) {
		margin: 0 ($base-margin / 6);
	}
	z-index: 2;
	border-radius: $base-border-radius;

	// Step title and subtitle defaults
	.item-title,
	.item-subtitle {
		position: relative;
		margin: 0;
		z-index: 2;
	}
	@media only screen and (max-width: $screen-xs-max) {
		.item-subtitle { display: none; }
	}
	.item-title {
		color: $brand-primary;
		font-weight: 600;
		margin: 0;
	}

	// Different step states [ active, current, completed, error]
	&.active:hover { cursor: pointer; }
	&.current .item-title,
	&.current .item-subtitle {
		color: $text-color-inverted;
	}
	&.active.current:hover .item-title,
	&.active.current:hover .item-subtitle {
		color: $brand-primary;
	}
	&.error:after {
		position: absolute;
		top: 50%;
		z-index: 2;
		transform: translateY(-50%);
		right: .5em;

		content: $icon-danger;
		color: $brand-danger;
	}
}

// Creates the 'arrow' effect / background colors
.item-wrap {
	padding: $base-padding;
	position: relative;
	height: 100%;
	&:before, &:after {
		position: absolute;
		left: 0;
		content: ' ';
		width: 100%;
		height: 50.5%;
		z-index: 1;
		background-color: $accent-lighter;
	}

	// Top of the arrow
	&:before {
		top: 0;
		transform: skew(20deg);
		border-radius: .2em .2em 0 0;
	}
	// Bottom of the arrow
	&:after {
		bottom: 0;
		transform: skew(-20deg);
		border-radius: 0 0 .2em .2em;
	}
}

// Changing arrow colors based on state
.current .item-wrap:before,
.current .item-wrap:after {
	background-color: $brand-primary;
}

.active:hover .item-wrap:before,
.active:hover .item-wrap:after {
	background-color: $clickable-hover;
}

.multi-step-item.error {
	.item-title,
	.item-subtitle {
		padding-right: ($base-padding * 2);
	}
}

// Changing step styles based on :first/:last step
.multi-step-item:first-child .item-wrap,
.multi-step-item:last-child .item-wrap {
	width: 100%;
	border-radius: $base-border-radius;
	&:before, &:after { width: 50%; }
}

// If first step, only point on the right
.multi-step-item:first-child .item-wrap {
	background: linear-gradient(to right, $accent-lighter 95%, transparent 5%);
	&:before, &:after { left: 50%; }
}
.active.multi-step-item:first-child:hover .item-wrap {
	background: linear-gradient(to right, $clickable-hover 95%, transparent 5%);
}
.current.multi-step-item:first-child .item-wrap {
	background: linear-gradient(to right, $brand-primary 95%, transparent 5%);
}

// If last step, only indent on the left
.multi-step-item:last-child .item-wrap {
	background: linear-gradient(to left, $accent-lighter 95%, transparent 5%);
	&:before, &:after { right: 50%; }
}
.active.multi-step-item:last-child:hover .item-wrap {
	background: linear-gradient(to left, $clickable-hover 95%, transparent 5%);
}
.current.multi-step-item:last-child .item-wrap {
	background: linear-gradient(to left, $brand-primary 95%, transparent 5%);
}

// MSI Checked & Complete
.checked .multi-step-item.completed:after {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	right: .5em;
	content: $icon-success;
	color: $brand-success;
}

// MSI Numbered
.numbered .multi-step-item {
	counter-increment: step-counter;
	.item-wrap { padding-left: ($base-padding * 5); }

	// Adds number to step
	&:before {
		content: counter(step-counter);
		position: absolute;
		top: 50%;
		left: .75em;
		transform: translateY(-50%);
		min-width: 1.65em;
		padding: ($base-padding / 2) $base-padding;
		z-index: 2;
		font-size: .85em;
		background-color: $accent-light;
		color: $text-color-inverted;
		font-weight: 600;
		text-align: center;
		border-radius: $base-border-radius;
	}
}

// MSI w/ badge counts
.item-wrap .badge {
	position: absolute;
	right: .5em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}
.error .item-wrap .badge {
	right: 2em;
	~ .item-title,
	~ .item-subtitle {
		padding-right: 3em;
	}
}

// MSI CSS Loader
.multi-step-loading { opacity: .75; }

.current.multi-step-loading:before {
	border-color: $text-color-inverted;
	border-top-color: transparent;
	opacity: 1;
}

.busy-css {
	z-index: 3;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -.5em;
	margin-left: -.5em;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	border: .25em solid $accent-dark;
	border-top-color: transparent;
	animation: spin ($animation-time * 2) infinite linear;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}