/ src / components / TopToast / TopToast.module.css
TopToast.module.css
 1  .toast {
 2    position: fixed;
 3    width: 100%;
 4    left: 0;
 5    display: flex;
 6    text-align: center;
 7    justify-content: center;
 8    align-items: center;
 9    z-index: 10000;
10    padding: 14px 40px;
11    background-color: rgb(var(--lsd-surface-secondary));
12    color: rgb(var(--lsd-text-secondary));
13    text-align: center;
14    z-index: 1000;
15    min-height: 48px;
16  
17    font-size: 14px;
18    font-weight: 400;
19    line-height: 20px;
20    letter-spacing: 0.14px;
21  }
22  
23  .toast a {
24    margin-left: 16px;
25    color: rgb(var(--lsd-text-secondary));
26    text-decoration: underline;
27  }
28  
29  .closeButton {
30    display: flex;
31    justify-content: center;
32    align-items: center;
33    cursor: pointer;
34    position: absolute;
35    right: 10px;
36    top: 10px;
37    width: 28px;
38    height: 28px;
39    border: 1px solid rgb(var(--lsd-border-secondary));
40    background: transparent;
41    padding: 0;
42  }
43  
44  .timeRemaining {
45    margin-left: 20px;
46  }
47  
48  .mobileText {
49    display: none;
50  }
51  
52  .desktopText {
53    display: inline;
54  }
55  
56  @media (max-width: 768px) {
57    .toast {
58      flex-direction: column;
59      font-size: 12px;
60      line-height: 16px;
61      padding: 14px;
62    }
63  
64    .message {
65      width: 82%;
66    }
67  
68    .mobileText {
69      display: inline;
70    }
71  
72    .desktopText {
73      display: none;
74    }
75  
76    .toast p {
77      width: 75vw;
78    }
79  }