.highlight {
  padding: 7px 4px 1px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  border: 4px solid $colour-black;
  font-weight: bold;

  // Target Highlights wrapped in *or* containing strong tags
  strong &,
  strong {
    padding: 3px 6px 2px;
  }
}

/* Ensure we're overriding the general 
'white/black, dark/light' font-bg rules
for this edgecase */
.highlight--purple {
  color: $colour-dark-purple !important;
  border: 4px solid $colour-dark-purple;
}
.highlight--royal-blue {
  color: $colour-dark-blue !important;
  border: 4px solid $colour-dark-blue;
}
.highlight--red {
  color: $colour-red !important;
  border: 4px solid $colour-red;
}
.highlight--mint-green {
  color: $colour-teal !important;
  border: 4px solid $colour-teal;
}
.highlight--white {
  color: $colour-white !important;
  border: 4px solid $colour-white;
}