@use 'sass:math';
@use '../../variables' as *;

$b: '.pagination-group';

#{$b} {
    color: $pagination-group-color;
    display: flex;
    flex-direction: column;

    @media (--tablet-landscape-up) {
        flex-direction: row;
        flex-wrap: wrap;
    }

    &_compact {
    }

    .lk-table + & {
        margin-top: 4px * 4;
    }

    &__per-page {
        width: math.div(100%, 3);

        @media (--tablet-portrait-down) {
            display: none;
        }

        label {
            align-items: center;
            display: flex;
            width: 100%;
        }

        .select {
            margin-left: 4px * 4;
            width: 4px * 28;
        }
    }

    &__infinite {
        display: flex;
        justify-content: center;
        width: 100%;

        &:not(:first-child) {
            @media (--tablet-landscape-up) {
                width: math.div(100%, 3);
            }

            #{$b}_compact & {
                @media (--tablet-landscape-only) {
                    margin-top: 4px * 6;
                    width: 100%;
                }
            }
        }

        &:empty {
            display: none;
        }
    }

    &__pagination {
        width: 100%;

        &:not(:first-child) {
            @media (--tablet-landscape-up) {
                margin-top: 4px * 6;
            }

            #{$b}__infinite:first-child:empty + & {
                @media (--tablet-landscape-up) {
                    margin-top: 0;
                }
            }
        }

        #{$b}__infinite:not(:empty) + & {
            @media (--tablet-portrait-down) {
                margin-top: 4px * 6;
            }
        }

        &:empty {
            display: none;
        }
    }
}