///
/// High contrast focus
///

@use "../media-query";

@mixin ds_high-contrast-button($border-width: 0.125rem, $selector: ':enabled, :link') {
    @include media-query.ds_media-query-high-contrast {
        &:is(#{$selector}) {
            outline: $border-width solid transparent !important;
            outline-offset: -$border-width !important;
            transition-duration: 0s !important;

            &:hover {
                outline-color: highlight !important;
            }

            &:focus,
            &:active,
            &:focus-within {
                outline-offset: -$border-width !important;
                outline-width: $border-width * 2 !important;
            }
        }
    }
}

@mixin ds_high-contrast-link($selector: ':enabled, :link, summary') {
    @include media-query.ds_media-query-high-contrast {
        &:is(#{$selector}) {
            color: linkText !important;

            &:not(:focus) {
                text-decoration-line: underline !important;
            }
        }
    }
}

@mixin ds_high-contrast-outline($width: 0.125em, $inset: true, $colour: canvastext) {
    @include media-query.ds_media-query-high-contrast {
        outline: round(#{$width}, 1px) solid $colour !important;
        @if inset == true {
            outline-offset: calc(round(#{$width}, 1px) * -1) !important;
        }

        @content;
    }
}



// DEPRECATED - will be removed in a future version
@mixin ds_high-contrast-link-style {
    @include ds_high-contrast-link;
    @debug "Mixin 'ds_high-contrast-link-style' has been renamed to 'ds_high-contrast-link'. This alias will be removed in a future version of the Design System.";
}

// DEPRECATED - will be removed in a future version
@mixin ds_high-contrast-focus($width: 0.125rem) {
    @include ds_high-contrast-outline($width: $width, $colour: highlight);
    @debug "Mixin 'ds_high-contrast-focus' has been deprecated. Use 'ds_high-contrast-outline' with a $color parameter instead. This alias will be removed in a future version of the Design System.";
}