.search {
  position: relative;
}

.search--is-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.35;
}

.search__search-wrap {
  position: relative;
  z-index: 3;
  width: 100%;

  @media (--screensMedium) {
    display: flex;
    align-items: flex-end;
  }
}

.search__title {
  margin-top: 0;
}

.search__list,
.search__list-wrap {
  max-height: 222px; /* careful while changin this, this cuts the last item to indicate there are more items*/
}

.search__list-wrap {
  position: absolute;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: var(--colorWhite);
  border: 1px solid var(--colorBlue);
  border-radius: 20px;
  top: 61px;
  left: 0;
}

.search__list {
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 10px 0px;
}

.search__list-wrap:after {
  position: absolute;
  bottom: 0;
  height: 20px;
  width: 100%;
  background: linear-gradient(
    to top,
    rgba(20, 32, 70, 0.25) 0%,
    rgba(20, 32, 70, 0) 100%
  );
  content: '';
}

.search__list--error {
  border: 1px solid var(--colorRed);
}

.search__list-item::before {
  content: '';
}

.search__list-item-link {
  display: flex;
  justify-content: space-between;
  padding: var(--spacingSmaller) var(--spacing);
  text-decoration: none;
  color: var(--colorBlue);
}

.search__list-item-link:hover,
.search__list-item-link:focus {
  color: var(--colorBlue);
  background-color: var(--colorGreyDark);
}

.search__result-title {
  margin-right: var(--spacing);
  font-weight: var(--fontWeightNormal);
}

.search__result-description {
  white-space: nowrap;
  font-weight: var(--fontWeightNormal);
}

.search__loading {
  position: absolute;
  bottom: 11px;
  right: 16px;
}

.search--loading input[type='search']::-webkit-search-cancel-button {
  display: none;
}

.search--loading input[type='search']::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.search__select,
.search__input {
  margin-bottom: 10px;

  @media (--screenXL) {
    margin-bottom: 0;
  }
}

.search__select {
  @media (--screensMedium) {
    margin-left: 12px;
  }
}

.search__input {
  position: relative;
  flex: 1 0 auto;


}

.search__cta {
  @media (--screensMedium) {
    margin-left: 12px;
  }
}