How to make ladder work with dropshadow in JavaFX CSS?

I need to use different dropshadow effects depending on theme (light/dark). For this I use ladder. This is my code:

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) {
        var button = new Button("Push Me");
        button.getStyleClass().add("test");
        VBox root = new VBox(button);
        Scene scene = new Scene(root, 300, 250);
        var css = this.getClass().getResource("test.css").toExternalForm();
        scene.getStylesheets().add(css);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

test.css:

.test {
    -fx-effect: ladder(
        -fx-background,
        dropshadow(three-pass-box, yellow, 8px, 0.6, 0, 2) 49%,
        dropshadow(three-pass-box, cyan, 6px, 0.3, 0, 2) 50%);
    -fx-text-fill: red;
}

But I can't make ladder work with dropshadow. Could anyone say how to fix it?

The ladder function in JavaFX CSS works only with color properties and cannot be used to interpolate between Effect values like dropshadow. To fix this, you should define separate style rules or use theme-specific style sheets to apply different drop shadows based on the theme.

/* example.css */

.test-light {
    -fx-effect: dropshadow(three-pass-box, yellow, 8px, 0.6, 0, 2);
    -fx-text-fill: red;
}

.test-dark {
    -fx-effect: dropshadow(three-pass-box, cyan, 6px, 0.3, 0, 2);
    -fx-text-fill: red;
}