@use 'sass:math';

.pagination {
    // Text styles
    --rocket-ui-pagination-text-color: var(--rocket-color-grey-600);
    --rocket-ui-pagination-text-highlight-color: var(--rocket-color-grey-700);

    // Item styles
    --rocket-ui-pagination-item-color: var(--rocket-color-grey-700);
    --rocket-ui-pagination-item-background: var(--rocket-color-white-base);
    --rocket-ui-pagination-item-border-color: var(--rocket-color-grey-500);
    --rocket-ui-pagination-item-border-radius: var(--rocket-buttons-border-radius);

    // Configuration
    $list-item-size: 50px;
    $list-gap: 8px;
    $list-padding: $list-item-size + ($list-gap * 2);
    $pagination-gap: $list-gap * 2;
    $this: &;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    column-gap: $pagination-gap;
    row-gap: $pagination-gap;
    font-size: 30px;

    @include breakpoint(xl) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    &__list {
        @include list-reset;

        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        min-width: 20.5rem;
        padding-bottom: $list-padding;
        column-gap: $list-gap;
        row-gap: $list-gap;

        @include breakpoint(xl) {
            justify-content: flex-end;
            margin: 0 auto;
            padding: 0;
        }
    }

    &__item {
        display: block;
        margin: 0;
        color: var(--rocket-ui-pagination-item-color);
        font-weight: 500;
        line-height: 1.5;

        &--prev,
        &--next {
            position: absolute;
            bottom: 0;
            width: calc(50% - #{math.div($list-gap, 2)});

            @include breakpoint(xl) {
                position: static;
                width: auto;
            }
        }

        &--prev {
            left: 0;
        }

        &--next {
            right: 0;
        }
    }

    &__link {
        @include transition;
        @include min-size($list-item-size);

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.425rem 0.25rem;
        color: var(--rocket-ui-pagination-item-color);
        font: inherit;
        white-space: nowrap;
        text-decoration: none;
        background: var(--rocket-ui-pagination-item-background);
        border: 1px solid var(--rocket-ui-pagination-item-border-color);
        border-radius: var(--rocket-ui-pagination-item-border-radius);
        outline: none;

        @at-root {
            a#{&} {
                @include theme-focus-ring;

                @include event {
                    --rocket-ui-pagination-item-background: var(--rocket-color-grey-200);
                }

            }
        }

        &--prev,
        &--next {
            padding: 0.425rem 1.25rem;
        }

        &--disabled {
            opacity: .5;
        }

        &--current {
            --rocket-ui-pagination-item-color: var(--rocket-color-white-base);
            --rocket-ui-pagination-item-background: var(--rocket-color-primary-200);
            --rocket-ui-pagination-item-border-color: var(--rocket-color-primary-400);
        }
    }

    &--hidden {
        display: none;
    }
}