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

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

/// Generates a light grid schema.
/// @type {Map}
/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #fff] - The table header background color.
/// @prop {Map} header-text-color [igx-color: ('grays', 600)] - The table header text color.
///
/// @prop {Map} sorted-header-icon-color [igx-color: ('secondary', 500)] - The sorted table header icon color.
/// @prop {Map} sortable-header-icon-hover-color [igx-color: ('secondary', 500)] - The icon color on hover in grid header when the column is sortable.
///
/// @prop {Number} header-border-width [1px] - The border width used for header borders.
/// @prop {String} header-border-style [solid] - The border style used for header borders.
/// @prop {Map} header-border-color [igx-color: ('grays', 200)] - The color used for header borders.
/// @prop {Map} ghost-header-text-color [igx-color: ('grays', 600)] - The dragged header text color.
/// @prop {Map} ghost-header-icon-color [igx-color: ('grays', 500)] - The dragged header icon color.
/// @prop {Color} ghost-header-background [#fff] - The dragged header background color.
/// @prop {Color} content-background [#fff] - The table body background color.
/// @prop {Map} content-text-color [igx-color: ('grays', 800)] - The table body text color.
/// @prop {Color} row-odd-background [#fff] - The background color of odd rows.
/// @prop {Color} row-even-background [#fff] - The background color of even rows.
/// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows.
/// @prop {Color} row-even-text-color [inherit] - The text color of even rows.
/// @prop {Map} row-selected-background [igx-color: ('secondary', 50)] - The selected row background color.
/// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color.
/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50)] - The selected row hover background.
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color.
/// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color.
/// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color.
/// @prop {map} row-highlight [igx-color: ('secondary', 500)] - The grid row highlight color.
/// @prop {Number} pinned-border-width [2px] - The border width of the pinned border.
/// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border.
/// @prop {Map} pinned-border-color [igx-color: ('grays', 400)] - The color of the pinned border.
/// @prop {Map} cell-active-border-color [igx-color: ('secondary', 500)] - The active(focused) cell border color.
/// @prop {Map} cell-selected-background [igx-color: ('grays', 200)] - The selected cell background color.
/// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200)] - The selected cell text color.
/// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
/// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
/// @prop {Map} group-row-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group row background color.
/// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), hexrgba: #fff] - The drop area background on drop color.
/// @prop {Map} active-expand-icon-color [igx-color: ('grays', 500)] - The drop area background on drop color.
/// @prop {Map} active-expand-icon-hover-color [igx-color: ('primary', 500)] - The drop area background on drop color.
/// @prop {Map} group-label-column-name-text [igx-color: ('primary', 500)] - The grid group row column name text color.
/// @prop {Map} group-label-icon [igx-color: ('primary', 500)] - The grid group row icon color.
/// @prop {Map} group-label-text [igx-color: ('grays', 800)] - The grid group row text color.
/// @prop {Map} expand-all-icon-color [igx-color: ('grays', 600)] - The grid header expand all group rows icon color.
/// @prop {Map} expand-all-icon-hover-color [igx-color: ('grays', 800)] - The grid header expand all group rows icon hover color.
/// @prop {Map} expand-icon-color [igx-color: ('grays', 600)] - The grid row expand icon color.
/// @prop {Map} expand-icon-hover-color [igx-color: ('primary', 500)] - The grid row expand icon hover color.
/// @prop {Map} group-count-background [igx-color: ('grays', 200)] - The grid group row cont badge background color.
/// @prop {Map} group-count-text-color [igx-color: ('grays', 600)] - The grid group row cont badge text color.
/// @prop {Map} drop-area-text-color [igx-color: ('grays', 600)] - The drop area text color.
/// @prop {Map} drop-area-icon-color [igx-color: ('grays', 500)] - The drop area icon color.
/// @prop {Map} drop-area-background [igx-color: ('grays', 100)] - The drop area background color.
/// @prop {Map} drop-area-on-drop-background [igx-color: ('grays', 200)] - The drop area background on drop color.
/// @prop {Map} tree-filtered-text-color [igx-color: ('grays', 500)] - grouping row background color on focus.
/// @prop {Color} filtering-header-background [#fff] - The background color of the filtered column header.
/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 800)] - The text color color of the filtered column header.
/// @prop {Color} filtering-row-background [#fff] - The background color of the filtering row.
/// @prop {Map} filtering-row-text-color [igx-color: ('grays', 800)] - The text-color color of the filtering row.
/// @prop {Map} body-summaries-background [igx-color: ('grays', 300), hexrgba: #fff] - The background color of the summary groups located the body.
/// @prop {Map} body-summaries-text-color [igx-color: ('grays', 300), hexrgba: #fff, text-contrast: ()] - The text color of the summary groups located the body.
/// @prop {Map} root-summaries-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the summary groups located the footer.
/// @prop {Map} root-summaries-text-color [igx--color: ('grays', 100), hexrgba: #fff, text-contrast: ()] - The text color of the summary groups located the footer.
/// @prop {Map} row-drag-color [igx-color: ('grays', 200))] - The color of the drag handle.
/// @prop {Map} row-ghost-background [igx-color: ('primary', 50))] - The background color of the dragged row.
/// @prop {number} grid-elevation [2] - The elevation used for the grid.
/// @prop {number} drag-elevation [5] - The elevation used for movable elements (ex. column header).
/// @prop {Number} drop-area-border-radius [1] - The border radius fraction, between 0-1 to be used for card date.
///
/// @requires {function} extend
/// @requires {map} $_default-shape-grid
/// @requires {map} $_default-elevation-grid
/// @see $default-palette
$_light-grid: extend(
    $_default-shape-grid,
    $_default-elevation-grid,
    (
        variant: 'material',

        grid-border-color: transparent,

        header-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        header-text-color: (
            igx-color: ('grays', 600)
        ),

        sortable-header-icon-hover-color: (
            igx-color: ('secondary', 500)
        ),

        sorted-header-icon-color: (
            igx-color: ('secondary', 500)
        ),

        header-border-width: 1px,
        header-border-style: solid,

        header-border-color: (
            igx-color: ('grays', 200)
        ),

        content-background: #fff,
        content-text-color: (
            igx-color: ('grays', 800)
        ),

        ghost-header-text-color: (
            igx-color: ('grays', 600)
        ),

        ghost-header-icon-color: (
            igx-color: ('grays', 500)
        ),

        ghost-header-background: #fff,

        row-odd-background: #fff,
        row-even-background: #fff,
        row-odd-text-color: inherit,
        row-even-text-color: inherit,

        row-selected-background: (
            igx-color: ('secondary', 50),
        ),

        row-selected-hover-background: (
            igx-color: ('secondary', 50),
        ),

        row-selected-text-color: (
            igx-contrast-color: ('secondary', 50)
        ),

        row-hover-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        row-hover-text-color: (
            igx-contrast-color: ('grays', 200)
        ),
        row-border-color: (
            igx-color: ('grays', 300)
        ),

        pinned-border-width: 2px,
        pinned-border-style: solid,

        pinned-border-color: (
            igx-color: ('grays', 400)
        ),

        cell-active-border-color: (
            igx-color: ('secondary', 500)
        ),

        cell-selected-background: (
            igx-color: ('grays', 200),
            hexrgba: #fff
        ),

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

        cell-editing-background: #fff,

        edit-mode-color: (
            igx-color: ('secondary', 500)
        ),

        edited-row-indicator: (
            igx-color: ('grays', 400)
        ),

        cell-edited-value-color: (
            igx-color: ('grays', 600)
        ),

        resize-line-color: (
            igx-color: ('secondary', 500)
        ),

        drop-indicator-color: (
            igx-color: ('secondary', 500)
        ),

        grouparea-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        group-label-column-name-text: (
            igx-color: ('primary', 500)
        ),

        group-label-icon: (
            igx-color: ('primary', 500)
        ),

        group-label-text: (
            igx-color: ('grays', 800)
        ),

        expand-all-icon-color: (
            igx-color: ('grays', 600)
        ),

        expand-all-icon-hover-color: (
            igx-color: ('grays', 800)
        ),

        expand-icon-color: (
            igx-color: ('grays', 600)
        ),

        expand-icon-hover-color: (
            igx-color: ('primary', 500)
        ),

        active-expand-icon-color: (
            igx-color: ('grays', 500)
        ),

        active-expand-icon-hover-color: (
            igx-color: ('primary', 500)
        ),

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

        group-count-text-color: (
            igx-color: ('grays', 600)
        ),

        drop-area-text-color: (
            igx-color: ('grays', 600)
        ),

        drop-area-icon-color: (
            igx-color: ('grays', 500),
            hexrgba: ()
        ),

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

        drop-area-on-drop-background: (
            igx-color: ('grays', 200)
        ),

        group-row-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        group-row-selected-background: (
            igx-color: ('grays', 200),
            hexrgba: #fff
        ),

        filtering-header-background: #fff,

        filtering-header-text-color: (
            igx-color: ('grays', 800)
        ),

        filtering-row-background: #fff,

        filtering-row-text-color: (
            igx-color: ('grays', 800)
        ),

        tree-filtered-text-color: (
            igx-color: ('grays', 500)
        ),

        body-summaries-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        body-summaries-text-color: (
            igx-color: ('grays', 100),
            hexrgba: #fff,
            text-contrast: ()
        ),

        root-summaries-background: (
            igx-color: ('grays', 300),
            hexrgba: #fff
        ),

        root-summaries-text-color: (
            igx-color: ('grays', 300),
            hexrgba: #fff,
            text-contrast: ()
        ),

        row-highlight: (
            igx-color: ('secondary', 500)
        ),

        row-ghost-background: (
            igx-color: ('primary', 50)
        ),

        row-drag-color: (
            igx-color: ('grays', 200)
        )
    )
);

/// Generates a fluent grid schema.
/// @type {Map}
/// @prop {Map} grid-border-color [igx-color: ('grays', 100)] - The grid border color only.
/// @prop {Map} header-background [igx-color: 'surface'] - The table header background color.
/// @prop {Map} header-border-color [igx-color: ('grays', 100)] - The color used for header borders.
/// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected row hover background.
/// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color.
/// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border.
/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100)] - The active(focused) cell border color.
/// @prop {Map} cell-selected-background [igx-color: ('grays', 300), hexrgba: #fff] - The selected cell background color.
/// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color.
/// @prop {Map} group-row-background [igx-color: ('grays', 50), hexrgba: #fff] - The grid group row background color.
/// @prop {Map} group-row-selected-background [igx-color: ('grays', 100), hexrgba: #fff] - The drop area background on drop color.
/// @prop {Map} filtering-header-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the filtered column header.
/// @prop {Map} filtering-header-text-color [igx-color: ('grays', 900), hexrgba: #fff] - The text color color of the filtered column header.
/// @prop {Map} filtering-row-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the filtering row.
/// @prop {Map} root-summaries-background [igx-color: 'surface'] - The background color of the summary groups located the footer.
/// @prop {Map} row-ghost-background [igx-color: 'surface'] - The background color of the dragged row.
/// @prop {number} grid-elevation [0] - The elevation used for the grid.
/// @prop {number} drag-elevation [1] - The elevation used for movable elements (ex. column header).
/// @prop {Number} drop-area-border-radius [2px] - The border radius fraction, between 0-1 to be used drop-area.
///
/// @requires {function} extend
/// @requires {map} $_light-grid
/// @requires {map} $_fluent-elevation-grid
$_fluent-grid: extend(
    $_light-grid,
    $_fluent-shape-grid,
    $_fluent-elevation-grid,
    (
        variant: 'fluent',

        grid-border-color: (
            igx-color: ('grays', 100)
        ),

        header-background: (
            igx-color: 'surface'
        ),

        header-border-color: (
            igx-color: ('grays', 100)
        ),

        row-selected-hover-background: (
            igx-color: ('grays', 200),
            hexrgba: #fff
        ),

        row-border-color: (
            igx-color: ('grays', 100)
        ),

        pinned-border-color: (
            igx-color: ('grays', 200)
        ),

        cell-active-border-color: (
            igx-color: ('primary', 100),
        ),

        cell-selected-background: (
            igx-color: ('grays', 300),
            hexrgba: #fff
        ),

        grouparea-background: (
            igx-color: 'surface'
        ),

        group-row-background: (
            igx-color: ('grays', 50),
            hexrgba: #fff
        ),

        group-row-selected-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        filtering-header-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        filtering-header-text-color: (
            igx-color: ('grays', 900),
            hexrgba: #fff
        ),

        filtering-row-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        header-text-color: (
            igx-color: ('grays', 900),
            hexrgba: #fff
        ),

        row-selected-background: (
            igx-color: ('grays', 100),
            hexrgba: #fff
        ),

        root-summaries-background: (
            igx-color: 'surface'
        ),

        row-ghost-background: (
            igx-color: 'surface'
        ),
    )
);