////
/// @group themes
/// @access public
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
////

/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
///
/// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.
/// @param {Color} $label-color [null] - The summaries label color.
/// @param {Color} $result-color [null] - The summaries value/result color.
/// @param {Color} $border-color [null] - The summaries border color.
/// @param {Color} $pinned-border-width [null] - The border width of the summary panel.
/// @param {Color} $pinned-border-style [null] - The border style of the summary panel.
/// @param {Color} $pinned-border-color [null] - The border color of the summary panel.
/// @param {Color} $label-hover-color [null] - The summaries hover label color.
///
/// @requires $default-palette
/// @requires $light-schema
/// @requires apply-palette
/// @requires extend
/// @requires text-contrast
///
/// @example scss Change the summaries background nad labels color
///   $my-summary-theme: igx-grid-summary-theme(
///     $background-color: black,
///     $label-color: white
///   );
///   // Pass the theme to the igx-grid-filtering component mixin
///   @include igx-grid-summary($my-summary-theme);
@function igx-grid-summary-theme(
    $palette: $default-palette,
    $schema: $light-schema,

    $background-color: null,
    $focus-background-color: null,
    $label-color: null,
    $result-color: null,
    $border-color: null,
    $pinned-border-width: null,
    $pinned-border-style: null,
    $pinned-border-color: null,
    $label-hover-color: null
) {
    $name: 'igx-grid-summary';
    $grid-summary-schema: ();

    @if map-has-key($schema, $name) {
        $grid-summary-schema: map-get($schema, $name);
    } @else {
        $grid-summary-schema: $schema;
    }

    $theme: apply-palette($grid-summary-schema, $palette);

    @if not($result-color) and $background-color {
        $result-color: text-contrast($background-color);
    }

    @if not($border-color) and $background-color {
        $border-color: rgba(text-contrast($background-color), .26);
    }

    @if not($pinned-border-color) and $background-color {
        $pinned-border-color: rgba(text-contrast($background-color), .26);
    }

    @return extend($theme, (
        name: $name,
        palette: $palette,
        background-color: $background-color,
        focus-background-color: $focus-background-color,
        label-color: $label-color,
        result-color: $result-color,
        border-color: $border-color,
        pinned-border-width: $pinned-border-width,
        pinned-border-style: $pinned-border-style,
        pinned-border-color: $pinned-border-color,
        label-hover-color: $label-hover-color
    ));
}

/// @param {Map} $theme - The theme used to style the component.
/// @requires {mixin} igx-root-css-vars
/// @requires {mixin} ellipsis
/// @requires rem
/// @requires --var
@mixin igx-grid-summary($theme) {
    @include igx-root-css-vars($theme);

    $left: if-ltr(left, right);
    $right: if-ltr(right, left);

    $cell-pin: (
        style: --var($theme, 'pinned-border-width') --var($theme, 'pinned-border-style'),
        color: --var($theme, 'pinned-border-color')
    );

    $item-padding: (
        comfortable: rem(6px) 0,
        cosy: rem(2px) 0,
        compact: 0
    );

    $summary-padding: (
        comfortable: 0 rem(24px),
        cosy: 0 rem(16px),
        compact: 0 rem(12px)
    );

    %igx-grid-summary {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        padding: map-get($summary-padding, 'comfortable');
        background: --var($theme, 'background-color', inherit);
        overflow: hidden;
        outline-style: none;

        &::after {
            position: absolute;
            content: '';
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        &:focus::after {
            background: --var($theme, 'focus-background-color');
        }
    }

    %igx-grid-summary--cosy {
        padding: map-get($summary-padding, 'cosy');
    }

    %igx-grid-summary--compact {
        padding: map-get($summary-padding, 'compact');
    }

    %igx-grid-summary--pinned {
        position: relative;
        z-index: 1;
    }

    %grid-summary--fixed-width {
        flex-grow: 0;
    }

    %igx-grid-summary--pinned-last {
        border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color');
        @media print {
            border-right: map-get($cell-pin, 'style') #999;
        }
    }

    %igx-grid-summary__item {
        display: flex;
        align-items: center;
        padding: map-get($item-padding, 'comfortable');
        font-size: rem(12px);
        position: relative;
    }

    %igx-grid-summary__item--cosy {
        padding: map-get($item-padding, 'cosy');
    }

    %igx-grid-summary__item--compact {
        padding: map-get($item-padding, 'compact');
    }

    %igx-grid-summary__label {
        color: --var($theme, 'label-color');
        min-width: rem(30px);
        margin-#{$right}: rem(3px);

        &:hover {
            color: --var($theme, 'label-hover-color');
        }
    }

    %igx-grid-summary__result {
        color: --var($theme, 'result-color');
        font-weight: 600;
        flex: 1 1 auto;
        text-align: #{$right};
    }

    %igx-grid-summary__label,
    %igx-grid-summary__result {
        @include ellipsis();
    }
}