diff --git a/client/src/components/CommentApp/components/Comment/style.scss b/client/src/components/CommentApp/components/Comment/style.scss
index 2a4d228994..451cc84f17 100644
--- a/client/src/components/CommentApp/components/Comment/style.scss
+++ b/client/src/components/CommentApp/components/Comment/style.scss
@@ -1,8 +1,19 @@
 @use '../../../../../scss/tools' as *;
 
-.comment {
-  @include box;
+$color-box-background: theme('colors.surface-page');
+$color-box-background-focused: theme('colors.surface-page');
+$color-box-border: theme('colors.border-furniture');
+$color-box-border-focused: theme('colors.border-field-hover');
+$color-box-text: theme('colors.text-context');
+$box-border-radius: 5px;
+$box-padding: 20px;
 
+.comment {
+  background-color: $color-box-background;
+  padding: $box-padding;
+  border-radius: $box-border-radius;
+  color: $color-box-text;
+  border: 1px solid $color-box-border;
   width: 300px;
   display: block;
   transition:
@@ -17,6 +28,53 @@
 
   &--focused {
     inset-inline-end: 25px;
+    background-color: $color-box-background-focused;
+    border: 1px solid $color-box-border-focused;
+    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
+  }
+
+  textarea {
+    margin: 0;
+    padding: 12px;
+    width: 100%;
+    background-color: theme('colors.surface-field');
+    border: 1px solid theme('colors.border-field-default');
+    border-radius: 5px;
+    color: $color-box-text;
+
+    &::placeholder {
+      color: theme('colors.text-placeholder');
+      opacity: 1;
+    }
+  }
+
+  &__notice-placeholder {
+    position: relative;
+    padding-bottom: 40px;
+  }
+
+  &__notice {
+    background-color: theme('colors.warning.50');
+    color: theme('colors.grey.600');
+    position: absolute;
+    inset-inline-start: -$box-padding;
+    bottom: 0;
+    width: calc(100% + #{$box-padding} * 2);
+    padding: 5px 10px;
+
+    svg.icon {
+      color: theme('colors.warning.100');
+      width: 14px;
+      height: 14px;
+      margin-inline-end: 10px;
+      vertical-align: text-bottom;
+    }
+  }
+
+  & > &__notice-placeholder:last-child &__notice,
+  &__replies:last-child > :last-child &__notice {
+    border-end-start-radius: $box-border-radius;
+    border-end-end-radius: $box-border-radius;
   }
 
   &__text {
@@ -29,14 +87,10 @@
     padding-bottom: 10px;
     word-break: break-all;
     white-space: pre-wrap;
-
-    &--mode-deleting {
-      color: theme('colors.text-context');
-    }
   }
 
   form {
-    border-top: 1px solid $color-comment-separator;
+    border-top: 1px solid theme('colors.border-furniture');
   }
 
   &--mode-creating form {
@@ -59,7 +113,25 @@
   }
 
   &__button {
-    @include button;
+    background-color: inherit;
+    border: 1px solid theme('colors.border-button-small-outline-default');
+    border-radius: 3px;
+    color: theme('colors.surface-button-default');
+    cursor: pointer;
+    font-weight: 700;
+    height: 30px;
+    padding-inline-start: 10px;
+    padding-inline-end: 10px;
+
+    &--primary {
+      color: theme('colors.text-button');
+      border: 1px solid theme('colors.surface-button-default');
+      background-color: theme('colors.surface-button-default');
+    }
+
+    &:disabled {
+      opacity: 0.3;
+    }
   }
 
   &__actions,
diff --git a/client/src/components/CommentApp/components/CommentReply/index.tsx b/client/src/components/CommentApp/components/CommentReply/index.tsx
index db9758e360..c342e31778 100644
--- a/client/src/components/CommentApp/components/CommentReply/index.tsx
+++ b/client/src/components/CommentApp/components/CommentReply/index.tsx
@@ -105,17 +105,17 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
             value={reply.newText}
             onChange={onChangeText}
           />
-          <div className="comment-reply__actions">
+          <div className="comment__actions">
             <button
               type="submit"
               disabled={reply.newText.length === 0}
-              className="comment-reply__button comment-reply__button--primary"
+              className="comment__button comment__button--primary"
             >
               {gettext('Save')}
             </button>
             <button
               type="button"
-              className="comment-reply__button"
+              className="comment__button"
               onClick={onCancel}
             >
               {gettext('Cancel')}
@@ -132,8 +132,8 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
     return (
       <>
         <CommentHeader commentReply={reply} store={store} focused={isFocused} />
-        <p className="comment-reply__text">{reply.text}</p>
-        <div className="comment-reply__progress">{gettext('Saving...')}</div>
+        <p className="comment__text">{reply.text}</p>
+        <div className="comment__progress">{gettext('Saving...')}</div>
       </>
     );
   }
@@ -150,12 +150,12 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
     return (
       <>
         <CommentHeader commentReply={reply} store={store} focused={isFocused} />
-        <p className="comment-reply__text">{reply.text}</p>
-        <div className="comment-reply__error">
+        <p className="comment__text">{reply.text}</p>
+        <div className="comment__error">
           {gettext('Save error')}
           <button
             type="button"
-            className="comment-reply__button"
+            className="comment__button"
             onClick={onClickRetry}
           >
             {gettext('Retry')}
@@ -187,19 +187,19 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
     return (
       <>
         <CommentHeader commentReply={reply} store={store} focused={isFocused} />
-        <p className="comment-reply__text">{reply.text}</p>
-        <div className="comment-reply__confirm-delete">
+        <p className="comment__text">{reply.text}</p>
+        <div className="comment__confirm-delete">
           {gettext('Are you sure?')}
           <button
             type="button"
-            className="comment-reply__button"
+            className="comment__button"
             onClick={onClickCancel}
           >
             {gettext('Cancel')}
           </button>
           <button
             type="button"
-            className="comment-reply__button comment-reply__button--primary"
+            className="comment__button comment__button--primary"
             onClick={onClickDelete}
           >
             {gettext('Delete')}
@@ -215,8 +215,8 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
     return (
       <>
         <CommentHeader commentReply={reply} store={store} focused={isFocused} />
-        <p className="comment-reply__text">{reply.text}</p>
-        <div className="comment-reply__progress">{gettext('Deleting')}</div>
+        <p className="comment__text">{reply.text}</p>
+        <div className="comment__progress">{gettext('Deleting')}</div>
       </>
     );
   }
@@ -243,19 +243,19 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
     return (
       <>
         <CommentHeader commentReply={reply} store={store} focused={isFocused} />
-        <p className="comment-reply__text">{reply.text}</p>
-        <div className="comment-reply__error">
+        <p className="comment__text">{reply.text}</p>
+        <div className="comment__error">
           {gettext('Delete error')}
           <button
             type="button"
-            className="comment-reply__button"
+            className="comment__button"
             onClick={onClickCancel}
           >
             {gettext('Cancel')}
           </button>
           <button
             type="button"
-            className="comment-reply__button"
+            className="comment__button"
             onClick={onClickRetry}
           >
             {gettext('Retry')}
@@ -308,7 +308,7 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
           onDelete={onDelete}
           focused={isFocused}
         />
-        <p className="comment-reply__text">{reply.text}</p>
+        <p className="comment__text">{reply.text}</p>
         {notice && (
           <div className="comment__notice-placeholder">
             <div className="comment__notice" role="status">
diff --git a/client/src/components/CommentApp/components/CommentReply/style.scss b/client/src/components/CommentApp/components/CommentReply/style.scss
index 72fb7d9c9f..68c6e77969 100644
--- a/client/src/components/CommentApp/components/CommentReply/style.scss
+++ b/client/src/components/CommentApp/components/CommentReply/style.scss
@@ -2,111 +2,13 @@
   padding-top: 20px;
   pointer-events: auto;
   position: relative;
-  border-top: 1px solid $color-comment-separator;
+  border-top: 1px solid theme('colors.border-furniture');
 
-  &__text {
-    color: $color-box-text;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 150%;
-    margin-bottom: 0;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    word-break: break-all;
-    white-space: pre-wrap;
-
-    &--mode-deleting {
-      color: theme('colors.text-context');
-    }
-  }
-
-  &--mode-deleting &__avatar {
-    opacity: 0.5;
-  }
-
-  &--mode-deleting &__text {
+  &--mode-deleting .comment__text {
     color: theme('colors.text-meta');
   }
 
   form {
     margin-top: 10px;
   }
-
-  &__button {
-    @include button;
-  }
-
-  &__actions,
-  &__confirm-delete,
-  &__progress,
-  &__error {
-    &::after {
-      display: block;
-      content: '';
-      clear: both;
-    }
-  }
-
-  &__actions {
-    padding-bottom: 10px;
-  }
-
-  &__actions &__button {
-    margin-inline-end: 10px;
-    margin-top: 10px;
-  }
-
-  &__confirm-delete &__button {
-    margin-inline-start: 10px;
-    margin-bottom: 10px;
-  }
-
-  &__confirm-delete,
-  &__error {
-    color: $color-box-text;
-    font-weight: bold;
-    font-size: 13px;
-    margin-top: 10px;
-
-    button {
-      float: inline-end;
-    }
-
-    &::after {
-      display: block;
-      content: ' ';
-      clear: both;
-    }
-  }
-
-  &__error {
-    color: theme('colors.white.DEFAULT');
-    background-color: theme('colors.critical.200');
-    border-radius: 3px;
-    padding: 5px;
-    padding-inline-start: 10px;
-    height: 26px;
-    line-height: 26px;
-    vertical-align: middle;
-
-    button {
-      height: 26px;
-      float: inline-end;
-      margin-inline-start: 5px;
-      color: theme('colors.white.DEFAULT');
-      background-color: theme('colors.critical.200');
-      border-color: theme('colors.white.DEFAULT');
-      padding: 2px;
-      padding-inline-start: 10px;
-      padding-inline-end: 10px;
-      font-size: 0.65em;
-      font-weight: bold;
-    }
-  }
-
-  &__progress {
-    margin-top: 20px;
-    font-weight: bold;
-    font-size: 13px;
-  }
 }
diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss
index 89eb5710fb..287208b0c6 100644
--- a/client/src/components/CommentApp/main.scss
+++ b/client/src/components/CommentApp/main.scss
@@ -1,110 +1,6 @@
-@use '../../../scss/settings/variables' as *;
-@use '../../../scss/tools' as *;
-
-$color-comment-separator: theme('colors.border-furniture');
-
-$color-box-background: theme('colors.surface-page');
-$color-box-background-focused: theme('colors.surface-page');
-$color-box-border: theme('colors.border-furniture');
-$color-box-border-focused: theme('colors.border-field-hover');
-$color-box-text: theme('colors.text-context');
-$box-border-radius: 5px;
-$box-padding: 20px;
-
-@mixin box {
-  background-color: $color-box-background;
-  padding: $box-padding;
-  border-radius: $box-border-radius;
-  color: $color-box-text;
-  border: 1px solid $color-box-border;
-
-  &--focused {
-    background-color: $color-box-background-focused;
-    border: 1px solid $color-box-border-focused;
-    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
-  }
-
-  textarea {
-    margin: 0;
-    padding: 12px;
-    width: 100%;
-    background-color: theme('colors.surface-field');
-    border: 1px solid theme('colors.border-field-default');
-    border-radius: 5px;
-    color: $color-box-text;
-
-    &::placeholder {
-      color: theme('colors.text-placeholder');
-      opacity: 1;
-    }
-  }
-
-  *:focus {
-    @include focus-outline;
-  }
-
-  &__notice-placeholder {
-    position: relative;
-    padding-bottom: 40px;
-  }
-
-  &__notice {
-    background-color: theme('colors.warning.50');
-    color: theme('colors.grey.600');
-    position: absolute;
-    inset-inline-start: -$box-padding;
-    bottom: 0;
-    width: calc(100% + #{$box-padding} * 2);
-    padding: 5px 10px;
-
-    svg.icon {
-      color: theme('colors.warning.100');
-      width: 14px;
-      height: 14px;
-      margin-inline-end: 10px;
-      vertical-align: text-bottom;
-    }
-  }
-
-  & > &__notice-placeholder:last-child &__notice,
-  &__replies:last-child > :last-child &__notice {
-    border-end-start-radius: $box-border-radius;
-    border-end-end-radius: $box-border-radius;
-  }
-}
-
-@mixin button {
-  background-color: inherit;
-  border: 1px solid theme('colors.border-button-small-outline-default');
-  border-radius: 3px;
-  color: theme('colors.surface-button-default');
-  cursor: pointer;
-  font-weight: 700;
-  height: 30px;
-  padding-inline-start: 10px;
-  padding-inline-end: 10px;
-
-  &--primary {
-    color: theme('colors.text-button');
-    border: 1px solid theme('colors.surface-button-default');
-    background-color: theme('colors.surface-button-default');
-  }
-
-  &--red {
-    color: theme('colors.text-button');
-    border: 1px solid theme('colors.critical.200');
-    background-color: theme('colors.critical.200');
-  }
-
-  &:disabled {
-    opacity: 0.3;
-  }
-
-  // Disable Firefox's focus styling because we add our own.
-  &::-moz-focus-inner {
-    border: 0;
-  }
-}
+@use 'components/CommentHeader/style' as CommentHeader;
+@use 'components/Comment/style' as Comment;
+@use 'components/CommentReply/style' as CommentReply;
 
 .comments-list {
   position: relative;
@@ -112,8 +8,3 @@ $box-padding: 20px;
   inset-inline-end: 20px;
   z-index: calc(theme('zIndex.header') + 5);
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import 'components/CommentHeader/style';
-@import 'components/Comment/style';
-@import 'components/CommentReply/style';