Добавить css правило display: "none"; при клике вне блока

Задача: Добавить display: "none"; для .costum_search, если пользователь кликает вне . Т.е когда пользователь кликает на .header_search правило css добавляется, когда кликает куда либо вне блока нужно менять "block" на "none". Примитивный вопрос, но я зашел почему то в ступор и статьи на JS.ru мне не помогли ( Помогите решить задачу.

<div class="header_search">
    <form action="" autocomplete="off">
        <input id="search" name="search" type="text" placeholder="What're we looking for ?">
        <input id="search_submit" value="search" type="submit">         
    </form>
    <a class="costum_search" href="https://www.google.com/">Расширенный поиск</a>
</div>

<script>
let btnSearch = document.getElementsByClassName("header_search")[0];
let costumSearch = document.getElementsByClassName("costum_search")[0];
 
btnSearch.onclick = function() {
    costumSearch.style.display = "block";
};
</script>