move styles from root block to its elements

web/app/components/root/__input/root__input.scss

@@ -0,0 +1,3 @@
+.root__input {
+  margin-bottom: 24px;
+}

web/app/components/root/__thread/root__thread.scss

@@ -0,0 +1,7 @@
+@import 'common/variables';
+
+.root__thread {
+  &:last-child {
+    margin-bottom: -$offset;
+  }
+}

web/app/components/root/index.js

@@ -1,3 +1,4 @@
 export { default } from './root';
 
-require('./root.scss');
+require('./__input/root__input.scss');
+require('./__thread/root__thread.scss');

web/app/components/root/root.jsx

@@ -3,6 +3,7 @@ import api from 'common/api';
 
 import { url, id } from 'common/settings';
 
+import Input from 'components/input';
 import Thread from 'components/thread';
 
 export default class Root extends Component {
@@ -13,10 +14,14 @@ export default class Root extends Component {
 
   render({}, { comments = [] }) {
     return (
-      <div className="root" id={id}>
-        {
-          comments.map(thread => <Thread data={thread} mods={{ level: 0 }}/>)
-        }
+      <div>
+        <div className="root" id={id}>
+          <Input mix="root__input"/>
+
+          {
+            comments.map(thread => <Thread data={thread} mods={{ level: 0 }} mix="root__thread"/>)
+          }
+        </div>
       </div>
     );
   }

web/app/components/root/root.scss

@@ -1,5 +0,0 @@
-@import 'common/variables';
-
-.root {
-  margin-bottom: -$offset;
-}