@use '../variables' as v;
@use '../mixins' as m;

// Alert / notification banner
.alert {
  @include m.flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: v.$radius;
  font-size: v.$font-size-sm;
  border: 1px solid transparent;

  &-icon {
    flex-shrink: 0;
    svg { width: 18px; height: 18px; }
  }

  &-body { flex: 1; }
  &-title { font-weight: 600; margin-bottom: 2px; }
  &-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.5;
    padding: 2px;

    &:hover { opacity: 1; }
    svg { width: 16px; height: 16px; }
  }

  &--info    { background: v.$info-light;    border-color: v.$info-border;    color: #1e3a8a; }
  &--success { background: v.$success-light; border-color: v.$success-border; color: #14532d; }
  &--warning { background: v.$warning-light; border-color: v.$warning-border; color: #78350f; }
  &--danger  { background: v.$danger-light;  border-color: v.$danger-border;  color: #7f1d1d; }
}

// Progress bar
.progress-bar {
  height: 6px;
  background: v.$gray-100;
  border-radius: v.$radius-full;
  overflow: hidden;

  &-fill {
    height: 100%;
    background: v.$primary;
    border-radius: v.$radius-full;
    transition: width v.$transition-slower;

    &--success  { background: v.$success; }
    &--warning  { background: v.$warning; }
    &--danger   { background: v.$danger; }
    &--info     { background: v.$info; }
  }
}

// Toast notifications
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: v.$z-toast;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  @include m.flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: v.$gray-900;
  color: v.$white;
  border-radius: v.$radius-lg;
  box-shadow: v.$shadow-lg;
  font-size: v.$font-size-sm;
  min-width: 280px;
  max-width: 380px;
  pointer-events: all;
  animation: toastIn v.$transition-slow forwards;

  &-icon svg { width: 18px; height: 18px; }

  &--success { background: v.$success; }
  &--danger  { background: v.$danger; }
  &--warning { background: v.$gray-800; }

  @keyframes toastIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
  }
}

// Wizard / step indicator
.wizard-steps {
  @include m.flex-start;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 1px solid v.$border-color;
  padding-bottom: 0;
}

.wizard-step {
  @include m.flex-start;
  gap: 10px;
  padding: 0 20px 14px;
  font-size: v.$font-size-sm;
  font-weight: 500;
  color: v.$gray-400;
  position: relative;
  cursor: default;

  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background v.$transition-base;
  }

  &-number {
    width: 24px;
    height: 24px;
    border-radius: v.$radius-full;
    background: v.$gray-200;
    color: v.$gray-500;
    font-size: v.$font-size-xs;
    font-weight: 600;
    @include m.flex-center;
    flex-shrink: 0;
    transition: background v.$transition-base, color v.$transition-base;
  }

  &.is-active {
    color: v.$primary;

    &::after { background: v.$primary; }

    .wizard-step-number {
      background: v.$primary;
      color: v.$white;
    }
  }

  &.is-done {
    color: v.$success;

    .wizard-step-number {
      background: v.$success;
      color: v.$white;
    }
  }
}
