// ============================================================================
// Components | Pagination
// ============================================================================

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../head_layout" as *;

@use "../../soul_type" as *;
@use "../../soul_object" as *;

/// Base pagination styling.
/// @group Pagination
///

@mixin pagination--base(
    //     $size: 1rem,
    //     $gap: 0.5rem,
    $color_text: var(--color_text_primary),
    $color_accent: var(--color_accent_primary),
    $color_disabled: var(--color_state_disabled)
) {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-size: $size;
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;
    //         font-size: $size;
    //     border-radius: 0;
    //     padding: 0;
    //     margin: 0;
    //     align-items: start;
    //     text-align: left;
    ul,
    .pagination__list {
        @include object--height--fixed(md);
        display: flex;
        flex-wrap: wrap;
        gap: 0;

        list-style: none;
        padding: 0;
        margin: 0;

        align-items: start;
        text-align: left;
        // align-items: start;
        // text-align: left;
        // display: flex;
        // list-style: none;
        // padding: 0;
        // margin: 0;
        // gap: $gap;
        //         display: inline-block;
        //         *display: inline; /* IE-specific display setting */
        //         *zoom: 1; /* IE-specific zoom setting */
        //         margin-left: 0;
        //         margin-bottom: 0;
        //         padding: 0;
        li {
            display: inline;
            //                 display: inline-flex;

            a,
            span {
                display: block;
                float: left;
                padding: 0 q(8);
                line-height: q(20);
                text-decoration: none;
                // border: q(1) solid #ddd;
                // border-left-width: 0;
                // background-color: var(--color_surface_primary);
                color: inherit;
                transition: background 0.2s ease;
                // color: black;
                // float: left;
                // padding: 8px 16px;
                // text-decoration: none;
                // transition: background-color 0.3s;
                // display: inline-block;
                // padding: 0.5em 0.75em;
                // text-decoration: none;
                // color: $color;
                // border: 1px solid transparent;
                // border-radius: 0.25em;
                // transition:
                //     background-color 0.2s ease,
                //     color 0.2s ease;
                // cursor: pointer;
                &:hover {
                    // background-color: #232323;
                    color: var(--color_surface_primary);
                    //                     background-color: rgba($accent, 0.1);
                    //                     border-color: $accent;
                    //                     color: $accent;
                }
            }

            &:first-child a {
                // border-left-width: q(1);
            }
            /* Style the active/current link */
            &.active a {
                // background-color: #f5f5f5;
                color: #999;
                cursor: default;
                //   background-color: dodgerblue;
                //   color: white;
            }

            &.disabled {
                a,
                span {
                    color: $color_disabled;
                    background-color: transparent;
                    cursor: default;
                    pointer-events: none;
                }
            }
        }
    }
}

// Alignment Modifiers
@mixin pagination--left {
    justify-content: flex-start;
}

@mixin pagination--center {
    justify-content: center;
}

@mixin pagination--right {
    justify-content: flex-end;
}

// ============================================================================
// Pagination Layout Mixins
// ============================================================================

/// Horizontal pagination layout
/// Ensures pagination elements are displayed in a row, not stacked vertically
/// @group Pagination
@mixin pagination--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: q(4);
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        display: inline-flex;
    }

    a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: q(32);
        padding: q(4) q(8);
    }
}

/// Neighbor pagination (Previous/Next navigation)
/// Creates a space-between layout for previous/next navigation
/// @group Pagination
@mixin pagination--neighbor {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: q(32);
    padding-top: q(16);
    border-top: q(1) solid var(--color_line_primary);

    li {
        list-style: none;

        a {
            display: inline-flex;
            align-items: center;
            gap: q(8);
            padding: q(8) q(16);
            border-radius: q(4);
            text-decoration: none;
            color: var(--color_text_primary);
            transition:
                background-color 0.2s ease,
                color 0.2s ease;

            &:hover {
                background-color: var(--color_fill_secondary);
                color: var(--color_accent_primary);
            }
        }

        &.disabled a {
            color: var(--color_state_muted);
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.5;
        }
    }
}

// ============================================================================
// Utility Classes are defined in:
// src/scss/classes/body_molecules/navigation/_pagination.scss
// ============================================================================

// @mixin pagination--base(
//     $size: 1rem,
//     $gap: 0.5rem,
//     $color: #333,
//     $accent: #000,
//     $disabled: #aaa
// ) {
//     .pagination {

//         ul {

//             li {

//                 a,
//                 span {

//                 }

//                 a:hover {

//                 }

//                 &.is-current span {
//                     background-color: $accent;
//                     color: #fff;
//                     font-weight: bold;
//                     cursor: default;
//                 }

//                 &.pagination-previous a,
//                 &.pagination-next a {
//                     font-weight: 500;
//                 }

//                 &.disabled span,
//                 &.disabled a {
//                     color: $disabled;
//                     cursor: not-allowed;
//                     pointer-events: none;
//                 }
//             }
//         }
//     }
// }

// /* Pagination links */
// .pagination a {

// }

//
// .pagination a.active {

// }

// /* Add a grey background color on mouse-over */
// .pagination a:hover:not(.active) {background-color: #ddd;}

// /// Base styling for pagination components.
// /// This sets up the general structure and appearance for pagination elements,
// /// including the list, links, and hover/active states.
// /// @group Pagination
// .pagination {

//     ul {

//     }

//     li {
//         display: inline;
//     }

//     a {
//         float: left;
//         padding: 0 q(16);
//         line-height: q(140);
//         text-decoration: none;
//         border: q(1) solid #ddd;
//         border-left-width: 0;
//         background: var(--color_surface_primary);

//         &:hover {
//             background-color: #232323;
//             color: var(--color_surface_primary);
//         }
//     }

//     .active a {
//         background-color: #f5f5f5;
//         color: #999999;
//         cursor: default;
//     }

//     .disabled span,
//     .disabled a,
//     .disabled a:hover {
//         color: #999999;
//         background-color: transparent;
//         cursor: default;
//     }

//     li:first-child a {
//         border-left-width: q(1);
//     }

//     &-centered {
//         text-align: center;
//     }

//     &-right {
//         text-align: right;
//     }
// }

// .pagination {
//     // scss-docs-start pagination-css-vars
//     pagination-padding-x: #{$pagination-padding-x};
//     pagination-padding-y: #{$pagination-padding-y};
//     @include rfs($pagination-font-size, pagination-font-size);
//     pagination-color: #{$pagination-color};
//     pagination-bg: #{$pagination-bg};
//     pagination-border-width: #{$pagination-border-width};
//     pagination-border-color: #{$pagination-border-color};
//     pagination-border-radius: #{$pagination-border-radius};
//     pagination-hover-color: #{$pagination-hover-color};
//     pagination-hover-bg: #{$pagination-hover-bg};
//     pagination-hover-border-color: #{$pagination-hover-border-color};
//     pagination-focus-color: #{$pagination-focus-color};
//     pagination-focus-bg: #{$pagination-focus-bg};
//     pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
//     pagination-active-color: #{$pagination-active-color};
//     pagination-active-bg: #{$pagination-active-bg};
//     pagination-active-border-color: #{$pagination-active-border-color};
//     pagination-disabled-color: #{$pagination-disabled-color};
//     pagination-disabled-bg: #{$pagination-disabled-bg};
//     pagination-disabled-border-color: #{$pagination-disabled-border-color};
//     // scss-docs-end pagination-css-vars

//     display: flex;
//     @include list-unstyled();
//   }

//   .page-link {
//     position: relative;
//     display: block;
//     padding: var(pagination-padding-y) var(pagination-padding-x);
//     @include font-size(var(pagination-font-size));
//     color: var(pagination-color);
//     text-decoration: if($link-decoration == none, null, none);
//     background-color: var(pagination-bg);
//     border: var(pagination-border-width) solid var(pagination-border-color);
//     @include transition($pagination-transition);

//     &:hover {
//       z-index: 2;
//       color: var(pagination-hover-color);
//       text-decoration: if($link-hover-decoration == underline, none, null);
//       background-color: var(pagination-hover-bg);
//       border-color: var(pagination-hover-border-color);
//     }

//     &:focus {
//       z-index: 3;
//       color: var(pagination-focus-color);
//       background-color: var(pagination-focus-bg);
//       outline: $pagination-focus-outline;
//       box-shadow: var(pagination-focus-box-shadow);
//     }

//     &.active,
//     .active > & {
//       z-index: 3;
//       color: var(pagination-active-color);
//       @include gradient-bg(var(pagination-active-bg));
//       border-color: var(pagination-active-border-color);
//     }

//     &.disabled,
//     .disabled > & {
//       color: var(pagination-disabled-color);
//       pointer-events: none;
//       background-color: var(pagination-disabled-bg);
//       border-color: var(pagination-disabled-border-color);
//     }
//   }

//   .page-item {
//     &:not(:first-child) .page-link {
//       margin-left: $pagination-margin-start;
//     }

//     @if $pagination-margin-start == calc($pagination-border-width * -1) {
//       &:first-child {
//         .page-link {
//           @include border-start-radius(var(pagination-border-radius));
//         }
//       }

//       &:last-child {
//         .page-link {
//           @include border-end-radius(var(pagination-border-radius));
//         }
//       }
//     } @else {
//       // Add border-radius to all pageLinks in case they have left margin
//       .page-link {
//         @include border-radius(var(pagination-border-radius));
//       }
//     }
//   }

//   //
//   // Sizing
//   //

//   .pagination-lg {
//     @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
//   }

//   .pagination-sm {
//     @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
//   }