@import '../shape/drop-down';
@import '../elevation/drop-down';

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

/// Generates a light drop-down schema.
/// @type {Map}
/// @prop {Map} background-color [igx-color: 'surface'] - The drop-down background color.
/// @prop {Map} header-text-color [igx-color: ('secondary', 500)] - The drop-down header text color.
/// @prop {Map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down text color.
/// @prop {Map} hover-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down hover text color.
/// @prop {Map} hover-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down hover item background color.
/// @prop {Map} focused-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down focused item background color.
/// @prop {Map} focused-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down focused item text color.
/// @prop {Map} selected-item-background [igx-color: ('secondary', 100)] - The drop-down selected item background color.
/// @prop {Map} selected-item-text-color [igx-contrast-color: ('secondary', 100)] - The drop-down selected item text color.
/// @prop {Map} selected-hover-item-background [igx-color: ('secondary', 200)] - The drop-down selected item hover background color.
/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
/// @prop {Map} selected-focus-item-background [igx-color: ('secondary', 200)] - The drop-down selected item focus background color.
/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
/// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
/// @prop {Map} disabled-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The drop-down disabled item text color.
/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the badge shadow.
/// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for drop-down component.
///
/// @requires {function} extend
/// @requires {map} $_default-shape-drop-down
/// @requires {map} $_default-elevation-drop-down
/// @see $default-palette
$_light-drop-down: extend(
    $_default-shape-drop-down,
    $_default-elevation-drop-down,
    (
        background-color: (
            igx-color: 'surface'
        ),

        header-text-color: (
            igx-color: ('secondary', 500)
        ),

        item-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .74
        ),

        hover-item-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .74
        ),

        hover-item-background: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .04
        ),

        focused-item-background: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .04
        ),

        focused-item-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .74
        ),

        selected-item-background: (
            igx-color: ('secondary', 100),
        ),

        selected-item-text-color: (
            igx-contrast-color: ('secondary', 100)
        ),

        selected-hover-item-background: (
            igx-color: ('secondary', 200),
        ),

        selected-hover-item-text-color: (
            igx-contrast-color: ('secondary', 200)
        ),

        selected-focus-item-background: (
            igx-color: ('secondary', 200),
        ),

        selected-focus-item-text-color: (
            igx-contrast-color: ('secondary', 200)
        ),

        disabled-item-background: transparent,

        disabled-item-text-color: (
            igx-color: 'surface',
            text-contrast: (),
            rgba: .38
        ),
    )
);

/// Generates a fluent drop-down schema.
/// @type {Map}
/// @prop {Map} selected-item-background [igx-color: ('grays', 100)] - The drop-down selected item background color.
/// @prop {Map} selected-item-text-color [igx-contrast-color: ('grays', 100)] - The drop-down selected item text color.
/// @prop {Map} selected-hover-item-background [igx-color: ('grays', 200)] - The drop-down selected item hover background color.
/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: ('grays', 200)] - The drop-down selected item hover text color.
/// @prop {Map} selected-focus-item-background [igx-color: ('grays', 200)] - The drop-down selected item focus background color.
/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('grays', 200)] - The drop-down selected item focus text color.
/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the badge shadow.
/// @prop {Number} border-radius [2px] - The border radius fraction, between 0-1 to be used for drop-down component.
///
/// @requires {function} extend
/// @requires {map} $_light-drop-down
/// @requires {map} $_fluent-shape-drop-down
/// @requires {map} $_fluent-elevation-drop-down
$_fluent-drop-down: extend(
    $_light-drop-down,
    $_fluent-shape-drop-down,
    $_fluent-elevation-drop-down,
    (
        selected-item-background: (
            igx-color: ('grays', 100)
        ),

        selected-item-text-color: (
            igx-contrast-color: ('grays', 100)
        ),

        selected-hover-item-background: (
            igx-color: ('grays', 200)
        ),

        selected-hover-item-text-color: (
            igx-contrast-color: ('grays', 200)
        ),

        selected-focus-item-background: (
            igx-color: ('grays', 200)
        ),

        selected-focus-item-text-color: (
            igx-contrast-color: ('grays', 200)
        ),
    )
);