<form class="category-page-faceted-search">
  <div class="category-page-faceted-search-element-container category-page-faceted-search-text-container">
    <label class="category-page-faceted-search-label" for="plant_name">Search By Plant Name</label>
    <input type="text" name="plant_name" id="plant_name" placeholder="Plant Name..." class="category-page-faceted-search-text" />
  </div>
  <div class="category-page-faceted-search-element-container category-page-faceted-search-select-container dropdown-container">
    <label class="category-page-faceted-search-label" for="plant_type">Plant Type</label>
    <div class="category-page-faceted-search-select-wrapper dropdown-wrap">
      <input type="text" class="category-page-faceted-search-select-input dropdown" id="plant_type">
      <span class="category-page-faceted-search-select-toggle-arrow dropdown-trigger" aria-hidden="true" data-trigger="plant_type">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.984 9.984h10.031L11.999 15z"/></svg>
      </span>
      <div class="category-page-faceted-search-select-list dropdown-list">
        <div class="category-page-faceted-search-select-item dropdown-option">Item 1</div>
        <div class="category-page-faceted-search-select-item dropdown-option">Item 2</div>
        <div class="category-page-faceted-search-select-item dropdown-option">Item 3</div>
        <div class="category-page-faceted-search-select-item dropdown-option">Item 4</div>
        <div class="category-page-faceted-search-select-item dropdown-option">Item 5</div>
        <div class="category-page-faceted-search-select-item dropdown-option">Item 6</div>
      </div>
    </div>
  </div>
  <fieldset class="category-page-faceted-search-element-container category-page-faceted-search-filter-container">
    <legend class="category-page-faceted-search-label" aria-label="Sunlight Amount">Sunlight Amount</legend>
    <div class="category-page-faceted-search-filter">
      <input type="checkbox" name="sunlight_amount" id="sunlight_amount_indoor" value="indoor" class="category-page-faceted-search-filter-choice category-page-faceted-search-filter-choice-1" /> <label for="sunlight_amount_indoor" class="category-page-faceted-search-filter-label">Indoor</label>
    </div>
    <div class="category-page-faceted-search-filter">
      <input type="checkbox" name="sunlight_amount" id="sunlight_amount_shade" value="shade" class="category-page-faceted-search-filter-choice category-page-faceted-search-filter-choice-2" /> <label for="sunlight_amount_shade" class="category-page-faceted-search-filter-label"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" role="img" aria-hidden="true" class="category-page-faceted-search-filter-icon"><g fill="none" fill-rule="evenodd"><path d="M9.524 0h1v2.857h-1zM20 9.523v1h-2.857v-1zm-10.476 7.62h1V20h-1zM2.857 9.524v1H0v-1zm13.878-6.932l.707.707-2.02 2.02-.707-.707zm.673 14.142l-.707.708-2.02-2.02.707-.708zm-12.795-2.02l.707.707-2.02 2.02-.708-.707zm.673-10.101l-.707.707L2.56 3.3l.707-.708z" fill="#000" fill-opacity=".95"/><circle cx="10" cy="10" r="5.238" fill="#FFF" stroke="#000" stroke-opacity=".95"/></g></svg>
      Shade
      </label>
    </div>
    <div class="category-page-faceted-search-filter category-page-faceted-search-filter-last-row">
      <input type="checkbox" name="sunlight_amount" id="sunlight_amount_partial" value="partial"  class="category-page-faceted-search-filter-choice  category-page-faceted-search-filter-choice-3" /> <label for="sunlight_amount_partial" class="category-page-faceted-search-filter-label"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" role="img" aria-hidden="true" class="category-page-faceted-search-filter-icon"><g fill="none" fill-rule="evenodd"><g fill="#000" fill-opacity=".95"><path d="M9.524 0h1v2.857h-1zM20 9.523v1h-2.857v-1zm-10.476 7.62h1V20h-1zM2.857 9.524v1H0v-1zm13.878-6.932l.707.707-2.02 2.02-.707-.707zm.673 14.142l-.707.708-2.02-2.02.707-.708zm-12.795-2.02l.707.707-2.02 2.02-.708-.707zm.673-10.101l-.707.707L2.56 3.3l.707-.708z"/><circle cx="10" cy="10" r="5.238" stroke="#000" stroke-opacity=".95"/></g><path fill="#FFF" d="M10 5.238a4.762 4.762 0 1 0 0 9.524V5.238z"/></g></svg> 
      Partial
      </label>
    </div>
    <div class="category-page-faceted-search-filter category-page-faceted-search-filter-last-row">
      <input type="checkbox" name="sunlight_amount" id="sunlight_amount_full" value="full" class="category-page-faceted-search-filter-choice  category-page-faceted-search-filter-choice-4" /> <label for="sunlight_amount_full" class="category-page-faceted-search-filter-label">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" role="img" aria-hidden="true" class="category-page-faceted-search-filter-icon"><g fill-opacity=".95" fill-rule="evenodd"><path d="M9.524 0h1v2.857h-1zM20 9.523v1h-2.857v-1zm-10.476 7.62h1V20h-1zM2.857 9.524v1H0v-1zm13.878-6.932l.707.707-2.02 2.02-.707-.707zm.673 14.142l-.707.708-2.02-2.02.707-.708zm-12.795-2.02l.707.707-2.02 2.02-.708-.707zm.673-10.101l-.707.707L2.56 3.3l.707-.708z"/><circle cx="10" cy="10" r="5.238" stroke="#000" stroke-opacity=".95"/></g></svg> 
      Full
      </label>
    </div>
  </fieldset>
  <div class="category-page-faceted-search-element-container category-page-faceted-search-submit-container">
    <input type="submit" value="Search" class="category-page-faceted-search-submit" />
  </div>
</form>

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
$global-color-primary: #aa318a;
$global-color-white: #fff;
$global-color-black: rgba(0, 0, 0, 0.95);
$global-color-gray-6: rgba(0, 0, 0, 0.65);
$super-wide-desktop: 1279px; // xxlarge
$wide-desktop: 1162px; // xlarge
$narrow-desktop: 1024px; // large
$tablet: 768px; // medium
$max-width-tablet: 640px;
$category-page-faceted-search-highlight-text-color: $global-color-white;
$category-page-faceted-search-highlight-background-color: $global-color-primary;
$category-page-faceted-search-border-color: $global-color-black;
$category-page-faceted-search-select-checkbox-color: $global-color-gray-6;
$category-page-faceted-search-select-checkbox-check-color: $global-color-white;
$category-page-faceted-search-tablet-max-width: 536px;
$category-page-faceted-search-narrow-desktop-one-line: false;
$category-page-faceted-search-narrow-desktop-max-width: 536px;
$category-page-faceted-search-wide-desktop-one-line: true;
$category-page-faceted-search-wide-desktop-max-width: 1100px;
$form-focus-outline-color: #4D90FE;
$global-box-shadow-9: 0 3px 9px 0 rgba(0, 0, 0, 0.15);

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

// Use this to be accessible.
@mixin visually-hidden($on: true) {
  @if ($on) {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  } @else {
    position: static;
    clip: unset;
    width: auto;
    height: auto;
    overflow: visible;
    margin: 0;
  }
}

@mixin type-subtitle() {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

@mixin type-tip() {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
}


// Adds a min-width media query.
// $pixels
@mixin min-width($pixels) {
  @media (min-width: $pixels) {
    @content;
  }
}

// $pixels
@mixin max-width($pixels) {
  @media (max-width: $pixels) {
    @content;
  }
}

// Media queries for defined breakpoint.
@mixin wide-mobile {
  @include min-width($wide-mobile) {
    @content;
  }
}

@mixin tablet {
  @include min-width($tablet) {
    @content;
  }
}

@mixin narrow-desktop {
  @include min-width($narrow-desktop) {
    @content;
  }
}

@mixin wide-desktop {
  @include min-width($wide-desktop) {
    @content;
  }
}

@mixin reset-link($color: $global-color-black, $no-underline: true, $add-underline: false) {
  color: $color;
  @if ($no-underline) {
    text-decoration: none;
  }

  &:hover,
  &:visited {
    color: $color;
    @if ($add-underline) {
      text-decoration: underline;
    } @else if ($no-underline) {
      text-decoration: none;
    }
  }
}

@mixin type-button() {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@mixin button-base() {
  @include type-button();
  padding: 11px 32px;
  display: inline-block;
  text-align: center;
  border-width: 0;
  border-radius: 0;
}

@mixin button-text() {
  @include button-base;
}

@mixin button-contained {
  @include button-base;
  background: $global-color-black;
  color: $global-color-white;
}

@mixin form-focus-style($selector: '&:focus') {
  #{$selector} {
    outline: none; 
    border-color: $form-focus-outline-color;
    -webkit-box-shadow: 0px 0px 5px $form-focus-outline-color;
    box-shadow: 0px 0px 5px  $form-focus-outline-color;
  }
}

@mixin input($borderColor: $global-color-black) {
  border: 1px solid $borderColor;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border-radius: 0;
  background: $global-color-white;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  @include type-tip;
  @include form-focus-style;
}

html, html body {
  height: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dropdown {
  @include input($category-page-faceted-search-border-color);
  
  &-trigger {
    position: absolute;
    top: 0;
    right: 0;
  }
  
  &-wrap {
    position: relative;
  }
  
  &-option {
    @include form-focus-style($selector: '&.active');
  }
  
  &-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 250px;
    padding: 8px 12px;
    text-align: left;
    max-height: 250px;
    overflow-y: auto;
    background: $global-color-white;
    box-shadow: $global-box-shadow-9;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.42, 0, 0.38, 1.34);
    
    &.open {
      visibility: visible;
      opacity: 1;
      z-index: 1;
      pointer-events: auto;
    }
  }
}

.category-page-faceted-search {
  text-align: center;
  
  &-label {
    @include type-subtitle;
    display: block;
    margin-bottom: 8px;
  }
  
  &-select-container,
  &-filter-container {
    margin: 0;
    padding: 0;
    border-width: 0;
  }
  
  &-element-container:not(:first-child) {
    margin-top: 24px;
  }

  &-text,
  &-select {
    @include input($category-page-faceted-search-border-color);
  }
  
  &-select {
    &-container {
      .category-page-faceted-search-label {
        margin: 0 auto 8px;
      }
    }
    
    &-input {
      min-width: 230px;
      padding-right: 40px;
    }
    
    &-toggle-arrow {
      top: 12px;
      right: 10px;
    }
    
    &-item {
      position: relative;
      height: 48px;
      @include type-tip;
      display: flex;
      align-items: center;
      padding: 0 0 0 40px;

      &::before, &::after {
        content: '';
        position: absolute;
        display: block;
        width: 16px;
        height: 16px;
        top: 16px;
        left: 8px;
      }

      &::before {
        box-shadow:  0px 0px 0px 2px $category-page-faceted-search-select-checkbox-color;
        border-radius: 1px;
      }
      
      &.selected {
        &:before {
          background: $category-page-faceted-search-select-checkbox-color;
        }

        &:after {
          width: 6px;
          height: 12px;
          border: solid $category-page-faceted-search-select-checkbox-check-color;
          border-width: 0 2px 2px 0;
          transform: rotate(45deg);
          left: 13px;
        }
      }
    }
  }
  
  &-filter {
    @include type-tip;
    
    &-container {
      .category-page-faceted-search {
        &-label {
          display: block;
          margin: 0 auto 8px;
        }

        &-filter {
          display: block;
          float: left;
          width: calc(50% - 2px);
          border-top: 1px solid $category-page-faceted-search-border-color;
          border-left: 1px solid $category-page-faceted-search-border-color;
          border-right: 1px solid $category-page-faceted-search-border-color;
          position: relative;

          &:nth-of-type(odd) {
            border-right-width: 0;
          }

          &-last-row {
            border-bottom: 1px solid $category-page-faceted-search-border-color;
          }

          &-label {
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          &-choice {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            @include form-focus-style($selector: '&:focus + .category-page-faceted-search-filter-label');

            &:checked + .category-page-faceted-search-filter-label {
              color: $category-page-faceted-search-highlight-text-color;
              background: $category-page-faceted-search-highlight-background-color;
            }
          }
        }
      }

    }
  }
  
  
  
  &-submit {
    @include button-contained;
    padding: 0;
    height: 48px;
    width: 108px;
  }
  
  @include tablet {
    max-width: $category-page-faceted-search-tablet-max-width;
    display: flex;
    text-align: left;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    
    &-text-container,
    &-select-container {
      margin-bottom: 24px;
    }

    &-element-container:not(:first-of-type) {
      margin-top: 0;
    }
    
    &-select-container,
    &-filter-container {
      .category-page-faceted-search-label {
        margin: 0 0 8px 0;
      }
    }
    
    &-filter {
      border-bottom: 1px solid $category-page-faceted-search-border-color;
          
      &:not(:last-of-type) {
        border-right-width: 0;
      }
      
      &-label {
        padding: 0 16px;
      }
      
      &-container {
        .category-page-faceted-search {
          &-filter {
            width: auto;
          }
        }
      }
    }
  }
  
  @include narrow-desktop {
    max-width: $category-page-faceted-search-narrow-desktop-max-width;
    
    @if $category-page-faceted-search-narrow-desktop-one-line {
      &-text-container,
      &-select-container {
        margin-bottom: 0;
      }

      &-text-container {
        padding-right: 24px;
      }

      &-select-container {
        padding-left: 0;
      }

      &-text-container,
      &-select-container,
      &-filter-container {
        padding-right: 24px;
      }
    }
  }
  
  @include wide-desktop {
    max-width: $category-page-faceted-search-wide-desktop-max-width;
    
    @if $category-page-faceted-search-wide-desktop-one-line {
      &-text-container,
      &-select-container {
        margin-bottom: 0;
      }

      &-text-container {
        padding-right: 24px;
      }

      &-select-container {
        padding-left: 0;
      }

      &-text-container,
      &-select-container,
      &-filter-container {
        padding-right: 24px;
      }
    }
  }
}



// Brand specific styles.
.category-page-faceted-search {
  &-filter {
    &-icon {
      margin-right: 4px;
    }
    
    &-container {
      .category-page-faceted-search-filter {
        &-choice {
          &-2 {
            &:checked + .category-page-faceted-search-filter-label {
              path {
                fill: $category-page-faceted-search-highlight-text-color;
              }
              circle {
                fill: transparent;
                stroke: $category-page-faceted-search-highlight-text-color;
              }
            }
          }
          &-3 {
            &:checked + .category-page-faceted-search-filter-label {
              path {
                fill: $category-page-faceted-search-highlight-background-color;
              }
              g g {
                path {
                  fill: $category-page-faceted-search-highlight-text-color;
                }
                circle {
                  fill: $category-page-faceted-search-highlight-text-color;
                  stroke: $category-page-faceted-search-highlight-text-color;
                }
              }
            }
          }
          &-4 {
            &:checked + .category-page-faceted-search-filter-label {
              path, circle {
                fill: $category-page-faceted-search-highlight-text-color;
                stroke: $category-page-faceted-search-highlight-text-color;
              }
            }
          }
          
        }
      }
    }
  }
  
}

//import Combobo from 'combobo';

const searchSelectCombobo = new Combobo({
  input: '.dropdown',
  list: '.dropdown-list',
  options: '.dropdown-option', // qualified within `list`
  groups: null, // qualified within `list`
  openClass: 'open',
  activeClass: 'active',
  selectedClass: 'selected',
  useLiveRegion: true,
  multiselect: true,
  noResultsText: null,
  selectionValue: (selecteds) => selecteds.map((s) => s.innerText.trim()).join(', '),
  announcement: {
    count: (n) => `${n} options available`,
    selected: 'Selected.'
  },
  filter: 'contains' // 'starts-with', 'equals', or funk
});

$('.category-page-faceted-search-select-toggle-arrow').on('click', (event) => {
  event.stopPropagation();
  searchSelectCombobo.isOpen ? searchSelectCombobo.closeList() : searchSelectCombobo.openList();
});



//import $ from 'jquery';

// const dropdownOptions = {
//   dropdownClass: '.dropdown',
//   toggleClass: '.dropdown-toggle',
//   toggleLabelClass: '.dropdown-toggle-label',
//   openClass: 'dropdown-open',
//   wrapperClass: '.dropdown-wrapper',
//   checkboxClass: '.dropdown-checkbox',
//   checkboxAllClass: '.dropdown-checkbox-all',
//   checkboxAllLabelClass: '.dropdown-checkbox-all-label',
//   checkboxLabelClass: '.dropdown-checkbox-label',
// };

// class Dropdown {
//   constructor($context, options) {
//     this.$body = $(document.body);
//     if (options) {
//       this.options = $.extend(dropdownOptions, options);
//     } else {
//       this.options = dropdownOptions;
//     }
//     this.$context = $context;
//     this.$toggle = $context.find(this.options.toggleClass);
//     this.$toggleLabel = $context.find(this.options.toggleLabelClass);
//     this.$checkboxAll = $context.find(this.options.checkboxAllClass);
//     this.$checkboxAllLabel = $context.find(this.options.checkboxAllLabelClass);
//     this.$checkboxes = $context.find(this.options.checkboxClass);
//   }
  
//   updateToggle() {
//     const selectedLabels = [];
//     this.$checkboxes.each((index, element) => {
//       if ($(element).is(':checked')) {
//         selectedLabels.push($(element).siblings(this.options.checkboxLabelClass).text());
//       }
//     });
//     this.$toggleLabel.text(selectedLabels.join(', '));
//   }
  
//   render() {
//     // When dropdown is open, clicking anywhere besides the dropdown
//     // section will close the dropdown.
//     this.$body.on('click.dropdown', (event) => {
//       const $dropdownParent = $(event.target).closest(this.options.dropdownClass);
//       if (!$dropdownParent.length) {
//         this.$context.removeClass(this.options.openClass);
//       }
//     });
    
//     // When escape is pressed, close open dropdown.
//     // @TODO below should probably use radio.
//     $(document).on('keyup', (event) => {
//       if (event.keyCode == 27) {
//         this.$context.removeClass(this.options.openClass);
//       }
//     });
    
//     this.$checkboxes.on('change', (event) => {
//       this.updateToggle();
//     });
    
//     this.$checkboxAll.on('click', (event) => {
//       this.$checkboxes.prop('checked', event.target.checked);
//       if (event.target.checked) {
//         this.$toggleLabel.text(this.$checkboxAllLabel.text());
//       } else {
//         this.$toggleLabel.text('');
//       }
//     });
    
//     this.$toggle.on('click', (event) => {
//       event.preventDefault();
//       const $parent = $(event.target).parents(this.options.dropdownClass);
//       if ($parent.hasClass(this.options.openClass)) {
//         $parent.removeClass(this.options.openClass);
//       } else {
//         $parent.addClass(this.options.openClass);
//       }
//     });
//   }
// }

// function renderDropdowns() {
//   return $('.dropdown').each(function iterateGalleries() {
//     return new Dropdown($(this)).render();
//   });
// }
// renderDropdowns();