////
///
/// Focus Effects Mixin Module
/// ===========================================================================
///
/// This module provides mixins for focus state effects.
///
/// @group Effects
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


// ============================================================================
// Use
// ============================================================================

@use "../../variables" as *;


// ============================================================================
// Focus State Mixins
// ============================================================================

///
/// Default focus style with outline.
///
/// @param {Color} $color [$focus-color-default] - Outline color.
/// @param {Length} $width [2px] - Outline width.
/// @param {Length} $offset [2px] - Outline offset.
///
@mixin focus_default($color: $focus-color-default, $width: 2px, $offset: 2px) {
    &:focus {
        outline: $width solid $color;
        outline-offset: $offset;
    }
}

///
/// Focus ring using box-shadow.
///
/// @param {Color} $color [$focus-color-default] - Ring color.
/// @param {Number} $opacity [0.5] - Ring opacity.
/// @param {Length} $spread [3px] - Ring spread.
///
@mixin focus_ring($color: $focus-color-default, $opacity: 0.5, $spread: 3px) {
    &:focus {
        outline: none;
        box-shadow: 0 0 0 $spread rgba($color, $opacity);
    }
}

///
/// Focus glow effect.
///
/// @param {Color} $color [$focus-color-default] - Glow color.
/// @param {Number} $opacity [0.6] - Glow opacity.
/// @param {Length} $spread [15px] - Glow spread.
///
@mixin focus_glow($color: $focus-color-default, $opacity: 0.6, $spread: 15px) {
    &:focus {
        outline: none;
        box-shadow: 0 0 $spread rgba($color, $opacity);
    }
}

///
/// Focus outline (dashed style).
///
/// @param {Color} $color [$focus-color-purple] - Outline color.
/// @param {Length} $width [3px] - Outline width.
/// @param {Length} $offset [3px] - Outline offset.
///
@mixin focus_outline($color: $focus-color-purple, $width: 3px, $offset: 3px) {
    &:focus {
        outline: $width dashed $color;
        outline-offset: $offset;
    }
}