.link-underline {
  background-image: linear-gradient($accent,$accent);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background .3s ease;
  &:hover, &.hover {
    background-size: 100% 1px;
  }
  &.large {
    font-size: 1.125rem;
    font-weight: $font-weight-medium;
    text-transform: uppercase;
  }
}

a {
  &.link, &.underline {
    @extend .link-underline;
  }
}

.link-icon {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: $font-weight-normal;
  text-transform: uppercase;
  &:hover, &.hover {
    text-decoration: none;
  }
  > .fas, > .far, > .fal, > .fad, > .fab {
    display: inline-block;
    font-size: 1rem;
  }
  &-left {
    > .fas, > .far, > .fal, > .fad, > .fab {
      float: left;
      margin-right: .5rem;
      margin-top: .25rem;
    }
  }
  &-right {
    > .fas, > .far, > .fal, > .fad, > .fab {
      float: right;
      margin-left: .5rem;
      margin-top: .125rem;
    }
  }
}

p > a {
  font-weight: $font-weight-medium;
}