Descender-aware link underlines

link-underlines.styl

@import nib

selectionColor = #b4d5fe
chromeAndSafariOnlyQuery = "screen and (-webkit-min-device-pixel-ratio: 0)"

textShadowToCropUnderline(color)
  text-shadow .03em 0 color, -.03em 0 color, 0 .03em color, 0 -.03em color, .06em 0 color, -.06em 0 color, .09em 0 color, -.09em 0 color, .12em 0 color, -.12em 0 color, .15em 0 color, -.15em 0 color

linkUnderlines(backgroundColor, color)
  color color
  text-decoration none
  background linear-gradient(backgroundColor, backgroundColor), linear-gradient(backgroundColor, backgroundColor), linear-gradient(color, color)
  background-size .05em 1px, .05em 1px, 1px 1px
  background-repeat no-repeat, no-repeat, repeat-x
  textShadowToCropUnderline backgroundColor
  background-position 0% 93%, 100% 93%, 0% 93%

  @media chromeAndSafariOnlyQuery
    background-position-y 87%, 87%, 87%

  &::selection
    textShadowToCropUnderline selectionColor
    background selectionColor

  &::-moz-selection
    textShadowToCropUnderline selectionColor
    background selectionColor

  &:before, &:after, *, *:before, *:after
    text-shadow none

  &:visited
    color color