financial-assistant

1
.message__user {
2
  color: white;
3
  background: $color-button-background;
4
  align-self: flex-end;
5

6
  &:before {
7
    right: -7px;
8
    width: 20px;
9
    background-color: $color-button-background;
10
    border-bottom-left-radius: 16px 14px;
11
  }
12

13
  &:after {
14
    right: -26px;
15
    width: 26px;
16
    background-color: $color-background;
17
    border-bottom-left-radius: 10px;
18
  }
19
}
20

21
.message__user,
22
.message__assistant {
23
  word-wrap: break-word;
24
  margin-bottom: 12px;
25
  line-height: 24px;
26
  position: relative;
27
  padding: 10px 20px;
28
  border-radius: 25px;
29
  height: fit-content;
30
  font: $font-small;
31

32
  &:before,
33
  &:after {
34
    content: "";
35
    position: absolute;
36
    bottom: 0;
37
    height: 25px;
38
  }
39
}
40

41
.message__assistant {
42
  background: $color-border;
43
  color: black;
44
  align-self: flex-start;
45

46
  @include flex(
47
    $direction: column,
48
    $justify-content: space-between,
49
    $gap: 2rem
50
  );
51

52
  &:before {
53
    left: -7px;
54
    width: 20px;
55
    background-color: $color-border;
56
    border-bottom-right-radius: 16px 14px;
57
  }
58

59
  &:after {
60
    left: -26px;
61
    width: 26px;
62
    background-color: $color-background;
63
    border-bottom-right-radius: 10px;
64
  }
65
}
66

67