@import 'colors';

@mixin link($color, $color-back, $size, $line-width: 1) {
    $size-padding: percentage(($size - $line-width) / $size);
    $size-line: percentage($line-width / $size);
    $color-line: mix($color, $color-back, 85);

    background: linear-gradient(to bottom, $color-back $size-padding, $color-line $size-line) bottom repeat-x;
    background-size: 64px $size * 1px;
    color: $color;
    padding-bottom: $size * 1px;
}

a {
    @include link($color-link, $color-background, 3);
    text-decoration: none;
}

a:focus {
    background-image: none;
}

.warning a {
    @include link($color-link, mix($color-warning-1, $color-warning-2, 25), 3);
}