/* Table of Contents
==================================================
# Breadcrumb
# Styles
# Colors */

/* # Breadcrumb
================================================== */
.breadcrumb {
  color: $color-black;
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}
.breadcrumb > li {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}
.breadcrumb > li > a:hover,
.breadcrumb > li > a:active,
.breadcrumb > li > a:focus,
.breadcrumb > .active { color: $color-primary; }
.breadcrumb > li > .divider { padding: 0 5px; }

/* # Styles
================================================== */
.breadcrumb-flow {
  color: $color-black;
  counter-reset: wizard;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  line-height: 16px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.breadcrumb-flow > li {
  float: left;
  position: relative;
  text-align: center;
  width: 25%;
}
.breadcrumb-flow > li.active ~ li,
.breadcrumb-flow > li.active ~ li > a { color: $color-dark-haze; }
.breadcrumb-flow > li.active,
.breadcrumb-flow > li > a:hover,
.breadcrumb-flow > li > a:active,
.breadcrumb-flow > li > a:focus,
.breadcrumb-flow > li.active > a,
.breadcrumb-flow > li.active ~ li > a:hover,
.breadcrumb-flow > li.active ~ li > a:active,
.breadcrumb-flow > li.active ~ li > a:focus { color: $color-primary; }
.breadcrumb-flow > li:before {
  background: $color-primary;
  border: 5px solid $color-primary;
  border-radius: 500px;
  content: "";
  counter-increment: wizard;
  display: block;
  height: 22px;
  left: 50%;
  margin: 0 0 10px -14px;
  position: relative;
  text-align: center;
  width: 22px;
  z-index: 1;
}
.breadcrumb-flow > li.active:before,
.breadcrumb-flow > li.active ~ li:before { background: $color-white; }
.breadcrumb-flow > li.active ~ li:before { border-color: $color-light-haze; }
.breadcrumb-flow > li + li:after {
  background: $color-primary;
  content: "";
  display: block;
  height: 5px;
  left: -50%;
  position: absolute;
  top: 14px;
  width: 100%;
  z-index: 0;
}
.breadcrumb-flow > li.active ~ li:after { background: $color-light-haze; }

/* # Colors
================================================== */
.breadcrumb-dark { color: $color-white; }
.breadcrumb-dark.breadcrumb-flow > li.active ~ li,
.breadcrumb-dark.breadcrumb-flow > li.active ~ li > a { color: $color-gray; }
.breadcrumb-dark.breadcrumb-flow > li.active:before,
.breadcrumb-dark.breadcrumb-flow > li.active ~ li:before { background: $color-black; }
.breadcrumb-dark.breadcrumb-flow > li.active ~ li:before { border-color: $color-gray; }
.breadcrumb-dark.breadcrumb-flow > li.active ~ li:after { background: $color-gray; }
.breadcrumb-light.breadcrumb-flow > li.active:before,
.breadcrumb-light.breadcrumb-flow > li.active ~ li:before { background: $color-light-haze; }
.breadcrumb-light.breadcrumb-flow > li.active ~ li:before { border-color: $color-dark-haze; }
.breadcrumb-light.breadcrumb-flow > li.active ~ li:after { background: $color-dark-haze; }