@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../elevation/tooltip' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Generates a base light tooltip schema.
/// @type Map
/// @prop {Map} background [color: ('gray', 700, .9)] - The background color of the tooltip.
/// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color of the tooltip.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
/// @prop {Map} typography [tooltip-text: (value: null)] - The typography styles used for the tooltip.
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the tooltip.
/// @requires $default-elevation-tooltip
$light-tooltip: extend(
    $default-elevation-tooltip,
    (
        background: (
            color: (
                'gray',
                700,
                0.9,
            ),
        ),

        text-color: (
            contrast-color: (
                'gray',
                700,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(16px),
            ),
        ),

        typography: (
            tooltip-text: (
                value: null,
            ),
        ),

        _meta: (
            name: 'tooltip',
            variant: 'light',
        ),
    )
);

/// Generates a light material tooltip schema.
/// @type Map
/// @requires $light-tooltip
$material-tooltip: extend(
    $light-tooltip,
    (
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a light fluent tooltip schema.
/// @type Map
/// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.
/// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color of the tooltip.
/// @prop {List} border-radius [(rem(2px), rem(0), rem(16px))] - The border radius used for tooltip.
/// @requires $light-tooltip
$fluent-tooltip: extend(
    $light-tooltip,
    (
        background: (
            color: (
                'gray',
                900,
                0.8,
            ),
        ),

        text-color: (
            contrast-color: (
                'gray',
                900,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(2px),
                rem(0),
                rem(16px),
            ),
        ),
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap tooltip schema.
/// @type Map
/// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.
/// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color of the tooltip.
/// @requires $light-tooltip
$bootstrap-tooltip: extend(
    $light-tooltip,
    (
        background: (
            color: (
                'gray',
                900,
                0.8,
            ),
        ),
        text-color: (
            contrast-color: (
                'gray',
                900,
            ),
        ),
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo tooltip schema.
/// @type Map
/// @prop {Map} background [color: ('gray', 600, .9)] - The background color of the tooltip.
/// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
/// @prop {Map} typography [tooltip-text: (value: 'subtitle-2')] - The typography styles used for the tooltip.
/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the tooltip.
/// @requires $light-tooltip
/// @requires $indigo-elevation-tooltip
$indigo-tooltip: extend(
    $light-tooltip,
    $indigo-elevation-tooltip,
    (
        background: (
            color: (
                'gray',
                600,
                0.9,
            ),
        ),

        border-radius: (
            border-radius: (
                rem(4px),
                rem(0),
                rem(16px),
            ),
        ),

        typography: (
            tooltip-text: (
                value: 'subtitle-2',
            ),
        ),
        _meta: (
            theme: 'indigo',
        ),
    )
);