.hybrid-thread-node {
  min-width: 0;
  max-width: 100%;
}

.comment-thread-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.375rem 0 0.375rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.comment-thread-bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.625rem;
  border: 1px solid rgb(var(--color-border-200));
  border-radius: 9999px;
  background: rgb(var(--color-border-50));
  color: rgb(var(--color-primary-600));
  font: inherit;
  line-height: 1.25rem;
  white-space: nowrap;
}

.comment-thread-bar-count {
  color: rgb(var(--color-text-600));
  background: rgb(var(--color-border-100));
  border-color: rgb(var(--color-border-200));
}

.comment-thread-bar-pill-button {
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.comment-thread-bar-pill-button:hover,
.comment-thread-bar-pill-button:focus-visible {
  background: rgb(var(--color-primary-50));
  border-color: rgb(var(--color-primary-200));
  color: rgb(var(--color-primary-700));
  outline: none;
}

.comment-thread-bar-subthread .comment-thread-bar-pill {
  border-style: dashed;
  background: rgb(var(--color-background));
}

.comment-thread-bar-subthread .comment-thread-bar-count {
  background: rgb(var(--color-background));
}

.thread-children {
  position: relative;
  margin-left: 1.5rem;
  padding-left: 1rem;
}

.thread-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgb(var(--color-border-200));
}

.thread-children.depth-1,
.thread-children.depth-2,
.thread-children.depth-3,
.thread-children.depth-4 {
  margin-left: 1rem;
}

.thread-children-subthread::before {
  background-image: linear-gradient(to bottom, rgb(var(--color-border-200)) 50%, transparent 50%);
  background-size: 2px 8px;
  background-color: transparent;
}

.inline-reply-composer {
  margin: 0.5rem 0 0.75rem 1.5rem;
}

.comment-thread-drawer .thread-children {
  margin-left: 1rem;
}

.c-actions {
  opacity: 0;
  transition: opacity 120ms ease;
}

.group\/comment:hover .c-actions,
.group\/comment:focus-within .c-actions {
  opacity: 1;
}
