@import '../shape/slider';

////
/// @group schemas
/// @access private
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// Generates a light slider schema.
/// @type {Map}
///
/// @property {map} track-color [igx-color: ('secondary', 500)] - The color of the track.
/// @property {map} track-hover-color [igx-color: ('secondary', 500)] - The color of the track on hover.
/// @property {map} thumb-color [igx-color: ('secondary', 500)] - The color of the thumb.
/// @property {map} thumb-border-color [igx-color: ('secondary', 500)] - The thumb border color.
/// @property {map} thumb-disabled-border-color [igx-color: ('grays', 400)] - The thumb border color when its disabled
/// @property {map} disabled-thumb-color [igx-color: ('grays', 400), hexrgba: ()] - The thumb color when its disabled.
/// @property {map} label-background-color [igx-color: ('secondary', 500)] - The background color of the bubble label.
/// @property {map} label-text-color [igx-contrast-color: ('secondary', 500)] - The text color of the bubble label.
/// @property {map} base-track-color [igx-color: ('grays', 500)] - The base background color of the track.
/// @property {map} base-track-hover-color [igx-color: ('secondary', 500), rgba: .24] - The base background color of the track on hover.
/// @property {map} disabled-base-track-color [igx-color: ('grays', 400)] - The base background color of the track when is disabled.
///
/// @property {map} tick-label-color [igx-color: ('grays', 400)] - The color of the tick label.
/// @property {map} tick-label-color--tall [igx-color: ('grays', 800)] - The color of the tall tick label .
/// @property {map} tick-color [igx-color: ('grays', 400)] - The background-color of the tick.
/// @property {map} tick-color--tall [igx-color: ('grays', 400)] - The background-color of the tall tick.

/// @see $default-palette
$_light-slider: extend(
    $_default-shape-slider,
    (
        variant: 'material',

        tick-color:  (
            igx-color: ('grays', 500)
        ),

        tick-color-tall:  (
            igx-color: ('grays', 500)
        ),

        tick-label-color:  (
            igx-color: ('grays', 500)
        ),

        tick-label-color-tall:  (
            igx-color: ('grays', 900)
        ),

        track-color: (
            igx-color: ('secondary', 500)
        ),

        thumb-color: (
            igx-color: ('secondary', 500)
        ),

        thumb-border-color: (
            igx-color: ('secondary', 500)
        ),

        label-background-color: (
            igx-color: ('secondary', 500),
            hexrgba: ()
        ),

        label-text-color: (
            igx-contrast-color: ('secondary', 500)
        ),

        disabled-thumb-color: (
            igx-color: ('grays', 400),
            hexrgba: ()
        ),

        disabled-base-track-color: (
            igx-color: ('grays', 400)
        ),

        thumb-disabled-border-color: (
            igx-color: ('grays', 400)
        ),

        base-track-color: (
            igx-color: ('secondary', 500),
            rgba: .24
        ),

        base-track-hover-color:  (
            igx-color: ('secondary', 500),
            rgba: .24
        ),

        track-hover-color: (
            igx-color: ('secondary', 500)
        )
    )
);

/// Generates a fluent slider schema.
/// @type {Map}
///
/// @property {map} track-color [igx-color: ('grays', 700), hexrgba: #fff] - The color of the track.
/// @property {map} track-hover-color [igx-color: ('primary', 500)] - The color of the track on hover.
/// @property {map} thumb-color [igx-color: 'surface'] - The color of the thumb.
/// @property {map} thumb-border-color [igx-color: ('grays', 700)] - The thumb border color.
/// @property {map} thumb-disabled-border-color [igx-color: ('grays', 400), hexrgba: #fff] - The thumb border color when its disabled
/// @property {map} disabled-thumb-color [igx-color: 'surface'] - The thumb color when its disabled.
/// @property {map} base-track-color [igx-color: ('grays', 400)] - The base background color of the track.
/// @property {map} base-track-hover-color [igx-color: ('primary', 500), rgba: .32] - The base background color of the track on hover.
$_fluent-slider: extend($_light-slider, (
    variant: 'fluent',

    track-color: (
        igx-color: ('grays', 700),
        hexrgba: #fff
    ),

    track-hover-color: (
        igx-color: ('primary', 500)
    ),

    thumb-color: (
        igx-color: 'surface'
    ),

    thumb-border-color: (
        igx-color: ('grays', 700)
    ),

    thumb-disabled-border-color: (
        igx-color: ('grays', 400),
        hexrgba: #fff
    ),

    disabled-thumb-color: (
        igx-color: 'surface'
    ),

    base-track-color: (
        igx-color: ('grays', 400)
    ),

    base-track-hover-color:  (
        igx-color: ('primary', 500),
        rgba: .32
    ),
));