%anchor {
  @include fa-caret-right-icon;

  [dir=rtl] & {
    @include fa-caret-left-icon;
  }

  text-decoration: none;
  pointer-events: all;
  position: relative;
  margin-left: 6px;
  margin-right: 6px;

  @include phone {
    margin-left: 5px;
    margin-right: 5px;
  }

  &:hover {
    text-decoration: underline;
  }

  &:before {
    display: inline-block;
    top: 7px;
    width: 10px;
    height: 12px;
  }
}

/// Color of the caret icon displayed in front of links. Same as text
/// color by default.
$anchor-icon-color: null !default;

%anchor {
  @include fa-caret-right-icon;

  [dir=rtl] & {
    @include fa-caret-left-icon;
  }

  text-decoration: none;
  pointer-events: all;
  position: relative;
  margin-left: 6px;
  margin-right: 6px;

  @include phone {
    margin-left: 5px;
    margin-right: 5px;
  }

  &:hover {
    text-decoration: underline;
  }

  &:before {
    display: inline-block;
    top: 7px;
    width: 10px;
    height: 12px;
    color: $anchor-icon-color;
  }
}

Make anchor icon color configurable
Make anchor icon color configurable

Add theme variable to allow changing the color of the caret displayed
in front of links.
