@use 'sass:map';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin grid-summary($theme) {
    @include css-vars($theme, '.igx-grid-summary');

    $variant: map.get($theme, '_meta', 'theme');

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

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

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

    %igx-grid-summary {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        padding-block: 0;

        @if $variant != 'indigo' {
            padding-inline: pad-inline(map.get($summary-padding-inline, 'compact'), map.get($summary-padding-inline, 'cosy'), map.get($summary-padding-inline, 'comfortable'));
        } @else {
            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
        }

        background: var-get($theme, 'background-color', inherit);
        overflow: hidden;
        outline-style: none;

        @if $variant == 'indigo' {
            border-top: rem(1px) solid var-get($theme, 'border-color');
        }
    }

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

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

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

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

    %igx-grid-summary__item {
        display: flex;
        align-items: center;
        padding-block: pad(map.get($item-padding-block, 'compact'), map.get($item-padding-block, 'cosy'), map.get($item-padding-block, 'comfortable'));
        padding-inline: 0;

        @if $variant != 'indigo' {
            font-size: rem(12px);
        } @else {
            min-height: sizable(rem(24px), rem(30px), rem(36px));
        }

        position: relative;
    }

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

        @if $variant == 'indigo' {
            @include type-style('caption');

            margin-inline-end: initial;
        }

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

    %igx-grid-summary__result {
        @if $variant == 'indigo' {
            @include type-style('detail-2', false);
        }

        color: var-get($theme, 'result-color');

        @if $variant != 'indigo' {
            font-weight: 600;
        }

        flex: 1 1 auto;
        text-align: end;
    }

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