.group {
 position: relative;
}

.input,
.form-control,
.search-select-input,
.form-select {
 font-size: 16px;
 padding: 10px 12px;
 display: block;
 width: 100%;
 border: 1px solid rgba(15, 23, 42, 0.18);
 border-radius: 8px;
  background-color: var(--surface-2);
 color: var(--text);
}

.input:focus,
.form-control:focus,
.search-select-input:focus,
.form-select:focus {
 outline: none;
 border-color: var(--brand-900);
 box-shadow: 0 0 0 0.25rem var(--ring);
}

.group label {
 color: var(--muted);
 font-size: 18px;
 font-weight: normal;
 position: absolute;
 pointer-events: none;
 left: 5px;
 top: 10px;
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.input:focus ~ label, .input:valid ~ label {
 top: -20px;
 font-size: 14px;
 color: var(--brand-900);
}

.bar {
 position: relative;
 display: block;
 width: 100%;
}

.bar:before, .bar:after {
 content: '';
 height: 2px;
 width: 0;
 bottom: 1px;
 position: absolute;
 background: var(--brand-900);
 transition: 0.2s ease all;
 -moz-transition: 0.2s ease all;
 -webkit-transition: 0.2s ease all;
}

.bar:before {
 left: 50%;
}

.bar:after {
 right: 50%;
}

.input:focus ~ .bar:before, .input:focus ~ .bar:after {
 width: 50%;
}

.highlight {
 position: absolute;
 height: 60%;
 width: 100px;
 top: 25%;
 left: 0;
 pointer-events: none;
 opacity: 0.5;
}

.input:focus ~ .highlight {
 animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
 from {
  background: var(--brand-900);
 }

 to {
  width: 0;
  background: transparent;
 }
}