@use "../core/variables" as *;
@use "../core/mixins" as *;

// =============================================================
// Pagination
// =============================================================
// Bloc partagé car rendu via un partial Twig utilisé sur plusieurs écrans.

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-sm;
    margin-top: $spacing-lg;
}

.pagination__summary {
    color: $color-text-muted;
    font-size: $font-size-sm;
    line-height: $line-height-base;
}

.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $spacing-sm;
}

.pagination__link,
.pagination__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    text-decoration: none;

    @include interactive-transition;

    &:focus-visible {
        @include focus-ring;
    }
}

.pagination__link {
    padding: $spacing-xs $spacing-sm;
    border: 1px solid $color-border;
    border-radius: $radius-md;
    color: $color-text;
    background: $color-bg-white;

    &:hover {
        border-color: $color-primary;
        color: $color-primary;
    }

    &--current {
        border-color: $color-primary;
        color: $color-primary;
        background: $color-primary-bg;
        font-weight: $font-weight-semibold;
    }
}

.pagination__control--disabled {
    color: $color-text-subtle;
    cursor: not-allowed;
    opacity: 0.7;
}

@include mobile {
    .pagination {
        align-items: stretch;
    }

    .pagination__summary,
    .pagination__control {
        width: 100%;
    }

    .pagination__pages {
        width: 100%;
        justify-content: center;
    }
}