// Chevrons in CSS http://codepen.io/jonneal/pen/kptBs

.icon-arrow-right {
  background-image: inline('build/latest/img/icons/arrow-right.png');
  background-image: none, inline('assets/img/icons/arrow-right.svg') ,
  linear-gradient(transparent, transparent);
}

.chevron {
  &::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.5em;
    left: 0.15em;
    position: relative;
    vertical-align: top;
    width: 0.5em;
    transition: transform 300ms linear;
  }

  &.top {
    &::before {
      top: 0.75em;
      transform: rotate(-45deg);
    }
  }

  &.right {
    &::before {
      left: 0;
      transform: rotate(45deg);
    }
  }

  &.bottom {
    &::before {
      top: 0.5em;
      transform: rotate(135deg);
    }
  }

  &.left {
    &::before {
      left: 0.25em;
      transform: rotate(-135deg);
    }
  }
}

@mixin inline-background-image($img) {
  background-image: inline('build/latest/img/icons/' + $img + '.png');
  background-image: none, inline('assets/img/icons/' + $img + '.svg'),
  linear-gradient(transparent, transparent);
}

.icon-arrow-right {
  @include inline-background-image('arrow-right');
}

.chevron {
  &::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.5em;
    left: 0.15em;
    position: relative;
    vertical-align: top;
    width: 0.5em;
    transition: transform 300ms linear;
  }

  &.top {
    &::before {
      top: 0.75em;
      transform: rotate(-45deg);
    }
  }

  &.right {
    &::before {
      left: 0;
      transform: rotate(45deg);
    }
  }

  &.bottom {
    &::before {
      top: 0.5em;
      transform: rotate(135deg);
    }
  }

  &.left {
    &::before {
      left: 0.25em;
      transform: rotate(-135deg);
    }
  }
}

Create a mixin for 'inline-background-image's
Create a mixin for 'inline-background-image's
