.search-form {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;

  & label {
    display: none;
  }

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

  & input[type="search"] {
    padding: 14px;
    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);
    }
  }
}