stream-chat-react 11.20.0 → 12.0.0-rc.1

package/dist/scss/Message.scss

@@ -1,1283 +0,0 @@
-.str-chat__li {
-  display: block;
-  position: relative;
-
-  /*
-  min-width in a flex context: While the default min-width value is 0, for flex items it is auto.
-  This can make block elements take up much more space than desired, resulting in overflow.
-   */
-  .str-chat__message-inner {
-    min-width: 0;
-
-    .str-chat__translation-notice {
-      button {
-        cursor: pointer;
-        padding: 0.25rem 0;
-        margin: 0;
-        font-size: 14px;
-        line-height: 16px;
-        color: var(--lighten-grey);
-        border: none;
-        background: none;
-
-        &:active,
-        &:hover {
-          background: var(--grey-whisper);
-        }
-      }
-    }
-  }
-
-  .quoted-message {
-    display: flex;
-    align-items: flex-end;
-    margin-bottom: var(--xxs-m);
-    /** clicking on the quoted message navigates to its original location in the message list*/
-    cursor: pointer;
-
-    &-inner {
-      display: flex;
-      text-align: start;
-      align-items: flex-end;
-      background: var(--grey-whisper);
-      border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
-      max-width: 408px;
-      padding: var(--xxs-p) var(--xs-p);
-
-      .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
-        border: none;
-        border-radius: var(--border-radius-md);
-      }
-
-      .str-chat__message-attachment {
-        &--image:first-of-type {
-          max-height: 48px;
-          max-width: 48px;
-          border-radius: var(--border-radius-md);
-        }
-
-        img {
-          border-radius: var(--border-radius-md);
-        }
-
-        &--file:first-of-type {
-          background: var(--white);
-          border-radius: var(--border-radius-md);
-          border-bottom: 1px solid var(--grey-whisper);
-          min-width: 33%;
-        }
-      }
-
-      :nth-child(2) {
-        margin-left: var(--xs-m);
-      }
-    }
-
-    &.mine {
-      .quoted-message-inner {
-        background: var(--white-snow);
-      }
-    }
-  }
-
-  /* group styling */
-  &--top,
-  &--single {
-    padding-top: calc(var(--md-p) / 2);
-
-    .str-chat__message {
-      &-attachment--img,
-      &-attachment-card,
-      .str-chat__gallery {
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-
-      &.str-chat__message--has-text.str-chat__message--has-attachment {
-        .str-chat__message-attachment--img,
-        .str-chat__message-attachment-card {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
-        }
-      }
-
-      &--me {
-        text-align: right; // for inline(-flex/block) elements, e.g. gallery
-        .str-chat__message {
-          &-attachment--img,
-          &-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-          }
-        }
-
-        &.str-chat__message--has-text.str-chat__message--has-attachment {
-          .str-chat__message-attachment--img,
-          .str-chat__message-attachment-card {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-          }
-        }
-
-        .str-chat__gallery {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-            var(--border-radius);
-        }
-
-        &.str-chat__message--has-text {
-          .str-chat__gallery {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-          }
-        }
-      }
-    }
-  }
-
-  &--middle {
-    margin: 0;
-
-    .str-chat__message {
-      &-attachment--img,
-      &-attachment-card,
-      .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-
-      &.str-chat__message--has-text.str-chat__message--has-attachment {
-        .str-chat__message-attachment--img,
-        .str-chat__message-attachment-card,
-        .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
-        }
-      }
-
-      &--me {
-        .str-chat__message {
-          &-attachment--img,
-          &-attachment-card,
-          .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-          }
-        }
-
-        &.str-chat__message--has-text.str-chat__message--has-attachment {
-          .str-chat__message-attachment--img,
-          .str-chat__message-attachment-card,
-          .str-chat__gallery {
-            border-top-left-radius: calc(var(--border-radius-sm) / 2);
-          }
-        }
-      }
-    }
-  }
-
-  &--bottom {
-    padding-bottom: calc(var(--md-p) / 2);
-
-    .str-chat__message {
-      &-attachment--img,
-      &-attachment-card,
-      .str-chat__gallery {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-
-      &.str-chat__message--has-text.str-chat__message--has-attachment {
-        .str-chat__message-attachment--img,
-        .str-chat__message-attachment-card,
-        .str-chat__gallery {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
-        }
-      }
-
-      &--me {
-        .str-chat__message {
-          &-attachment--img,
-          &-attachment-card,
-          .str-chat__gallery {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-          }
-        }
-
-        &.str-chat__message--has-text.str-chat__message--has-attachment {
-          .str-chat__message-attachment--img,
-          .str-chat__message-attachment-card,
-          .str-chat__gallery {
-            border-top-left-radius: calc(var(--border-radius-sm) / 2);
-          }
-        }
-      }
-    }
-  }
-
-  &--single {
-    padding-bottom: calc(var(--md-m) / 2);
-  }
-
-  &--top,
-  &--middle {
-    .str-chat__message {
-      &-data {
-        display: none;
-      }
-    }
-  }
-
-  &--top {
-    .str-chat__message {
-      &-text {
-        &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
-        }
-      }
-
-      &--me {
-        .str-chat__message-text {
-          &-inner {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-          }
-        }
-      }
-    }
-  }
-
-  &--single {
-    .str-chat__message {
-      &-text {
-        &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
-
-          &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
-              var(--border-radius) calc(var(--border-radius-sm) / 2);
-          }
-        }
-      }
-
-      &--me {
-        .str-chat__message-text {
-          &-inner {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-
-            &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-                calc(var(--border-radius-sm) / 2) var(--border-radius);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &--bottom,
-  &--middle {
-    .str-chat__message {
-      &-text {
-        &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
-        }
-      }
-
-      &--me {
-        .str-chat__message-text {
-          &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
-
-            &--has-attachment {
-              margin: 0;
-            }
-          }
-        }
-
-        .str-chat__message-attachment-card {
-          margin: 0;
-          padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-            calc(var(--border-radius-sm) / 2) var(--border-radius);
-        }
-      }
-    }
-  }
-}
-
-.str-chat__message,
-.str-chat__message-simple {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: flex-end;
-  padding: 0;
-  position: relative;
-  padding-top: var(--xxs-p);
-  padding-bottom: var(--xxs-p);
-  width: 100%;
-  transition: background-color 0.5s ease-out;
-
-  &--system {
-    text-align: center;
-    align-items: center;
-    width: 100%;
-    flex-direction: column;
-    padding: var(--xl-p);
-    box-sizing: border-box;
-    font-size: var(--xs-font);
-
-    &__text {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      p {
-        margin: 0 24px;
-        color: var(--grey);
-        text-transform: uppercase;
-        font-weight: var(--font-weight-bold);
-      }
-    }
-
-    &__line {
-      flex: 1;
-      height: 1px;
-      width: 100%;
-      background-color: var(--overlay);
-    }
-
-    &__date {
-      margin-top: 4px;
-      text-transform: uppercase;
-      color: var(--grey);
-    }
-  }
-
-  &-inner {
-    position: relative;
-
-    @media screen and (min-width: 420px) {
-      margin-right: 88px;
-      margin-left: unset;
-    }
-
-    > .str-chat__message-simple__actions {
-      position: absolute;
-      top: 5px;
-      left: calc(100% + 8px);
-    }
-  }
-
-  &-attachment-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-text {
-    display: inline-flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0;
-    position: relative;
-
-    &-inner {
-      position: relative;
-      flex: 1;
-      display: block;
-      min-height: 32px;
-      padding: var(--xxs-p) var(--xs-p);
-      font-size: var(--lg-font);
-      color: var(--black);
-      border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
-      background: var(--white-snow);
-      border: 1px solid var(--border);
-      margin-left: 0; /* set spacing when unfocused */
-
-      // Fixes emoji display in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
-      .str-chat__emoji-display-fix {
-        display: inline-block;
-        width: 1.25em;
-      }
-
-      p {
-        /* Make sure really long urls and words don't break out.*/
-        word-wrap: break-word;
-        word-break: break-word;
-
-        /* Adds a hyphen where the word breaks, if supported (No Blink) */
-        -ms-hyphens: auto;
-        -moz-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-      }
-
-      /* if text consists is focused */
-      &--focused {
-        background: var(--primary-color);
-        border: 1px solid var(--primary-color);
-        margin-right: 0;
-        margin-left: 0; /* set spacing when focused */
-      }
-
-      &--has-attachment {
-        border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-
-      /* if text consists of just one emoji */
-      &--is-emoji {
-        background: transparent;
-        border: 1px solid transparent;
-        font-size: var(--xxxl-font);
-
-        padding-left: 0;
-        padding-right: 0;
-      }
-    }
-  }
-
-  &-attachment {
-    --attachment-max-width: 480px;
-
-    &--img {
-      width: 100%;
-      display: block;
-      cursor: -moz-zoom-in;
-      cursor: -webkit-zoom-in;
-      cursor: zoom-in;
-    }
-  }
-
-  &-data {
-    margin-top: var(--xxs-m);
-    width: 100%;
-    font-size: var(--xs-font);
-    color: var(--overlay-dark);
-    position: absolute;
-    white-space: nowrap;
-  }
-
-  &-name {
-    font-weight: var(--font-weight-bold);
-    margin-right: var(--xxs-m);
-  }
-
-  p {
-    margin: 0;
-    white-space: pre-line;
-    line-height: 20px;
-
-    &:not(:first-of-type) {
-      margin: var(--sm-m) 0 0;
-    }
-  }
-
-  /* me */
-  &--me {
-    display: inline-flex;
-    justify-content: flex-end;
-
-    .str-chat__message {
-      &-text {
-        display: flex;
-        justify-content: flex-end;
-      }
-
-      &-attachment-container {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-      }
-
-      &-inner {
-        justify-content: flex-end;
-        align-items: flex-end;
-        @media screen and (min-width: 420px) {
-          margin-right: unset;
-          margin-left: 88px;
-        }
-
-        > .str-chat__message-simple__actions {
-          position: absolute;
-          top: 5px;
-          left: unset;
-          right: calc(100% + 8px);
-        }
-      }
-
-      &-text-inner {
-        flex: initial;
-        background: var(--grey-whisper);
-        border-color: transparent;
-        text-align: right;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-          var(--border-radius);
-        margin-right: 0; /* set spacing when unfocused */
-
-        &--focused {
-          background: var(--primary-color);
-          border: 1px solid var(--primary-color);
-          margin-left: 0;
-          margin-right: 0; /* set spacing when focused */
-        }
-
-        &--has-attachment {
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-            calc(var(--border-radius-sm) / 2) var(--border-radius);
-        }
-
-        &--is-emoji {
-          background: transparent;
-          border: 1px solid transparent;
-          font-size: var(--xxxl-font);
-          padding-left: 0;
-          padding-right: 0;
-
-          p {
-            line-height: 48px;
-          }
-        }
-      }
-
-      &-attachment {
-        &--img {
-          width: 100%;
-          // CDN resize requires max-width to be set on this element
-          max-width: inherit;
-          display: block;
-          object-fit: cover;
-          border: none;
-        }
-      }
-
-      &-data {
-        text-align: right;
-        right: 0;
-        width: fit-content;
-      }
-    }
-  }
-
-  &--with-reactions {
-    padding-top: var(--md-p);
-  }
-
-  &--highlighted {
-    transition: background-color 0.1s ease-out;
-    background-color: var(--highlight);
-  }
-
-  &-link {
-    color: var(--primary-color);
-    font-weight: var(--font-weight-bold);
-    text-decoration: none;
-  }
-
-  &-mention {
-    font-weight: var(--font-weight-bold);
-  }
-
-  &--inner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .messaging {
-    &.str-chat {
-      .str-chat {
-        &__message,
-        &__message--me {
-          &--with-reactions {
-            padding-top: var(--lg-p);
-          }
-        }
-
-        &__message-attachment--image {
-          max-width: 480px;
-        }
-
-        &__message-attachment--card {
-          line-height: normal;
-        }
-
-        &__message-attachment-card {
-          margin: calc(var(--xxs-m) / 2) auto;
-          line-height: normal;
-          background: var(--grey-gainsboro);
-
-          &--title {
-            color: var(--primary-color);
-          }
-
-          &--text {
-            display: none;
-          }
-
-          &--url {
-            text-transform: lowercase;
-          }
-        }
-
-        &__message--deleted {
-          margin: 0 var(--xl-m);
-        }
-
-        &__li {
-          &--middle {
-            .str-chat__message {
-              .str-chat__message-attachment--card,
-              .str-chat__message-attachment--image {
-                border-top-left-radius: calc(var(--border-radius-sm) / 2);
-              }
-            }
-          }
-        }
-
-        /* __li*/
-      }
-    }
-  }
-
-  /* deleted messages */
-  &--deleted {
-    margin: 0 0 0 var(--xl-m);
-    flex-direction: column;
-    align-items: flex-start;
-
-    &-inner {
-      background: var(--grey-whisper);
-      padding: var(--xs-p) var(--sm-p);
-      border-radius: var(--border-radius);
-      font-size: var(--sm-font);
-      color: var(--grey);
-    }
-  }
-
-  &--me {
-    &.str-chat__message--deleted {
-      margin: 0 var(--xl-m) 0 0;
-      align-items: flex-end;
-
-      &-inner {
-        background: var(--white-smoke);
-        padding: var(--xs-p) var(--sm-p);
-        border-radius: var(--border-radius);
-        font-size: var(--sm-font);
-        color: var(--grey);
-      }
-    }
-  }
-
-  /* error messages */
-  &--error,
-  &--failed {
-    font-size: var(--sm-font);
-    padding: var(--xxs-p) 0;
-
-    .str-chat__message-text-inner {
-      background: var(--faded-red);
-      border: 1px solid var(--faded-red);
-    }
-  }
-
-  &--me {
-    &.str-chat__message--error,
-    &.str-chat__message--failed {
-      border-left: initial;
-      margin-right: var(--xl-m);
-    }
-  }
-
-  .str-chat__message-attachment-file--item:hover {
-    background: transparent;
-  }
-
-  // Disable pointer events so that clicking inside quoted message text or attachments doesn't interfere with jump to message
-  .quoted-message-inner {
-    pointer-events: none;
-  }
-}
-
-.str-chat {
-  &__message-simple {
-    font-family: var(--second-font);
-
-    &__actions {
-      display: flex;
-
-      &__action {
-        margin: var(--xxs-m);
-        display: flex;
-        align-items: center;
-        height: 10px;
-        cursor: pointer;
-        background-color: transparent;
-        border: none;
-        padding: 0;
-
-        svg {
-          fill: var(--black);
-          opacity: 0.5;
-        }
-
-        &:hover {
-          svg {
-            opacity: 1;
-          }
-        }
-
-        &--thread,
-        &--options,
-        &--reactions {
-          display: none;
-        }
-
-        &--options {
-          position: relative;
-
-          > button {
-            cursor: pointer;
-            background-color: transparent;
-            border: none;
-            padding: 3px 0;
-          }
-        }
-      }
-    }
-
-    &:hover {
-      .str-chat__message-simple__actions__action--thread,
-      .str-chat__message-simple__actions__action--reactions,
-      .str-chat__message-simple__actions__action--options {
-        display: flex;
-      }
-
-      .str-chat__message-simple__actions__action--options {
-        button {
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-
-    &-text {
-      display: flex;
-      justify-content: flex-end;
-      padding: 0;
-      position: relative;
-    }
-
-    &-text-inner {
-      flex: initial;
-      text-align: left;
-      max-width: 460px;
-      word-wrap: break-word;
-      word-break: break-word;
-
-      &.str-chat__message-simple-text-inner--is-emoji {
-        background: transparent;
-
-        p {
-          line-height: 48px;
-        }
-      }
-
-      p {
-        text-align: left;
-      }
-
-      a {
-        color: var(--primary-color);
-        font-weight: var(--font-weight-bold);
-        text-decoration: none;
-
-        &:active,
-        &:focus,
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      blockquote {
-        margin: 0 0 0 var(--xxs-m);
-        font-style: italic;
-        padding-left: var(--md-p);
-        position: relative;
-
-        &::before {
-          font-size: var(--xxl-font);
-          content: '\201C';
-          font-style: italic;
-          position: absolute;
-          opacity: 0.5;
-          top: 2px;
-          left: -5px;
-        }
-      }
-    }
-
-    &--deleted-inner {
-      background: var(--dark-grey);
-      color: var(--white);
-    }
-
-    &--me {
-      .str-chat__message-simple-reply-button {
-        display: flex;
-        justify-content: flex-end;
-
-        .str-chat__message-replies-count-button {
-          display: flex;
-          flex-direction: row-reverse;
-
-          svg {
-            transform: scaleX(-1);
-            margin-left: var(--xxs-m);
-            margin-bottom: var(--xxs-m);
-            margin-right: 0;
-          }
-        }
-      }
-
-      .str-chat__message-simple__actions {
-        justify-content: flex-end;
-        flex-direction: row-reverse;
-      }
-
-      .str-chat__message-attachment {
-        --attachment-max-width: 460px;
-      }
-
-      &-text-inner {
-        &--is-emoji {
-          background-color: transparent;
-          line-height: 32px;
-        }
-      }
-
-      .str-chat__message-simple__actions {
-        order: -1;
-      }
-    }
-  }
-}
-
-.str-chat__simple-message--error-message {
-  text-align: left;
-  text-transform: uppercase;
-  font-size: var(--xs-font);
-  opacity: 0.5;
-}
-
-.str-chat__message-simple-status {
-  margin: var(--xs-m) 0 var(--xs-m) var(--xs-m);
-  order: 3;
-  position: absolute;
-  left: 100%;
-  bottom: 0;
-  line-height: 1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  z-index: 1;
-
-  &-number {
-    font-size: var(--xs-font);
-    margin-left: 4px;
-    position: absolute;
-    left: 100%;
-    color: var(--overlay-dark);
-  }
-
-  &-angular {
-    svg {
-      width: 20px;
-      height: 20px;
-
-      path {
-        fill: var(--primary-color);
-      }
-    }
-  }
-
-  > .str-chat__avatar,
-  > .str-chat-angular__avatar-host .str-chat__avatar {
-    align-self: flex-end;
-    margin-right: 0;
-  }
-
-  > .str-chat__tooltip {
-    display: none;
-    max-width: 300px;
-    min-width: 100px;
-    text-align: center;
-  }
-
-  &:hover {
-    > .str-chat__tooltip {
-      display: block;
-    }
-  }
-
-  &::after {
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    content: ' ';
-    width: 15px;
-    height: 15px;
-  }
-}
-
-.str-chat__message-simple {
-  .str-chat__message-attachment-card {
-    margin: 0;
-    background: var(--white);
-    border: 1px solid var(--border);
-
-    &--content {
-      background: var(--grey-gainsboro);
-    }
-
-    &--text {
-      display: none;
-    }
-  }
-
-  .str-chat__message-attachment--file {
-    background: var(--white);
-    border-color: transparent;
-    border: 1px solid var(--grey-gainsboro);
-    border-radius: var(--border-radius-md);
-
-    .str-chat__message-attachment-file--item {
-      border-color: transparent;
-      padding: 0 var(--xs-p);
-    }
-
-    &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
-      border-radius: var(--border-radius) var(--border-radius) 0 0;
-      border-bottom: transparent;
-    }
-
-    &:last-of-type:not(.str-chat-angular__message-attachment-file-single) {
-      border-top-color: transparent;
-      border-radius: 0 0 var(--border-radius) calc(var(--border-radius-sm) / 2);
-
-      &:first-of-type {
-        border-bottom: 1px solid var(--grey-gainsboro);
-        border-top: 1px solid var(--grey-gainsboro);
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-    }
-  }
-
-  .str-chat__message-attachment-file--item:not(.str-chat-angular__message-attachment-file-single) {
-    border-radius: 0;
-  }
-
-  &--me {
-    .str-chat__message-attachment-card {
-      border-radius: var(--border-radius) var(--border-radius-sm) var(--border-radius-sm)
-        var(--border-radius-sm);
-    }
-
-    .str-chat__message-attachment--file {
-      background: var(--grey-gainsboro);
-
-      &:last-of-type:not(.str-chat-angular__message-attachment-file-single) {
-        border-radius: 0 0 calc(var(--border-radius-sm) / 2) var(--border-radius);
-
-        &:first-of-type:not(.str-chat-angular__message-attachment-file-single) {
-          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-            var(--border-radius);
-        }
-      }
-    }
-  }
-}
-
-.str-chat__list--thread {
-  .str-chat__message-simple {
-    &__actions {
-      width: 30px;
-    }
-
-    &__actions__action--options {
-      .str-chat__message-actions-box {
-        right: unset;
-        left: 100%;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-    }
-  }
-}
-
-.livestream.str-chat {
-  .str-chat {
-    &__li {
-      &--single {
-        margin: 0;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 960px) {
-  .str-chat__message-simple-text-inner {
-    max-width: 218px;
-  }
-
-  .str-chat__message-simple-status {
-    left: unset;
-    right: 8px;
-    bottom: 30px;
-
-    &-angular {
-      margin-bottom: 3px;
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message,
-  .str-chat__message-simple {
-    &-text-inner {
-      background: var(--dark-grey);
-      color: var(--white);
-
-      &--is-emoji {
-        background: transparent;
-      }
-
-      .quoted-message-inner {
-        background: var(--dark-grey);
-      }
-    }
-
-    &__actions {
-      svg {
-        fill: var(--white);
-      }
-    }
-
-    &-data {
-      color: var(--white);
-      opacity: 0.5;
-    }
-
-    .str-chat__message-attachment-card {
-      background: transparent;
-
-      &--content {
-        background: var(--dark-grey);
-      }
-
-      &--url {
-        color: var(--grey-gainsboro);
-      }
-
-      &--title {
-        color: var(--primary-color);
-      }
-    }
-
-    .str-chat__message-attachment--file {
-      border-color: transparent;
-      background: var(--dark-grey);
-      color: var(--white10);
-
-      a,
-      span {
-        color: var(--white);
-      }
-
-      span {
-        opacity: 0.5;
-      }
-    }
-
-    .str-chat__message-simple-status {
-      &-number {
-        color: var(--grey-gainsboro);
-      }
-    }
-
-    .str-chat__message-simple--deleted-inner,
-    .str-chat__message--deleted-inner {
-      background: var(--dark-grey);
-      color: var(--white);
-    }
-
-    &--me {
-      .str-chat__message-text-inner {
-        background: var(--black40);
-
-        &--is-emoji {
-          background: transparent;
-        }
-      }
-
-      .str-chat__message-attachment-card {
-        &--content {
-          background: var(--black40);
-        }
-      }
-
-      .str-chat__message-attachment--file {
-        background: var(--black40);
-      }
-
-      .str-chat__message-simple--deleted-inner,
-      .str-chat__message--deleted-inner {
-        background: var(--black40);
-        color: var(--white);
-      }
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message-simple__actions__action--options .str-chat__actions-box {
-    background: var(--grey);
-    box-shadow: 0 0 2px 0 var(--overlay), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
-  }
-
-  .str-chat__message {
-    &--error,
-    &--failed {
-      .str-chat__message-simple-text-inner {
-        background: var(--faded-red);
-        border: 1px solid var(--faded-red);
-      }
-    }
-  }
-}
-
-.str-chat__message {
-  .str-chat__message-simple__actions__action--options {
-    .str-chat__message-actions-box {
-      left: 100%;
-      right: unset;
-
-      &--reverse {
-        right: 100%;
-        left: unset;
-        border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-          var(--border-radius);
-      }
-    }
-
-    .str-chat__message-actions-box--mine {
-      right: 100%;
-      left: unset;
-      border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-        var(--border-radius);
-
-      &.str-chat__message-actions-box--reverse {
-        left: 100%;
-        right: unset;
-        border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-          calc(var(--border-radius-sm) / 2);
-      }
-    }
-  }
-
-  a[href^='mailto:'] {
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    hyphens: none;
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .str-chat__message .str-chat__message-attachment {
-    --attachment-max-width: 235px;
-  }
-}
-
-@media screen and (max-width: 414px) {
-  .str-chat__message .str-chat__message-attachment {
-    --attachment-max-width: 235px;
-  }
-}
-
-@media only screen and (device-width: 375px) and (-webkit-device-pixel-ratio: 3) {
-  .str-chat__message .str-chat__message-attachment {
-    --attachment-max-width: 235px;
-  }
-}
-
-.str-chat {
-  // fixes the overall overflow/flex issues together with the rule below
-  .mml-container {
-    display: flex;
-    padding-bottom: var(--xxs-p);
-  }
-
-  .mml-icon {
-    font-family: 'Material Icons', sans-serif;
-  }
-
-  // fixes the overall overflow/flex issues together with the rule above
-  .mml-wrap {
-    display: block;
-    // the max-width should match that to .str-chat__message-XXXX-text-inner
-    max-width: 345px;
-
-    @media screen and (max-width: 375px) {
-      max-width: 220px;
-    }
-  }
-
-  .mml-datepicker {
-    min-width: 180px;
-  }
-
-  // undo the negative margins that make the mml content to expand to the
-  // viewport edges
-  .mml-align-right .mml-btnlist--floating,
-  .mml-align-right .mml-carousel {
-    margin-left: auto;
-  }
-
-  .mml-align-left .mml-btnlist--floating,
-  .mml-align-left .mml-carousel {
-    margin-right: auto;
-  }
-
-  @media screen and (max-width: 960px) {
-    .mml-align-left .mml-carousel {
-      margin-left: -10px;
-    }
-
-    .mml-align-right .mml-carousel {
-      margin-right: -10px;
-    }
-  }
-
-  // expand carousel to the edge of the screen, the horizontal padding is theme
-  // specific in stream-chat-react
-  &.messaging {
-    // as .messaging.str-chat .str-chat__list:
-    @media screen and (max-width: 960px) {
-      .mml-align-left .mml-carousel {
-        margin-left: -10px;
-      }
-
-      .mml-align-right .mml-carousel {
-        margin-right: -10px;
-      }
-    }
-  }
-}