////////////////////
// Filter Containers
////////////////////

.filter-bar
  display: block
  margin-bottom: 1em
  +clearfix

////////////////////
// Filter Components
////////////////////

$arrow-dimensions: $input-padding * 3

.filter
  $filter: &
  display: inline-block
  float: left
  margin-right: 0.75em
  padding-top: ($rhythm-vertical * 0.75)
  width: 100%
  @media #{$large-up}
    width: auto

  // .filter__label
  &__label
    background: $color-accent
    color: dynamic-text-lightness($color-function)
    cursor: pointer
    float: left
    padding: $input-padding $rhythm-horizontal
    position: relative
    text-transform: capitalize
    width: 100%
    z-index: 4
    @media #{$large-up}
      width: auto
      &:after
        border:
          bottom: $arrow-dimensions solid transparent
          left: $arrow-dimensions solid $color-accent
          top: $arrow-dimensions solid transparent
        content: ""
        height: 0
        position: absolute
        left: 100%
        top: 0
        width: 0

  // .filter__input
  &__input
    float: left
    margin: 0
    padding: $input-padding $rhythm-horizontal
    @media #{$large-up}
      padding: $input-padding $input-padding $input-padding ($arrow-dimensions + ($input-padding * 2))
      width: auto

    // .filter__input--checkbox
    &--checkbox
      opacity: 0
      position: absolute
      left: -9999px

  // .filter__select
  &__select
    $svg-color: rgba(dynamic-text-lightness($color-primary), 0.99)
    background:
      color: lighten($color-accent, 10%)
      image: url('data:image/svg+xml;utf8,<svg class="svg chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="-2275.4 3060.9 12.3 6.9" enable-background="new -2275.4 3060.9 12.3 6.9"><path fill="#{$svg-color}" d="M-2263.9 3060.9l-5.3 5.5-5.4-5.5-.8.8 6.2 6.1 6.1-6.1-.8-.8z"/></svg>')
      position: right .5em center
      size: 1em
      repeat: no-repeat
    color: dynamic-text-lightness($color-primary)
    margin: 0
    padding: $input-padding 2em $input-padding $rhythm-horizontal
    text-transform: capitalize
    @media #{$large-up}
      width: auto
      &:first-of-type
        padding:
          left: ($arrow-dimensions + ($input-padding * 2))
    &:active, &:focus, &:hover
      background-color: lighten($color-accent, 10%)


  // .filter__wrapper
  &__wrapper
    display: inline-block
    float: left
    position: relative
    width: 100%
    &:last-child
      #{$filter}__select
        $svg-color: rgba($color-primary, 0.99)
        background:
          color: $color-secondary
          image: url('data:image/svg+xml;utf8,<svg class="svg chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="-2275.4 3060.9 12.3 6.9" enable-background="new -2275.4 3060.9 12.3 6.9"><path fill="#{$svg-color}" d="M-2263.9 3060.9l-5.3 5.5-5.4-5.5-.8.8 6.2 6.1 6.1-6.1-.8-.8z"/></svg>')
        color: $color-primary
    @media #{$large-up}
      width: auto
      // .filter__wrapper--select
      &--select
        &:not(:last-child)
          &:after
            border:
              bottom: $arrow-dimensions solid transparent
              left: $arrow-dimensions solid lighten($color-accent, 10%)
              top: $arrow-dimensions solid transparent
            content: ""
            height: 0
            position: absolute
            right: -$arrow-dimensions
            top: 0
            width: 0


    // .filter__wrapper--checkbox
    &--checkbox
      background:
        color: $color-secondary
      border-right: $border-width solid $background-secondary
      cursor: pointer
      padding: $input-padding $input-padding $input-padding $arrow-dimensions
      @media #{$large-up}
        padding: $input-padding $input-padding $input-padding ($arrow-dimensions + ($input-padding * 2))
      &:active, &:focus, &:hover
        background:
          color: darken($color-secondary, 5%)
      &:after
        content: asset-url('check.svg')
        display: inline-block
        height: 1em
        line-height: 1.6
        opacity: 0
        padding: 0 $input-padding
        width: 1em
      & ~ &
        padding: $input-padding $input-padding $input-padding $arrow-dimensions
      .filter__input--checkbox:checked + &
        &:after
          opacity: 1
      &:last-child
        border-right: none