// Hide the underlines from a link, except when hovering or focusing on it.
@mixin link-hover {
    text-decoration: none;

    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

// Shortcut to assign colors to all link states.
@mixin link-colors($link, $visited, $hover, $active) {
    color: $link;

    &:visited {
        color: $visited;
    }

    &:hover,
    &:focus {
        color: $hover;
    }

    &:active {
        color: $active;
    }
}

// Shortcut to use a base color for all link state colors, lightening the
// hover, focus and active states and desaturating the visited state.
@mixin link-colors-lighten($color) {
    @include link-colors($color,
    desaturate($color, 30%),
    lighten($color, 10%),
    lighten($color, 20%));
}

@mixin link-colors-darken($color) {
    @include link-colors($color,
    desaturate($color, 30%),
    darken($color, 10%),
    darken($color, 20%));
}

// Make a link appear pressable by offsetting it one pixel in the active state.
// Note: this only works whe the element is not absolutely positioned.
@mixin link-press {
    &:active {
        left: 1px;
        position: relative;
        top: 1px;
    }
}

// Remove default styles from links, making it appear as normal text.
@mixin link-unstyled($color: $color-text) {
    @include link-colors($color, $color, $color, $color);

    &:link,
    &:visited,
    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }
}

// Link block pattern. Useful when a link contains several block elements.
// This makes all the containing elements clickable, but does not style them as
// links. Instead, you are expected to provide a class `.block-link-target`
// whose styles will be applied to style the child element that should behave
// and look like a link.
@mixin link-block($target: ".target") {
    @include link-unstyled;

    display: block;

    @if $target {
        #{$target} {
            @extend .block-link-target;
        }
    }
}
