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

.ui-infinite-scroll-container {
  // Core Structure
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  height: 100%;
  
  // Base styling
  background: $semantic-color-surface-primary;
  color: $semantic-color-text-primary;
  
  // Scrollbar styling
  scrollbar-width: thin;
  scrollbar-color: $semantic-color-border-secondary $semantic-color-surface-secondary;
  
  &::-webkit-scrollbar {
    width: $semantic-spacing-2;
  }
  
  &::-webkit-scrollbar-track {
    background: $semantic-color-surface-secondary;
    border-radius: $semantic-border-radius-sm;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $semantic-color-border-secondary;
    border-radius: $semantic-border-radius-sm;
    
    &:hover {
      background: $semantic-color-border-primary;
    }
  }

  // Direction variants
  &--direction-down {
    // Default styling - no specific changes needed
  }
  
  &--direction-up {
    // Reverse flex direction for up-loading scenarios
    flex-direction: column-reverse;
  }
  
  &--direction-both {
    // Both directions supported - default styling
  }

  // State variants
  &--loading {
    cursor: wait;
  }
  
  &--disabled {
    pointer-events: none;
    opacity: $semantic-opacity-disabled;
  }
  
  &--has-fixed-height {
    // Optimizations for fixed-height items
    .ui-infinite-scroll-container__item {
      flex-shrink: 0;
    }
  }

  // Content area
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; // Allow shrinking
  }

  // Individual items
  &__item {
    display: flex;
    flex-direction: column;
    position: relative;
    
    // Ensure proper spacing between items
    & + & {
      margin-top: $semantic-spacing-grid-gap-sm;
    }
  }

  // Loading indicators
  &__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-component-lg;
    background: $semantic-color-surface-secondary;
    border-radius: $semantic-border-radius-sm;
    
    &--top {
      order: -1;
      margin-bottom: $semantic-spacing-component-md;
    }
    
    &--bottom {
      order: 999;
      margin-top: $semantic-spacing-component-md;
    }
  }

  // Default loading content
  &__default-loader {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-sm;
    
    font-family: map-get($semantic-typography-body-small, font-family);
    font-size: map-get($semantic-typography-body-small, font-size);
    font-weight: map-get($semantic-typography-body-small, font-weight);
    line-height: map-get($semantic-typography-body-small, line-height);
    color: $semantic-color-text-secondary;
  }

  // Loading spinner
  &__spinner {
    display: inline-block;
    width: $semantic-sizing-icon-inline;
    height: $semantic-sizing-icon-inline;
    border: 2px solid $semantic-color-border-subtle;
    border-radius: 50%;
    border-top-color: $semantic-color-primary;
    animation: ui-infinite-scroll-spin $semantic-motion-duration-slow linear infinite;
  }

  // End of content indicator
  &__end {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-component-lg;
    margin-top: $semantic-spacing-component-md;
  }

  &__default-end {
    padding: $semantic-spacing-component-md;
    background: $semantic-color-surface-secondary;
    border-radius: $semantic-border-radius-sm;
    
    font-family: map-get($semantic-typography-caption, font-family);
    font-size: map-get($semantic-typography-caption, font-size);
    font-weight: map-get($semantic-typography-caption, font-weight);
    line-height: map-get($semantic-typography-caption, line-height);
    color: $semantic-color-text-tertiary;
    text-align: center;
  }

  // Error state
  &__error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-component-lg;
    margin-top: $semantic-spacing-component-md;
  }

  &__default-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $semantic-spacing-component-sm;
    padding: $semantic-spacing-component-lg;
    background: $semantic-color-surface-secondary;
    border: $semantic-border-width-1 solid $semantic-color-border-error;
    border-radius: $semantic-border-radius-md;
    
    font-family: map-get($semantic-typography-body-small, font-family);
    font-size: map-get($semantic-typography-body-small, font-size);
    font-weight: map-get($semantic-typography-body-small, font-weight);
    line-height: map-get($semantic-typography-body-small, line-height);
    color: $semantic-color-text-primary;
    text-align: center;
  }

  &__retry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
    
    background: $semantic-color-primary;
    color: $semantic-color-on-primary;
    border: none;
    border-radius: $semantic-border-radius-sm;
    
    font-family: map-get($semantic-typography-button-small, font-family);
    font-size: map-get($semantic-typography-button-small, font-size);
    font-weight: map-get($semantic-typography-button-small, font-weight);
    line-height: map-get($semantic-typography-button-small, line-height);
    
    cursor: pointer;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover:not(:disabled) {
      background: $semantic-color-primary;
      box-shadow: $semantic-shadow-elevation-2;
      transform: translateY(-1px);
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
      box-shadow: $semantic-shadow-elevation-1;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    &:disabled {
      opacity: $semantic-opacity-disabled;
      cursor: not-allowed;
    }
  }

  // Focus styles
  &:focus-visible {
    outline: 2px solid $semantic-color-focus;
    outline-offset: 2px;
  }

  // Smooth scrolling behavior
  &:not(&--disabled) {
    scroll-behavior: smooth;
  }

  // High contrast mode support
  @media (prefers-contrast: high) {
    &__loader {
      border: $semantic-border-width-1 solid $semantic-color-border-primary;
    }
    
    &__default-end {
      border: $semantic-border-width-1 solid $semantic-color-border-primary;
    }
  }

  // Reduced motion support  
  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
    
    &__spinner {
      animation: none;
    }
    
    &__retry-button {
      transition: none;
      
      &:hover:not(:disabled) {
        transform: none;
      }
      
      &:active:not(:disabled) {
        transform: none;
      }
    }
  }

  // Print styles
  @media print {
    height: auto;
    overflow: visible;
    
    &__loader,
    &__error,
    &__retry-button {
      display: none;
    }
  }
}

// Keyframes for spinner animation
@keyframes ui-infinite-scroll-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}