/* Reaction badges and emoji picker for comments [MC-248] */

@layer components {
.reaction-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) 0 0;
  position: relative;
}

/* Badge form wrapper - inline display */
.reaction-badge-form {
  display: inline-flex;
}

/* Emoji badge pill */
.reaction-badge {
  --reaction-badge-bg: var(--color-bg-secondary);
  --reaction-badge-border: var(--color-border-primary);
  --reaction-badge-color: var(--color-text-secondary);
  --reaction-badge-hover-bg: var(--color-bg-hover);
  --reaction-badge-hover-border: var(--color-border-secondary);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid var(--reaction-badge-border);
  border-radius: var(--radius-full);
  background: var(--reaction-badge-bg);
  color: var(--reaction-badge-color);
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.reaction-badge:hover {
  background: var(--reaction-badge-hover-bg);
  border-color: var(--reaction-badge-hover-border);
}

/* Active state for current user's reactions */
.reaction-badge--active {
  --reaction-badge-bg: var(--color-bg-accent);
  --reaction-badge-border: var(--color-primary-300);
  --reaction-badge-color: var(--color-interactive-primary-text);
  --reaction-badge-hover-bg: var(--color-bg-accent-hover);
  --reaction-badge-hover-border: var(--color-primary-400);

  html[data-theme="dark"] & {
    --reaction-badge-bg: var(--color-primary-alpha-15);
    --reaction-badge-border: var(--color-primary-600);
    --reaction-badge-hover-bg: var(--color-primary-alpha-25);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) & {
      --reaction-badge-bg: var(--color-primary-alpha-15);
      --reaction-badge-border: var(--color-primary-600);
      --reaction-badge-hover-bg: var(--color-primary-alpha-25);
    }
  }
}

.reaction-badge-emoji {
  font-size: var(--text-xs);
  line-height: 1;
}

.reaction-badge-count {
  font-size: var(--text-xs);
  font-weight: 600;
  min-inline-size: 0.75rem;
  text-align: center;
}

/* Add reaction button */
.reaction-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-0-5) var(--space-1-5);
  border: 1px dashed var(--color-border-primary);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.reaction-add-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-secondary);
  background: var(--color-bg-hover);
}

/* Emoji picker popover */
.emoji-picker {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: 50; /* matches popover z-index convention */
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}

.emoji-picker[hidden] {
  display: none;
}

.emoji-picker-quick {
  display: flex;
  gap: var(--space-1);
}

.emoji-picker-form {
  display: inline-flex;
}

.emoji-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  font-size: var(--text-lg);
  line-height: 1;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s;
}

.emoji-picker-btn:hover {
  background: var(--color-bg-hover);
}

/* ========================================
 * MOBILE RESPONSIVE
 * ======================================== */

@media (width <= 768px) {
  .reaction-bar {
    gap: var(--space-1);
  }

  .reaction-badge {
    padding: var(--space-0-5) var(--space-1-5);
  }

  /* MC-289: Prevent emoji picker from going off screen on mobile */
  .emoji-picker {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .emoji-picker-btn {
    inline-size: var(--space-9);
    block-size: var(--space-9);
    font-size: var(--text-xl);
  }
}

} /* @layer components */