// ============================================================================
// 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 {
    @include object--height--fixed(md);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;

    border-radius: 0;
    padding: 0;
    margin: 0;
    align-items: start;
    text-align: left;

    li {
        display: inline;

        a,
        span {
            display: block;
            float: left;
            padding: 0 q(16);
            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;

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

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

        &.active a {
            background-color: #f5f5f5;
            color: #999;
            cursor: default;
        }

        &.disabled {
            a,
            span {
                color: #999;
                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 {
    @include pagination--base;
    @include pagination--left; // or --center / --right
}

// /// 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 {
//     border-radius: 0;
//     padding: 0;
//     margin: 0;
//     align-items: start;
//     text-align: left;

//     ul {
//         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;
//     }

//     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;
//     }
// }

// /// ENGINE
// .pagination {
//     align-items: start;
//     text-align: left;
// }

// .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);
//   }