.list-chat-messages {
  display: grid;
  gap: $spacing-md
}

.chat-message-item {
  position: relative;
  display: grid;
  grid-template-areas:  "chat-avatar chat-header chat-header"
                        "chat-avatar chat-message chat-actions";
  grid-template-columns: auto auto 1fr;
  max-width: $capped-width;
}

.chat-avatar {
  grid-area: chat-avatar;
}

img.chat-avatar {
  width: $spacing;
  height: $spacing;
  margin-right: $spacing-xs;
  border-radius: 50%;
}

.chat-header {
  display: flex;
  flex-direction: row;
  grid-area: chat-header;
  font-size: $font-size-label;
  padding-top: $spacing-xxs;
  padding-bottom: $spacing-xxs;
  color: $label-color;
  line-height: 1.3;
}

.chat-author {
  margin-left: $spacing-xxs;
  font-weight: $font-weight-semibold;
}

.chat-message {
  grid-area: chat-message;
  min-width: 0;
  padding: $spacing-xs;
  border-radius: $border-radius;
  background-color: $gray-lightest;
}

.chat-message .message-banner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: $spacing-xxs;
  padding-bottom: $spacing-xxs;
  padding-left: $spacing-xs;
  margin-top: (-$spacing-xs);
  margin-left: (-$spacing-xs);
  margin-right: (-$spacing-xs);
  margin-bottom: $spacing-xs;
  color: $white;
  background-color: $info;
  border-bottom: $border-width solid $white;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  &::before {
    content: "";
    display: block;
    width: $icon-xs;
    height: $icon-xs;
    margin-right: $spacing-xs;
    mask-repeat: no-repeat;
    background-color: $white;
  }
}

.chat-message .message-banner.announcement::before {
  mask-image: url("@images/speaker.svg");
}

.chat-message .message-banner.mentioned::before {
  mask-image: url("@images/at-sign.svg");
}

.chat-message .text-mentioned {
  margin-right: $spacing-xxs;
  font-weight: $font-weight-bold;
}

.chat-actions {
  grid-area: chat-actions;
  place-self: start;
  display: flex;
  flex-direction: column;
  padding-right: 0;
  padding-left: $spacing-xxs;
}

.chat-actions .btn {
  justify-content: center;
  width: $btn-sm-height;
  height: $btn-sm-height;
  padding: 0;
}

.chat-actions .dropdown-actions[open] .dropdown-menu,
.chat-actions .dropdown-actions[open] .popover-menu {
  right: 0;
  left: auto;
  margin-top: 0;
}

.chat-message-addons {
  display: flex;
  flex-direction: row;
  margin-top: $spacing-xxs;
}

.chat-message-addons .btn {
  height: auto;
  padding: 2px $spacing-xs;
  margin-right: $spacing-xxs;
  color: $gray-dark;
  background-color: $gray-lighter;
  border: none;
  &:hover, &:focus, &:active {
    color: $white;
    border: none;
    background-color: $link-hover-color;
  }
  .icon {
    height: $icon-xs;
    font-size: $icon-xs;
    margin-right: $spacing-xxs;
  }
}

////// Your message //////

.chat-message-item.your-message {
  grid-template-areas:  "chat-header chat-header chat-avatar "
                        "chat-actions chat-message chat-avatar";
  grid-template-columns: 1fr auto auto;
  place-self: end;
}

.chat-message-item.your-message img.chat-avatar {
    margin-right: 0;
    margin-left: $spacing-xs;
}

.chat-message-item.your-message .chat-actions {
  justify-self: end;
  padding-left: 0;
  padding-right: $spacing-xxs;
}

.chat-message-item.your-message .chat-header {
  text-align: end;
}

.chat-message-item.your-message .chat-message {
  color: $white;
  background-color: $primary;
}

.chat-message-item.your-message .chat-message-addons .btn {
  color: $white;
  background-color: $gray-transparent;
  &:hover, &:focus, &:active {
    color: $white;
    background-color: $link-hover-color;
  }
}

.chat-message-item.your-message .chat-message-addons .tag-item {
  color: $white;
  background-color: $gray-transparent;
}

.chat-message-item.your-message .chat-actions .dropdown-actions[open] .dropdown-menu,
.chat-message-item.your-message .chat-actions .dropdown-actions[open] .popover-menu {
  left: 0;
  right: auto;
}

.chat-message-item.announcement .chat-message {
  color: $white;
  background-color: $info;
}

.chat-message-item.announcement .chat-message-addons .btn {
  color: $white;
  background-color: $gray-transparent;
  &:hover, &:focus, &:active {
    color: $white;
    background-color: $link-hover-color;
  }
}

.chat-message-item.announcement .chat-message-addons .tag-item {
  color: $white;
  background-color: $gray-transparent;
}


////// Chat window //////

.chat-container {
  grid-area: chat-container;
  position: relative;
}

.chat-container .chat-window {
  position: absolute;
  right: 0;
  bottom: 0;
}

.chat-window {
  width: $spacing-5xl;
  background-color: $petrol-dark;
  z-index: 10;
  box-shadow: $black-transparent 0 0 10px 5px;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.chat-window-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-xxs $spacing-xxs $spacing-xxs $spacing-sm;
  color: $white;
  border-bottom: $border-width solid $primary;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.chat-window[open] .chat-window-header {
  background-color: $primary;
}

.chat-message-counter {
  position: relative;
  padding-left: $spacing-md;
}

.chat-message-counter::before {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: $link-hover-color;
  height: $icon-sm;
  width: $icon;
  left: 0;
  top: 1px;
  mask-image: url("@images/circle-sm-filled.svg");
  mask-repeat: no-repeat;
}

.chat-window-header a {
  margin-left: $spacing-xs;
  color: $link-hover-color;
  &:hover, &:focus {
    color: $link-hover-color;
    text-decoration: underline;
  }
}

.chat-window .chat-title {
  flex-grow: 1;
  margin-left: $spacing-xs;
}

.chat-window .list-chat-messages {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: $spacing-8xl;
  padding: $spacing-md;
  scrollbar-width: none;
}

.chat-window .chat-header {
  color: $label-color-inverted;
}

.chat-window .list-chat-messages .popover-menu {
  width: $spacing-3xl;
}

.chat-window-actions {
  position: relative;
  padding: $spacing-xs;
  background-color: $primary;
}

.chat-window-actions .form-control {
  padding-right: $spacing-lg;
}

.chat-window-actions .btn-send-message {
  position: absolute;
  right: $spacing-sm;
  bottom: $spacing-sm;
  &::before {
    content: "";
    display: inline-block;
    background-color: $white;
    height: $icon-sm;
    width: $icon;
    mask-image: url("@images/sendmessage.svg");
    mask-repeat: no-repeat;
  }
  input {
    opacity: 0;
    position: absolute;
    appearance: none;
    left: 0;
    top: 0;
    width: $btn-sm-height;
    height: $btn-sm-height;
    padding: 0;
    font-size: 0;
    color: transparent;
  }
}


////// Floating chat input //////

.floating-chatinput {
  position: sticky;
  left: 0;
  right: $spacing;
  bottom: -$body-padding-desktop;
  width: 100%;
  padding-top: $spacing-xxs;
  padding-bottom: $body-padding-mobile;
  background-color: $white;
  z-index: 1;
  @include media-breakpoint-up(sm) {
    bottom: -$body-padding-tablet;
    padding-bottom: $body-padding-tablet;
  }
  @include media-breakpoint-up(xl) {
    bottom: -$body-padding-desktop;
  }
}

.floating-chatinput .form-control {
  min-height: $spacing-lg;
  padding-right: $spacing-lg;
  border-color: $gray-light;
}

.floating-chatinput .btn-sendmessage {
  position: absolute;
  bottom: $spacing-md;
  right: $spacing-xxs;
  z-index: 1;
  @include media-breakpoint-up(sm) {
    bottom: $spacing+$spacing-xxs;
  }
}