/* Enhanced source badge styles */

.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  padding-right: 2rem; /* Increased padding to add more space for the button */
  border-radius: 999px; /* Make it round */
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  position: relative;
  cursor: pointer;
  /* Dark mode (default) - light background with dark text */
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text);
  transition: all 0.2s ease; /* Smooth transition for color changes */
}

/* Light mode - dark background with light text */
body.light-mode .source-badge {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.source-badge:hover {
  /* Dark mode (default) */
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Light mode hover */
body.light-mode .source-badge:hover {
  background-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.source-badge img {
  width: 16px;
  height: 16px;
  border-radius: 50%; /* Make image round */
  object-fit: contain;
  background-color: transparent; /* Ensure transparent background */
}

/* Add a subtle border to make icons with transparent backgrounds more visible */
.source-badge img {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode border for images */
body.light-mode .source-badge img {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.source-badge.active {
  /* Dark mode (default) - light background with primary color text */
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--primary);
  font-weight: 500;
}

/* Light mode - dark background with primary color text */
body.light-mode .source-badge.active {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--primary);
}

.source-badge.excluded {
  opacity: 0.7;
  /* Dark mode (default) */
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  text-decoration: line-through;
}

/* Light mode */
body.light-mode .source-badge.excluded {
  background-color: rgba(239, 68, 68, 0.1);
  color: #dc2626; /* Slightly darker red for better contrast in light mode */
}

/* Source badge action buttons */
.source-actions {
  position: absolute;
  top: 50%;
  right: 8px; /* Increased right spacing */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  gap: 3px; /* Small gap between buttons */
  align-items: center; /* Center buttons horizontally */
  width: 16px; /* Fixed width for better alignment */
}

.source-badge .exclude-button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--surface);
  border: 1px solid var(--border);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 0 1px 0; /* Add bottom padding to center the cross vertically */
  margin: 0; /* Remove any margin */
  line-height: 1; /* Ensure consistent line height */
  text-align: center; /* Center text */
  color: #ef4444; /* Red color for exclude */
  letter-spacing: 1px; /* Add letter spacing to give the cross more room */
}

.source-badge .exclude-button:hover {
  background-color: #ef4444;
  color: white;
  border-color: #ef4444;
}

.source-badge.excluded .exclude-button {
  background-color: var(--primary);
  color: white;
}

.source-badge.excluded .exclude-button:hover {
  background-color: var(--primary-hover);
}

/* Tooltip base styles */
.source-badge::before,
.source-badge .exclude-button::before {
  position: absolute;
  bottom: -30px;
  background-color: var(--surface);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* Source badge tooltip */
.source-badge::before {
  content: 'Click to filter by this source';
  left: 50%;
  transform: translateX(-50%);
}

/* Exclude button tooltip */
.source-badge .exclude-button::before {
  content: 'Exclude this source';
  right: 0;
  z-index: 11; /* Higher z-index to appear above the source badge tooltip */
}

/* For excluded sources, change the tooltip text */
.source-badge.excluded .exclude-button::before {
  content: 'Include this source';
}

/* Show source badge tooltip on hover */
.source-badge:hover::before {
  opacity: 1;
}

/* Show exclude button tooltip on hover */
.source-badge .exclude-button:hover::before {
  opacity: 1;
}

/* Hide source badge tooltip when hovering over exclude button */
.source-badge .exclude-button:hover + span::before,
.source-badge .exclude-button:hover ~ ::before,
.source-badge .exclude-button:hover ~ *::before,
.source-badge .source-actions:hover ~ ::before,
.source-badge .source-actions:hover ~ *::before {
  opacity: 0 !important;
}

/* The key fix: when hovering over the actions area, hide the main tooltip */
.source-badge .source-actions:hover ~ ::before,
.source-badge .source-actions:hover + ::before {
  opacity: 0 !important;
}

/* When hovering over the exclude button, hide the main tooltip */
.source-badge .exclude-button:hover ~ ::before {
  opacity: 0 !important;
}