<form class="expanding-search-form">
  <div class="search-dropdown">
    <button class="button dropdown-toggle" type="button">
      <span class="toggle-active">Everything</span>
      <span class="ion-arrow-down-b"></span>
    </button>
    <ul class="dropdown-menu">
      <li class="menu-active"><a href="#">Everything</a></li>
      <li><a href="#">People</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>
  <input class="search-input" id="global-search" type="search" placeholder="Search">
  <label class="search-label" for="global-search">
        <span class="sr-only">Global Search</span>
    </label>
  <button class="button search-button" type="button">
        <span class="icon ion-search">
            <span class="sr-only">Search</span>
        </span>
    </button>
</form>

$brand-color: #2299ff;
$input-height: 34px;
$border-radius: 3px;
$border-color: #999;
$transition: 250ms all ease-in-out;

*,
*:before,
*:after {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

body,
html {
  width: 100%;
  height: 100%;
}

.expanding-search-form {
  position: relative;
  top: 40%;
  left: 35%;
  display: inline-block;
  height: $input-height;
  width: auto;

  .search-label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid $border-color;
    z-index: 2;
    cursor: pointer;
    border-radius: $border-radius;
    transition: $transition;
  }
  
  .search-input {
    position: relative;
    top: 0;
    display: inline-block;
    height: $input-height;
    width: 150px;
    float: left;
    border: 0;
    font-size: 16px;
    z-index: 2;
    box-shadow: none;
    border-radius: 0;
    transition: $transition;

    &:focus {
      width: 300px;
      outline: none;

      + .search-label {
        border-color: $brand-color;
      }
    }
  }
  
  .button {
    position: relative;
    top: 0;
    display: inline-block;
    float: left;
    padding: 0 10px;
    color: #fff;
    border: 1px solid transparent;
    background-color: $brand-color;
    text-align: center;
    transition: $transition;
    
    &:hover {
      background-color: darken($brand-color, 10%);
    }
  }

  .search-dropdown {
    position: relative;
    top: 0;
    display: inline-block;
    float: left;
    padding: 3px;

    &.open .dropdown-menu {
      display: block;
    }
  }

  .dropdown-toggle {
    height: $input-height - 6px;
    font-size: 12px;
    line-height: $input-height - 6px;
    border-radius: $border-radius - 1px;
    z-index: 3;
  }

  .dropdown-menu {
    position: absolute;
    top: calc(100% - 1px);
    display: none;
    margin: 0;
    padding: 5px;
    list-style: none;
    background-color: #fff;
    border: 1px solid $border-color;
    border-bottom-right-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
    z-index: 3;
    transition: $transition;

    > li > a {
      display: block;
      padding: 4px 12px;
      color: $brand-color;
      font-size: 14px;
      line-height: 20px;
      text-decoration: none;
      border-radius: $border-radius - 1;
      transition: $transition;

      &:hover {
        color: #fff;
        background-color: $brand-color;
      }
    }

    > .menu-active {
      display: none;
    }
  }
  
  .search-button {
    height: $input-height;
    z-index: 3;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;

    .icon {
      font-size: 20px;
    }
  }
}

$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).closest('.search-dropdown').toggleClass('open');
});

$('.dropdown-menu > li > a').click(function(e) {
  e.preventDefault();
  var clicked = $(this);
  clicked.closest('.dropdown-menu').find('.menu-active').removeClass('menu-active');
  clicked.parent('li').addClass('menu-active');
  clicked.closest('.search-dropdown').find('.toggle-active').html(clicked.html());
});

$(document).click(function() {
  $('.search-dropdown.open').removeClass('open');
});