.searchForm {
  position: relative;
  display: inline-block;
  margin: 0 0 2rem 0;
  input {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    padding: 0.5rem;
    background: $color-white;
    border: 1px solid $color-plp-primary;
  }
  .resetSearch {
    position: absolute;
    right: 1px;
    top: 1px;
    background: $color-white;
    width: 36px;
    height: calc(100% - 2px);
    padding: 0;
    border: none;
    cursor: pointer;
    text-indent: -9999px;
    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: calc(50% - 9px);
      width: 2px;
      height: 18px;
      background: $color-plp-primary;
    }
    &::before {
      transform: rotate(45deg);
    }
    &::after {
      transform: rotate(-45deg);
    }
  }
}

@media only screen and (max-width: 768px) {
  .searchForm {
    display: block;
    input {
      width: 100%;
    }
  }
}
