/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:color';
@use 'sass:math';
@use '~tgui/styles/base.scss';
@use '~tgui/styles/colors.scss';

$text-color: #abc6ec !default;
$color-bg-section: base.$color-bg-section !default;

.Chat {
  color: $text-color;
}

.Chat__badge {
  display: inline-block;
  min-width: 0.5em;
  font-size: 0.7em;
  padding: 0.2em 0.3em;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: crimson;
  border-radius: 10px;
  transition: font-size 200ms ease-out;

  &:before {
    content: 'x';
  }
}

.Chat__badge--animate {
  font-size: 0.9em;
  transition: font-size 0ms;
}

.Chat__scrollButton {
  position: fixed;
  right: 2em;
  bottom: 1em;
}

.Chat__reconnected {
  font-size: 0.85em;
  text-align: center;
  margin: 1em 0 2em;

  &:before {
    content: 'Reconnected';
    display: inline-block;
    border-radius: 1em;
    padding: 0 0.7em;
    color: colors.$red;
    background-color: $color-bg-section;
  }

  &:after {
    content: '';
    display: block;
    margin-top: -0.75em;
    border-bottom: math.div(1em, 6) solid colors.$red;
  }
}

.Chat__highlight {
  color: #000;
}

.Chat__highlight--restricted {
  color: #fff;
  background-color: #a00;
  font-weight: bold;
}

.ChatMessage {
  word-wrap: break-word;
}

.ChatMessage--highlighted {
  position: relative;
  border-left: math.div(1em, 6) solid rgba(255, 221, 68);
  padding-left: 0.5em;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 221, 68, 0.1);
    // Make this click-through since this is an overlay
    pointer-events: none;
  }
}