@use 'sass:map';
@use '../../config';
@use '../../functions' as *;
@use '../../schemas/' as *;
@use '../../../utils/map' as *;
@use '../../../color/functions' as *;
@use '../../../elevations/' as *;

////
/// @package theming
/// @group themes
/// @access public
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Banner Theme
///
/// PRIMARY TOKENS:
/// - `$banner-background` — The banner background color.
///
/// Derived colors are auto-calculated for contrast.
///
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
/// @param {Color} $banner-background [null] - The color used for the banner background. PRIMARY - derives message and illustration colors.
/// @param {Color} $banner-message-color [null] - The color used for the banner label. Auto-derived from banner-background.
/// @param {Color} $banner-border-color [null] - The color used for the banner border.
/// @param {Color} $banner-illustration-color [null] - The color used for the banner illustration. Auto-derived from banner-background.
/// @param {Number} $border-radius [null] - The border-radius for the banner.
///
/// @requires $light-material-schema
///
/// @example scss - Change the background in banner
///   $my-banner-theme: banner-theme($banner-background: #000);
///   // Pass the theme to the css-vars() mixin
///   @include css-vars($my-banner-theme);
@function banner-theme(
    $schema: $light-material-schema,
    $banner-background: null,
    $banner-message-color: null,
    $banner-border-color: null,
    $banner-illustration-color: null,
    $border-radius: null
) {
    $selector: (#{config.element-prefix() + '-' + 'banner'}, #{'.' + config.element-prefix() + '-' + 'banner'});
    $banner-schema: ();

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

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

    @if not($banner-message-color) and $banner-background {
        $banner-message-color: adaptive-contrast(var(--banner-background));
    }

    @if not($banner-illustration-color) and $banner-background {
        $banner-illustration-color: adaptive-contrast(var(--banner-background));
    }

    @return extend(
        $theme,
        (
            selector: $selector,
            banner-background: $banner-background,
            banner-message-color: $banner-message-color,
            banner-border-color: $banner-border-color,
            banner-illustration-color: $banner-illustration-color,
            border-radius: $border-radius,
        )
    );
}