Fancy Link hover Mixin

_fancy-hover.scss

$fh_line_height: 1.5em !default;
$fh_border_thickness: 1px !default;

/* *
 * Uses Classes .is-mobile and .is-desktop on the body Element
 * to determine if you browse on a mobile device or not.
 */

@mixin fancy-hover($fh_border_color) {
    position: relative;
    display: inline-block;
    cursor: pointer;
    line-height: $fh_line_height;
    &:after {
        content: ' ';
        position: absolute;
        left: 0;
        bottom: 0.1em;
        width: 0%;
        height: $fh_border_thickness;
        background: $fh_border_color;
        transition: width 150ms ease-out;

        .is-mobile &.link--underline {
            width:100%;
        }
    }
    &:hover:after {
        .is-desktop & {
            width: 100%;
        }
    }
}