// =============================================================================
// PAGINATION (CSS)
// =============================================================================


// Pagination list items
// -----------------------------------------------------------------------------
//
// 1. Centred list via inline-block. Font-size: 0; to remove white-space.
// 2. Specificity overrides for Foundation's inadequate selectors.
//
// -----------------------------------------------------------------------------

.pagination-list {
    @include clearfix;

    font-size: 0; // 1
    margin-bottom: spacing("single");
    text-align: center;

    .pagination-item { // 2
        display: inline-block;
    }
}


// Pagination list items
// -----------------------------------------------------------------------------
//
// 1. Specificity overrides for Foundation's inadequate selectors.
//
// -----------------------------------------------------------------------------

.pagination-item {
    border: $pagination-item-border;
    line-height: 1;

    .pagination-link {
        text-decoration: none;
        transition: $pagination-link-transition;

        &:hover {
            color: $pagination-link-color-hover;
        }
    }

    &.pagination-item--current { // 1
        border-color: $pagination-link-current-borderColor;
        border-radius: $pagination-link-current-borderRadius;
        margin: $pagination-link-current-margin;
    }

    &.pagination-item--previous,
  
    &.pagination-item--next { // 1

        > a {
            color: $pagination-item-previousNext-color;

            &:hover {
                color: $pagination-item-previousNext-color-hover;

                .icon > svg {
                    fill: $pagination-item-previousNext-color-hover;
                }
            }
        }
    }
}

.pagination-item--previous,
.pagination-item--next {
    .icon {
        height: remCalc(20px);
        margin-top: -(remCalc(2px));
        width: remCalc(20px);
    }
}

.pagination-item--previous {
    float: left;

    .icon {
        margin-left: -(remCalc(12px));
    }
}

.pagination-item--next {
    float: right;

    .icon {
        margin-right: -(remCalc(12px));
    }
}


// Simple/small pagination (Next/Previous arrows are the only way to navigate)
// -----------------------------------------------------------------------------

.pagination-list--small {
    position: relative;

    .pagination-item {
        color: $pagination-list--small-color;
        cursor: inherit;
        line-height: $pagination-list--small-lineHeight;
    }

    .pagination-link {
        padding: $pagination-list--small-link-padding;
    }

    .pagination-item--previous,
    .pagination-item--next {
        position: absolute;
        top: 0;
    }

    .pagination-item--previous {
        left: 0;
    }

    .pagination-item--next {
        right: 0;
    }
}
