Search bar toggle

// Html markup
    <div class="search-wrap">
      <form class="search-inner" method="get">
        <input class="searchinput" type="search" placeholder="Search..." autocomplete="off">
        <button type="submit" name="button" id="searchbtn"><i class="fas fa-search"></i></button>
      </form>
    </div>

    <a href="" class="searchIcon">
      <i class="fas fa-search"></i>
    </a>

(function ($) {
    "use strict";
   /*==========================================================
     header search wrap
     ======================================================================*/

    if ($(".search-wrap").length > 0) {
        var todg = true;
        $(".searchIcon").on("click", function (e) {
            e.preventDefault();
            if (todg) {
                $(".search-wrap").fadeIn("slow");
                todg = false;
            } else {
                $(".search-wrap").fadeOut("slow");
                todg = true;
            }
        });

        $(document).on('mouseup', function (e) {
            var container = $(".search-inner");

            if (!container.is(e.target) && container.has(e.target).length === 0) {
                $(".search-wrap").fadeOut("slow");
                todg = true;
            }

        });
    }

})(jQuery);

.search-wrap {
    background: rgba(0, 0, 0, 0.8);
    cursor: url(cross-cursor.png), pointer;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    left: 0;
    display: none;
  }

  .search-inner {
    height: 50px;
    width: 50%;
    margin: auto;
    position: absolute;
    top: 24%;
    left: 0;
    right: 0;
    margin: auto; }

  .search-inner input[type="search"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    border-bottom: 2px solid #bdbbbb;
    font-size: 18px;
    color: #fff;
    padding: 10px 27px 18px 10px;
    font-style: italic;
    line-height: 1; }
    .search-inner input[type="search"]::-webkit-input-placeholder {
      color: #fff; }
    .search-inner input[type="search"]:-ms-input-placeholder {
      color: #fff; }
    .search-inner input[type="search"]::-ms-input-placeholder {
      color: #fff; }
    .search-inner input[type="search"]::placeholder {
      color: #fff; }

  .search-inner button {
    position: absolute;
    right: 10px;
    top: 8px;
    background: transparent;
    border: none;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    outline: none; }