@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 paginator($theme) {
    @include css-vars($theme);

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

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

    %igx-paginator {
        --component-size: var(--ig-size, var(--ig-size-large));

        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var-get($theme, 'text-color');
        background: var-get($theme, 'background-color');
        font-size: rem(12px);
        border-top: rem(1px) solid var-get($theme, 'border-color');

        @if $variant == 'indigo' {
            font-size: rem(11px);
            font-weight: 400;
            line-height: rem(15px);
        }

        z-index: 1;
        padding-inline: pad-inline(map.get($paginator-padding-inline, 'compact'), map.get($paginator-padding-inline, 'cosy'), map.get($paginator-padding-inline, 'comfortable'));
        padding-block: 0;
        height: var-get($theme, 'size');
        width: 100%;

        &:empty {
            padding: 0;
        }
    }

    %igx-paginator--sizable {
        @include sizable();
    }

    %igx-paginator-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    %igx-page-size {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex: 1;
    }

    %igx-page-size__label {
        margin-inline-end: rem(8px);
        @include ellipsis();
    }

    %igx-page-size__select {
        display: flex;
        max-width: rem(114px);
        min-width: rem(100px);

        @if $variant != 'indigo' {
            igx-select {
                --ig-size: 1;
            }
        }
    }

    %igx-page-nav {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;

        > * {
            margin-inline-start: rem(8px);
        }

        [dir='rtl'] & {
            igx-icon {
                transform: scaleX(-1);
            }
        }
    }

    %igx-page-nav__text {
        display: flex;
    }
}