.zm-filter-toggle {
    --active-color: var(--color-subtle);
    --active-text-color: var(--color-text);
    --active-border-color: var(--color-palette-black-40);
    --border-color: transparent;
    --badge-color: var(--color-muted);
    --badge-text-color: var(--color-palette-white);

    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    font-weight: 500;
    border: 1px solid var(--border-color);
    background-color: var(--color-palette-white);

    &:hover {
        background-color: var(--color-subtle);
        border-color: var(--active-border-color);
    }

    &:has(input[type="checkbox"]):focus,
    &:has(input[type="checkbox"]):focus-within {
        box-shadow: 0 0 0 2px var(--color-palette-white), 0 0 0 4px var(--color-tab-highlight);
    }

    &.zm-is-active {
        --active-border-color: var(--color-palette-black-40);
        --border-color: var(--color-palette-black-40);
        --badge-color: var(--color-palette-info-50);
        --badge-color-dark: '';
        --badge-text-color: var(--color-palette-black);

        text-shadow: 0 0 25px var(--badge-color-dark);
        background: var(--active-color);
        color: var(--active-text-color);

        &:hover {
            --active-border-color: var(--color-palette-black-40);
        }
    }

    &.zm-is-active.zm--info {
        --active-color: var(--color-palette-success-50);
        --active-text-color: var(--color-palette-success-0);
        --badge-color: var(--color-palette-success-70);
        --badge-color-dark: var(--color-palette-success-90);
        --badge-text-color: var(--color-palette-white);
        --border-color: var(--color-palette-success-50);
        --active-border-color: var(--color-palette-success-50);

        &:hover {
            border-color: var(--active-border-color);
        }
    }

    &.zm-is-active.zm--notice {
        --active-color: var(--color-palette-info-50);
        --active-text-color: var(--color-palette-info-0);
        --badge-color: var(--color-palette-info-70);
        --badge-color-dark: var(--color-palette-info-90);
        --badge-text-color: var(--color-palette-white);
        --border-color: var(--color-palette-info-50);
        --active-border-color: var(--color-palette-info-50);

        &:hover {
            --active-border-color: var(--color-palette-info-50);
        }
    }

    &.zm-is-active.zm--warning {
        --active-color: var(--color-palette-warning-50);
        --badge-color: var(--color-palette-warning-70);
        --badge-color-dark: '';
        --badge-text-color: var(--color-palette-white);
        --border-color: var(--color-palette-warning-50);
        --active-border-color: var(--color-palette-warning-50);

        &:hover {
            --active-border-color: var(--color-palette-warning-50);
        }
    }

    &.zm-is-active.zm--error {
        --active-color: var(--color-palette-danger-50);
        --active-text-color: var(--color-palette-danger-0);
        --badge-color: var(--color-palette-danger-70);
        --badge-color-dark: var(--color-palette-danger-90);
        --badge-text-color: var(--color-palette-white);
        --border-color: var(--color-palette-danger-50);
        --active-border-color: var(--color-palette-danger-50);

        &:hover {
            --active-border-color: var(--color-palette-danger-50);
        }
    }

    &.zm-is-active.zm--critical {
        --active-color: var(--color-palette-danger-70);
        --active-text-color: var(--color-palette-danger-0);
        --badge-color: var(--color-palette-danger-90);
        --badge-color-dark: var(--color-palette-danger-90);
        --badge-text-color: var(--color-palette-white);
        --border-color: var(--color-palette-danger-70);
        --active-border-color: var(--color-palette-danger-70);

        &:hover {
            --active-border-color: var(--color-palette-danger-70);
        }
    }
}

.zm-filter-toggle__badge {
    background: var(--badge-color);
    color: var(--badge-text-color);
    font-size: var(--font-xs);
    font-weight: 700;
    text-shadow: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 1.8em;
    height: 1.8em;
    line-height: 1;
    padding: 0 var(--spacing-xs);
    gap: var(--spacing-xxs);

    &:hover {
        background-color: var(--badge-color);
        border-color: var(--active-border-color);
    }
}
