// COMPONENT: Filters: provides a set of controls that can filter results
.filters
  background-color: $background
  bottom: 0
  box-shadow: $shadow-level-2
  display: none
  left: 0
  overflow: auto
  padding: $gutter ($gutter * 2)
  position: fixed
  right: 0
  top: 0
  z-index: $z-index-modal

  +larger-than-small-screen
    left: auto
    width: $gutter * 30


  .filters-close-button
    cursor: pointer
    display: block
    font-size: $h2-size
    padding: $gutter
    position: absolute
    right: 0
    top: 0

  .filter
    display: block
    margin: 0
    padding: $gutter 0

    .filter-title
      display: block
      font-weight: bold
      margin: 0 0 $gutter 0

.filter-remove
  border-radius: $border-radius
  display: inline-block
  font-size: $font-size-control
  padding: $border-radius
  text-decoration: none

  &:hover
    background-color: $input
    border-color: $input

  + .filter-remove
    margin-left: $input-padding

body.filters-toggled
  overflow: hidden

  .filters
    animation: nav-primary-in 150ms $swift-in
    display: block

    +larger-than-small-screen
      animation: filter-in 150ms $swift-in

  .filter-toggle::before
    background-color: rgba($text, 0.5)
    bottom: 0
    content: ""
    cursor: default
    left: 0
    position: fixed
    right: 0
    top: 0
    z-index: $z-index-modal - 1

  // TODO: Figure out how to fix this with fixed position stuff
  // nav,
  // main > *:not(.filters),
  // footer
  //   filter: blur(10px)

@keyframes filter-in
  0%
    opacity: 0
    transform: translateX(100%)

  100%
    opacity: 1
    transform: translateX(0)
