.searchBarContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 40px; /*collapse width*/
  border-radius: 6px;
  padding: 6px;
  height: auto;
  overflow: hidden;
  transition: width 0.35s ease;
  position: absolute;
}

.searchBarContainer:focus-within {
  background: #292a36;
  background: color(display-p3 0.1608 0.1647 0.2078);
}
/* When the searchbar is opened */
.open {
  width: 260px;
  padding: 6px 6px 6px 12px;
  justify-content: space-between;
  border: 1px solid #31324a;
  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
  border-radius: 6px;
}
.input {
  background: transparent;
  outline: none;
  border: none;
  width: 100%;
  opacity: 0; /*hide input kung collapse*/
  transition: opacity 0.35s ease;
  color: #85869b;
  color: color(display-p3 0.5216 0.5255 0.6);
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.09px;
  caret-color: #575bc7;
}

.open > .input {
  opacity: 1; /*show input when open*/
  transition-delay: 0.1s;
}

.input::placeholder {
  color: #85869b;
  color: color(display-p3 0.5216 0.5255 0.6);
  text-align: start;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.09px;
}

.searchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #858699;
}
.searchBtn:hover {
  color: #959aff;
}