LESSCSS: Better underlines

better-underlines.less

/* Adapted to LESS from https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_underline.scss */
.better-underline(@background; @color; @underline-width: 3; @underline-distance: 2) {
    @px: .0625em;

    text-decoration: none;

    background-image: linear-gradient(to top, @background 75%, @color 75%);
    background-size: (2 * @px) ((1 + @underline-width) * @px);
    background-position: 0 ((@underline-width) * @px) + @underline-distance;
    background-repeat: repeat-x;

    /* Original text shadow */
    // text-shadow: (1 * @px) (1 * @px) 0 @background, (-1 * @px) 0 0 @background;
    /* Improved (?) text shadow */
    text-shadow: (1 * @px) 0 0 @background, (-1 * @px) 0 0 @background, 0 (1 * @px) 0 @background, 0 (-1 * @px) 0 @background;
}