.search-form {
  /*  border-top: 1px solid var(--light-gray); */
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;

  & label {
    display: none;
  }

  & input[type="submit"] {
    display: none;
  }

  & input[type="search"] {
    padding: 1rem;
    width: 100%;
    border: none;
    border-radius: 0;
    outline: none;
  }

  & input[type="search"]::-webkit-search-decoration,
  & input[type="search"]::-webkit-search-cancel-button,
  & input[type="search"]::-webkit-search-results-button,
  & input[type="search"]::-webkit-search-results-decoration {
    appearance: none;
  }

  .clear-search {
    color: var(--gray-500);
    width: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    &:hover {
      background: #eee;
    }

    &:visited {
      color: var(--gray-500);
    }
  }
}