.comment-item {
  list-style-type: none;
  margin-top: item-spacing(4);

  /// Renders a pointer for the editable comment component
  /// but reverts if it also has the comment-new (isEditing) class
  &--editable {
    cursor: pointer;

    &.comment-new {
      cursor: inherit;
    }
  }

  /// Overrides the nested user avatar class
  .user-avatar {
    width: item-spacing(6);
    height: item-spacing(6);
  }

  &__header {
    display: flex;
    align-items: center;
    margin-bottom: item-spacing(3);
  }

  &__meta {
    display: flex;
    flex-direction: column;
  }

  &__author,
  &__creation {
    margin: item-spacing(0 1 1 3);
    font-weight: fw(normal, 4);
  }

  &__type {
    margin-left: auto;
    color: set-color(grey, mid);
    align-self: flex-start;

    &::before {
      content: 'type: ';
    }
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
  }
}