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

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

  &__item {
    @include theme('color', 'sidebar-filter--foreground');
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px;
    transition: color 0.25s;

    &:hover {
      @include theme('color', 'sidebar-filter--foreground--hover');

      .icon {
        @include theme('fill', 'sidebar-filter--foreground--hover');
      }
    }

    &.is-active {
      @include theme('color', 'sidebar-filter--foreground--active');
      font-weight: 700;

      .badge {
        @include theme('background', 'sidebar-filter--count--background--active');
        @include theme('color', 'sidebar-filter--count--foreground--active');
      }

      .icon {
        @include theme('fill', 'sidebar-filter--foreground--active');
      }
    }

    .icon {
      display: inline-block;
      @include theme('fill', 'sidebar-filter--foreground');
      height: 14px;
      margin-right: 7px;
      transition: fill 0.25s;
      vertical-align: middle;
      width: auto;
    }
  }

  .badge {
    @include theme('background', 'sidebar-filter--count--background');
    @include theme('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 {
        @include theme('color', 'sidebar-filter--foreground--header');
      }
    }
  }
}
