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

.ui-empty-state {
  // Core Structure
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  
  // Layout & Spacing
  padding: $semantic-spacing-component-lg;
  min-height: 200px;
  
  // Visual Design
  background: $semantic-color-surface-primary;
  border-radius: $semantic-border-card-radius;
  
  // Typography
  color: $semantic-color-text-secondary;
  
  // Sizing Variants
  &--sm {
    min-height: 120px;
    padding: $semantic-spacing-component-sm;
    
    .ui-empty-state__icon {
      width: $semantic-sizing-icon-inline;
      height: $semantic-sizing-icon-inline;
      margin-bottom: $semantic-spacing-content-line-tight;
    }
    
    .ui-empty-state__title {
      font-size: $base-typography-font-size-sm;
      margin-bottom: $semantic-spacing-content-line-tight;
    }
    
    .ui-empty-state__description {
      font-size: $base-typography-font-size-sm;
      margin-bottom: $semantic-spacing-content-line-normal;
    }
  }
  
  &--md {
    min-height: 200px;
    padding: $semantic-spacing-component-md;
    
    .ui-empty-state__icon {
      width: $semantic-sizing-icon-button;
      height: $semantic-sizing-icon-button;
      margin-bottom: $semantic-spacing-content-line-normal;
    }
    
    .ui-empty-state__title {
      font-size: $base-typography-font-size-lg;
      margin-bottom: $semantic-spacing-content-line-normal;
    }
    
    .ui-empty-state__description {
      font-size: $base-typography-font-size-md;
      margin-bottom: $semantic-spacing-content-paragraph;
    }
  }
  
  &--lg {
    min-height: 300px;
    padding: $semantic-spacing-component-lg;
    
    .ui-empty-state__icon {
      width: $semantic-sizing-icon-navigation;
      height: $semantic-sizing-icon-navigation;
      margin-bottom: $semantic-spacing-content-paragraph;
    }
    
    .ui-empty-state__title {
      font-size: $base-typography-font-size-xl;
      margin-bottom: $semantic-spacing-content-line-normal;
    }
    
    .ui-empty-state__description {
      font-size: $base-typography-font-size-lg;
      margin-bottom: $semantic-spacing-content-heading;
    }
  }
  
  // Variant Styles
  &--default {
    .ui-empty-state__icon {
      color: $semantic-color-text-tertiary;
    }
  }
  
  &--search {
    .ui-empty-state__icon {
      color: $semantic-color-primary;
    }
    
    .ui-empty-state__title {
      color: $semantic-color-text-primary;
    }
  }
  
  &--error {
    .ui-empty-state__icon {
      color: $semantic-color-error;
    }
    
    .ui-empty-state__title {
      color: $semantic-color-error;
    }
  }
  
  &--loading {
    .ui-empty-state__icon {
      color: $semantic-color-primary;
    }
  }
  
  &--success {
    .ui-empty-state__icon {
      color: $semantic-color-success;
    }
    
    .ui-empty-state__title {
      color: $semantic-color-success;
    }
  }
}

.ui-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: $semantic-spacing-content-line-normal;
  
  svg, img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.ui-empty-state__spinner {
  width: 100%;
  height: 100%;
  border: 3px solid $semantic-color-border-subtle;
  border-top: 3px solid $semantic-color-primary;
  border-radius: 50%;
  animation: spin $semantic-duration-medium $semantic-easing-standard infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ui-empty-state__title {
  margin: 0 0 $semantic-spacing-content-line-normal 0;
  color: $semantic-color-text-primary;
  font-weight: $base-typography-font-weight-semibold;
  line-height: $base-typography-line-height-tight;
}

.ui-empty-state__description {
  margin: 0 0 $semantic-spacing-content-paragraph 0;
  color: $semantic-color-text-secondary;
  line-height: $base-typography-line-height-relaxed;
  max-width: 400px;
}

.ui-empty-state__content {
  margin-bottom: $semantic-spacing-content-paragraph;
  
  &:empty {
    display: none;
  }
}

.ui-empty-state__actions {
  display: flex;
  gap: $semantic-spacing-content-line-normal;
  justify-content: center;
  flex-wrap: wrap;
}

.ui-empty-state__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
  
  // Visual Design
  background: $semantic-color-primary;
  color: $semantic-color-on-primary;
  border: $semantic-border-button-width solid $semantic-color-primary;
  border-radius: $semantic-border-button-radius;
  box-shadow: $semantic-shadow-button-rest;
  
  // Typography
  font-size: $base-typography-font-size-md;
  font-weight: $base-typography-font-weight-medium;
  text-decoration: none;
  
  // Transitions
  transition: all $semantic-duration-fast $semantic-easing-standard;
  
  cursor: pointer;
  user-select: none;
  
  // Interactive States
  &:not([disabled]) {
    &:hover {
      background: $semantic-color-primary;
      border-color: $semantic-color-primary;
      box-shadow: $semantic-shadow-button-hover;
      transform: translateY(-1px);
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    &:active {
      background: $semantic-color-primary;
      border-color: $semantic-color-primary;
      box-shadow: $semantic-shadow-button-active;
      transform: translateY(0);
    }
  }
  
  &[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
  }
}

// Dark Mode Support
:host-context(.dark-theme) .ui-empty-state {
  background: $semantic-color-surface-secondary;
}

// Responsive Design
@media (max-width: 768px) {
  .ui-empty-state {
    padding: $semantic-spacing-component-md;
    min-height: 160px;
    
    &--lg {
      min-height: 200px;
    }
    
    .ui-empty-state__description {
      max-width: 300px;
    }
  }
}

@media (max-width: 480px) {
  .ui-empty-state {
    padding: $semantic-spacing-component-sm;
    min-height: 120px;
    
    .ui-empty-state__icon {
      width: $semantic-sizing-icon-inline;
      height: $semantic-sizing-icon-inline;
    }
    
    .ui-empty-state__title {
      font-size: $base-typography-font-size-sm;
    }
    
    .ui-empty-state__description {
      font-size: $base-typography-font-size-sm;
      max-width: 280px;
    }
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .ui-empty-state__action {
    border-width: 2px;
    font-weight: $base-typography-font-weight-bold;
  }
}

// Reduced motion
@media (prefers-reduced-motion: reduce) {
  .ui-empty-state__spinner {
    animation: none;
    border-top-color: $semantic-color-primary;
  }
  
  .ui-empty-state__action {
    transition: none;
    
    &:hover {
      transform: none;
    }
    
    &:active {
      transform: none;
    }
  }
}