.filter-chip {
    padding: 0 0.25rem;
    border-radius: 2px;
    margin: 0.25rem 0.5rem 0.25rem 0;

    .theme-dark & {
        background: $color-bg-2;
        border-color: $color-border;
        color: $color-text-1;
    }
    .theme-light & {
        color: $color-light-text-1;
        background: transparent;
        border-color: $color-light-border-2;
    }

    &:hover:not(&--selected) {
        .theme-dark & {
            background: $color-bg-3;
            border-color: $color-bg-3;
            color: white;
        }
        .theme-light & {
            background: $color-light-bg-4;
            border-color: $color-light-bg-4;
            color: $color-light-text-6;
        }
    }

    &__count {
        display: inline-block;
        margin-left: 0.25rem;
        padding: 0 0.2rem;

        .theme-light & {
            background: $color-light-bg-2;
            color: $color-light-text-2;
        }

        .theme-dark & {
            background: $color-bg-3;
        }

        &--selected {
            .theme-dark & {
                background: $color-bg-2;
            }
            .theme-light & {
                background: $color-light-bg-1;
            }
        }
    }

    &-repo {
        padding-right: 0;
    }

    &--selected {
        .theme-dark & {
            color: $color-text;
            background: $color-bg-5;
            border-color: $color-bg-5;
        }
        .theme-light & {
            background: $color-light-bg-3;
            border-color: $color-light-border;
        }
    }
}