.chat-slim-scrollbar {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #EEEEEE;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: #CCC;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

    &:hover {
      background: #AAA;
    }

    &:active {
      background: #888;
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
  }
}

.chat-slim-scrollbar-dark {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: darken($chat-primary, 10%);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: lighten($chat-primary, 20%);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

    &:hover {
      background: lighten($chat-primary, 10%);
    }

    &:active {
      background: lighten($chat-primary, 10%);
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    }
  }
}