openaire-library/sharedComponents/search-input/search-input.component.css

input, input:focus {
  background: transparent 0 0 no-repeat padding-box;
  border-radius: 4px;
  padding: 15px;
  border: none;
  outline: none;
}

input::placeholder {
  color: #a3a3a3;
  font-weight: 600;
}

@media only screen and (min-width: 960px) {
  .bordered.focused {
    border-bottom: 1px solid currentColor !important;
  }
  .bordered:not(.focused) {
    border-bottom: 1px solid #a3a3a3 !important;
  }
}

@media only screen and (max-width: 959px) {
  input {
    font-size: 14px;
  }

  .search-input {
    padding-bottom: 5px;
    border-bottom: 2px solid currentColor;
  }
}

button.search, button.search:hover {
  color: #1a1a1a;
  font-weight: 700;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

button.search:hover {
  color: currentColor;
}

button.search .icon-bg {
  width: 56px;
  height: 56px;
  position: relative;
  background: white;
  border-radius: 50%;
}

.selected {
  color: #1a1a1a;
}

.overlay {
  margin-left: -13px;
  z-index: 1;
}