1#btn-message {
2  --text-color: rgb(255, 255, 255);
3  --bg-color-sup: #5e5e5e;
4  --bg-color: #2b2b2b;
5  --bg-hover-color: #161616;
6  --online-status: #00da00;
7  --font-size: 16px;
8  --btn-transition: all 0.2s ease-out;
9}
10
11.button-message {
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  font: 400 var(--font-size) Helvetica Neue, sans-serif;
16  box-shadow: 0 0 2.17382px rgba(0,0,0,.049),0 1.75px 6.01034px rgba(0,0,0,.07),0 3.63px 14.4706px rgba(0,0,0,.091),0 22px 48px rgba(0,0,0,.14);
17  background-color: var(--bg-color);
18  border-radius: 68px;
19  cursor: pointer;
20  padding: 6px 10px 6px 6px;
21  width: fit-content;
22  height: 40px;
23  border: 0;
24  overflow: hidden;
25  position: relative;
26  transition: var(--btn-transition);
27}
28
29.button-message:hover {
30  height: 56px;
31  padding: 8px 20px 8px 8px;
32  background-color: var(--bg-hover-color);
33  transition: var(--btn-transition);
34}
35
36.button-message:active {
37  transform: scale(0.99);
38}
39
40.content-avatar {
41  width: 30px;
42  height: 30px;
43  margin: 0;
44  transition: var(--btn-transition);
45  position: relative;
46}
47
48.button-message:hover .content-avatar {
49  width: 40px;
50  height: 40px;
51}
52
53.avatar {
54  width: 100%;
55  height: 100%;
56  border-radius: 50%;
57  overflow: hidden;
58  background-color: var(--bg-color-sup);
59}
60
61.user-img {
62  width: 100%;
63  height: 100%;
64  object-fit: cover;
65}
66
67.status-user {
68  position: absolute;
69  width: 6px;
70  height: 6px;
71  right: 1px;
72  bottom: 1px;
73  border-radius: 50%;
74  outline: solid 2px var(--bg-color);
75  background-color: var(--online-status);
76  transition: var(--btn-transition);
77  animation: active-status 2s ease-in-out infinite;
78}
79
80.button-message:hover .status-user {
81  width: 10px;
82  height: 10px;
83  right: 1px;
84  bottom: 1px;
85  outline: solid 3px var(--bg-hover-color);
86}
87
88.notice-content {
89  display: flex;
90  flex-direction: column;
91  align-items: flex-start;
92  justify-content: center;
93  padding-left: 8px;
94  text-align: initial;
95  color: var(--text-color);
96}
97
98.username {
99  letter-spacing: -6px;
100  height: 0;
101  opacity: 0;
102  transform: translateY(-20px);
103  transition: var(--btn-transition);
104}
105
106.user-id {
107  font-size: 12px;
108  letter-spacing: -6px;
109  height: 0;
110  opacity: 0;
111  transform: translateY(10px);
112  transition: var(--btn-transition);
113}
114
115.lable-message {
116  display: flex;
117  align-items: center;
118  opacity: 1;
119  transform: scaleY(1);
120  transition: var(--btn-transition);
121}
122
123.button-message:hover .username {
124  height: auto;
125  letter-spacing: normal;
126  opacity: 1;
127  transform: translateY(0);
128  transition: var(--btn-transition);
129}
130
131.button-message:hover .user-id {
132  height: auto;
133  letter-spacing: normal;
134  opacity: 1;
135  transform: translateY(0);
136  transition: var(--btn-transition);
137}
138
139.button-message:hover .lable-message {
140  height: 0;
141  transform: scaleY(0);
142  transition: var(--btn-transition);
143}
144
145.lable-message, .username {
146  font-weight: 600;
147}
148
149.number-message {
150  display: flex;
151  justify-content: center;
152  align-items: center;
153  text-align: center;
154  margin-left: 8px;
155  font-size: 12px;
156  width: 16px;
157  height: 16px;
158  background-color: var(--bg-color-sup);
159  border-radius: 20px;
160}
161
162/*==============================================*/
163@keyframes active-status {
164  0% {
165    background-color: var(--online-status);
166  }
167
168  33.33% {
169    background-color: #93e200;
170  }
171
172  66.33% {
173    background-color: #93e200;
174  }
175
176  100% {
177    background-color: var(--online-status);
178  }
179}