.loaded {
    display: none;
}

/*
* tg-lazy-loading-standalone:empty -> initial render of AEM component without content projection
* tg-lazy-loading-standalone > :last-child:not(.display--none) -> initial render of AEM component with content projection
* tg-lazy-loading-standalone > div:first-child:empty -> initial render of lazy loading component (empty div placeholder)
* tg-lazy-loading-standalone > div:first-child > ndc-dynamic:first-child:only-child -> render of lazy loading component, before ndc-dynamic completes
*/
.loading-wrapper {
    &:not(
    :has(.loaded tg-lazy-loading-standalone:empty)
    ):not(
    :has(.loaded tg-lazy-loading-standalone > :last-child:not(.display--none))
    ):not(
    :has(.loaded tg-lazy-loading-standalone > div:first-child:empty)
    ):not(
    :has(.loaded tg-lazy-loading-standalone > div:first-child > ndc-dynamic:first-child:only-child)
    ):not(
    :has(.loaded wink-toggle-tile:not(.hydrated))
    ):not(
    :has(.loaded wink-segmented-control:not(.hydrated))
    ):not(
    :has(.loaded wink-quantity-stepper:not(.hydrated))
    ) {
        .loading {
            display: none;
        }

        .loaded {
            display: unset;
        }
    }
}