.sidebar-filter {
  font-size: 0.85em;
  padding: 30px 0;

  & + .sidebar-filter {
    padding-top: 0;
  }

  &__item {
    color: $sidebar-filter--foreground;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px;
    transition: color 0.25s;

    &:hover {
      color: $sidebar-filter--foreground--hover;

      .icon {
        fill: $sidebar-filter--foreground--hover;
      }
    }

    &.is-active {
      color: $sidebar-filter--foreground--active;
      font-weight: 700;

      .badge {
        background: $sidebar-filter--count--background--active;
      }

      .icon {
        fill: $sidebar-filter--foreground--active;
      }
    }

    .icon {
      display: inline-block;
      fill: $sidebar-filter--foreground;
      height: 14px;
      margin-right: 7px;
      transition: fill 0.25s;
      vertical-align: middle;
      width: auto;
    }
  }

  .badge {
    background: $sidebar-filter--count--background;
    color: $sidebar-filter--count--foreground;
  }
}


.sidebar-filter {

  &__item {

    &--heading {
      cursor: default;
      font-size: 0.8em;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;

      &,
      &:hover {
        color: $sidebar-filter--foreground--header;
      }
    }
  }
}
