pixies

1@use "@/common/styles/colors" as *
2
3.toast-notification
4  position: fixed
5  bottom: 2rem
6  right: 1rem
7  z-index: 5
8  background-color: var(--glass-bg)
9  backdrop-filter: blur(16px)
10  -webkit-backdrop-filter: blur(16px)
11  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)
12  border: 1px solid $light-gray
13  border-radius: 0.75rem
14  animation: 0.5s moveIn cubic-bezier(0.4, 0, 0.2, 1)
15  cursor: pointer
16  transition: all 0.2s ease
17
18.toast-hidden
19  visibility: hidden
20  transition: all 0s 0.5s
21  animation: 0.5s moveOut cubic-bezier(0.4, 0, 0.2, 1)
22
23.toast-green
24  border-left: 4px solid $accent-primary
25
26  & .toast-content svg
27    color: $accent-primary
28
29.toast-green:hover
30  border-color: $light-gray
31  border-left-color: $accent-primary
32  transform: translateX(-4px)
33
34.toast-red
35  border-left: 4px solid $accent-danger
36
37  & .toast-content svg
38    color: $accent-danger
39
40.toast-red:hover
41  border-color: $light-gray
42  border-left-color: $accent-danger
43  transform: translateX(-4px)
44
45.toast-content
46  display: flex
47  align-items: center
48  padding: 1rem 1.25rem
49  color: $white
50  font-size: 14px
51  font-weight: 500
52
53.toast-content svg
54  margin-right: 1rem
55  width: 1.75rem
56  height: 1.75rem
57
58.toast-content h2
59  margin: 0
60  font-size: 1.25rem
61  font-weight: 600
62
63
64@keyframes moveIn
65  0%
66    transform: translateX(100%)
67    opacity: 0
68  100%
69    transform: translateX(0)
70    opacity: 1
71
72@keyframes moveOut
73  0%
74    transform: translateX(0)
75    opacity: 1
76  100%
77    transform: translateX(100%)
78    opacity: 0
79
80
81@media screen and (max-width: 425px)
82  .toast-notification
83    bottom: 1rem
84    right: 1rem
85    left: 1rem
86
87  @keyframes moveIn
88    0%
89      transform: translateY(100%)
90      opacity: 0
91    100%
92      transform: translateY(0)
93      opacity: 1
94
95  @keyframes moveOut
96    0%
97      transform: translateY(0)
98      opacity: 1
99    100%
100      transform: translateY(100%)
101      opacity: 0