///
/// Component Helpers
/// ---------------------------------------------------------------------------
/// Mixins for Text and Background Colors: These mixins can be used to apply
/// text and background colors throughout your stylesheets.
/// They make it easy to maintain consistency and make changes later if needed.
/// ---------------------------------------------------------------------------

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

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


///
/// Applies the designated text color from the color map.
///
/// @name text_color
/// @param {String} $color_name - The name of the color in the color map.
///
/// @example scss - Applying text color
///   .header {
///     @include text_color('primary');
///   }
///
@mixin text_color($color_name) {
    color: hue_color($color_name);
}


///
/// Sets the background color using a named color from the color map.
///
/// @name bg_color
/// @param {String} $color_name - The name of the color in the color map.
///
/// @example scss - Setting background color
///   .highlight {
///     @include bg_color('secondary');
///   }
///
@mixin bg_color($color_name) {
    background-color: hue_color($color_name);
}


///
/// Defines border color using a named color from the color map.
///
/// @name border-color
/// @param {String} $color_name - The name of the color.
///
/// @example scss - Adding a border color
///   .featured {
///     @include border-color('accent');
///   }
///
@mixin border-color($color_name) {
    border-color: hue_color($color_name);
}


///
/// Creates a button with a theme using colors from the color map.
///
/// @name button_theme
/// @param {String} $bg_color_name - The background color name.
/// @param {String} $text_color_name [null] - The text color name, optional.
///
/// @example scss - Theming a button
///   .button {
///     @include button_theme('primary', 'onPrimary');
///   }
///
@mixin button_theme(
    $bg_color_name,
    $text_color_name: null
) {
    @include bg_color($bg_color_name);
    @if $text_color_name != null {
        @include text_color($text_color_name);
    } @else {
        @include accessible_text_color($bg_color_name);
    }
    // Add more button styles here
}


///
/// Generates CSS utility classes for text and background colors.
///
/// @example scss - Generating utility classes
///   // Automatically created by iterating over the $hue color map
///
@each $color_name, $color_value in $hue {

    .text-#{$color_name} {
        @include text_color($color_name);
    }

    .bg-#{$color_name} {
    @include bg_color($color_name);
    }

    .border-#{$color_name} {
        @include border-color($color_name);
    }

}