toggle-corp/react-store

:root {
    --width-item-per-page-input: 48px;
}

.pager {
    display: flex;
    align-items: baseline;

    .items-per-page {
        display: flex;
        align-items: baseline;
        flex-shrink: 0;
        padding: 0 var(--spacing-small);

        .input {
            width: var(--width-item-per-page-input);
            font-family: var(--font-family-monospace);

            :global {
                input {
                    text-align: right;
                }
            }
        }

        .per-page {
            padding: 0 var(--spacing-small);
        }
    }

    .current-range-information {
        display: flex;
        flex-shrink: 0;
        padding: 0 var(--spacing-small);

        .showing {
            padding-right: var(--spacing-small);
        }

        .current-items-start {
            font-family: var(--font-family-monospace);
        }

        .range-indicator {
            padding: 0 var(--spacing-extra-small);
        }

        .current-items-end {
            font-family: var(--font-family-monospace);
        }

        .of {
            padding: 0 var(--spacing-small);
        }

        .item-count {
            font-family: var(--font-family-monospace);
        }
    }

    .page-list {
        padding: 0 var(--spacing-small);

        .paginate-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            outline: 0;
            border: 0;
            background-color: transparent;
            cursor: pointer;
            padding: var(--spacing-extra-small) 0;
            min-width: var(--width-icon-extra-large);
            font-family: inherit;
            font-size: inherit;

            &:hover {
                background-color: var(--color-background-hover);
            }
        }

        .paginate-span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-extra-small) 0;
            min-width: var(--width-icon-extra-large);
            color: var(--color-text-label);
            font-weight: var(--font-weight-bold);
            user-select: none;

            &.active {
                background-color: var(--color-accent);
                color: var(--color-text-on-accent);
            }
        }
    }
}