@import "../../styles/variables";
@import "../../styles/functions";
@import "../../styles/mixins";

.root {
  display: block;
  max-width: 300px;
  position: relative;
  margin-top: 1.5rem;
  padding-bottom: .5rem;
  padding-right: 2rem;
  border-bottom: 2px solid $link-color;
  text-decoration: none;

  &:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: .5rem;
    content: "🡲";
  }

  @media (min-width: $media-breakpoint-md) {
  }

  @include on-event {
    border-bottom-color: $link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}

@import "../../styles/variables";
@import "../../styles/functions";
@import "../../styles/mixins";

@mixin arrow-fill($color) {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#{$color}" d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>') 0 0 no-repeat;
}

.root {
  display: block;
  max-width: 300px;
  position: relative;
  margin-top: 1.5rem;
  padding-bottom: .5rem;
  padding-right: 2rem;
  border-bottom: 2px solid $link-color;
  text-decoration: none;

  &:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: .6rem;
    width: 1rem;
    height: 1rem;
    content: '';
    @include arrow-fill($link-color);
  }

  @media (min-width: $media-breakpoint-md) {
  }

  @include on-event {
    border-bottom-color: $link-hover-color;
    text-decoration: none;
    cursor: pointer;

    &:after {
      @include arrow-fill($link-hover-color);
    }
  }
}

Use arrow SVG instead of Unicode 10 arrow
Use arrow SVG instead of Unicode 10 arrow
