@use "../styles/mixins";

.bg {
  height: 100%;

  background-color: var(--theme-background-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  @include mixins.chat-pattern-background("../assets/pattern.svg");

  &::before {
    @media (max-width: 600px) {
      bottom: auto;
      height: calc(var(--vh, 1vh) * 100);
    }
  }

  :global(html.theme-light) & {
    background-image: url('../assets/chat-bg-br.png');
  }

  @media (max-width: 600px) {
    height: calc(var(--vh, 1vh) * 100);
  }
}