@mixin underline($color-text-body, $color-accent, $color-shadow) {
    color: $color-accent;
    text-decoration: none;
    // Underline via gradient background
    background-image: linear-gradient(
        rgba($color-accent, 0.25) 0%, $color-accent 100%
    );
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 95%;

    // Clear descenders from underline
    text-shadow: 3px 0 $color-shadow, 2px 0 $color-shadow, 1px 0 $color-shadow, -1px 0 $color-shadow, -2px 0 $color-shadow, -3px 0 $color-shadow;

    // Tweak position + thickness for high res (1.75x and up) displays
    @media (-webkit-min-device-pixel-ratio: 1.75),
            (min-resolution: 168dpi) {
        background-image: linear-gradient(
            rgba($color-accent, 0.25) 0%, $color-accent 100%
        );
        background-position: 0 93%;
    }

    &:hover {
        color: darken($color-accent, 11%);
        background-image: linear-gradient(
            to bottom, darken($color-accent, 6%) 0%, darken($color-accent, 6%) 100%
        );
    }

    // Style selected links (or else text-shadow makes it look crazy ugly)
    // Pseudo selectors must go separately, or they break each other
    &,
    > * {
        &::selection {
            background-color: lighten($color-accent, 25%);
            color: $color-text-body;
            text-shadow: none;
        }
        &::-moz-selection {
            background-color: lighten($color-accent, 25%);
            color: $color-text-body;
            text-shadow: none;
        }
    }
}