@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $semantic-spacing-2 0;
  
  &--left {
    justify-content: flex-start;
  }
  
  &--right {
    justify-content: flex-end;
  }
  
  &--sm {
    padding: $semantic-spacing-1 0;
    
    .pagination-list {
      gap: $semantic-spacing-1;
    }
    
    .pagination-item {
      min-width: $semantic-sizing-button-height-sm;
      height: $semantic-sizing-button-height-sm;
      font-size: $semantic-typography-font-size-xs;
    }
  }
  
  &--md {
    .pagination-list {
      gap: $semantic-spacing-1-5;
    }
    
    .pagination-item {
      min-width: $semantic-sizing-button-height-md;
      height: $semantic-sizing-button-height-md;
      font-size: $semantic-typography-font-size-sm;
    }
  }
  
  &--lg {
    padding: $semantic-spacing-3 0;
    
    .pagination-list {
      gap: $semantic-spacing-2;
    }
    
    .pagination-item {
      min-width: $semantic-sizing-button-height-lg;
      height: $semantic-sizing-button-height-lg;
      font-size: $semantic-typography-font-size-md;
    }
  }
}

.pagination-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: $semantic-spacing-1-5;
}

.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: $semantic-sizing-button-height-md;
  height: $semantic-sizing-button-height-md;
  border-radius: $semantic-border-radius-md;
  font-family: $semantic-typography-font-family-sans;
  font-size: $semantic-typography-font-size-sm;
  font-weight: $semantic-typography-font-weight-medium;
  line-height: $semantic-typography-line-height-none;
  text-decoration: none;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  user-select: none;
  
  // Default state
  background: $semantic-color-surface-primary;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  color: $semantic-color-text-primary;
  
  &:hover:not(.pagination-item--disabled):not(.pagination-item--current) {
    background: $semantic-color-surface-hover;
    border-color: $semantic-color-border-focus;
    transform: translateY(-1px);
    box-shadow: $semantic-shadow-elevation-2;
  }
  
  &:focus-visible {
    outline: 2px solid $semantic-color-interactive-primary;
    outline-offset: 2px;
  }
  
  &:active:not(.pagination-item--disabled):not(.pagination-item--current) {
    transform: translateY(0);
    box-shadow: $semantic-shadow-elevation-1;
  }
  
  // Current page state
  &--current {
    background: $semantic-color-interactive-primary;
    border-color: $semantic-color-interactive-primary;
    color: $semantic-color-on-primary;
    cursor: default;
    
    &:hover {
      background: $semantic-color-interactive-primary;
      border-color: $semantic-color-interactive-primary;
      transform: none;
    }
  }
  
  // Disabled state
  &--disabled {
    opacity: $semantic-opacity-disabled;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  // Ellipsis state
  &--ellipsis {
    cursor: default;
    pointer-events: none;
    border: none;
    background: transparent;
    color: $semantic-color-text-tertiary;
    font-weight: $semantic-typography-font-weight-normal;
  }
  
  // Navigation buttons (prev/next)
  &--nav {
    padding: 0 $semantic-spacing-2;
    min-width: auto;
    gap: $semantic-spacing-1;
    
    &:hover:not(.pagination-item--disabled) {
      color: $semantic-color-interactive-primary;
    }
  }
  
  // Icon sizing
  fa-icon {
    font-size: inherit;
  }
}

.pagination-info {
  display: flex;
  align-items: center;
  margin-left: $semantic-spacing-4;
  font-family: $semantic-typography-font-family-sans;
  font-size: $semantic-typography-font-size-sm;
  color: $semantic-color-text-secondary;
  white-space: nowrap;
  
  &--sm {
    margin-left: $semantic-spacing-2;
    font-size: $semantic-typography-font-size-xs;
  }
  
  &--lg {
    margin-left: $semantic-spacing-6;
    font-size: $semantic-typography-font-size-md;
  }
}

// Compact variant
.ui-pagination--compact {
  .pagination-list {
    gap: $semantic-spacing-1;
  }
  
  .pagination-item {
    min-width: $semantic-sizing-button-height-sm;
    height: $semantic-sizing-button-height-sm;
    font-size: $semantic-typography-font-size-xs;
    border-radius: $semantic-border-radius-sm;
    
    &--nav {
      padding: 0 $semantic-spacing-1-5;
    }
  }
  
  .pagination-info {
    margin-left: $semantic-spacing-2;
    font-size: $semantic-typography-font-size-xs;
  }
}

// Responsive design
@media (max-width: 768px) {
  .ui-pagination {
    padding: $semantic-spacing-1 0;
    
    .pagination-list {
      gap: $semantic-spacing-1;
    }
    
    .pagination-item {
      min-width: $semantic-sizing-button-height-sm;
      height: $semantic-sizing-button-height-sm;
      font-size: $semantic-typography-font-size-xs;
      
      &--nav {
        padding: 0 $semantic-spacing-1-5;
        gap: $semantic-spacing-0-5;
      }
    }
    
    .pagination-info {
      margin-left: $semantic-spacing-2;
      font-size: $semantic-typography-font-size-xs;
      
      // Hide detailed info on very small screens
      @media (max-width: 480px) {
        display: none;
      }
    }
  }
  
  // Show only essential pages on mobile
  .pagination-item--hide-mobile {
    display: none;
  }
}

// Dark mode support will be added in future versions