@use 'sass:color';

// ==========================================================================
// Monitor.Cat — Status Badges
// ==========================================================================

@use 'tokens' as *;

.monitorcat-wrap {
  // ---------------------------------------------------------------------------
  // Base badge
  // ---------------------------------------------------------------------------
  .mc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: $mc-font-body;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 4px 12px;
    border-radius: $mc-radius-pill;
    white-space: nowrap;
  }

  // ---------------------------------------------------------------------------
  // Color variants
  // ---------------------------------------------------------------------------
  .mc-badge-success {
    background: $mc-mint-light;
    color: $mc-mint-strong;
  }

  .mc-badge-warning {
    background: $mc-primary-light;
    color: color.adjust($mc-primary-hover, $lightness: -8%);
  }

  .mc-badge-error {
    background: $mc-coral-light;
    color: $mc-coral-strong;
  }

  .mc-badge-info {
    background: $mc-cyan-light;
    color: $mc-cyan-strong;
  }

  .mc-badge-lavender {
    background: $mc-lavender-light;
    color: $mc-lavender-strong;
  }

  .mc-badge-pink {
    background: $mc-pink-light;
    color: $mc-pink;
  }

  // ---------------------------------------------------------------------------
  // Neutral / default
  // ---------------------------------------------------------------------------
  .mc-badge-neutral {
    background: $mc-base-alt;
    color: $mc-text-medium;
  }

  // ---------------------------------------------------------------------------
  // Primary
  // ---------------------------------------------------------------------------
  .mc-badge-primary {
    background: $mc-primary-light;
    color: $mc-primary-hover;
  }

  // ---------------------------------------------------------------------------
  // Muted
  // ---------------------------------------------------------------------------
  .mc-badge-muted {
    background: $mc-base;
    color: $mc-text-light;
  }

  // ---------------------------------------------------------------------------
  // Dot indicator (small circle before text)
  // ---------------------------------------------------------------------------
  .mc-badge-dot {
    &::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }
  }
}