.l-comment {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--td-font-size-body-medium);
  font-family: var(--td-font-family);
  list-style: none;
  width: 100%;
  color: var(--td-text-color-primary);
}
.l-comment__inner {
  display: flex;
}
.l-comment__avatar {
  flex-shrink: 0;
  margin-right: 16px;
  cursor: pointer;
}
.l-comment__avatar-image {
  width: 56px;
  height: 56px;
  border-radius: var(--td-radius-circle);
}
.l-comment__content {
  flex: auto;
  font: var(--td-font-body-medium);
}
.l-comment__author {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 8px;
}
.l-comment__author > span {
  padding-right: 8px;
}
.l-comment__name {
  display: inline-flex;
  align-items: center;
  font: var(--td-font-title-medium);
  cursor: pointer;
}
.l-comment__time {
  font: var(--td-font-body-small);
  padding-top: 2px;
  padding-bottom: 2px;
  color: var(--td-text-color-placeholder);
}
.l-comment__detail {
  word-break: break-all;
  font: var(--td-font-body-medium);
}
.l-comment__quote {
  margin-top: 16px;
  border-left: 4px solid var(--td-bg-color-secondarycontainer);
  padding-left: 16px;
}
.l-comment__quote .l-comment__name,
.l-comment__quote .l-comment__detail {
  color: var(--td-text-color-secondary);
}
.l-comment__actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
}
.l-comment__actions > li {
  color: var(--td-text-color-placeholder);
  margin-left: 24px;
  font-size: var(--td-font-body-small);
  cursor: pointer;
  user-select: none;
}
.l-comment__actions > li:hover {
  color: var(--td-text-color-link);
}
.l-comment__reply {
  margin-top: 16px;
  margin-left: 80px;
  background-color: var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-medium);
  padding: 16px 24px;
}
