// applied to the container holding the a tag
// adds a underline on hover
// prevents the external or arrow icon from becoming an orphan
// basic structure expected => <div><a>text&nbsp;<svg></svg></a></div> 

@mixin ma-link-decorative {
  padding-right: .8em;

  a {

    @include ma-link-underline;
    display: inline;

    svg {
      display: inline-block;
      height: .6em;
      margin-right: -.8em;
      width: .6em;
    }
  }
}