chore: Remove bourbon dependancy (#5215)

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -1,6 +1,8 @@
+// scss-lint:disable MergeableSelector
+
 @mixin bubble-with-types {
-  @include padding($space-small $space-normal);
-  @include margin($zero);
+  padding: $space-small $space-normal;
+  margin: 0;
   background: $color-woot;
   border-radius: $space-one;
   color: var(--white);
@@ -37,7 +39,11 @@
     }
 
     &::before {
-      background-image: linear-gradient(-180deg, transparent 3%, $color-heading 130%);
+      background-image: linear-gradient(
+        -180deg,
+        transparent 3%,
+        $color-heading 130%
+      );
       bottom: 0;
       content: '';
       height: 20%;
@@ -75,16 +81,15 @@
   }
 
   .conversations-list {
-    @include flex-weight(1);
     @include scroll-on-hover;
+    flex: 1 1;
   }
 
   .chat-list__top {
     @include flex;
-    @include padding($zero $zero $space-micro $zero);
-
     align-items: center;
     justify-content: space-between;
+    padding: $zero $zero $space-micro;
 
     .page-title {
       margin-bottom: $zero;
@@ -92,13 +97,13 @@
     }
 
     .status--filter {
-      @include padding($zero null $zero $space-normal);
-      @include margin($zero);
       background-color: $color-background-light;
       border: 1px solid $color-border;
       float: right;
       font-size: $font-size-mini;
       height: $space-medium;
+      margin: 0;
+      padding: $zero null $zero $space-normal;
       width: auto;
     }
   }
@@ -110,19 +115,19 @@
 
 .conversation-panel {
   @include flex;
-  @include flex-weight(1 1 1px);
-  @include margin($zero);
+  flex: 1 1 1px;
   flex-direction: column;
   height: 100%;
+  margin: 0;
   overflow-y: auto;
   padding-bottom: var(--space-normal);
   position: relative;
 }
 
-.conversation-panel>li {
+.conversation-panel > li {
   @include flex;
   @include flex-shrink;
-  @include margin($zero $zero $space-micro);
+  margin: $zero $zero $space-micro;
   position: relative;
 
   &:first-child {
@@ -134,11 +139,11 @@
   }
 
   &.unread--toast {
-    +.right {
+    + .right {
       margin-bottom: var(--space-micro);
     }
 
-    +.left {
+    + .left {
       margin-bottom: 0;
     }
 
@@ -165,9 +170,7 @@
     }
   }
 
-
   &.left {
-
     .bubble {
       @include border-normal;
       background: $white;
@@ -198,10 +201,9 @@
           color: $color-primary-dark;
         }
       }
-
     }
 
-    +.right {
+    + .right {
       margin-top: $space-one;
 
       .bubble {
@@ -209,8 +211,8 @@
       }
     }
 
-    +.unread--toast {
-      +.right {
+    + .unread--toast {
+      + .right {
         margin-top: $space-one;
 
         .bubble {
@@ -218,7 +220,7 @@
         }
       }
 
-      +.left {
+      + .left {
         margin-top: 0;
       }
     }
@@ -264,7 +266,7 @@
       }
     }
 
-    +.left {
+    + .left {
       margin-top: $space-one;
 
       .bubble {
@@ -272,8 +274,8 @@
       }
     }
 
-    +.unread--toast {
-      +.left {
+    + .unread--toast {
+      + .left {
         margin-top: $space-one;
 
         .bubble {
@@ -281,11 +283,10 @@
         }
       }
 
-      +.right {
+      + .right {
         margin-top: 0;
       }
     }
-
   }
 
   &.center {
@@ -293,9 +294,8 @@
   }
 
   .wrap {
-    @include margin($zero $space-normal);
-
     --bubble-max-width: 49.6rem;
+    margin: $zero $space-normal;
     max-width: Min(var(--bubble-max-width), 84%);
 
     .sender--name {
@@ -320,7 +320,8 @@
     font-size: var(--font-size-small);
     justify-content: center;
     margin: var(--space-smaller) 0;
-    padding: var(--space-smaller) var(--space-micro) var(--space-smaller) var(--space-one);
+    padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
+      var(--space-one);
 
     .is-text {
       display: inline-flex;
@@ -371,7 +372,6 @@
 }
 
 .left .bubble .text-content {
-
   h1,
   h2,
   h3,
@@ -400,7 +400,6 @@
 }
 
 .right .bubble .text-content {
-
   h1,
   h2,
   h3,