@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> NAVIGATION -> PAGINATION
    ========================================================================  */

// Check if the elements with pagination should be imported
@if $import-elements and $import-element-pagination {
    .pagination {
        display: flex;
        font-size: var(--font-size);
        justify-content: center;
        margin-bottom: var(--element-spacing);

        // Check if the pagination size modifiers should be declared
        @if $pagination-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    font-size: map-get($pagination-font-size-sizes, $size);

                    // Nested selectors
                    ul {
                        // Nested selectors
                        li {
                            min-width: map-get($pagination-height-sizes, $size);

                            // Nested selectors
                            a,
                            span {
                                // Styles (IE fallback for postcss-css-variables)
                                height: map-get($pagination-height-sizes, $size);
                                padding: 0 map-get($pagination-content-spacing-sizes, $size);
                            }
                        }
                    }
                }

                // Check if the pagination size modifiers with breakpoints should be declared
                @if $pagination-size-modifiers-with-breakpoints {
                    // Cycle through all of the breakpoints
                    @each $breakpoint-name, $breakpoint-value in $breakpoints {
                        // Breakpoint
                        @include breakpoint($breakpoint-name) {
                            // Modifiers: Size
                            &.is-#{$size}\@#{$breakpoint-name} {
                                font-size: map-get($pagination-font-size-sizes, $size);

                                // Nested selectors
                                ul {
                                    // Nested selectors
                                    li {
                                        min-width: map-get($pagination-height-sizes, $size);

                                        // Nested selectors
                                        a,
                                        span {
                                            // Styles (IE fallback for postcss-css-variables)
                                            height: map-get($pagination-height-sizes, $size);
                                            padding: 0 map-get($pagination-content-spacing-sizes, $size);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        // Check if the pagination alignment modifiers should be declared
        @if $pagination-alignment-modifiers {
            // Modifiers
            &.pagination--left {
                // Styles
                justify-content: flex-start;
            }

            &.pagination--right {
                // Styles
                justify-content: flex-end;
            }
        }

        // Nested selectors
        ul {
            // Styles
            box-shadow: $pagination-box-shadow;
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;

            // Nested selectors
            li {
                margin-right: (0px - $pagination-border-width-divider);
                min-width: $pagination-height;

                // Pseudo classes
                &:first-child {
                    // Nested selectors
                    a,
                    span {
                        border-bottom-left-radius: $pagination-border-radius-bottom-left;
                        border-left-width: $pagination-border-width-left;
                        border-top-left-radius: $pagination-border-radius-top-left;
                    }
                }

                &:last-child {
                    // Nested selectors
                    a,
                    span {
                        border-bottom-right-radius: $pagination-border-radius-bottom-right;
                        border-right-width: $pagination-border-width-right;
                        border-top-right-radius: $pagination-border-radius-top-right;
                    }
                }

                // Nested selectors
                a,
                span {
                    align-items: center;
                    background-color: $pagination-background-color;
                    border: 0 $pagination-border-style $pagination-border-color;
                    border-bottom-width: $pagination-border-width-bottom;
                    border-left-width: $pagination-border-width-divider;
                    border-right-width: $pagination-border-width-divider;
                    border-top-width: $pagination-border-width-top;
                    color: $pagination-font-color;
                    display: flex;
                    height: $pagination-height;
                    justify-content: center;
                    padding: 0 $pagination-content-spacing;
                    user-select: none;
                    width: 100%;
                    z-index: stack-index('default');
                }

                a {
                    color: $pagination-font-color;
                    position: relative;
                    text-decoration: none;

                    // Pseudo classes
                    &:hover {
                        background-color: $pagination-background-color-hover;
                        border-color: $pagination-border-color-hover;
                        color: $pagination-font-color-hover;
                        z-index: stack-index('hover');
                    }

                    &:focus {
                        background-color: $pagination-background-color-focus;
                        border-color: $pagination-border-color-focus;
                        box-shadow: 0 0 0 $pagination-accessibility-focus-width $pagination-accessibility-focus-color;
                        color: $pagination-font-color-focus;
                        z-index: stack-index('focus');
                    }

                    &:active {
                        background-color: $pagination-background-color-active;
                        border-color: $pagination-border-color-active;
                        color: $pagination-font-color-active;
                        z-index: stack-index('active');
                    }

                    // Modifiers: State hooks
                    &.is-active {
                        font-size: $pagination-font-size-active;
                        font-weight: bold;
                    }

                    &.is-disabled {
                        @include disabled();
                        background-color: $pagination-background-color !important;
                        border-color: $pagination-border-color !important;
                        color: $pagination-link-color !important;

                        // Pseudo classes
                        &:hover,
                        &:focus,
                        &:active {
                            background-color: $pagination-background-color !important;
                            border-color: $pagination-border-color !important;
                            color: $pagination-link-color !important;
                        }
                    }
                }

                span {
                    cursor: default;
                }
            }
        }
    }
}