@import '../elevation/chip';
@import '../shape/chip';

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

/// Generates a light chip schema.
/// @type {Map}
/// @prop {Number} border-radius [1] - The border radius fraction, between 0-1 to be used for chip component.
/// @prop {Map} text-color [igx-color: ('grays', 700)] - The chip text color.
/// @prop {Map} background [igx-color: ('grays', 200)] - The chip background color.
/// @prop {Color} border-color [transparent] - The chip border color.
/// @prop {Map} ghost-background [igx-color: ('grays', 400), hexrgba: #fff)] - The chip ghost background color.
/// @prop {Map} hover-text-color [igx-color: ('grays', 700)] - The chip text hover color.
/// @prop {Map} hover-background [igx-color: ('grays', 300)] - The chip hover background color.
/// @prop {Color} hover-border-color [transparent] - The chip hover border color.
/// @prop {Map} selected-text-color [igx-color: ('grays', 700)] - The selected chip text color.
/// @prop {Map} selected-background [igx-color: ('grays', 300)] - The selected chip background color.
/// @prop {Color} selected-border-color [transparent] The selected chip border color.
/// @prop {Map} focus-background [igx-color: ('grays', 400)] The focused chip background color.
/// @prop {Map} focus-text-color [igx-color: ('grays', 700)] The focused chip text color.
/// @prop {Map} hover-selected-text-color [igx-color: ('grays', 700)] - The selected chip hover text color.
/// @prop {Map} hover-selected-background [igx-color: ('grays', 400)] - The selected chip hover background color.
/// @prop {Map} hover-selected-border-color [transparent] - The selected chip hover border color.
/// @prop {Map} focus-selected-text-color [igx-color: ('grays', 700)] - The selected chip text focus color.
/// @prop {Map} focus-selected-background [igx-color: ('grays', 400)] - The selected chip focus background color.
/// @prop {Map} focus-selected-border-color [transparent] - The selected chip focus border color.
/// @prop {Number} ghost-elevation [8] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
/// @prop {color} remove-icon-color [currentColor] - The remove icon color for the chip.
/// @prop {Map} remove-icon-color-focus [igx-color: ('error')] - The remove icon color on focus for the chip.
///
/// @requires {function} extend
/// @requires {map} $_default-shape-chip
/// @requires {map} $_default-elevation-chip
/// @see $default-palette
$_light-chip: extend(
    $_default-shape-chip,
    $_default-elevation-chip,
    (
        variant:'material',

        remove-icon-color: currentColor,
        remove-icon-color-focus: (
            igx-color: ('error')
        ),


        text-color: (
            igx-color: ('grays', 700)
        ),

        background: (
            igx-color: ('grays', 200)
        ),

        border-color: transparent,

        ghost-background: (
            igx-color: ('grays', 400),
            hexrgba: #fff
        ),

        hover-text-color: (
            igx-color: ('grays', 700)
        ),

        hover-background: (
            igx-color: ('grays', 300)
        ),

        hover-border-color: transparent,

        focus-text-color: (
            igx-color: ('grays', 700)
        ),

        focus-background: (
            igx-color: ('grays', 400)
        ),

        focus-border-color: transparent,

        selected-text-color: (
            igx-color: ('grays', 700)
        ),

        selected-background: (
            igx-color: ('grays', 300)
        ),

        selected-border-color: transparent,

        hover-selected-text-color: (
            igx-color: ('grays', 700)
        ),

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

        hover-selected-border-color: transparent,

        focus-selected-text-color: (
            igx-color: ('grays', 700)
        ),

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

        focus-selected-border-color: transparent
    )
);

/// Generates a fluent chip schema.
/// @type {Map}
/// @prop {Map} background [igx-color: ('grays', 100)] - The chip background color.
/// @prop {Color} ghost-background [#fff] - The chip ghost background color.
/// @prop {Map} hover-background [igx-color: ('grays', 200)] - The chip hover background color.
/// @prop {Map} selected-text-color [igx-contrast-color: ('primary', 500))] - The selected chip text color.
/// @prop {Map} selected-background [igx-color: ('primary', 500)] - The selected chip background color.
/// @prop {Map} focus-background [igx-color: ('primary', 500)] The focused chip background color.
/// @prop {Map} focus-text-color [igx-contrast-color: ('primary', 500)] The focused chip text color.
/// @prop {Map} hover-selected-text-color [igx-contrast-color: ('primary', 500)] - The selected chip hover text color.
/// @prop {Map} hover-selected-background [igx-color: ('primary', 500)] - The selected chip hover background color.
/// @prop {Map} focus-selected-text-color [igx-contrast-color: ('primary', 500)] - The selected chip text focus color.
/// @prop {Map} focus-selected-background [igx-color: ('primary', 500)] - The selected chip focus background color.
/// @prop {Number} ghost-elevation [2] - The elevation level for the chip's ghost (dragging mode). Between 0-24.
///
/// @requires {function} extend
/// @requires {map} $_light-chip
/// @requires {map} $_fluent-shape-chip
/// @requires {map} $_fluent-elevation-chip
$_fluent-chip: extend(
    $_light-chip,
    $_fluent-shape-chip,
    $_fluent-elevation-chip,
    (
        variant:'fluent',

        background: (
            igx-color: ('grays', 100),
        ),

        ghost-background: #fff,

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

        selected-text-color: (
            igx-contrast-color: ('primary', 500),
        ),

        selected-background: (
            igx-color: ('primary', 500),
        ),

        focus-background: (
            igx-color: ('primary', 500),
        ),

        focus-text-color: (
            igx-contrast-color: ('primary', 500)
        ),

        hover-selected-text-color: (
            igx-contrast-color: ('primary', 500)
        ),

        hover-selected-background: (
            igx-color: ('primary', 500),
        ),

        focus-selected-text-color: (
            igx-contrast-color: ('primary', 500)
        ),

        focus-selected-background:(
            igx-color: ('primary', 500),
        ),
    )
);