Styles of Boolean (checkbox) field interferes with visibility checks.

Problem/Motivation

My organization uses Behat to feature test various implementations and features across our websites.

One of these tests checks if certain fields are visible in the edit form after a selection is made. Fields are made visible using the Form API's #states attribute.

I don't fully understand the behavior, but it seems as though the CSS visibility of the element is taken into consideration, rather than just the rendering. What I mean is, the checkboxes are currently rendering in Gin as a toggle switch, but the actual input has an opacity of 0, which means the API that checks the visibility of the field is reporting it as not visible.

The selector in question is

:not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox input

Steps to reproduce

Either create or view an existing "Boolean" form field in a content edit form. Inspecting the field will show an opacity of 0 if you choose to inspect the actual input tag.

Proposed resolution

Instead of

opacity: 0;

I found my issue was resolved when I replaced it with

background: transparent;
border: 0;

The main reason I'm logging this as an issue is that, while this doesn't impede any functionality to the user, if an agnostic API detects this field wrongly as not visible, I imagine there might be other situations that this same error might be made.