1.notification {
2  width: 300px;
3  height: 70px;
4  background: #fff;
5  border-radius: 10px;
6  display: flex;
7  align-items: center;
8  justify-content: space-between;
9  color: #212121;
10  box-shadow: 0px 42px 53px 13px rgba(0,0,0,0.1);
11  padding: 2px;
12  position: relative;
13  animation: appear .6s linear alternate-reverse infinite;
14  transition: all .6s ease;
15}
16
17.icon {
18  height: 100%;
19  transition: transform .6s ease;
20}
21
22.messages {
23  height: 100%;
24  flex: 1;
25  display: flex;
26  flex-direction: column;
27  justify-content: flex-start;
28  padding: 4px;
29}
30
31.title {
32  font-size: 0.95rem;
33  line-height: 1rem;
34  font-weight: 700;
35  margin-bottom: 4px;
36  color: #494949;
37}
38
39.description {
40  font-size: 13px;
41  margin-bottom: 4px;
42}
43
44.level {
45  color: #7d5cf5;
46  font-weight: 600;
47  background-color: #7d5cf53f;
48  display: flex;
49  align-items: center;
50  flex: 1;
51  height: 0;
52  width: max-content;
53  padding: 4px;
54  border-radius: 10px;
55}
56
57.level svg {
58  height: 140%;
59  background-color: #7d5cf5;
60  border-radius: 6px;
61  margin-right: 4px;
62}
63
64.action {
65  height: 100%;
66  display: flex;
67  align-items: center;
68  justify-content: center;
69}
70
71.action button {
72  padding: 0.5rem  1rem;
73  background-color: #7d5cf5;
74  color: #ffffff;
75  font-size: 0.75rem;
76  line-height: 1rem;
77  font-weight: 700;
78  text-transform: uppercase;
79  border-radius: 10px;
80  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
81  border: none;
82  height: 40px;
83  transition: all .6s ease;
84  margin-right: 6px;
85}
86
87.notification:hover .icon {
88  transform: rotate(45deg);
89}
90
91.action button:hover {
92  height: 100%;
93  margin-right: 0;
94}
95
96.action button:active {
97  background-color: #4dec48;
98}
99
100@keyframes appear {
101  from {
102    transform: scale(0.98);
103  }
104
105  to {
106    transform: scale(1);
107  }
108}