//
// Chevrons
// --------------------------------------------------

.chevron {
  display: block;
  height: 20px;

  // Base styles for both halves of the chevron
  &:before,
  &:after {
    position: relative;
    display: block;
    width: 10px;
    height: 3px;
    background-color: #c7c7cc;
    content: '';
  }

  // Position and rotate respective halves of the chevron
  &:before {
    top: 6px;
    @include transform(rotate(45deg));
  }
  &:after {
    top: 8px;
    @include transform(rotate(-45deg));
  }
}