Currently I’m trying to create a custom Elementor Widget and I thought I understand the basics pretty well at this point until today. I can’t seem to figure out how to properly add a responsive control of the text type. I know this might be untypical to do but I need it for this specific case. I want the user to be able to add some CSS values. My current Code looks like this:

$repeater->add_responsive_control(
    'background_mask_size',
    [
        'label' => esc_html__( 'Mask size', 'elementor' ),
        'devices' => [ 'desktop', 'tablet', 'mobile' ],
        'frontend_available' => true,
        'conditions' => [
            'terms' => [
                [
                    'name' => 'background_overlay',
                    'operator' => '==',
                    'value' => 'yes',
                ],
            ],
            'relation' => 'AND',
        ],
        'description' => sprintf(
            wp_kses(
                __( '<a href="%s" target="_blank">Docs</a>.', 'elementor' ),
                [
                    'a' => [
                        'href' => [],
                        'target' => [],
                    ],
                ]
            ),
            esc_url( 'https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size' )
        ),
        'type' => Controls_Manager::TEXT,
    ]
);

Up to this point everything works as I need it to, I can fill the values for each device but when I check the frontend, only the desktop value gets picked every time. What changes do I need to implement so the correct value for a specific device gets used?