@import 'ui-design-system/src/styles/semantic';

// Tokens available globally via main application styles

.demo-container {
  padding: $semantic-spacing-layout-md;
  
  h2 {
    margin-bottom: $semantic-spacing-component-sm;
    color: $semantic-color-text-primary;
    font-size: $base-typography-font-size-xl;
  }
  
  p {
    margin-bottom: $semantic-spacing-layout-lg;
    color: $semantic-color-text-secondary;
    font-size: $base-typography-font-size-md;
  }
}

.demo-section {
  margin-bottom: $semantic-spacing-layout-xl;
  
  h3 {
    margin-bottom: $semantic-spacing-component-md;
    color: $semantic-color-text-primary;
    font-size: $base-typography-font-size-lg;
    border-bottom: $semantic-border-divider-width solid $semantic-color-border-subtle;
    padding-bottom: $semantic-spacing-component-xs;
  }
}

.demo-row {
  display: flex;
  gap: $semantic-spacing-component-lg;
  flex-wrap: wrap;
  align-items: flex-start;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: $semantic-spacing-component-lg;
}

.demo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $semantic-spacing-component-md;
  margin-bottom: $semantic-spacing-layout-lg;
}

.demo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $semantic-spacing-component-sm;
  
  .ui-image-container {
    cursor: pointer;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: $semantic-shadow-elevation-3;
    }
  }
}

.demo-label {
  font-size: $base-typography-font-size-sm;
  color: $semantic-color-text-secondary;
  font-weight: $base-typography-font-weight-medium;
  text-align: center;
  padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  background: $semantic-color-surface-secondary;
  border-radius: $semantic-border-radius-sm;
  border: $semantic-border-divider-width solid $semantic-color-border-subtle;
}

// Custom styling for hero image demo
.hero-image {
  position: relative;
  
  [slot='caption'] {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-xs;
    
    h4 {
      margin: 0;
      font-size: $base-typography-font-size-md;
      font-weight: $base-typography-font-weight-semibold;
    }
    
    p {
      margin: 0;
      font-size: $base-typography-font-size-sm;
      opacity: 0.9;
    }
  }
}

// Retry button styling
.retry-btn {
  margin-top: $semantic-spacing-component-xs;
  padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
  background: $semantic-color-interactive-primary;
  color: $semantic-color-text-inverse;
  border: none;
  border-radius: $semantic-border-radius-sm;
  font-size: $base-typography-font-size-xs;
  cursor: pointer;
  transition: background-color $semantic-duration-fast $semantic-easing-standard;
  
  &:hover {
    background-color: $semantic-color-surface-interactive;
  }
  
  &:focus-visible {
    outline: 2px solid $semantic-color-focus-ring;
    outline-offset: 2px;
  }
}

// Event log styling
.event-log {
  background: $semantic-color-surface-secondary;
  border: $semantic-border-divider-width solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-md;
  padding: $semantic-spacing-component-md;
  font-family: monospace;
  font-size: $base-typography-font-size-xs;
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  display: flex;
  gap: $semantic-spacing-component-sm;
  margin-bottom: $semantic-spacing-component-xs;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.event-time {
  color: $semantic-color-text-tertiary;
  min-width: 60px;
}

.event-type {
  color: $semantic-color-interactive-primary;
  font-weight: $base-typography-font-weight-medium;
  min-width: 80px;
}

.event-message {
  color: $semantic-color-text-secondary;
  flex: 1;
}

// Responsive design
@media (max-width: $semantic-sizing-breakpoint-tablet - 1) {
  .demo-row {
    gap: $semantic-spacing-component-md;
  }
  
  .demo-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: $semantic-spacing-component-md;
  }
  
  .demo-gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: $semantic-sizing-breakpoint-mobile - 1) {
  .demo-container {
    padding: $semantic-spacing-layout-sm;
  }
  
  .demo-section {
    margin-bottom: $semantic-spacing-layout-lg;
  }
  
  .demo-row {
    flex-direction: column;
    gap: $semantic-spacing-component-md;
    align-items: center;
  }
  
  .demo-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .event-log {
    font-size: $base-typography-font-size-xs;
  }
}