@use "../../settings";
@use "../focus";
@use "../high-contrast";
@use "../media-query";


$blocklink__outline-width: settings.$ds_blocklink__outline-width;
$link__current-underline-thickness: settings.$ds_link__current-underline-thickness;
$link__outline-width: settings.$ds_link__outline-width;
$link__underline-offset: settings.$ds_link__underline-offset;
$link__underline-thickness: settings.$ds_link__underline-thickness;
$link__underline-offset--hover: settings.$ds_link__underline-offset--hover;
$link__underline-thickness--hover: settings.$ds_link__underline-thickness--hover;




/// Link
///
/// Single definition to enforce consistent display of links and elements that
/// look like links (e.g. buttons we want to have display with a link-like style)

@mixin ds_link {
    @include high-contrast.ds_high-contrast-link;

    color: settings.$ds_colour__link;
    outline: 0px solid transparent;
    text-decoration: underline;
    text-underline-offset: $link__underline-offset;
    transition: color settings.$transition-out-time, background-color settings.$transition-out-time, outline-color settings.$transition-out-time;

    &:hover {
        color: settings.$ds_colour__link--hover;
        text-decoration-thickness: round($link__underline-thickness--hover, 1px);
        text-underline-offset: $link__underline-offset--hover;
        transition-duration: settings.$transition-in-time;
    }

    &:focus {
        @include focus.ds_focus;
    }

    > svg {
        fill: currentColor;
    }
}

@mixin ds_link--block($link-selector: null, $underline: false) {
    display: block;
    position: relative;
    @if $underline == false {
        text-decoration-line: none;
    }

    @if $link-selector {
        #{$link-selector} {
            &:focus {
                filter: none;
                @include media-query.ds_media-query-high-contrast {
                    outline-width: 0 !important;
                }
            }

            &:focus:hover {
                text-decoration-line: none;
            }
        }

        &:focus-within {
            @include focus.ds_focus;
            @include focus.ds_focus--inset;
        }

        &:hover:not(:focus-within) {
            background-color: settings.$ds_colour__link--hover__background;
            color: settings.$ds_colour__link--hover;
        }
    } @else {
        &:focus {
            @include focus.ds_focus--inset;
        }

        &:hover:not(:focus) {
            background-color: settings.$ds_colour__link--hover__background;
            color: settings.$ds_colour__link--hover;
        }
    }
}

@mixin ds_link-underline($link-selector) {
    @if $link-selector {
        &:not(:focus) #{$link-selector} {
            text-decoration: underline;
            text-underline-offset: $link__underline-offset;
        }

        &:hover #{$link-selector} {
            text-decoration-thickness: round($link__underline-thickness--hover, 1px);
            text-underline-offset: $link__underline-offset--hover;
        }
    }
    @else {
        text-decoration: underline;
        text-underline-offset: $link__underline-offset;

        &:hover {
            text-decoration-thickness: round($link__underline-thickness--hover, 1px);
            text-underline-offset: $link__underline-offset--hover;
        }
    }
}




/// Blocklink
///
/// Mixin to enforce consistency on block-style links, e.g. search results, category items, etc
///
/// @param {string} $link-selector - child element that is used as the link, optional
@mixin ds_blocklink($link-selector: null) {
    @include ds_link;
    @include ds_link--block($link-selector);
}