/**
 * LinkBadge - Link status indicator styles
 */

.link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--badge-color);
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.link-badge:hover {
  opacity: 0.9;
}

/* Icon */
.link-badge-icon {
  flex-shrink: 0;
}

/* Label */
.link-badge-label {
  font-size: 0.75rem;
  line-height: 1;
}

/* Size variants */
.link-badge--small {
  padding: 2px 5px;
  font-size: 10px;
}

.link-badge--small .link-badge-icon {
  width: 10px;
  height: 10px;
}

.link-badge--medium {
  padding: 3px 8px;
  font-size: 12px;
}

.link-badge--medium .link-badge-icon {
  width: 12px;
  height: 12px;
}

.link-badge--large {
  padding: 4px 10px;
  font-size: 14px;
}

.link-badge--large .link-badge-icon {
  width: 14px;
  height: 14px;
}

/* Link type specific styles */
.link-badge--linked {
  background-color: #28a745;
}

.link-badge--orphaned {
  background-color: #ff9500;
}

.link-badge--custom {
  background-color: #17a2b8;
}

/* Icon-only mode (no label) - circular */
.link-badge:not(:has(.link-badge-label)) {
  padding: 4px;
  border-radius: 50%;
}

.link-badge--small:not(:has(.link-badge-label)) {
  padding: 3px;
}

.link-badge--large:not(:has(.link-badge-label)) {
  padding: 5px;
}