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

.ui-stepper {
  display: flex;
  width: 100%;
  position: relative;
  
  // Layout variants
  &--horizontal {
    flex-direction: row;
    align-items: center;
  }
  
  &--vertical {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ui-stepper__step {
  display: flex;
  position: relative;
  
  .ui-stepper--horizontal & {
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    &:not(:last-child) {
      margin-right: $semantic-spacing-component-lg;
    }
  }
  
  .ui-stepper--vertical & {
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    
    &:not(:last-child) {
      margin-bottom: $semantic-spacing-component-xl;
    }
  }
}

.ui-stepper__step-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  border-radius: $semantic-border-radius-md;
  
  .ui-stepper--horizontal & {
    flex-direction: column;
    text-align: center;
    padding: $semantic-spacing-component-sm;
  }
  
  .ui-stepper--vertical & {
    flex-direction: row;
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    margin-bottom: $semantic-spacing-component-sm;
  }
  
  &:hover:not(.ui-stepper__step-header--disabled) {
    background: $semantic-color-surface-secondary;
  }
  
  &:focus-visible {
    outline: 2px solid $semantic-color-brand-primary;
    outline-offset: 2px;
  }
  
  &--disabled {
    cursor: not-allowed;
    opacity: $semantic-opacity-disabled;
  }
}

.ui-stepper__step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $semantic-sizing-touch-target;
  height: $semantic-sizing-touch-target;
  border-radius: $semantic-border-radius-full;
  border: $semantic-border-width-2 solid $semantic-color-border-primary;
  background: $semantic-color-surface-primary;
  color: $semantic-color-text-secondary;
  font-weight: $semantic-typography-font-weight-semibold;
  font-size: $semantic-typography-font-size-sm;
  transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
  position: relative;
  flex-shrink: 0;
  
  .ui-stepper--horizontal & {
    margin-bottom: $semantic-spacing-component-sm;
  }
  
  .ui-stepper--vertical & {
    margin-right: $semantic-spacing-component-md;
  }
  
  // Step states
  &--pending {
    border-color: $semantic-color-border-primary;
    background: $semantic-color-surface-primary;
    color: $semantic-color-text-secondary;
  }
  
  &--current {
    border-color: $semantic-color-brand-primary;
    background: $semantic-color-brand-primary;
    color: $semantic-color-on-brand-primary;
    box-shadow: $semantic-shadow-elevation-2;
  }
  
  &--completed {
    border-color: $semantic-color-success;
    background: $semantic-color-success;
    color: $semantic-color-on-success;
  }
  
  &--error {
    border-color: $semantic-color-danger;
    background: $semantic-color-danger;
    color: $semantic-color-on-danger;
  }
  
  &--disabled {
    border-color: $semantic-color-border-primary;
    background: $semantic-color-surface-disabled;
    color: $semantic-color-text-disabled;
  }
}

.ui-stepper__step-content {
  display: flex;
  flex-direction: column;
  
  .ui-stepper--horizontal & {
    align-items: center;
    text-align: center;
  }
  
  .ui-stepper--vertical & {
    align-items: flex-start;
    flex: 1;
  }
}

.ui-stepper__step-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: 0;
  
  .ui-stepper__step-header--disabled & {
    color: $semantic-color-text-disabled;
  }
}

.ui-stepper__step-description {
  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;
  margin: $semantic-spacing-content-line-tight 0 0 0;
  
  .ui-stepper__step-header--disabled & {
    color: $semantic-color-text-disabled;
  }
}

.ui-stepper__connector {
  position: absolute;
  background: $semantic-color-border-primary;
  transition: background-color $semantic-motion-duration-fast $semantic-motion-easing-ease;
  
  .ui-stepper--horizontal & {
    top: calc(#{$semantic-sizing-touch-target / 2} + #{$semantic-spacing-component-sm} - 1px);
    left: calc(#{$semantic-sizing-touch-target / 2} + #{$semantic-spacing-component-sm} + #{$semantic-sizing-touch-target / 2} + #{$semantic-sizing-touch-target * 2} - 13px);
    right: calc(-#{$semantic-spacing-component-lg} - #{$semantic-spacing-component-sm} + #{$semantic-sizing-touch-target / 2});
    height: 2px;
    transform: none;
  }
  
  .ui-stepper--vertical & {
    left: calc(#{$semantic-sizing-touch-target / 2} + #{$semantic-spacing-component-sm} + #{$semantic-spacing-component-sm} - 2px);
    top: calc(#{$semantic-sizing-touch-target} + #{$semantic-spacing-component-sm} + 2px);
    height: calc(100% - 2px);
    width: 2px;
  }
  
  &--completed {
    background: $semantic-color-success;
  }
  
  &--error {
    background: $semantic-color-danger;
  }
  
  &--incoming {
    .ui-stepper--horizontal & {
      left: -16px;
      width: calc(#{$semantic-sizing-touch-target / 2} + #{$semantic-spacing-component-sm} + 4px + #{$semantic-sizing-touch-target} + 20px);
    }
    
    .ui-stepper--vertical & {
      top: calc(-#{$semantic-spacing-component-xl} + #{$semantic-spacing-component-sm});
      height: calc(#{$semantic-spacing-component-xl} - #{$semantic-spacing-component-sm * 2} - 4px);
    }
  }
}

// Size variants
.ui-stepper--sm {
  .ui-stepper__step-indicator {
    width: $semantic-sizing-button-height-sm;
    height: $semantic-sizing-button-height-sm;
    font-size: $semantic-typography-font-size-xs;
  }
  
  .ui-stepper__step-title {
    font-size: map-get($semantic-typography-body-small, font-size);
  }
  
  .ui-stepper__step-description {
    font-size: $semantic-typography-font-size-xs;
  }
}

.ui-stepper--lg {
  .ui-stepper__step-indicator {
    width: $semantic-sizing-button-height-lg;
    height: $semantic-sizing-button-height-lg;
    font-size: $semantic-typography-font-size-md;
  }
  
  .ui-stepper__step-title {
    font-size: map-get($semantic-typography-body-large, font-size);
    font-weight: map-get($semantic-typography-body-large, font-weight);
  }
}

// Alternative visual style
.ui-stepper--outlined {
  .ui-stepper__step-indicator {
    &--current {
      background: $semantic-color-surface-primary;
      color: $semantic-color-brand-primary;
      border-color: $semantic-color-brand-primary;
      border-width: 3px;
    }
  }
}

// Dense variant for compact layouts  
.ui-stepper--dense {
  .ui-stepper__step {
    .ui-stepper--horizontal & {
      &:not(:last-child) {
        margin-right: $semantic-spacing-component-md;
      }
    }
    
    .ui-stepper--vertical & {
      &:not(:last-child) {
        margin-bottom: $semantic-spacing-component-lg;
      }
    }
  }
  
  .ui-stepper__step-header {
    padding: $semantic-spacing-component-xs;
  }
  
  .ui-stepper__step-indicator {
    .ui-stepper--vertical & {
      margin-right: $semantic-spacing-component-sm;
    }
  }
}

// Responsive design
@media (max-width: 768px) {
  .ui-stepper--horizontal {
    .ui-stepper__step {
      &:not(:last-child) {
        margin-right: $semantic-spacing-component-sm;
      }
    }
    
    .ui-stepper__step-description {
      display: none;
    }
    
    .ui-stepper__step-title {
      font-size: map-get($semantic-typography-body-small, font-size);
    }
  }
  
  .ui-stepper__step-indicator {
    width: $semantic-sizing-button-height-sm;
    height: $semantic-sizing-button-height-sm;
    font-size: $semantic-typography-font-size-xs;
  }
}

@media (max-width: 480px) {
  .ui-stepper--horizontal {
    .ui-stepper__step-title {
      font-size: $semantic-typography-font-size-xs;
    }
  }
}