1.info-panels {
2  --color-icon: #fff;
3  --color-input: #ccc;
4  --color-border: #9e9e9e;
5  --color-border-hover: #1a73e8;
6  --all-transition: all .2s ease-out;
7  --input-focus-opacity: .3;
8}
9
10.input-color-group-one {
11  position: relative;
12}
13
14.input-color {
15  max-width: 230px;
16  min-width: 150px;
17  border: 1.5px solid var(--color-border);
18  border-radius: 80px;
19  background: none;
20  padding: 16px;
21  font-size: 16px;
22  transition: var(--all-transition);
23}
24
25.input-color:focus {
26  color: var(--color-input);
27  outline: none;
28  border: 1.5px solid var(--color-border-hover);
29}
30
31.input-color:valid {
32  color: var(--color-input);
33  outline: none;
34}
35
36.input-color::-webkit-input-placeholder {
37  color: var(--color-input);
38}
39
40.input-color::-moz-input-placeholder {
41  color: var(--color-input);
42}
43
44.input-color::-ms-input-placeholder {
45  color: var(--color-input);
46}
47
48.input-color:focus::-webkit-input-placeholder, input-color:valid::-webkit-input-placeholder {
49  opacity: var(--input-focus-opacity);
50}
51
52.input-color:focus::-moz-input-placeholder, input-color:valid::-moz-input-placeholder {
53  opacity: var(--input-focus-opacity);
54}
55
56.input-color:focus::-ms-input-placeholder, input-color:valid::-ms-input-placeholder {
57  opacity: var(--input-focus-opacity);
58}
59
60.color-label {
61  position: absolute;
62  display: flex;
63  justify-content: center;
64  align-items: center;
65  color: var(--color-border);
66  font-weight: 600;
67  padding: 0 5px;
68  border: 1.5px solid var(--color-border);
69  border-radius: 20px;
70  top: -11.5px;
71  left: 25px;
72  background-color: transparent;
73  cursor: default;
74  backdrop-filter: blur(10px);
75  transition: var(--all-transition);
76}
77
78.input-color:focus ~ .color-label, input-color:valid ~ .color-label {
79  color: var(--color-border-hover);
80  border: 1.5px solid var(--color-border-hover);
81}
82
83.btn-copy {
84  position: absolute;
85  display: flex;
86  justify-content: center;
87  align-items: center;
88  width: 24px;
89  height: 24px;
90  border: 1.5px solid var(--color-border);
91  border-radius: 50%;
92  top: -11.5px;
93  right: 25px;
94  background-color: transparent;
95  cursor: pointer;
96  backdrop-filter: blur(10px);
97  transition: var(--all-transition);
98}
99
100.btn-copy:hover {
101  background-color: var(--color-border);
102  transform: scale(1.2);
103}
104
105.btn-copy:active {
106  transform: scale(1.1);
107}
108
109.input-color:focus ~ .btn-copy {
110  border: 1.5px solid var(--color-border-hover);
111}
112
113.input-color:valid .input-color:focus ~ .btn-copy {
114  border: 1.5px solid var(--color-border);
115}
116
117.input-color:focus ~ .btn-copy:hover {
118  background-color: var(--color-border-hover);
119}
120
121#icon-btn-copy {
122  fill: var(--color-border);
123}
124
125.btn-copy:hover #icon-btn-copy {
126  fill: var(--color-icon);
127}
128
129.input-color:focus ~ .btn-copy #icon-btn-copy {
130  fill: var(--color-border-hover);
131}
132
133.input-color:focus ~ .btn-copy:hover #icon-btn-copy, .input-color:valid ~ .btn-copy:hover #icon-btn-copy {
134  fill: var(--color-icon);
135}