hikari-components 0.1.5

// Use theme variables with namespace to avoid conflicts
@use '../../../../theme/styles/variables.scss' as vars;
@use '../../../../theme/styles/mixins.scss' as mix;

// ============================================
// Hikari // Hikari // Hikari // Hikari // Hikari Pagination Component - FUI Styling Component Component Component Component

// ============================================
// Base Pagination Styles
// ============================================

.hi-pagination {
  // Layout - ensure proper horizontal alignment
  display: flex;
  align-items: center;
  justify-content: flex-start;  // Changed from center to align left
  gap: 0.5rem;
  flex-wrap: wrap;

  // Padding
  padding: 0.5rem;

  // Remove any default background
  background: transparent;

  // Transitions
  // DISABLED - migrated to JS animation
}

// ============================================
// Pagination Items
// ============================================

// Pages container - ensure horizontal layout
.hi-pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}

.hi-pagination-item {
  // Layout - FIXED: Match icon button size (28px)
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  margin: 0.125rem;

  // Appearance - GHOST BUTTON STYLE (no background)
  background: transparent;
  border: 1px solid transparent;  // FIXED: Transparent border to prevent layout shift
  border-radius: vars.$hikari-radius-fui-sm;

  // Typography
  font-family: vars.$hikari-font-family-sans;
  font-size: vars.$hikari-font-size-sm;
  font-weight: 500;
  color: var(--hi-color-text-primary);
  text-decoration: none;
  white-space: nowrap;

  // Cursor
  cursor: pointer;
  user-select: none;

  // Transitions
  // DISABLED - migrated to JS animation

  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

  // Icon - Remove stroke-width override to let Arrow component use its default styling
  svg {
    // No stroke-width override - Arrow component has proper default styling
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
  }

  // Hover effect - minimal changes only, glow wrapper handles spotlight
  &:hover:not(:disabled) {
    border-color: transparent;
    color: var(--hi-color-text-primary);

    svg {
      // No filter changes - spotlight handled by glow wrapper
    }
  }

  // Active state (current page with theme color border + shadow)
  &.hi-pagination-active {
    background: transparent;
    border: 1px solid var(--hi-color-primary);
    color: var(--hi-color-text-primary);
    box-shadow:
      0 0 0 2px var(--hi-color-primary),
      0 0 12px var(--hi-glow-button-primary);
    font-weight: 600;
    
    // Add subtle theme color glow
    --hi-glow-color: var(--hi-glow-button-primary);

    // Ensure proper axis alignment
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // DISABLED - migrated to JS animation
// @keyframes pagination-active-pulse {
//     0%, 100% {
//       box-shadow:
//         0 0 16px var(--hi-primary),
//         0 0 24px var(--hi-primary),
//         inset 0 0 8px var(--hi-white-10, rgba(255, 255, 255, 0.1));
//     }
//     50% {
//       box-shadow:
//         0 0 20px var(--hi-primary),
//         0 0 32px var(--hi-primary),
//         inset 0 0 12px var(--hi-white-15, rgba(255, 255, 255, 0.15));
//     }
//   }

  // Disabled state
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--hi-card-bg);
  }

  // Focus state
  &:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--hi-primary),
      0 0 16px var(--hi-primary);
  }

  // Active press effect
  &:active:not(:disabled) {
    transform: translateY(0) scale(0.95);
    // DISABLED - migrated to JS animation

    // transition: transform vars.$hikari-duration-instant ease-out;
  }
}

// ============================================
// Navigation Buttons
// ============================================

// Previous button
.hi-pagination-prev {
  @extend .hi-pagination-item;
}

// Next button
.hi-pagination-next {
  @extend .hi-pagination-item;
}

// First button (jump to start)
.hi-pagination-first {
  @extend .hi-pagination-item;
}

// Last button (jump to end)
.hi-pagination-last {
  @extend .hi-pagination-item;
}

// ============================================
// Page Jump Animation (Fade + Scale)
// ============================================

.hi-pagination-jump {
  // DISABLED - migrated to JS animation

  // animation: pagination-jump-animation vars.$hikari-duration-normal vars.$hikari-ease-smooth;
}

// DISABLED - migrated to JS animation
// @keyframes pagination-jump-animation {
//   0% {
//     opacity: 0;
//     transform: scale(0.9);
//   }
//   50% {
//     opacity: 1;
//     transform: scale(1.05);
//   }
//   100% {
//     opacity: 1;
//     transform: scale(1);
//   }
// }

// ============================================
// Smooth Page Change Transitions
// ============================================

.hi-pagination-animate {
  .hi-pagination-item {
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-normal vars.$hikari-ease-smooth;
  }

  // Active page transition
  .hi-pagination-item.hi-pagination-active {
    // DISABLED - migrated to JS animation

    // animation: pagination-page-change vars.$hikari-duration-normal vars.$hikari-ease-smooth;
  }
}

// DISABLED - migrated to JS animation
// @keyframes pagination-page-change {
//   0% {
//     transform: scale(1);
//     box-shadow:
//       0 0 16px var(--hi-primary),
//       0 0 24px var(--hi-primary);
//   }
//   50% {
//     transform: scale(1.1);
//     box-shadow:
//       0 0 24px var(--hi-primary),
//       0 0 36px var(--hi-primary);
//   }
//   100% {
//     transform: scale(1);
//     box-shadow:
//       0 0 16px var(--hi-primary),
//       0 0 24px var(--hi-primary);
//   }
// }

// ============================================
// Ellipsis (for large page counts)
// ============================================

.hi-pagination-ellipsis {
  // Layout - FIXED: Match button size (28px)
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  margin: 0.125rem;

  // Typography
  font-family: vars.$hikari-font-family-sans;
  font-size: vars.$hikari-font-size-sm;
  font-weight: 600;
  color: var(--hi-color-text-secondary);
  letter-spacing: 0.1em;

  // Cursor (optional: can be clickable to show more pages)
  cursor: default;
  user-select: none;

  // Hover effect
  &:hover {
    color: var(--hi-color-text-primary);
    background: var(--hi-primary);
    border-radius: vars.$hikari-radius-fui-sm;
    --hi-glow-transparent: false;
    --hi-glow-bg-color: var(--hi-primary);
    box-shadow: 0 0 8px var(--hi-glow-color);
  }
}

// ============================================
// Page Size Selector
// ============================================

.hi-pagination-size-selector {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.5rem;

  // Label
  .hi-pagination-size-label {
    font-size: vars.$hikari-font-size-sm;
    color: var(--hi-color-text-secondary);
    white-space: nowrap;
  }

  // Select dropdown
  .hi-pagination-size-select {
    // Layout
    padding: 0.375rem 0.75rem;

    // Appearance
    background: var(--hi-card-bg);
    border: 1px solid var(--hi-color-border);
    border-radius: vars.$hikari-radius-fui-sm;

    // Typography
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-sm;
    color: var(--hi-color-text-primary);

    // Cursor
    cursor: pointer;

    // Transitions
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

    // Focus state with glow
    &:focus {
      outline: none;
      border-color: var(--hi-primary);
      box-shadow:
        0 0 0 2px var(--hi-primary),
        0 0 12px var(--hi-primary);
    }

    // Hover effect
    &:hover {
      border-color: var(--hi-primary);
      box-shadow:
        0 0 8px var(--hi-primary),
        inset 0 0 6px var(--hi-primary);
    }

    // Options
    option {
      background: var(--hi-card-bg);
      color: var(--hi-color-text-primary);
      padding: 0.5rem;
    }
  }
}

// ============================================
// Total Count Display
// ============================================

.hi-pagination-total {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0.5rem;

  // Typography
  font-family: vars.$hikari-font-family-sans;
  font-size: vars.$hikari-font-size-sm;
  color: var(--hi-color-text-secondary);
  white-space: nowrap;

  // Highlight numbers
  .hi-pagination-total-highlight {
    color: var(--hi-color-primary);
    font-weight: 600;
    text-shadow: 0 0 8px var(--hi-primary);
  }

  // Separator
  .hi-pagination-total-separator {
    margin: 0 0.25rem;
    opacity: 0.5;
  }
}

// ============================================
// Input Jump to Page
// ============================================

.hi-pagination-jumper {
  // Layout
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.5rem;

  // Label
  .hi-pagination-jumper-label {
    font-size: vars.$hikari-font-size-sm;
    color: var(--hi-color-text-secondary);
    white-space: nowrap;
  }

  // Input field
  .hi-pagination-jumper-input {
    // Layout
    width: 3.5rem;
    padding: 0.375rem 0.5rem;
    text-align: center;

    // Appearance
    background: var(--hi-card-bg);
    border: 1px solid var(--hi-color-border);
    border-radius: vars.$hikari-radius-fui-sm;

    // Typography
    font-family: vars.$hikari-font-family-mono;
    font-size: vars.$hikari-font-size-sm;
    color: var(--hi-color-text-primary);

    // Transitions
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

    // Focus state with glow
    &:focus {
      outline: none;
      border-color: var(--hi-primary);
      box-shadow:
        0 0 0 2px var(--hi-primary),
        0 0 12px var(--hi-primary);
    }

    // Validation states
    &.hi-pagination-jumper-invalid {
      border-color: var(--hi-color-danger);
      box-shadow: 0 0 8px rgba(255, 76, 0, 0.4);
    }

    &::placeholder {
      color: var(--hi-color-text-secondary);
      opacity: 0.5;
    }
  }

  // Go button
  .hi-pagination-jumper-button {
    // Layout
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;

    // Appearance
    background: var(--hi-primary);
    border: 1px solid var(--hi-primary);
    border-radius: vars.$hikari-radius-fui-sm;

    // Typography
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-sm;
    font-weight: 500;
    color: var(--hi-color-text-primary);

    // Cursor
    cursor: pointer;

    // Transitions
    // DISABLED - migrated to JS animation

    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;

    // Hover effect
    &:hover:not(:disabled) {
      background: var(--hi-primary);
      border-color: var(--hi-primary);
      box-shadow:
        0 0 12px var(--hi-primary),
        inset 0 0 8px var(--hi-primary);
    }

    // Disabled state
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

// ============================================
// Size Variants
// ============================================

// Small size
.hi-pagination-sm {
  gap: 0.375rem;
  padding: 0.375rem;

  .hi-pagination-item {
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0;
    font-size: 0.8125rem;

    svg {
      width: 14px;
      height: 14px;
    }
  }

  .hi-pagination-ellipsis {
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0;
    font-size: 0.8125rem;
  }

  .hi-pagination-size-selector,
  .hi-pagination-total,
  .hi-pagination-jumper {
    margin: 0 0.375rem;

    .hi-pagination-size-label,
    .hi-pagination-total-label,
    .hi-pagination-jumper-label {
      font-size: 0.8125rem;
    }
  }
}

// Medium size (default)
.hi-pagination-md {
  gap: 0.5rem;
  padding: 0.5rem;

  .hi-pagination-item {
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0;
    font-size: vars.$hikari-font-size-sm;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .hi-pagination-ellipsis {
    width: 28px;
    height: 28px;
    min-width: 28px;
    max-width: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0;
    font-size: vars.$hikari-font-size-sm;
  }
}

// Large size
.hi-pagination-lg {
  gap: 0.625rem;
  padding: 0.625rem;

  .hi-pagination-item {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;
    font-size: 0.9375rem;

    svg {
      width: 18px;
      height: 18px;
    }
  }

  .hi-pagination-ellipsis {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;
    font-size: 0.9375rem;
  }

  .hi-pagination-size-selector,
  .hi-pagination-total,
  .hi-pagination-jumper {
    margin: 0 0.625rem;

    .pagination-size-label,
    .hi-pagination-total-label,
    .hi-pagination-jumper-label {
      font-size: 0.9375rem;
    }
  }
}

// ============================================
// Compact Mode (Mobile)
// ============================================

@mixin pagination-compact {
  // Layout
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;

  // Hide less important elements
  .hi-pagination-size-selector,
  .hi-pagination-total,
  .hi-pagination-jumper {
    display: none;
  }

  // Ellipsis always hidden in compact mode
  .hi-pagination-ellipsis {
    display: none;
  }

  // Smaller gaps
  gap: 0.25rem;

  .hi-pagination-item {
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0;
    font-size: 0.8125rem;
    margin: 0.0625rem;

    svg {
      width: 14px;
      height: 14px;
    }
  }
}

.hi-pagination-compact {
  @include pagination-compact;
}

// ============================================
// Simple Mode (Only Prev/Next/Active)
// ============================================

.hi-pagination-simple {
  .hi-pagination-item:not(.hi-pagination-prev):not(.hi-pagination-next):not(.hi-pagination-active) {
    display: none;
  }

  .hi-pagination-ellipsis {
    display: none;
  }
}

// ============================================
// Responsive Behavior
// ============================================

@include mix.mobile {
  .pagination {
    @include pagination-compact;
}

@include mix.tablet {
  .pagination {
    .hi-pagination-size-selector,
    .hi-pagination-total {
      display: flex;
    }

    .hi-pagination-jumper {
      display: none;
    }
  }
}

@include mix.desktop {
  .pagination {
    .hi-pagination-size-selector,
    .hi-pagination-total,
    .hi-pagination-jumper {
      display: flex;
    }
  }
}
}

@include mix.tablet {
  .pagination {
    .hi-pagination-size-selector,
.hi-pagination-total {
      display: flex;
    }

    .hi-pagination-jumper {
      display: none;
    }
  }
}

@include mix.desktop {
  .pagination {
    .hi-pagination-size-selector,
    .hi-pagination-total,
    .hi-pagination-jumper {
      display: flex;
    }
  }
}

// ============================================
// Loading State
// ============================================

.hi-pagination-loading {
  pointer-events: none;
  opacity: 0.6;

  .hi-pagination-item {
    cursor: wait;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1rem;
      height: 1rem;
      margin: -0.5rem 0 0 -0.5rem;
      border: 2px solid var(--hi-primary);
      border-top-color: var(--hi-color-primary);
      border-radius: 50%;
      // DISABLED - migrated to JS animation

      // animation: pagination-spinner 0.6s linear infinite;
    }
  }
}

// DISABLED - migrated to JS animation
// @keyframes pagination-spinner {
//   to {
//     transform: rotate(360deg);
//   }
// }

// ============================================
// Alignment Variants
// ============================================

// Left aligned
.hi-pagination-left {
  justify-content: flex-start;
}

// Right aligned
.hi-pagination-right {
  justify-content: flex-end;
}

// Center aligned (default)
.hi-pagination-center {
  justify-content: center;
}

// ============================================
// Accessibility
// ============================================

// Focus visible
.hi-pagination-item:focus-visible {
  outline: 2px solid var(--hi-color-primary);
  outline-offset: 2px;
}

// High contrast mode
@media (prefers-contrast: high) {
  .hi-pagination-item {
    border-width: 2px;
  }

  .hi-pagination-item.hi-pagination-active {
    border-width: 2px;
  }
}

// Reduced motion
@media (prefers-reduced-motion: reduce) {
  .hi-pagination-item,
  .pagination-size-select,
  .hi-pagination-jumper-input,
  .hi-pagination-jumper-button {
    // DISABLED - migrated to JS animation

    // transition: none;
    // DISABLED - migrated to JS animation

    // animation: none;
  }

  .hi-pagination-item.hi-pagination-active {
    // DISABLED - migrated to JS animation

    // animation: none;
  }

  .hi-pagination-jump {
    // DISABLED - migrated to JS animation

    // animation: none;
  }
}

// ============================================
// Print Styles
// ============================================

@media print {
  .pagination {
    background: white;
    color: black;
    border: 1px solid #000;
  }

  .hi-pagination-item {
    background: white;
    border: 1px solid #000;
    color: black;
    box-shadow: none;
  }

  .hi-pagination-item.hi-pagination-active {
    background: #ccc;
    border-color: #000;
  }
}

// ============================================
// Dark Mode Specific Enhancements
// ============================================

@media (prefers-color-scheme: dark) {
  .hi-pagination-item {
    background: var(--hi-card-bg);
    border-color: var(--hi-white-10, rgba(255, 255, 255, 0.1));
  }

  .pagination-size-select,
  .hi-pagination-jumper-input {
    background: var(--hi-card-bg);
    border-color: var(--hi-white-10, rgba(255, 255, 255, 0.1));
  }
}