@layer native {
    .only\@native {
        opacity: 0;
        position: absolute;
        pointer-events: none;
        visibility: hidden;
    }

    body.native-app {
        .hide\@native {
            display: none !important;
        }

        .only\@native {
            opacity: 1;
            position: relative;
            pointer-events: all;
            visibility: visible;
        }

        .ui-box {
            &.full-width\@native {
                border: none;
                background-color: transparent;
                border-radius:0;
            }
        }

        /* Hide the submit button when the "form" component is registered. */
        [data-bridge-components~="form"]
        [data-controller~="bridge--form"]
        [type="submit"] {
            display: none;
        }

        /* Hide the overflow button when the "button" component is registered. */
        [data-bridge-components~="button"]
        [data-controller~="bridge--button"] {
            display: none;
        }


    }
}