<div class="wrapper">
  <h1>Breadcrumbs</h1>
  <div class="breadcrumb">
    <a href="#!/">/</a>
    <a href="#!/cats">Cats</a>
    <a href="#!/cats/domestic-loghair">Domestic Longhair</a>
    <a href="#!/cats/domestic-loghair/diet">Diet</a>
  </div>
  <div class="breadcrumb red">
    <a href="#!/">/</a>
    <a href="#!/cats">Cats</a>
    <a href="#!/cats/domestic-loghair">Domestic Longhair</a>
    <a href="#!/cats/domestic-loghair/diet">Care</a>
  </div>
  <div class="breadcrumb green">
    <a href="#!/">/</a>
    <a href="#!/cats">Cats</a>
    <a href="#!/cats/domestic-loghair">Domestic Longhair</a>
    <a href="#!/cats/domestic-loghair/diet">Family</a>
  </div>
</div>

<!-- Ignore below. It's for the background. :p /-->
<div class="background">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

$size: 40px;
$sizehalf: $size / 2;
$color: rgb(41, 128, 185);
$text-color: #fff;

$color-red: rgb(192, 57, 43);
$color-green: rgb(22, 160, 133);


@mixin animate() {
  transition: all .1s ease-in-out;
}

.breadcrumb {
  line-height: $size;
  font-size: $sizehalf;
  height: $size;
  margin: 0 10px 10px 0;
  
  > a {
    
    position: relative;
    display: inline-block;
    float: left;
    background: $color;
    color: $text-color;
    text-decoration: none;
    padding: 0 10px 0 20px;
    
    @include animate;
    
    &:before {
      content: "";
      left: 0;
      top: 0;
      display: block;
      position: absolute;
      
      border-width: $sizehalf 0 $sizehalf $sizehalf/2;
      border-style: solid;
      border-color: transparent transparent transparent $color;
      
      @include animate;
    }
    
    &:hover, .active {
      background: lighten($color, 10);
      color: #fff;
      
      + a:before {
        border-color: transparent transparent transparent lighten($color, 10);
      }
    }
      
    &:first-child {
      border-radius: 4px 0 0 4px;
      &:before {
      display: none;
      }
    }
    &:last-child {
      padding-right: $sizehalf;
      border-radius: 0 4px 4px 0;
    }
  }
  
  &.red > a {
    background: $color-red;
    
    + a:before {
        border-color: transparent transparent transparent $color-red;
    }
    
    &:hover {
      background: lighten($color-red,10);
      
      + a:before {
        border-color: transparent transparent transparent lighten($color-red,10);
      }
    }
  }
  
  &.green > a {
    background: $color-green;
    
    + a:before {
        border-color: transparent transparent transparent $color-green;
    }
    
    &:hover {
      background: lighten($color-green,10);
      
      + a:before {
        border-color: transparent transparent transparent lighten($color-green,10);
      }
    }
  }
}

/** Ignore below. It's for the title and background. :p */
* {
  font-family: 'Open Sans', sans-serif;
}

body {
  background: #fff;
}

h1 {
  color: #555;
}

.wrapper {
  position: absolute;
  height: 150px;
  width: 500px;
  
  top: 50%;
  left: 50%;
  
  margin: -150px 0 0 -250px;
  
  z-index: 500;
}

// Nothing to see here