// // Search // ————————————————–

.search {

display: none;
&.in { display: block;  }

}

.search-form-set {

position: relative;

.form-input {
  padding-right: 29px;

  &::-ms-clear {
    display: none;
  }
}

.input-group {
  overflow: hidden;
}

.cancel {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 18px;
  overflow: hidden;
  z-index: 1; // set z-index at least to 1

  &:hover,
  &:focus {
    text-decoration: none;
    cursor: pointer;
  }
}

button.cancel {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

&.in .cancel {
  display: block;
}

}

.search-results {

position: absolute;
width: 100%;
top: 100%;
left: 0;
z-index: 1;
background-color: #fff;
overflow: hidden;
margin-top: 4px;
border-radius: 3px;
border: 1px solid $color-border;
display: none;

> ul {
  list-style: none;
  margin: 0;
  padding-left: 0;

  > li {
    min-height: building-units(4);
    font-size: $font-size-regular;
    padding: (capline-bu(1.5, $font-size-regular) - 2px) 12px (baseline-bu(1.5, $font-size-regular) - 1px);

    &.hover,
    &:hover {
      background-color: hsv-darken(#fff, 7%, true);
    }
  }
}

.has-results & {
  display: block;
}

}