@use 'sass:map';
@use '../../base' as *;
@use '../../themes/schemas' as *;

////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
////

/// If only background color(s) specified, text color(s) will be assigned automatically to a contrasting color.
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $resting-background [null]- The background color used for the highlight in its resting state.
/// @param {Color} $resting-color [null] - The text color used for the highlight in its resting state.
/// @param {Color} $active-background [null] - The background color used for the highlight in its active state.
/// @param {Color} $active-color [null] - The text color used for the highlight in its active state.
/// @requires $light-material-schema
/// @example scss Change the background and icon colors in icon highlight
///   $my-highlight-theme: highlight-theme($resting-background: black, $active-color: white);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-highlight-theme);
@function highlight-theme(
    $schema: $light-material-schema,
    $resting-background: null,
    $resting-color: null,
    $active-background: null,
    $active-color: null,
) {
    $name: 'igx-highlight';
    $selector: '.igx-highlight';
    $highlight-schema: ();

    @if map.has-key($schema, 'highlight') {
        $highlight-schema: map.get($schema, 'highlight');
    } @else {
        $highlight-schema: $schema;
    }

    $theme: digest-schema($highlight-schema);

    @if not($resting-color) and $resting-background {
        $resting-color: text-contrast($resting-background);
    }

    @if not($active-color) and $active-background {
        $active-color: text-contrast($active-background);
    }

    @return extend($theme, (
        name: $name,
        selector: $selector,
        resting-background: $resting-background,
        resting-color: $resting-color,
        active-background: $active-background,
        active-color: $active-color,
        theme: map.get($schema, '_meta', 'theme'),
    ));
}

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin highlight($theme) {
    @include css-vars($theme);

    %igx-highlight {
        color: var-get($theme, 'resting-color');
        background: var-get($theme, 'resting-background');
    }

    %igx-highlight--active {
        color: var-get($theme, 'active-color');
        background: var-get($theme, 'active-background');
    }
}