/* ============================================================================
   06-COMPONENTS -> #PAGINATION
   ========================================================================= */

/**
 * Displays the process of splitting information over multiple pages instead 
 * of showing it all on a single page.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;
  

/**
 * Pagination
 */

.pagination {
    --pagination-bg: transparent;
    --pagination-color: var(--text-color-secondary);
    --pagination-border-radius: var(--rounded-sm);
    --pagination-size: var(--space-10);
    --pagination-hover-bg: var(--bg-highlight);
    --pagination-hover-color: var(--link-color);
    --pagination-active-bg: var(--bg-highlight);
    --pagination-active-color: var(--link-color);

    align-items: center;
    column-gap: var(--space-1);
    display: flex;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    width: 100%;
}


/**
 * Pagination item
 */

.pagination__item {
    align-items: center;
    color: var(--pagination-color);
    display: flex;

    &[data-type=previous] {
        margin-right: auto;
    }
    
    &[data-type=next] {
        margin-left: auto;
    }

    @include media-breakpoint-down('lg') {
        &[data-type=page] {
            display: none
        }
    }
}


/**
 * Pagination summary
 */

.pagination__summary {
    @include font-size('sm');

    color: var(--pagination-color);
    font-weight: var(--font-weight-light);
    padding-left: var(--space-2);
    padding-right: var(--space-2);

    @include media-breakpoint-up('lg') {
        display: none;
    }
}


/**
 * Pagination link
 */

.pagination__link {
    @include form-input-focus;
    @include transition(('background-color', 'border', 'color'));
    align-items: center;
    appearance: none;
    border-radius: var(--pagination-border-radius);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--font-weight-medium);
    height: var(--pagination-size);
    justify-content: center;
    outline-color: transparent;
    position: relative;
    text-decoration: none;
    width: var(--pagination-size);

    &:hover {
        background-color: var(--pagination-hover-bg);
        color: var(--pagination-hover-color);
    }
    
    &[aria-current=true] {
        background-color: var(--pagination-active-bg);
        color: var(--pagination-active-color);
    }
}