.link {
  text-decoration: none;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-bottom: 0.18em;
  font-family: $font-bold--sr18;
  font-size: inherit;
  line-height: inherit;
  transition-property: border;
  transition-duration: 180ms;
  @include font-size($p-font-size);
  @include link_colour($colour-SR20-deep-violet);
  
  h1,
  h2,
  h3,
  h4,
  h5 & {
    @include link_colour($colour-dark-blue);
  }
  &.inline {
    display: inline;
    padding-bottom: 0.06em;
    font-family: inherit;
    font-size:inherit;
  }
  &.link--black {
    @include link_colour($colour-black);
  }
  &.link--dark-blue {
    @include link_colour($colour-dark-blue);
  }
  &.link--dark-blue-lighter {
    @include link_colour($colour-dark-blue-lighter);
  }
  &.link--ruby {
    @include link_colour($colour-ruby);
  }
  &.link--white-smoke {
    @include link_colour($colour-white-smoke);
  }
  &.link--white {
    @include link_colour($colour-white);
  }

  // SR20
  &.link--SR20-red {
    @include link_colour($colour-SR20-red);
  }

  &.link--SR20-dark-blue {
    @include link_colour($colour-SR20-dark-blue);
  }

  &.link--SR20-deep-violet {
    @include link_colour($colour-SR20-deep-violet);
  }

  &.link--SR20-white {
    @include link_colour($colour-SR20-white);
  }

  &.link--SR20-yellow {
    @include link_colour($colour-SR20-yellow);
  }

  &.link--SR20-green {
    @include link_colour($colour-SR20-green);
  }

  &.link--SR20-cyan-blue {
    @include link_colour($colour-SR20-cyan-blue);
  }

  &.link--SR20-purple {
    @include link_colour($colour-SR20-purple);
  }

  &:hover,
  &:active,
  &:focus {
    border-bottom: 1px solid transparent;
  }
}