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

.demo-container {
  padding: $semantic-spacing-component-lg;
  max-width: 100%;
  
  h2 {
    margin: 0 0 $semantic-spacing-component-lg 0;
    font-family: map-get($semantic-typography-heading-h2, font-family);
    font-size: map-get($semantic-typography-heading-h2, font-size);
    font-weight: map-get($semantic-typography-heading-h2, font-weight);
    line-height: map-get($semantic-typography-heading-h2, line-height);
    color: $semantic-color-text-primary;
  }
  
  h3 {
    margin: $semantic-spacing-component-xl 0 $semantic-spacing-component-md 0;
    font-family: map-get($semantic-typography-heading-h3, font-family);
    font-size: map-get($semantic-typography-heading-h3, font-size);
    font-weight: map-get($semantic-typography-heading-h3, font-weight);
    line-height: map-get($semantic-typography-heading-h3, line-height);
    color: $semantic-color-text-primary;
  }
  
  h4 {
    margin: 0 0 $semantic-spacing-component-sm 0;
    font-family: map-get($semantic-typography-heading-h4, font-family);
    font-size: map-get($semantic-typography-heading-h4, font-size);
    font-weight: map-get($semantic-typography-heading-h4, font-weight);
    line-height: map-get($semantic-typography-heading-h4, line-height);
    color: $semantic-color-text-primary;
  }
}

.demo-section {
  margin-bottom: $semantic-spacing-component-xl;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.demo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $semantic-spacing-grid-gap-lg;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: $semantic-spacing-grid-gap-md;
  }
}

.demo-item {
  background: $semantic-color-surface-secondary;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-md;
  padding: $semantic-spacing-component-md;
  box-shadow: $semantic-shadow-elevation-1;
}

.event-log {
  margin-top: $semantic-spacing-component-lg;
  padding: $semantic-spacing-component-md;
  background: $semantic-color-surface-secondary;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-md;
  
  h4 {
    margin: 0 0 $semantic-spacing-component-sm 0;
    font-family: map-get($semantic-typography-heading-h4, font-family);
    font-size: map-get($semantic-typography-heading-h4, font-size);
    font-weight: map-get($semantic-typography-heading-h4, font-weight);
    line-height: map-get($semantic-typography-heading-h4, line-height);
    color: $semantic-color-text-primary;
  }
}

.events {
  max-height: 200px;
  overflow-y: auto;
  
  // Scroll styling
  scrollbar-width: thin;
  scrollbar-color: $semantic-color-border-primary $semantic-color-surface-container;
  
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: $semantic-color-surface-container;
    border-radius: $semantic-border-radius-sm;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $semantic-color-border-primary;
    border-radius: $semantic-border-radius-sm;
  }
}

.event-item {
  display: flex;
  flex-direction: column;
  gap: $semantic-spacing-component-xs;
  padding: $semantic-spacing-component-sm;
  border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
  
  &:last-child {
    border-bottom: none;
  }
  
  strong {
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: $semantic-typography-font-weight-semibold;
    line-height: map-get($semantic-typography-body-medium, line-height);
    color: $semantic-color-text-primary;
  }
  
  small {
    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;
  }
}