@mixin fr-link {
    --underline-img: linear-gradient(0deg, currentColor, currentColor);
    --text-spacing: 0;
    --title-spacing: 0;

    z-index: 1;
    display: inline;
    padding: 0;
    font-size: $paragraph-md-font-size;
    line-height: $paragraph-md-line-height;
    color: var(--text-action-high-blue-france);
    background-image: var(--underline-img), var(--underline-img);
    background-repeat: no-repeat, no-repeat;
    background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness));
    background-size: var(--underline-hover-width) calc(var(--underline-thickness) *2), var(--underline-idle-width) var(--underline-thickness);
    transition: background-size 0s;

    @include hover {
        --underline-hover-width: 100%;
    }

    &.fr-link--sm {
        padding: 0;
        font-size: $paragraph-sm-font-size;
        line-height: $paragraph-sm-line-height;
    }

    &.fr-link--lg {
        padding: 0;
        font-size: $paragraph-lg-font-size;
        line-height: $paragraph-lg-line-height;
    }
}

@mixin fr-link-download {
    position: relative;
    max-width: 100%;
    max-height: none;
    padding: 0 0;
    overflow: initial;
    font-size: 1rem;
    line-height: 1.5;

    &::after {
        --icon-size: 1rem;
        display: inline-block;
        flex: 0 0 auto;
        width: var(--icon-size);
        height: var(--icon-size);
        margin-right: -.125rem;
        margin-bottom: 1.75rem;
        margin-left: .5rem;
        vertical-align: calc((.75rem - var(--icon-size)) * .5 - 1.75rem);
        content: "";
        background-color: currentColor;
        mask-size: 100% 100%;
        mask-image: get-svg-url(download);
    }

    .fr-link__detail {
        @include fr-link-download-detail;
    }
}

@mixin fr-link-download-detail {
    position: absolute;
    left: 0;
    margin-top: 1.75rem !important;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-mention-grey);
    white-space: nowrap;
    pointer-events: none;
    cursor: text;
}
