.filters-wrapper {
  background-color: $blue-cthru;
  margin-left: 0;
  padding: $base-padding;
  width: 100%;
  z-index: 3000;


  @include respond-to(medium-up) {
    background-color: $white;
    border-bottom-left-radius: $base-border-radius;
    border-bottom-right-radius: $base-border-radius;
    padding-left: 0;
    width: initial;
  }

  select {
    border: 0;
    height: 50px;
  }
}

@include respond-to(medium-up) {
  .filters-wrapper[aria-expanded=false] {
    border-bottom: 2px solid lighten($gray-light, 5%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.filters-wrapper[aria-expanded=true] {
  background-color: $blue-cthru !important;
  height: 100%;
  overflow-y: auto;
  padding-left: $base-padding;

  @include respond-to(medium-up) {
    height: inherit;
    overflow-y: initial;
  }
}

.filters-last {
  @include respond-to(medium-up) {
    margin-bottom: $base-padding-large;
  }
}

.filters-heading {
  display: none;
  margin-bottom: $base-padding;

  @include respond-to(medium-up) {
    display: inline-block;
    width: 65%;
  }

  h3,
  .h3 {
    margin-bottom: 0;
  }

  p {
    @include heading(para-md);
    color: $blue-dark;
    font-weight: $weight-book;
  }
}

.filters {
  color: $blue-dark;

  label {
    @include heading(para-md);
    color: $blue-dark;
    font-weight: $weight-bold;
    margin-bottom: 6px;
  }
}

#commodity-group-selector,
#commodity-selector,
#region-selector,
#product-selector,
#unit-selector {
  border: none;
}

[aria-hidden=true] {
  display: none;
}

// Crazy checkbox magic
// http://cssdeck.com/labs/css-checkbox-styles
// for guide on firefox compatibility
.unit-filter {
  position: relative;

  input {
    visibility: hidden;
  }
}

.unit-selector {
  position: absolute;

  &:first-of-type {
    left: 0;
    top: 0;
  }

  &:last-of-type {
    right: 0;
    top: 0;
  }
}

.unit-selector,
.unit-selector-label {
  @include appearance(none);
  background: $white;
  background-color: $white;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 50px;
  margin: 0;
  padding: $base-padding-lite;
  padding-top: ($base-padding * 0.7);
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  vertical-align: middle;
  width: 50%;

  &:first-of-type {
    @include heading(para-md);
    border-bottom-right-radius: 0;
    border-right: 1px solid $blue;
    border-top-right-radius: 0;
    font-weight: $weight-bold;

    &:checked + label {
      background: $blue;
      color: $white;
    }
  }

  &:last-of-type {
    @include heading(para-md);
    @include omega();
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    font-weight: $weight-bold;

    &:checked + label {
      background: $blue;
      color: $white;
    }
  }

  &:hover,
  &:focus {
    background: $blue-light;
  }
}

.filter-description {
  display: none;
  font-weight: $weight-light;
  float: left;
  letter-spacing: -0.5px;

  @include respond-to(medium-up) {
    display: inline-block;
    float: left;
    width: 65%;
  }

  &.filter-description_open {
    display: block;
    float: none;

    @include respond-to(medium-up) {
      display: none;
    }
  }

  .filter-part {
    color: inherit;
    font-weight: $weight-book;
    text-decoration: none;
  }
}

.filter-description_wrapper {
  display: block;
  margin-bottom: $base-padding-extra;
  margin-top: $base-padding;
  padding-left: $base-padding;
  padding-right: $base-padding;

  @include respond-to(medium-up) {
    display: none;
  }


}

.filter-search {
  border-color: $gray-darkest;
  padding-left: $base-padding-lite;
  padding-right: $base-padding-lite;

  @include respond-to(medium-up) {
    width: 50%;
  }

  &.filter-search_embed {
    display: none;

    @include respond-to(medium-up) {
      display: block;
      margin-bottom: ($base-padding-lite * 2);
      width: 100%;
    }
  }
}

.filter-search_above {
  display: block;

  @include respond-to(medium-up) {
    display: none;
  }
}
