/*------------------------------------*\
    PAGINATION
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

.ds_pagination {
    text-align: center;
    @include helpers.ds_small-size;

    &__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: center;
        list-style-type: none;
        margin: 0;
    }

    // Hide pagination if load more button present
    &__load-more + &__list {
        display: none;
    }

    &__item {
        display: inline-block;
        margin-bottom: 0; // override default margin on li
    }

    &__link {
        @include helpers.ds_link--block;
        align-items: center;
        display: flex;
        justify-content: center;
        line-height: 2.5rem;
        min-height: 2.5rem;
        min-width: 2.5rem;
        padding: 0 0.5rem;
        text-decoration: none;

        &.ds_current {
            box-shadow: inset 0 round(#{helpers.$link__current-underline-thickness * -1}, 1px) 0 settings.$ds_colour__link--focus__shadow;
            color: currentColor;
            position: relative;

            @include helpers.ds_media-query-high-contrast {
                border-bottom: helpers.$link__current-underline-thickness solid currentColor
            }
        }

        &.ds_current:not(:focus) {
            background-color: settings.$ds_colour__link--current__background;
        }

        &--text:not(&--icon) {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            width: auto;
        }

        &--ellipsis {
            color: currentColor;
            min-width: 0;
            pointer-events: none;
        }

        &--ellipsis,
        &--icon {
            padding: 0;
        }



        .ds_icon {
            height: 2em;
            max-width: 2em;
            width: 2em;
        }

        > * {
            pointer-events: none;
        }
    }
}

a.ds_pagination__link:not(.ds_current):not(:focus) {
    text-decoration-line: underline;
}

@include helpers.ds_media-query(medium) {
    .ds_pagination {
        &__load-more + &__list {
            display: block;
        }

        &__load-more {
            display: none;
        }

        &__link--icon {
            padding-left: 0;
            padding-right: 0;
            width: auto;

            .ds_pagination__link-label {
                padding-left: 1rem;
            }

            .ds_icon + .ds_pagination__link-label {
                padding-right: 1rem;
                padding-left: 0;
            }
        }

        .ds_icon {
            margin: 0 0.25rem;
        }
    }
}

@include helpers.ds_media-query(medium-down) {
    .ds_pagination {
        &__link--icon {
            .ds_pagination__link-label {
                @include helpers.ds_visually-hidden;
            }
        }
    }
}