.fg-figure-detail-comment-author-container {
  display: flex;
  align-items: center;

  width: 100%;
}

.fg-figure-detail-comment-author-container--deletable {
  width: calc(100% - 35px);
}

.fg-figure-detail-comment-author-container--editable {
  width: calc(100% - 65px);
}

.fg-figure-detail-comment-reply .fg-figure-detail-comment-author-container--editable {
  width: calc(100% - 70px);
}

.fg-figure-detail-comment-author-avatar {
  display: inline-block;

  flex: 0 0 35px;
  width: 35px;

  border-radius: 50%;

  vertical-align: middle;
}

.fg-figure-detail-comment-author-avatar:hover {
  cursor: pointer;
}

.fg-figure-detail-comment-author-username-container {
  overflow: hidden;

  width: 83%;
}

.fg-figure-detail-comment-author-username-container--deletable {
  max-width: 260px;
}

.fg-figure-detail-comment-author-username-container--editable {
  max-width: 230px;
}

.fg-figure-detail-comment-author-username:after {
  right: 0;

  background-image: linear-gradient(to right, rgba(242, 242, 242, 0) 30%, rgba(242, 242, 242, .6) 37%, rgba(242, 242, 242, .9) 50%, rgba(242, 242, 242, 1) 100%);
}

.fg-figure-detail-comment-item--editable:hover .fg-figure-detail-comment-author-username:after {
  background-image: linear-gradient(to right, rgba(234, 235, 238, 0) 30%, rgba(234, 235, 238, .6) 37%, rgba(234, 235, 238, .9) 50%, rgba(234, 235, 238, 1) 100%);
}

.fg-figure-detail-comment-author-username-text {
  margin-left: 9px;

  color: #000000;

  font-size: 12.5px;
  line-height: 16px;
}

.fg-figure-detail-comment-author-username:hover {
  cursor: pointer;
}