@import "../variables/variables";
@import "../mixins/private/token-mixins";
@import "../mixins/public/utility-mixins";

nav.pagination {
    @include inline-flex-items-centered();

    @include color-token(
        pagination-item-foreground-color,
        color-foreground-secondary
    );

    font-family: inherit;
    font-size: 1rem;
    margin: var(--spacing-100) 0;
    max-width: 100%;
}

nav.pagination a,
nav.pagination button {
    color: inherit;
    font-size: 1em;
}

ol.pagination__items {
    @include inline-flex-items-centered();

    box-sizing: border-box;
    height: 44px;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li:not([hidden]) {
        @include flex-items-centered();
    }
}

a.pagination__next,
a.pagination__previous,
button.pagination__next,
button.pagination__previous {
    @include inline-flex-items-centered();
}

a.pagination__next,
button.pagination__next {
    margin-inline-start: var(--spacing-100);
}

a.pagination__previous,
button.pagination__previous {
    margin-inline-end: var(--spacing-100);
}

.pagination__item {
    @include inline-flex-items-centered();

    box-sizing: border-box;
    font-weight: var(--font-weight-regular);
    height: 44px;
    width: 44px;
}

button.pagination__item {
    background: none;
    border: none;
    font-family: inherit;
}

a.pagination__item {
    text-decoration: none;
}

a.pagination__item,
button.pagination__item {
    position: relative;

    &::after {
        background-color: transparent;
        border-radius: 4px;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: calc(50% - 10px);
        position: absolute;
        width: 20px;
    }

    &[aria-current="page"] {
        @include color-token(
            pagination-item-current-foreground-color,
            color-foreground-primary
        );

        font-weight: var(--font-weight-bold);

        &::after {
            background-color: currentColor;
        }
    }

    &:not([aria-current="page"]) {
        &:active {
            @include color-token(
                pagination-item-active-foreground-color,
                color-foreground-primary
            );
        }

        &:focus,
        &:hover {
            @include color-token(
                pagination-item-hover-foreground-color,
                color-foreground-accent
            );

            &::after {
                background-color: currentColor;
            }
        }
    }

    /* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
    &:focus:not(:focus-visible) {
        outline: none;
    }
}

span.pagination__item button.icon-btn--transparent {
    &:focus,
    &:hover {
        background-color: var(--color-state-primary-hover);
    }

    &:active {
        background-color: var(--color-state-primary-active);
    }
}

nav.pagination--fluid {
    width: 100%;
}

nav.pagination--fluid ol.pagination__items {
    flex-grow: 1;
    max-width: none;
}

nav.pagination--fluid ol.pagination__items li {
    flex: 1 0 var(--spacing-600);
}

[dir="rtl"] {
    nav.pagination svg.icon--arrow-right-16,
    nav.pagination svg.icon--arrow-left-16 {
        transform: rotate(180deg);
    }
}

@media (min-width: $_screen-size-MD) {
    nav.pagination {
        margin: var(--spacing-200) 0;
    }
}
