@use '../../../../utils/map' as *;
@use '../../../../typography/functions' as *;
@use '../light/slider' as *;

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

// stylelint-disable max-line-length

/// Generates a base dark slider schema.
/// @access private
/// @type Map
$dark-base-slider: (
    _meta: (
        name: 'slider',
        variant: 'dark',
    ),
);

/// Generates a dark material slider schema.
/// @type Map
/// @requires $material-slider
$dark-material-slider: extend($material-slider, $dark-base-slider);

/// Generates a dark fluent slider schema.
/// @type Map
/// @prop {Map} base-track-color [color: ('gray', 300)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [color: ('gray', 300)] - The base background color of the track on hover.
/// @prop {Map} track-color [color: ('gray', 600)] - The color of the track.
/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
/// @prop {Map} thumb-border-color [color: ('gray', 400)] - The thumb border color.
/// @prop {Map} thumb-border-hover-color [color: ('gray', 400)] - The thumb border color on hover.
/// @prop {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
/// @prop {Map} thumb-disabled-border-color [color: ('gray', 200)] - The thumb border color when it's disabled.
/// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
/// @prop {Map} disabled-fill-track-color [color: ('gray', 300)] - The background color of the fill track when is disabled.
/// @requires $fluent-slider
$dark-fluent-slider: extend(
    $fluent-slider,
    $dark-base-slider,
    (
        base-track-color: (
            color: (
                'gray',
                300,
            ),
        ),
        base-track-hover-color: (
            color: (
                'gray',
                300,
            ),
        ),
        track-color: (
            color: (
                'gray',
                600,
            ),
        ),
        track-hover-color: (
            color: (
                'primary',
                300,
            ),
        ),
        thumb-border-color: (
            color: (
                'gray',
                400,
            ),
        ),
        thumb-border-hover-color: (
            color: (
                'gray',
                400,
            ),
        ),
        thumb-focus-color: (
            color: (
                'primary',
                100,
            ),
        ),
        thumb-disabled-border-color: (
            color: (
                'gray',
                200,
            ),
        ),
        disabled-base-track-color: (
            color: (
                'gray',
                100,
            ),
        ),
        disabled-fill-track-color: (
            color: (
                'gray',
                300,
            ),
        ),
    )
);

/// Generates a dark bootstrap slider schema.
/// @type Map
/// @prop {Map} base-track-color [color: ('secondary', 500, .48)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .48)] - The base background color of the track on hover.
/// @requires $bootstrap-slider
$dark-bootstrap-slider: extend(
    $bootstrap-slider,
    $dark-base-slider,
    (
        base-track-color: (
            color: (
                'secondary',
                500,
                0.48,
            ),
        ),
        base-track-hover-color: (
            color: (
                'secondary',
                500,
                0.48,
            ),
        ),
    )
);

/// Generates a dark indigo slider schema.
/// @type Map
/// @prop {Map} track-step-color [contrast-color: ('gray', 50, 0.3)] - The color of the track steps.
/// @prop {Map} base-track-color [contrast-color: ('gray', 50, 0.3)] - The base background color of the track.
/// @prop {Map} base-track-hover-color [contrast-color: ('gray', 50, 0.4)] - The base background color of the track on hover.
/// @prop {Map} track-color [color: ('primary', 400)] - The color of the track.
/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
/// @prop {Map} thumb-color [color: 'surface'] - The color of the thumb.
/// @prop {Map} thumb-border-color [color: ('primary', 400)] - The thumb border color.
/// @prop {Map} thumb-border-hover-color [color: ('primary', 300)] - The thumb border color when hovered.
/// @prop {Map} tick-color [contrast-color: ('gray', 50, 0.2)] - The background-color of the tick.
/// @prop {Map} tick-label-color [contrast-color: ('gray', 50, 0.6)] - The color of the tick label.
/// @prop {Map} label-background-color [color: ('gray', 300)] - The background color of the bubble label.
/// @prop {Map} label-text-color [contrast-color: ('gray', 50)] - The text color of the bubble label.
/// @prop {Map} disabled-thumb-color [color: 'surface'] - The thumb color when it's disabled.
/// @prop {Map} thumb-disabled-border-color [color: ('primary', 800)] - The thumb border color when it's disabled.
/// @prop {Map} disabled-base-track-color [contrast-color: ('gray', 50, 0.15)] - The base background color of the track when is disabled.
/// @prop {Map} disabled-fill-track-color [color: ('primary', 800)] - The background color of the fill track when is disabled.
/// @requires $indigo-slider
$dark-indigo-slider: extend(
    $indigo-slider,
    $dark-base-slider,
    (
        track-step-color: (
            contrast-color: (
                'gray',
                50,
                0.3,
            ),
        ),
        base-track-color: (
            contrast-color: (
                'gray',
                50,
                0.3,
            ),
        ),
        base-track-hover-color: (
            contrast-color: (
                'gray',
                50,
                0.4,
            ),
        ),
        track-color: (
            color: (
                'primary',
                400,
            ),
        ),
        track-hover-color: (
            color: (
                'primary',
                300,
            ),
        ),
        thumb-color: (
            color: 'surface',
        ),
        thumb-border-color: (
            color: (
                'primary',
                400,
            ),
        ),
        thumb-border-hover-color: (
            color: (
                'primary',
                300,
            ),
        ),
        tick-color: (
            contrast-color: (
                'gray',
                50,
                0.2,
            ),
        ),
        tick-label-color: (
            contrast-color: (
                'gray',
                50,
                0.6,
            ),
        ),
        label-background-color: (
            color: (
                'gray',
                300,
            ),
        ),
        label-text-color: (
            contrast-color: (
                'gray',
                50,
            ),
        ),
        disabled-thumb-color: (
            color: 'surface',
        ),
        thumb-disabled-border-color: (
            color: (
                'primary',
                800,
            ),
        ),
        disabled-base-track-color: (
            contrast-color: (
                'gray',
                50,
                0.15,
            ),
        ),
        disabled-fill-track-color: (
            color: (
                'primary',
                800,
            ),
        ),
    )
);