Split up the css into separate files

assets/chat/css/abstracts/_index.scss

@@ -0,0 +1,2 @@
+@forward 'vars';
+@forward 'mixins';

assets/chat/css/abstracts/_mixins.scss

@@ -0,0 +1,24 @@
+@mixin icon-background($url) {
+  background: transparent url($url) no-repeat center center / contain;
+}
+
+@mixin msg-icon($posX, $posY, $width: 16px, $height: 16px) {
+  background-image: url('../../icons/icons.png');
+  background-repeat: no-repeat;
+  width: $width;
+  height: $height;
+  background-position: $posX $posY;
+}
+
+@mixin slide-in {
+  animation: msg-slide-in 0.15s cubic-bezier(0.72, 0.03, 0.45, 1);
+}
+
+@keyframes msg-slide-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

assets/common.scss → assets/chat/css/abstracts/_vars.scss

@@ -1,3 +1,14 @@
+$chat-chrome-font: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif;
+$chat-lines-font: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif;
+$chat-min-width: 300px;
+
+$gutter-xs: 0.2em;
+$gutter-sm: 0.3em;
+$gutter-md: 0.6em;
+$gutter-lg: 0.9em;
+
+$bradius: 0.25em;
+
 $color-light: #fff7f9;
 $color-dark: #201f1e;
 $color-accent: #4a8ecc;

assets/chat/css/chat/_autocomplete.scss

@@ -0,0 +1,65 @@
+@use '../abstracts/' as a;
+
+#chat-auto-complete {
+  pointer-events: none;
+  transition: opacity 750ms;
+  transition-timing-function: cubic-bezier(0, 0.74, 0.1, 0.99);
+  opacity: 0;
+  z-index: 131;
+  border-radius: a.$bradius a.$bradius 0 0;
+  position: absolute;
+  font-size: 1.1em;
+  line-height: 2em;
+  height: 2em;
+  top: -2em;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  white-space: nowrap;
+
+  &.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  ul {
+    position: absolute;
+    white-space: nowrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    padding: 0 a.$gutter-sm;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    color: a.$color-chat-text3;
+    background: rgba(a.$color-surface-dark1, 0.75);
+
+    &:first-child {
+      border-radius: a.$bradius 0 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 a.$bradius 0 0;
+    }
+
+    &:hover {
+      color: lighten(a.$color-chat-text3, 20);
+    }
+
+    &.active {
+      color: a.$text-color;
+    }
+  }
+}
+
+#chat:not(.pref-autocompletehelper) #chat-auto-complete {
+  display: none;
+}
+
+.pref-autocompletehelper #chat-auto-complete.active {
+  display: block;
+}

assets/chat/css/chat/_index.scss

@@ -0,0 +1,27 @@
+@use '../abstracts/' as a;
+
+@use 'autocomplete';
+@use 'input';
+@use 'loading-screen';
+@use 'login-screen';
+@use 'output';
+@use 'scroll-notify';
+@use 'scrollbar-theme';
+@use 'toolbar';
+@use 'window-select';
+
+#chat {
+  min-width: a.$chat-min-width;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.onstreamchat {
+  #chat {
+    background: none !important;
+  }
+}

assets/chat/css/chat/_input.scss

@@ -0,0 +1,51 @@
+@use '../abstracts/' as a;
+
+#chat-input-frame {
+  padding: a.$gutter-md a.$gutter-md 0 a.$gutter-md;
+}
+
+#chat-input-wrap {
+  position: relative;
+}
+
+#chat-input-control {
+  max-height: 140px;
+  position: relative;
+  color: a.$color-chat-text2;
+  background: a.$color-surface-dark2;
+  border: 1px solid a.$color-surface-dark3;
+  outline: none;
+  resize: none;
+  margin: 0;
+  width: 100%;
+  padding: a.$gutter-md;
+  border-radius: a.$bradius;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: block;
+  overflow: hidden;
+
+  &::placeholder {
+    color: a.$color-chat-place;
+  }
+
+  #chat.chat-autocomplete-in & {
+    border-radius: 0 0 a.$bradius a.$bradius;
+  }
+}
+
+#chat-input-subonly {
+  cursor: default;
+  display: none;
+  position: absolute;
+  top: a.$gutter-md;
+  right: a.$gutter-sm;
+  width: 1.5em;
+  height: 1.5em;
+
+  .btn-icon {
+    opacity: 0.75;
+
+    @include a.icon-background('../img/icon-subonly.svg');
+  }
+}

assets/chat/css/chat/_loading-screen.scss

@@ -0,0 +1,31 @@
+@use '../abstracts/' as a;
+
+#chat-loading {
+  opacity: 0.2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  .chat-loading-icon {
+    width: 4em;
+    height: 4em;
+    display: inline-block;
+    animation: spin 2s linear infinite;
+
+    @include a.icon-background('../img/icon-settings.svg');
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

assets/chat/css/chat/_login-screen.scss

@@ -0,0 +1,26 @@
+@use '../abstracts/' as a;
+
+#chat-login-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(a.$color-surface-dark1, 0.75);
+  position: absolute;
+  text-align: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 300;
+
+  h2 {
+    font-size: 2.5em;
+    font-weight: normal;
+    margin: 0;
+  }
+
+  p {
+    margin: 1em 0 1.5em 0;
+  }
+}

assets/chat/css/chat/_output.scss

@@ -0,0 +1,31 @@
+@use '../abstracts/' as a;
+
+#chat-output-frame {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}
+
+.chat-output {
+  width: 100%;
+  height: 100%;
+}
+
+.chat-lines {
+  font-family: a.$chat-lines-font;
+  line-height: 1.65em;
+  outline: 0 !important;
+}
+
+.onstreamchat {
+  .chat-lines {
+    font-size: 1.5em;
+    font-family: 'Roboto', Helvetica, 'Trebuchet MS', Verdana, sans-serif;
+    font-weight: 500 !important;
+    color: a.$text-color;
+  }
+
+  #chat-output-frame {
+    margin: 0;
+  }
+}

assets/chat/css/chat/_scroll-notify.scss

@@ -0,0 +1,32 @@
+@use '../abstracts/' as a;
+
+.chat-scroll-notify {
+  padding: 0.25em 0;
+  color: a.$color-chat-text3;
+  background: a.$color-surface-dark3;
+  position: absolute;
+  bottom: -2.5em;
+  left: a.$gutter-md;
+  right: a.$gutter-md;
+  text-align: center;
+  cursor: pointer;
+  z-index: 130;
+  border-radius: a.$bradius;
+  opacity: 0;
+  transition: all 250ms;
+  transition-timing-function: cubic-bezier(0.6, 0.08, 0.99, 0.54);
+
+  &:hover {
+    color: a.$color-chat-text1;
+  }
+
+  .chat-unpinned & {
+    transition-timing-function: cubic-bezier(0, 0.99, 0.18, 0.99);
+    opacity: 1;
+    bottom: 0;
+  }
+
+  #chat.chat-autocomplete-in & {
+    display: none !important;
+  }
+}