////
///
/// Focus Ring Mixins
/// ===========================================================================
///
/// Focus ring utility mixins for accessibility.
///
/// @group Mixins.Utilities
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

// ============================================================================
// Mixins
// ============================================================================

/// Base focus ring mixin
@mixin focus-ring {
    --focus-ring-color: #{$focus-ring-color};
    --focus-ring-width: #{$focus-ring-width};
    --focus-ring-opacity: #{$focus-ring-opacity};

    &:focus {
        outline: 0;
        box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    }
}

/// Primary focus ring
@mixin focus-ring--primary {
    --focus-ring-color: color-mix(
        in srgb,
        var(--color_accent_primary) #{$focus-ring-color-mix},
        transparent
    );
}

/// Success focus ring
@mixin focus-ring--success {
    --focus-ring-color: color-mix(
        in srgb,
        var(--color_log_success) #{$focus-ring-color-mix},
        transparent
    );
}

/// Warning focus ring
@mixin focus-ring--warning {
    --focus-ring-color: color-mix(
        in srgb,
        var(--color_log_warning) #{$focus-ring-color-mix},
        transparent
    );
}

/// Danger focus ring
@mixin focus-ring--danger {
    --focus-ring-color: color-mix(
        in srgb,
        var(--color_log_error) #{$focus-ring-color-mix},
        transparent
    );
}

/// Info focus ring
@mixin focus-ring--info {
    --focus-ring-color: color-mix(
        in srgb,
        var(--color_log_info) #{$focus-ring-color-mix},
        transparent
    );
}