.search {
  background-color: white;
  background-color: hsla(0, 0%, 100%, 0.95);
  border-bottom: 1px solid darken($light-grey, 5%);
  box-shadow: 0 0.1em 0.1em hsla(0, 0%, 0%, 0.1);
  padding: ($baseline / 2) $baseline;
  background-image: linear-gradient(0deg, hsla(0, 0%, 100%,0), white);
  z-index: 999;

  @include bp('large') {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    // position: sticky polyfill
    &.fixed {
      left: 0;
      position: fixed;
      right: 0;
    }
  }

  @include bp('small') {
    padding-bottom: $baseline;
  }
}

.search__group {
  float: left;
  padding: 0.5em 0;

  @include bp('small') {
    float: none;
  }
}

.search input[type='checkbox'] {
  position: relative;
  top: -($baseline / 8);
  vertical-align: middle;
}

.search label {
  cursor: pointer;
  font-size: 1.2em;
  margin-right: ($baseline / 1.2);
  padding-left: (($baseline / 1.2) / 4);
}

.search__input {
  background-color: $dark-white;
  border: 1px solid darken($light-grey, 25%);
  box-shadow: inset 0 .1em .1em hsla(0,0%,0%,.1);
  color: $black;
  font-size: 1.25em;
  line-height: 1.2;
  margin: 0;
  padding: ($baseline / 3) ($baseline / 2);
  width: 100%;
  vertical-align: baseline;
}
