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

.ui-timeline {
  // Core Structure
  display: flex;
  flex-direction: column;
  position: relative;
  
  // Layout & Spacing
  padding: $semantic-spacing-component-md;
  
  // Typography
  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-text-primary;
  
  // Size Variants
  &--sm {
    padding: $semantic-spacing-component-xs;
    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);
    
    .ui-timeline__item {
      padding-bottom: $semantic-spacing-content-line-tight;
    }
    
    .ui-timeline__marker {
      width: $semantic-sizing-icon-inline;
      height: $semantic-sizing-icon-inline;
    }
    
    .ui-timeline__content {
      margin-left: $semantic-spacing-component-xs;
    }
  }
  
  &--md {
    .ui-timeline__item {
      padding-bottom: $semantic-spacing-component-sm;
    }
    
    .ui-timeline__marker {
      width: $semantic-sizing-icon-button;
      height: $semantic-sizing-icon-button;
    }
    
    .ui-timeline__content {
      margin-left: $semantic-spacing-component-sm;
    }
  }
  
  &--lg {
    padding: $semantic-spacing-component-lg;
    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);
    
    .ui-timeline__item {
      padding-bottom: $semantic-spacing-component-md;
    }
    
    .ui-timeline__marker {
      width: $semantic-sizing-icon-navigation;
      height: $semantic-sizing-icon-navigation;
    }
    
    .ui-timeline__content {
      margin-left: $semantic-spacing-component-md;
    }
  }
  
  // Timeline Item
  &__item {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-bottom: $semantic-spacing-component-sm;
    
    &:not(:last-child) {
      &::after {
        content: '';
        position: absolute;
        left: calc($semantic-sizing-icon-button / 2 - $semantic-border-width-1 / 2);
        top: calc($semantic-sizing-icon-button + $semantic-spacing-content-line-tight);
        width: $semantic-border-width-1;
        height: calc(100% - $semantic-sizing-icon-button - $semantic-spacing-content-line-tight);
        background: $semantic-color-border-secondary;
      }
    }
    
    &--completed {
      .ui-timeline__marker {
        background: $semantic-color-success;
        border-color: $semantic-color-success;
        
        &::after {
          content: '✓';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: $semantic-color-on-success;
          font-size: $semantic-typography-font-size-xs;
          font-weight: $semantic-typography-font-weight-bold;
        }
      }
    }
    
    &--active {
      .ui-timeline__marker {
        background: $semantic-color-primary;
        border-color: $semantic-color-primary;
        box-shadow: $semantic-shadow-elevation-2;
        
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 50%;
          height: 50%;
          background: $semantic-color-on-primary;
          border-radius: $semantic-border-radius-full;
          transform: translate(-50%, -50%);
        }
      }
      
      .ui-timeline__content {
        color: $semantic-color-text-primary;
      }
      
      .ui-timeline__title {
        color: $semantic-color-primary;
        font-weight: $semantic-typography-font-weight-semibold;
      }
    }
    
    &--pending {
      .ui-timeline__marker {
        background: $semantic-color-surface-primary;
        border-color: $semantic-color-border-secondary;
      }
      
      .ui-timeline__content {
        color: $semantic-color-text-secondary;
      }
    }
    
    &--error {
      .ui-timeline__marker {
        background: $semantic-color-danger;
        border-color: $semantic-color-danger;
        
        &::after {
          content: '×';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: $semantic-color-on-danger;
          font-size: $semantic-typography-font-size-sm;
          font-weight: $semantic-typography-font-weight-bold;
        }
      }
      
      .ui-timeline__title {
        color: $semantic-color-danger;
      }
    }
  }
  
  // Timeline Marker
  &__marker {
    flex-shrink: 0;
    width: $semantic-sizing-icon-button;
    height: $semantic-sizing-icon-button;
    border: $semantic-border-width-2 solid $semantic-color-border-primary;
    border-radius: $semantic-border-radius-full;
    background: $semantic-color-surface-primary;
    position: relative;
    z-index: 1;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  }
  
  // Timeline Content
  &__content {
    flex: 1;
    margin-left: $semantic-spacing-component-sm;
    // Remove padding-top for better alignment with marker center
  }
  
  &__title {
    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;
    margin-bottom: $semantic-spacing-content-line-tight;
  }
  
  &__description {
    color: $semantic-color-text-secondary;
    margin-bottom: $semantic-spacing-content-line-tight;
  }
  
  &__timestamp {
    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;
  }
  
  // Color Variants
  &--primary {
    .ui-timeline__item:not(.ui-timeline__item--completed):not(.ui-timeline__item--error) {
      .ui-timeline__marker {
        border-color: $semantic-color-primary;
      }
      
      &.ui-timeline__item--active .ui-timeline__marker {
        background: $semantic-color-primary;
      }
    }
  }
  
  &--secondary {
    .ui-timeline__item:not(.ui-timeline__item--completed):not(.ui-timeline__item--error) {
      .ui-timeline__marker {
        border-color: $semantic-color-secondary;
      }
      
      &.ui-timeline__item--active .ui-timeline__marker {
        background: $semantic-color-secondary;
      }
      
      &.ui-timeline__item--active .ui-timeline__title {
        color: $semantic-color-secondary;
      }
    }
  }
  
  &--success {
    .ui-timeline__item:not(.ui-timeline__item--completed):not(.ui-timeline__item--error) {
      .ui-timeline__marker {
        border-color: $semantic-color-success;
      }
      
      &.ui-timeline__item--active .ui-timeline__marker {
        background: $semantic-color-success;
      }
      
      &.ui-timeline__item--active .ui-timeline__title {
        color: $semantic-color-success;
      }
    }
  }
  
  // Orientation Variants
  &--horizontal {
    flex-direction: row;
    align-items: flex-start;
    
    .ui-timeline__item {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 0;
      padding-right: $semantic-spacing-component-md;
      
      &:not(:last-child) {
        &::after {
          left: calc(100% - $semantic-spacing-component-md / 2);
          top: calc($semantic-sizing-icon-button / 2 - $semantic-border-width-1 / 2);
          width: $semantic-spacing-component-md;
          height: $semantic-border-width-1;
        }
      }
    }
    
    .ui-timeline__content {
      margin-left: 0;
      margin-top: $semantic-spacing-content-line-tight;
      padding-top: 0;
    }
  }
  
  // Responsive Design
  @media (max-width: ($semantic-breakpoint-md - 1)) {
    padding: $semantic-spacing-component-sm;
    
    &--horizontal {
      flex-direction: column;
      
      .ui-timeline__item {
        flex-direction: row;
        text-align: left;
        padding-right: 0;
        padding-bottom: $semantic-spacing-component-sm;
        
        &:not(:last-child) {
          &::after {
            left: calc($semantic-sizing-icon-button / 2 - $semantic-border-width-1 / 2);
            top: calc($semantic-sizing-icon-button + $semantic-spacing-content-line-tight);
            width: $semantic-border-width-1;
            height: calc(100% - $semantic-sizing-icon-button - $semantic-spacing-content-line-tight);
          }
        }
      }
      
      .ui-timeline__content {
        margin-left: $semantic-spacing-component-sm;
        margin-top: 0;
        // Remove padding-top for better alignment
      }
    }
  }
  
  @media (max-width: ($semantic-breakpoint-sm - 1)) {
    padding: $semantic-spacing-component-xs;
    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);
  }
}