fieldset.facet-search {
  color: $input-alt;
  position: relative;
  margin-bottom: 1.5rem;

  input {
    height: 3.5rem;
    padding: 0.6rem 3.4rem 0.4rem; // left padding for "search" icon; right padding for "close" button
    display: block;
    width: 100%;
    color: $brand-text--dark;
    background: $Vlight-gray;
    border-radius: 2rem;
    border: 2px solid transparent;
    &:hover {
      border-color: $brand-orange--medium;
    }

    &:focus {
      border-color: $brand-orange;
    }

    //search placeholder when empty
    &::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: $brand-text--dark;
      opacity: 0.9;
    }
    :-ms-input-placeholder {
      /* IE 10+ */
      color: $brand-text--dark;
      opacity: 0.9;
    }
    :-moz-placeholder {
      /* Firefox 18- */
      color: $brand-text--dark;
      opacity: 0.9;
    }
  }

  &::before {
    // "search" icon
    display: inline-block;
    position: absolute;
    top: 0.8rem;
    left: 1.3rem;
    font-size: 1.4rem;
    font-family: 'Workbench';
    content: '\e920'; // .icon-search
    color: $brand-text--dark;
  }

  button.close {
    border: 0;
    position: absolute;
    right: 1.3rem;
    top: 1rem;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    text-shadow: none;
    color: $brand-text--medium;
    &:hover {
      color: $brand-orange;
      opacity: 1;
    }
  }
}
