/* Status Badge Component Styles */

.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: nowrap;
  transition: var(--transition-fast);
  border: 1px solid transparent;
  margin-left: auto;
}

/* Status Badge Variants */
.status-badge--in-progress {
  background-color: var(--color-status-in-progress);
  color: var(--color-white);
  border-color: var(--color-status-in-progress);
}

.status-badge--in-progress:hover {
  background-color: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
}

.status-badge--planned {
  background-color: var(--color-status-planned);
  color: var(--color-white);
  border-color: var(--color-status-planned);
}

.status-badge--planned:hover {
  background-color: var(--color-status-planned-bg);
  color: var(--color-status-planned);
}

.status-badge--completed {
  background-color: var(--color-status-completed);
  color: var(--color-white);
  border-color: var(--color-status-completed);
}

.status-badge--completed:hover {
  background-color: var(--color-status-completed-bg);
  color: var(--color-status-completed);
}

.status-badge--cancelled {
  background-color: var(--color-status-cancelled);
  color: var(--color-white);
  border-color: var(--color-status-cancelled);
}

.status-badge--cancelled:hover {
  background-color: var(--color-status-cancelled-bg);
  color: var(--color-status-cancelled);
}

.status-badge--on-hold {
  background-color: var(--color-status-on-hold);
  color: var(--color-bg-dark);
  border-color: var(--color-status-on-hold);
}

.status-badge--on-hold:hover {
  background-color: var(--color-status-on-hold-bg);
  color: var(--color-status-on-hold);
}

/* Status Badge Sizes */
.status-badge--sm {
  padding: calc(var(--spacing-xs) * 0.5) var(--spacing-sm);
  font-size: calc(var(--font-size-xs) * 0.9);
}

.status-badge--lg {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
}

/* Status Badge with Icon */
.status-badge--with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.status-badge--with-icon .status-badge__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .status-badge {
    font-size: calc(var(--font-size-xs) * 0.9);
    padding: calc(var(--spacing-xs) * 0.8) var(--spacing-sm);
  }
  
  .status-badge--sm {
    padding: calc(var(--spacing-xs) * 0.4) calc(var(--spacing-sm) * 0.8);
    font-size: calc(var(--font-size-xs) * 0.8);
  }
  
  .status-badge--lg {
    padding: calc(var(--spacing-sm) * 0.8) var(--spacing-md);
    font-size: var(--font-size-xs);
  }
}