.filter {
  position: relative;
  min-height: $adl-filter-min-height;
  border-bottom: $adl-border-grey-lightest-big;

  // Is open
  &.open {
    .options-list {
      display: initial;
    }
    .option {
      display: flex;
      &.option-integer {
        @include media-breakpoint-down(md) {
          flex-direction: column;
        }
      }
    }
    .title:after {
      content: $fa-var-caret-up;
    }
  }
  // Has one or more options selected
  &.filter-marked {
    .title:after {
      content: $fa-var-filter !important;
      color: $adl-coral;
    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    padding: $adl-filter-padding;
    background-color: $grey-dark--background-color;
    color: $grey-dark--font-color;
    font-size: 1.2rem;

    &:after {
      content: $fa-var-caret-down;
      font: 1.75rem "FontAwesome";
    }
    &:hover {
      background-color: darken($adl-grey-dark, 7.5%);
      cursor: pointer;
    }
  }

  .options-list {
    display: none;
  }

  .string-options {
    max-height: 60vh;
    overflow-y: auto;
  }

  .option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $adl-grey-darkest;
    padding: $adl-filter-padding;
    border-bottom: 1px solid $adl-grey-light;
    color: $adl-offwhite;
    text-align: left;

    .spacer {
      flex-grow: 1;
    }

    &:hover {
      background-color: darken($adl-grey-darkest, 7.5%);
      cursor: pointer;
    }

    > input[type="checkbox"] {
      margin-right: 4px;
    }

    &.show-more,
    &.show-less,
    &.apply {
      justify-content: space-around;
      font-size: 0.9rem;
    }

    &.apply:hover {
      cursor: pointer;
    }

    &.option-integer {
      display: flex;

      input {
        border-radius: 0;
        @include media-breakpoint-up(lg) {
          width: 50%;
        }
      }

      input:first-child {
        margin-bottom: 3px;
        @include media-breakpoint-up(lg) {
          margin-bottom: 0;
          margin-right: 3px;
        }
      }

      @include media-breakpoint-down(md) {
        flex-direction: column;
      }
    }

    &.option-integer:hover,
    &.option-boolean:hover {
      background-color: $adl-grey-darkest;
      cursor: default;
    }
  }
  &-searchbar {
    width: 100%;
    padding: 0 4px;
    border-radius: 0px;
  }
}

// Don't suggest that the always-open filters can be collapsed
.filter.always-open {
  .title {
    &:after {
      content: "";
    }
    &:hover {
      background-color: $adl-grey-dark;
      cursor: default;
    }
  }
}

#filter-more {
  display: flex;
  justify-content: center;
  height: 30px;
  background-color: $adl-coral;
  color: #ffffff;

  &:after {
    content: "\f141";
    font: 2.5rem "FontAwesome";
  }
  &:hover {
    cursor: pointer;
    background-color: darken($adl-coral, 7.5%);
  }
}
