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

.ui-feed-layout {
  // Core Structure
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  
  // Layout & Spacing
  background: $semantic-color-surface;
  
  // Size Variants
  &--sm {
    max-width: 640px;
  }
  
  &--md {
    max-width: 768px;
  }
  
  &--lg {
    max-width: 1024px;
  }
  
  // Loading State
  &--loading {
    .ui-feed-layout__container {
      opacity: $semantic-opacity-subtle;
    }
  }
  
  // Refresh Enabled
  &--refresh-enabled {
    .ui-feed-layout__container {
      touch-action: pan-y;
    }
  }
  
  // Refresh Indicator
  &__refresh-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-sm;
    padding: $semantic-spacing-component-md;
    background: $semantic-color-surface-elevated;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    
    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;
  }
  
  &__refresh-spinner {
    width: $semantic-sizing-icon-inline;
    height: $semantic-sizing-icon-inline;
    border: 2px solid $semantic-color-border-subtle;
    border-top-color: $semantic-color-primary;
    border-radius: $semantic-border-radius-full;
    animation: ui-feed-layout-spin $semantic-motion-duration-slow linear infinite;
  }
  
  // Container
  &__container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    // Custom scrollbar
    &::-webkit-scrollbar {
      width: 4px;
    }
    
    &::-webkit-scrollbar-track {
      background: $semantic-color-surface-secondary;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $semantic-color-border-primary;
      border-radius: $semantic-border-radius-sm;
      
      &:hover {
        background: $semantic-color-primary;
      }
    }
  }
  
  // Loader
  &__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-sm;
    padding: $semantic-spacing-component-lg;
    
    border-top: $semantic-border-width-1 solid $semantic-color-border-subtle;
    background: $semantic-color-surface-elevated;
  }
  
  &__loader-spinner {
    width: $semantic-sizing-icon-button;
    height: $semantic-sizing-icon-button;
    border: 2px solid $semantic-color-border-subtle;
    border-top-color: $semantic-color-primary;
    border-radius: $semantic-border-radius-full;
    animation: ui-feed-layout-spin $semantic-motion-duration-slow linear infinite;
  }
  
  &__loader-text {
    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;
  }
  
  // Error State
  &__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-md;
    padding: $semantic-spacing-component-lg;
    
    background: $semantic-color-surface-elevated;
    border: $semantic-border-width-1 solid $semantic-color-border-error;
    border-radius: $semantic-border-radius-md;
    margin: $semantic-spacing-component-md;
    
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: map-get($semantic-typography-body-medium, font-weight);
    line-height: map-get($semantic-typography-body-medium, line-height);
    color: $semantic-color-danger;
    text-align: center;
  }
  
  &__retry-button {
    padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
    background: $semantic-color-danger;
    color: $semantic-color-on-danger;
    border: none;
    border-radius: $semantic-border-button-radius;
    cursor: pointer;
    
    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);
    
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover:not(:disabled) {
      opacity: $semantic-opacity-hover;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    &:disabled {
      opacity: $semantic-opacity-disabled;
      cursor: not-allowed;
    }
  }
  
  // Empty State
  &__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $semantic-spacing-layout-section-lg;
    min-height: 200px;
    
    font-family: map-get($semantic-typography-body-large, font-family);
    font-size: map-get($semantic-typography-body-large, font-size);
    font-weight: map-get($semantic-typography-body-large, font-weight);
    line-height: map-get($semantic-typography-body-large, line-height);
    color: $semantic-color-text-tertiary;
    text-align: center;
  }
  
  // Refresh Zone (for pull-to-refresh)
  &__refresh-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    z-index: -1;
    
    &--active {
      background: $semantic-color-surface-elevated;
      border-bottom: 2px solid $semantic-color-primary;
    }
  }
  
  // Animation Keyframes
  @keyframes ui-feed-layout-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  // Responsive Design
  @media (max-width: 768px) {
    &__loader,
    &__error,
    &__empty {
      padding: $semantic-spacing-component-md;
    }
    
    &__refresh-indicator {
      padding: $semantic-spacing-component-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);
    }
  }
  
  @media (max-width: 480px) {
    &--sm,
    &--md,
    &--lg {
      max-width: 100%;
    }
    
    &__empty {
      min-height: 150px;
      padding: $semantic-spacing-component-lg;
      
      font-family: map-get($semantic-typography-body-medium, font-family);
      font-size: map-get($semantic-typography-body-medium, font-size);
      font-weight: map-get($semantic-typography-body-medium, font-weight);
      line-height: map-get($semantic-typography-body-medium, line-height);
    }
  }
}

// Focus management for accessibility
.ui-feed-layout:focus-within {
  .ui-feed-layout__container::-webkit-scrollbar-thumb {
    background: $semantic-color-focus;
  }
}