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

// Tokens available globally via main application styles

// ==========================================================================
// PROGRESS BAR COMPONENT STYLES
// ==========================================================================
// Modern progress bar implementation using design tokens
// Follows Material Design 3 principles with semantic token system
// Includes determinate, indeterminate, and buffer progress types
// ==========================================================================

.progress-bar-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  
  // Size variants
  &.progress-bar-wrapper--sm {
    gap: $semantic-spacing-component-xs;
  }
  
  &.progress-bar-wrapper--md {
    gap: $semantic-spacing-component-sm;
  }
  
  &.progress-bar-wrapper--lg {
    gap: $semantic-spacing-component-md;
  }
  
  // State variants
  &.progress-bar-wrapper--disabled {
    opacity: 0.6;
    pointer-events: none;
  }
}

.progress-bar {
  position: relative;
  display: block;
  width: 100%;
  background-color: $semantic-color-surface-secondary;
  border-radius: $semantic-border-radius-full;
  overflow: hidden;
  transition: all $semantic-duration-fast $semantic-easing-standard;
  
  // Size variants
  &.progress-bar--sm {
    height: 4px;
  }
  
  &.progress-bar--md {
    height: 6px;
  }
  
  &.progress-bar--lg {
    height: 8px;
  }
  
  // Disabled state
  &.progress-bar--disabled {
    background-color: $semantic-color-surface-disabled;
  }
}

.progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
  transition: width $semantic-duration-medium $semantic-easing-standard;
  
  // Variant colors
  .progress-bar-wrapper--primary & {
    background-color: $semantic-color-brand-primary;
  }
  
  .progress-bar-wrapper--secondary & {
    background-color: $semantic-color-text-secondary;
  }
  
  .progress-bar-wrapper--success & {
    background-color: $semantic-color-success;
  }
  
  .progress-bar-wrapper--warning & {
    background-color: $semantic-color-warning;
  }
  
  .progress-bar-wrapper--danger & {
    background-color: $semantic-color-danger;
  }
  
  // Disabled state
  &.progress-bar__fill--disabled {
    background-color: $semantic-color-surface-disabled !important;
  }
  
  // Striped effect
  &.progress-bar__fill--striped {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
  }
  
  // Animated stripes
  &.progress-bar__fill--animated {
    animation: progress-bar-stripes 1s linear infinite;
  }
}

// Indeterminate progress bar
.progress-bar__fill--indeterminate {
  width: 100%;
  
  &:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
    animation-delay: 1.15s;
  }
}

// Buffer progress bar
.progress-bar__buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba($semantic-color-text-secondary, 0.3);
  border-radius: inherit;
  transition: width $semantic-duration-medium $semantic-easing-standard;
  
  &.progress-bar__buffer--disabled {
    background-color: $semantic-color-surface-disabled;
  }
}

.progress-bar__fill--buffer {
  z-index: 1;
}

// Label and percentage
.progress-bar__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: $semantic-color-text-primary;
  font-weight: $semantic-typography-font-weight-medium;
  line-height: $semantic-typography-line-height-tight;
  
  // Size variants
  &.progress-bar__label--sm {
    font-size: $semantic-typography-font-size-sm;
    margin-bottom: $semantic-spacing-component-xs;
  }
  
  &.progress-bar__label--md {
    font-size: $semantic-typography-font-size-md;
    margin-bottom: $semantic-spacing-component-sm;
  }
  
  &.progress-bar__label--lg {
    font-size: $semantic-typography-font-size-lg;
    margin-bottom: $semantic-spacing-component-sm;
  }
  
  // Disabled state
  &.progress-bar__label--disabled {
    color: $semantic-color-text-disabled;
  }
}

.progress-bar__label-text {
  flex: 1;
  margin-right: $semantic-spacing-component-sm;
}

.progress-bar__percentage {
  font-weight: $semantic-typography-font-weight-bold;
  color: $semantic-color-text-secondary;
  font-variant-numeric: tabular-nums;
  
  .progress-bar__label--disabled & {
    color: $semantic-color-text-disabled;
  }
}

.progress-bar__helper-text {
  color: $semantic-color-text-secondary;
  line-height: $semantic-typography-line-height-tight;
  
  // Size variants
  &.progress-bar__helper-text--sm {
    font-size: $semantic-typography-font-size-xs;
    margin-top: $semantic-spacing-component-xs;
  }
  
  &.progress-bar__helper-text--md {
    font-size: $semantic-typography-font-size-sm;
    margin-top: $semantic-spacing-component-xs;
  }
  
  &.progress-bar__helper-text--lg {
    font-size: $semantic-typography-font-size-md;
    margin-top: $semantic-spacing-component-sm;
  }
  
  // Disabled state
  &.progress-bar__helper-text--disabled {
    color: $semantic-color-text-disabled;
  }
}

// ==========================================================================
// ANIMATIONS
// ==========================================================================

// Striped animation
@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
  100% {
    background-position-x: 0;
  }
}

// Indeterminate animations
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

// Pulse animation for focus/hover states
@keyframes progress-bar-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba($semantic-color-brand-primary, 0.4);
  }
  70% {
    box-shadow: 0 0 0 4px rgba($semantic-color-brand-primary, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba($semantic-color-brand-primary, 0);
  }
}

// ==========================================================================
// HOVER AND FOCUS STATES
// ==========================================================================

.progress-bar:hover:not(.progress-bar--disabled) {
  transform: scaleY(1.1);
  box-shadow: $semantic-shadow-elevation-1;
}

.progress-bar:focus-visible {
  outline: $semantic-border-width-2 solid $semantic-color-brand-primary;
  outline-offset: 2px;
}

// ==========================================================================
// RESPONSIVE DESIGN
// ==========================================================================

@media (max-width: $semantic-sizing-breakpoint-tablet - 1) {
  .progress-bar-wrapper {
    // Slightly larger progress bars on mobile for better visibility
    &.progress-bar-wrapper--sm {
      .progress-bar--sm {
        height: 5px;
      }
    }
    
    &.progress-bar-wrapper--md {
      .progress-bar--md {
        height: 7px;
      }
    }
    
    &.progress-bar-wrapper--lg {
      .progress-bar--lg {
        height: 9px;
      }
    }
  }
}

// ==========================================================================
// ACCESSIBILITY ENHANCEMENTS
// ==========================================================================

// Reduced motion preference
@media (prefers-reduced-motion: reduce) {
  .progress-bar__fill,
  .progress-bar__buffer {
    transition: none !important;
  }
  
  .progress-bar__fill--animated,
  .progress-bar__fill--indeterminate:before,
  .progress-bar__fill--indeterminate:after {
    animation: none !important;
  }
}

// High contrast mode
@media (prefers-contrast: high) {
  .progress-bar {
    border: $semantic-border-width-1 solid $semantic-color-text-primary;
  }
  
  .progress-bar__fill {
    border: $semantic-border-width-1 solid $semantic-color-text-primary;
    border-radius: 0;
  }
}

// ==========================================================================
// THEME VARIANTS
// ==========================================================================

// Dark theme adjustments
@media (prefers-color-scheme: dark) {
  .progress-bar {
    background-color: rgba($semantic-color-surface-primary, 0.1);
  }
  
  .progress-bar__buffer {
    background-color: rgba($semantic-color-text-secondary, 0.2);
  }
}

// ==========================================================================
// SPECIAL STATES AND EFFECTS
// ==========================================================================

// Success completion effect
.progress-bar-wrapper--success {
  .progress-bar__fill[style*="100%"] {
    animation: progress-complete 0.6s $semantic-easing-spring;
  }
}

@keyframes progress-complete {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.02);
  }
  100% {
    transform: scaleX(1);
  }
}

// Error state pulsing
.progress-bar-wrapper--danger {
  .progress-bar__fill {
    animation: progress-error 2s ease-in-out infinite;
  }
}

@keyframes progress-error {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}