//
// Links with icons
// Required for jump link modifier
//

.a-link__icon,
.a-link__jump {
    border-bottom-width: 0;

    .a-link_text {
        border-bottom-width: 1px;
        border-bottom-style: inherit;
    }

    &.a-link__no-wrap {
        white-space: nowrap;
    }
}

//
// Jump link
//

.a-link__jump {
    font-weight: 500;

    &.a-link__large {
        font-size: unit( @size-iv / @base-font-size-px, em );
    }

    .respond-to-max( @bp-xs-max, {
        .u-block-link();

        position: relative;

        .cf-icon-svg {
            position: absolute;
            margin-bottom: -0.6em;
            bottom: 50%;
        }

        &.a-link__icon-after-text {
            padding-right: 1.25em;
        }

        &.a-link__icon-after-text .cf-icon-svg {
            right: 0;
        }

        &.a-link__icon-before-text {
            padding-left: 1.25em;
        }

        &.a-link__icon-before-text .cf-icon-svg {
            left: 0;
        }

        &.a-link__bg {
            border: solid @jump-link_border;
            border-width: 1px 0;

            background: @jump-link_bg;

            &.a-link__icon-after-text .cf-icon-svg {
                right: 1em;
            }

            &.a-link__icon-before-text .cf-icon-svg {
                left: 1em;
            }

            &.a-link__icon-after-text {
                padding-left: 1em;
                padding-right: 2.25em;
            }

            &.a-link__icon-before-text {
                padding-left: 2.25em;
                padding-right: 1em;
            }
        }
    } );
}

/**
 * Block link
 *
 * The block link mixin is used in the jump link and link list patterns
 * to provide the `padding`, `background`, and `border` styling
 * that is common to those two patterns at extra-small screen sizes.
 * It is not intended to be used directly.
 */

.u-block-link {
    box-sizing: border-box;
    display: block;
    padding-top: unit( 10px / @base-font-size-px, em );
    padding-bottom: unit( 10px / @base-font-size-px, em );
    border-top-width: 1px;
    border-bottom-width: 1px;
    // 100% width is needed when block or jump link are applied to a <button>
    width: 100%;
    text-align: left;

    .a-link_text {
        border-bottom-width: 0;
    }
}