Link styling and start of hoverstates library

links.less

a {
    // Default underlining always looks terrible - use a bottom border instead
    color: @link-color;
    text-decoration: none;
    border-bottom: @underline-height solid transparent;
    .transition(~"color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease");
    &:hover, &:focus {
        color: @link-color-hover;
        text-decoration: none;
        border-bottom: @underline-height solid @link-color-hover;
    }
}

// Remove all underline styles added to links
.underline--remove() {
    border-bottom: none;
    &:hover, &:focus {
        border-bottom: none;
    }
    &:after {
        display: none;
    }
}
// Animated underlining using psuedo-elements
.underline--animated(@direction: 'left', @link-color: @link-color, @link-color-hover: @link-color-hover) {
    .underline--remove();
    position: relative;
    .setDirection() when (@direction = 'left') {
        @width:         0%;
        @left:          0;
        @right:         auto;
        @width-hover:   100%;
        @left-hover:    0;
        @right-hover:   auto;
    }
    .setDirection() when (@direction = 'right') {
        @width:         0%;
        @left:          auto;
        @right:         0;
        @width-hover:   100%;
        @left-hover:    auto;
        @right-hover:   0;
    }
    .setDirection() when (@direction = 'centre') {
        @width:         0%;
        @left:          50%;
        @right:         auto;
        @width-hover:   100%;
        @left-hover:    0%;
        @right-hover:   auto;
    }
    // Call the setDirection mixin, to make its variables available to the calling context (i.e. .underline--animated)
    .setDirection();
    // Set styles
    &:after {
        .transition(~"width ease-out 0.2s, left ease-out 0.2s, bottom ease-out 0.2s");
        content: '';
        display: block;
        position: absolute;
        bottom: -@underline-height;
        border-bottom: @underline-height solid @link-color;
        width: @width;
        left: @left;
        right: @right;
    }
    &:hover, &:focus {
        &:after {
            width: @width-hover;
            left: @left-hover;
            right: @right-hover;
            border-bottom-color: @link-color-hover;
        }
    }
}
// Classes to trigger these mixins
.underline--animated--left {
    .underline--animated('left');
}
.underline--animated--right {
    .underline--animated('right');
}
.underline--animated--centre {
    .underline--animated('centre');
}