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