// # Arrow Inline
// Small arrows as needed next to navigational elements. The arrows
// will inherit the color of the parent `color` value.

// <div class="example html">
//     <div><span class="lego-arrow-inline--up"></span> Up</div>
//     <div><span class="lego-arrow-inline--down"></span> Down</div>
//     <div><span class="lego-arrow-inline--right"></span> Right</div>
//     <div><span class="lego-arrow-inline--left"></span> Left</div>
// </div>

$border-colored: 4px solid currentColor;
$border-transparent: 4px solid transparent;

%#{$namespace}arrow-inline,
.#{$namespace}arrow-inline {
  display: inline-block;
  width: 0;
  height: 0;
  margin-top: -2px;
  margin-left: 2px;
  vertical-align: middle;

  &--up {
    @extend %#{$namespace}arrow-inline;
    border-bottom: $border-colored;
    border-right: $border-transparent;
    border-left: $border-transparent;
  }

  &--down {
    @extend %#{$namespace}arrow-inline;
    border-top: $border-colored;
    border-right: $border-transparent;
    border-left: $border-transparent;
  }

  &--right {
    @extend %#{$namespace}arrow-inline;
    border-left: $border-colored;
    border-top: $border-transparent;
    border-bottom: $border-transparent;
  }

  &--left {
    @extend %#{$namespace}arrow-inline;
    border-right: $border-colored;
    border-top: $border-transparent;
    border-bottom: $border-transparent;
  }
}