@use '../tools/themes';

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

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

  &__item {
    @include themes.theme('color', 'sidebar-filter--foreground');
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px;
    text-align: start;
    transition: color 0.25s;
    display: flex;
    align-items: center;
    width: 100%;

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

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

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

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

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

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

      &,
      &:focus-visible,
      &:hover {
        @include themes.theme('color', 'sidebar-filter--foreground--header');
      }
    }

    .name {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-width: 100px;
    }

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

    .size {
      margin-left: auto;
    }
  }

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