1.input__container {
2  max-width: 200px;
3  display: flex;
4  flex-direction: column;
5  gap: 6px;
6  background: rgba(255, 255, 255, 0.3);
7  padding: 15px;
8  border-radius: 20px;
9  position: relative;
10}
11
12.input__container::before {
13  content: "";
14  position: absolute;
15  width: 100%;
16  height: 100%;
17  top: 0;
18  left: 0;
19  z-index: -1;
20  filter: blur(25px);
21  border-radius: 20px;
22  background-color: #e499ff;
23  background-image: radial-gradient(at 47% 69%, hsla(17,62%,65%,1) 0px, transparent 50%),
24radial-gradient(at 9% 32%, hsla(222,75%,60%,1) 0px, transparent 50%);
25}
26
27.input__label {
28  display: block;
29  margin-left: 0.4em;
30  color: #000;
31  text-transform: uppercase;
32  font-size: 0.9em;
33  font-weight: bold;
34}
35
36.input__description {
37  font-size: 0.6em;
38  font-weight: bold;
39  text-align: center;
40  color: rgba(0, 0, 0, 0.5);
41}
42
43.input {
44  border: none;
45  outline: none;
46  width: 100%;
47  padding: 0.6em;
48  padding-left: 0.9em;
49  border-radius: 20px;
50  background: #fff;
51  transition: background 300ms, color 300ms;
52}
53
54.input:hover,.input:focus {
55  background: rgb(0, 0, 0);
56  color: #fff;
57}