1.container {
2  position: relative;
3  box-sizing: border-box;
4  width: fit-content;
5}
6
7.mainbox {
8  box-sizing: border-box;
9  position: relative;
10  width: 230px;
11  height: 50px;
12  display: flex;
13  flex-direction: row-reverse;
14  align-items: center;
15  justify-content: center;
16  border-radius: 160px;
17  background-color: rgb(0, 0, 0);
18  transition: all 0.3s ease;
19}
20
21.checkbox:focus {
22  border: none;
23  outline: none;
24}
25
26.checkbox:checked {
27  right: 10px;
28}
29
30.checkbox:checked ~ .mainbox {
31  width: 50px;
32}
33
34.checkbox:checked ~ .mainbox .search_input {
35  width: 0;
36  height: 0px;
37}
38
39.checkbox:checked ~ .mainbox .iconContainer {
40  padding-right: 8px;
41}
42
43.checkbox {
44  box-sizing: border-box;
45  width: 30px;
46  height: 30px;
47  position: absolute;
48  right: 17px;
49  top: 10px;
50  z-index: 9;
51  cursor: pointer;
52  appearance: none;
53}
54
55.search_input {
56  box-sizing: border-box;
57  height: 100%;
58  width: 170px;
59  background-color: transparent;
60  border: none;
61  outline: none;
62  padding-bottom: 4px;
63  padding-left: 10px;
64  font-size: 1em;
65  color: white;
66  transition: all 0.3s ease;
67  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
68}
69
70.search_input::placeholder {
71  color: rgba(255, 255, 255, 0.776);
72}
73
74.iconContainer {
75  box-sizing: border-box;
76  padding-top: 5px;
77  width: fit-content;
78  transition: all 0.3s ease;
79}
80
81.search_icon {
82  box-sizing: border-box;
83  fill: white;
84  font-size: 1.3em;
85}