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

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

/// Focus outline width
/// @type Number
$focus__outline-width: settings.$ds_focus__outline-width !default;

/// Focus shadow width
/// @type Number
$focus__shadow-width: settings.$ds_focus__shadow-width !default;

/// Input focus shadow width
/// @type Number
$focus__input-shadow-width: settings.$ds_focus__input-shadow-width !default;

/// Focus indicator for interactive elements
/// @param {boolean} $hasoutline - Whether the focus indicator should include an outline (default: true)
/// @output Focus indicator for interactive elements
@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;

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

/// Override styles for button focus indicator
/// @output Set outline width to 0
@mixin ds_focus--button {
    outline-width: 0;
}

/// Apply an inset focus indicator to an element
/// @output Inset focus indicator for interactive elements
@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;
}

/// Apply a focus indicator to an input element
/// @param {number} $outline - Deprecated -The width of the outline (default: $focus__outline-width)
/// @param {number} $shadow - The width of the shadow (default: $focus__input-shadow-width)
/// @output Focus indicator for input elements  
@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;
}

/// Apply a focus outline to an element
/// @param {number} $width - The width of the outline (default: $focus__outline-width)
/// @output Focus outline for interactive elements
@mixin ds_focus-outline($width: $focus__outline-width) {
    outline: round(#{$width}, 1px) solid settings.$ds_colour__link--focus__background;
    outline-offset: 0;
}

/// Apply a focus shadow to an element
/// @param {boolean} $hasoutline - Deprecated - Whether the focus indicator should include an outline (default: true)
/// @output Focus shadow for interactive elements
@mixin ds_focus-shadow($hasoutline: true) {
    filter: drop-shadow(0px round($focus__shadow-width, 1px) 0px settings.$ds_colour__link--focus__shadow);
}