.root {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);

  box-sizing: border-box;

  border-left-style: solid;
  border-left-width: 4px;

  margin: var(--spacing-2);
  padding: var(--spacing-2);
}

.link {
  text-decoration: none;
  color: inherit;
}

.seen {
  border-left-color: var(--palette-background-body);
}

.notSeen {
  border-left-color: var(--palette-primary-500);
}

.badges {
  margin-left: var(--spacing-1);
}

.title {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;

  margin-bottom: var(--spacing-2);
}

.titleText {
  margin-left: var(--spacing-2);

  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-bold);
  font-size: var(--font-size-3);

  word-break: break-word;
}

.contextItem {
  margin-left: var(--spacing-5);
  margin-bottom: var(--spacing-2);
}

.footer {
  margin-left: var(--spacing-5);
}

.timestamp {
  font-family: var(--font-family-primary);
  font-style: normal;
  font-weight: var(--font-weight-primary-semi-bold);
  font-size: var(--font-size-2);
  color: var(--palette-text-500);
}

.divider {
  margin-left: var(--spacing-4);

  width: calc(100% - var(--spacing-4) * 2);
  height: 1px;

  background-color: var(--palette-grey-200);
}

.commentData {
  padding: var(--spacing-4);

  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-primary-regular);
  font-size: var(--font-size-2);
}
