/*------------------------------------*\
    FOCUS
    Default focus indicator
\*------------------------------------*/

@use "../../settings";
@use "../high-contrast";

$focus__outline-width: settings.$ds_focus__outline-width !default;
$focus__shadow-width: settings.$ds_focus__shadow-width !default;
$focus__input-shadow-width: settings.$ds_focus__input-shadow-width !default;

@mixin ds_focus($hasoutline: true) {
    background-color: settings.$ds_colour__link--focus__background;
    color: settings.$ds_colour__link--focus;
    text-decoration-line: none;
    transition-duration: 0s;

    @if $hasoutline {
        @include ds_focus-outline;
    } @else {
        outline-style: none;
    }

    @include ds_focus-shadow($hasoutline);

    @include high-contrast.ds_high-contrast-outline($inset: false, $colour: highlight);
}

@mixin ds_focus--button {
    outline-width: 0;
}

@mixin ds_focus--inset {
    box-shadow: inset 0 round(#{$focus__shadow-width * -1}, 1px) 0 settings.$ds_colour__link--focus__shadow;
    filter: none;
    outline-width: 0;
}

@mixin ds_input-focus($outline: $focus__outline-width, $shadow: $focus__input-shadow-width) {
    box-shadow: inset 0 0 0 round(#{$shadow}, 1px) settings.$ds_colour__link--focus__shadow;
    @include ds_focus-outline;
}

@mixin ds_focus-outline($width: $focus__outline-width) {
    outline: round(#{$width}, 1px) solid settings.$ds_colour__link--focus__background;
    outline-offset: 0;
}

@mixin ds_focus-shadow($hasoutline: true) {
    filter: drop-shadow(0px round($focus__shadow-width, 1px) 0px settings.$ds_colour__link--focus__shadow);
}