@mixin link
{
    color: $color-link-normal; // both unvisited and visited
    text-decoration: none;

    &:hover
    {
        text-decoration: underline;
    }

    &:active
    {
        color: $color-link-active;
    }    

    &.disabled,
    &:disabled
    {
        @include disabled;

        color: create-rgba($color-text-darker, 0.54);
        text-decoration: none;
    }
}

@mixin alternative-link-states
{
    &:hover
    {
         color: $color-link-normal;
    }

    &:active
    {
        color: $color-link-active;
    }
}

@mixin alternative-link
{
    @include alternative-link-states;

    color: $color-text-normal;
    text-decoration: underline;
}

@mixin list-link
{
    @include icon("chevron-right", $color-link-normal);
    @include alternative-link-states;

    color: $color-text-darker;
    text-decoration: none;

    &::before
    {
        margin-right: steps(1) + 3px;
        margin-left: steps(-3) - 3px;
    }
}

@mixin link-underline
{
    $thickness: 3px;
    $link-padding: 15px;
    $distance: $link-padding - $thickness;

    position: relative;

    &::after
    {
        content: "";

        position: absolute;
        top: 0;
        left: 0;

        width: $thickness;
        height: 100%;

        background: $color-link-normal;

        @include for-at-least-normal-tablets
        {
            position: static;

            display: block;
            width: auto;
            height: $thickness;
            margin: $distance 0 #{-$link-padding};
        }
    }
}

@mixin back-link
{
    color: $color-text-darker;
    text-align: left;
    text-decoration: none;

    @include for-at-most-small-tablets
    {
        @include back-icon;

        line-height: steps(3);
    }

    @include for-at-least-normal-tablets
    {
        @include icon("chevron-left", $color-link-normal);
        @include alternative-link-states;
    }
}
