.search-input-box {
  position: relative;
}

.search-input-box .search-input-icon {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
}

.search-input-box .search-input-icon:hover {
  color: #2879ff;
}

.search-input-box .clear-input-icon {
  font-size: 16px;
  opacity: 0;
  transition: all .3s ease;
  color: #c2cbd1;
  cursor: pointer;
  visibility: 0;
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translate(0, -50%) scale(0);
}

.search-input-box .clear-input-icon:hover {
  color: #F05E5E;
}

.search-input-box .clear-input-icon--visible {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
  visibility: visible;
}

.search-input-box__input {
  width: 100%;
  height: 100%;
  padding: 0 50px 0 11px;
  font-size: 12px;
  border: 1px solid #e9edf0;
  border-radius: 18px;
  transition: all 0.3s ease;
  background-color: #ffffff;
  box-sizing: border-box;
}

.search-input-box__input:hover, .search-input-box__input:focus {
  border: 1px solid #2879ff;
}

.search-input-box__input::placeholder {
  color: #bfc7d5;
}
