.container.landing-container
  .columns.is-mobile.box.search-box
    .column.is-4.is-paddingless
      %form.search-block
        %label.search-label.label
          %span Where
        %input.search-input.home-input{placeholder: "Address, City, State", type: "/search", value: ""}

    .column.is-3.is-paddingless
      %form.price-block
        %label.price-label.label
          %span Rent Range
        %a{href: "#", title: "Rent Range", class: "button"}
          %span Rent Range
        .dropdown-container
          .dropdown
            .range-container
              .left-input
                %input.minRentInput.active{:maxlength => "6", placeholder: "Min Rent", type: "tel"}
              .right-input
                %input.maxRentInput{:maxlength => "6", placeholder: "Max Rent", type: "tel"}
            %ul.min-options
              %li No Min
              %li $500
              %li $700
              %li $900
              %li $1100
              %li $1300
              %li $1500
            %ul.max-options
              %li $1100
              %li $1300
              %li $1500
              %li $1700
              %li $1900
              %li $2100
              %li No Max
            
              
    .column.is-3.is-paddingless
      .price-block
        %label.price-label.label
          %span Extra's
        %a{href: "#", title: "Extra's", class: "button"}
          %span Beds x Baths
        .dropdown-container
          .dropdown
            .options-container
              %p Beds
              %div{class: "checkbox"}
                %label{for: "allBed"}
                  %input#allBeds{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                All Beds
              %div{class: "checkbox"}
                %label{for: "studioBed"}
                  %input#studioBed{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                Studio
              %div{class: "checkbox"}
                %label{for: "oneBed"}
                  %input#oneBed{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                1 Bed
              %div{class: "checkbox"}
                %label{for: "twoBed"}
                  %input#twoBed{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                2 Beds
              %div{class: "checkbox"}
                %label{for: "threeBed"}
                  %input#threeBed{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                3 Beds
              %div{class: "checkbox"}
                %label{for: "maxBeds"}
                  %input#maxBeds{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                4+ Beds
            .options-container
              %p Baths
              %div{class: "checkbox"}
                %label{for: "allBath"}
                  %input#allBath{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                All Baths
              %div{class: "checkbox"}
                %label{for: "oneBath"}
                  %input#oneBath{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                1+ Bath
              %div{class: "checkbox"}
                %label{for: "twoBath"}
                  %input#twoBath{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                2+ Bath
              %div{class: "checkbox"}
                %label{for: "threeBath"}
                  %input#threeBath{type: "checkbox"}
                  %span{class: "checkbox-material"}
                    %span{class: "check"}
                3+ Baths
    .column.is-2.is-paddingless
      %a.button.is-primary.is-large.search-button Search

$primary-color: #009688;

.landing-container {
  padding: 50px;
  .search-box {
    height: 80px;
    padding: 10px;
  }
}

.search-block, .price-block, .extras-block {
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: -10px;
  border-right: 2px solid rgba(10,10,10,.1);
  background: #fff;
  transition: all 0.3s ease;
  &.focus {
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  }
}

.price-block {
  .button {
    display: flex;
    align-items: center;
    outline: none;
    border: 1px solid #b1b1b1;
    text-align: left;
    width: 100%;
    height: 100%;
    font-size: 1em;
    margin-right: 4px;
    color: #4c4c4c;
    padding: 0 .825em;
    z-index: 0;
    border-radius: 0px;
    border: 0px;
    span {
      position: absolute;
      top: 40px;
      left: 10px;
      padding-bottom:5px;
      font-size: 1.5em;
      background: none;
      color: #a9a9a9;
      width: 90%;
      height: 30px;
      border: none;
      appearance: none;
      outline: none;
    }
  }
  .dropdown-container { 
    padding-bottom: 0;
    width: 100%;
    border-radius: 0;
    border-top: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    font-size: 14px;
    padding: 0;
    background-color: #fff;
    box-shadow: rgba(0,0,0,.172549) 0 6px 12px 0;
    visibility: hidden;
    &.is-open{
      visibility: visible;
    }
    .dropdown {
      display: inline-block;
      margin: 0;
      border-top: 1px solid #cccccc;
      width: 100%;
      .range-container {
        height: 60px;
        margin: 20px 0 10px;
        border-bottom: 1px solid #ccc;
        .left-input{
          position: relative;
          padding-left: 15px;
          padding-right: 15px;
          float: left;
          width: 50%;
          z-index: 11;
          input { 
            width: 100%;
            max-width: 100% !important;
            line-height: 26px;
            height: 40px;
            padding-left: 6px;
            background-color: #fff;
            text-align: left;
            border: solid 1px #ccc;
            outline-width: 1px;
            outline-color: #009688;
          }
        }
        .right-input{
          position: relative;
          padding-left: 15px;
          padding-right: 15px;
          float: left;
          width: 50%;
          z-index: 11;
          input {
            width: 100%;
            max-width: 100%!important;
            line-height: 26px;
            height: 40px;
            padding-left: 6px;
            background-color: #fff;
            text-align: left;
            border: solid 1px #ccc;
            outline-width: 1px;
            outline-color: #009688;
          }
        }
        &:before {
          content: "-";
          color: #ccc;
          position: absolute;
          text-align: center;
          width: 100%;
          font-size: 2em;
          left: 0;
          z-index: 10;
        }
      }
      .options-container {
        width: 100%;
        margin: 0px;
        padding: 10px 15px;
        border-bottom: 1px solid #ccc;
        p{
          font-weight: bold;
        }
      }
      ul {
        min-height: 245px;
        list-style: none;
        padding-left: 0;
        margin: 0;
        background-color: #fff;
        li {
          padding-left: 15px;
          height: 35px;
          line-height: 35px;
          cursor: pointer;
          &:hover {
            background: rgba(0,0,0,.2)
          }
        }
        &.max-options li {
          padding-right: 15px;
          text-align: right;
        }
      }
    }
  }
}

.search-label, .price-label {
  position: absolute;
  top: 15px;
  left: 10px;
  color: #5a6674;
  z-index: 999;
}

.search-input {
  position: absolute;
  top: 40px;
  left: 10px;
  padding-bottom:5px;
  font-size: 1.5em;
  background: none;
  color: #5a6674;
  width: 90%;
  height: 30px;
  border: none;
  appearance: none;
  outline: none;
  
  &::-webkit-search-cancel-button {
    appearance: none;
  }
  &:focus {
    border-bottom: 1px solid $primary-color;
  }
}

.landing-container .search-box {
  height: 80px;
  padding: 10px 0 10px 10px;
  .search-button{
    width: 100%;
    height: 80px;
    margin-top: -10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

.checkbox input[type="checkbox"]{ margin-left: 0px;}
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.checkbox input[type=checkbox], label input[type=checkbox] {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none;
}
.checkbox .checkbox-material .check {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0,0,0, .54);
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-material .check {
    color: $primary-color;
    padding: 1px 0 0px 1px;;
}
.checkbox .checkbox-material{
    vertical-align: middle;
    position: relative;
    top: 3px;
    margin-right: 5px;
}
.checkbox input[type=checkbox]:checked ~ .checkbox-material .check:before {
    color: $primary-color;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00c";
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

$(".price-block a").on("click", function(){
  $('.price-block').find('.dropdown-container').toggleClass('is-open');
});