Link: Link

.link {
  color: $color-primary;
  display: inline-block;
  font-weight: $font-weight-bold;
  position: relative;

  &::after {
    background: currentColor;
    bottom: 0.3rem;
    content: '';
    display: block;
    height: 0.2rem;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.2s;
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover::after {
      opacity: 1;
    }
  }
}

.link--internal,
.link--external,
.link--download,
.link--mail,
.link--phone,
.link--back {
  padding-left: 3rem;

  &::before {
    content: '';
    display: block;
    height: 1.7rem;
    left: 0.5rem;
    position: absolute;
    top: 0.4rem;
    transition: left 0.2s;
    width: 1.7rem;

    @include mq($from: m) {
      top: 0.6rem;
    }
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover::before {
      left: 0.8rem;
    }
  }

  &::after {
    left: 3rem;
  }
}

.link--mail::before {
  top: 0.7rem;
}

.link--internal::before {
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><g fill="' + $color-primary + '" transform="translate(18.9 20)"><path d="M152.93 73.47v13.06H0V73.47z"/><path d="M88.07 9.17L97.36 0l63.77 64.59 1.07 29.73L97.36 160l-9.3-9.17 60.9-61.67-.7-19.02z"/></g></svg>');
}

.link--external::before {
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><g transform="translate(5 5)"><path fill="' + $color-primary + '" d="M160.28 190H14.58A14.6 14.6 0 0 1 0 175.43V29.73a14.6 14.6 0 0 1 14.57-14.58h72.85v14.57H14.57v145.7h145.7v-72.84h14.58v72.85A14.6 14.6 0 0 1 160.28 190z"/><path fill="' + $color-primary + '" d="M116.56.58v14.57h47.99L101.99 77.7 112.3 88l62.56-62.55v47.99h14.57V.58z"/></g></svg>');
}

.link--download::before {
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><g transform="translate(19.03 5)"><path fill="' + $color-primary + '" d="M148.44 148.98v26.99H13.49v-27H0v27a13.5 13.5 0 0 0 13.5 13.49h134.94a13.5 13.5 0 0 0 13.5-13.5v-26.98h-13.5z"/><path fill="' + $color-primary + '" d="M148.44 81.5l-9.52-9.5-51.2 51.14V.54h-13.5v122.6L23 71.99l-9.52 9.52 67.48 67.47z"/></g></svg>');
}

.link--mail::before {
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><path fill="' + $color-primary + '" d="M176.32 34.03H23.44c-7.03 0-12.74 5.9-12.74 13.2v105.55c0 7.28 5.7 13.2 12.74 13.2h152.88c7.03 0 12.73-5.92 12.73-13.2V47.22c0-7.28-5.7-13.2-12.73-13.2zm-14.02 13.2L99.88 91.94 37.46 47.22H162.3zM23.44 152.77V53.23l72.8 52.18a6.19 6.19 0 0 0 7.27 0l72.8-52.18v99.55H23.45z"/></svg>');
}

.link--phone::before {
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><path fill="' + $color-primary + '" d="M172.4 194.13h-1.22C28.89 185.95 8.69 65.9 5.87 29.26a21.72 21.72 0 0 1 19.98-23.4h39.9a14.5 14.5 0 0 1 13.47 9.13l11 27.08a14.48 14.48 0 0 1-3.18 15.64L71.62 73.28a67.85 67.85 0 0 0 54.88 55.03l15.71-15.57a14.48 14.48 0 0 1 15.72-2.96l27.3 10.93a14.48 14.48 0 0 1 8.9 13.47v38.23c0 12-9.72 21.72-21.72 21.72zM27.6 20.35c-4 0-7.25 3.24-7.25 7.24v.58c3.33 42.87 24.7 144.24 151.62 151.48a7.24 7.24 0 0 0 7.68-6.8v-38.67l-27.3-10.94-20.78 20.64-3.48-.43c-63-7.9-71.54-70.9-71.54-71.54l-.43-3.48 20.56-20.78-10.86-27.3H27.6z"/></svg>');
}

.link--back::before {
  background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs/><path fill="' + $color-primary + '" d="M79.22 7.02L6.34 80.83 5 117.81l74.22 75.17 21.1-20.83-57.42-58.17H195V84.33H44.57l55.75-56.48-21.1-20.83z"/></svg>');
}

.link--external {
  word-break: break-word;
}