NcModal doesn't respect nested Modal style

[Antreesy]

Requirements:

• Some dialogs (app settings) require deeper functionality, where global dialog window may call smaller NcModal (example: Talk -> Conversation settings -> Advanced permissions)
• Sometime it happens, that nested modal could be mounted behind the global one, if they're mounted in the same container ('body' or different)
• Solution is to mount nested Modal inside the global one

Issue

If one NcModal is nested to another, some styles (size modal is confirmed) may fall through to the nested modal, breaking the size

Reproduciton

To reproduce on https://nextcloud-vue-components.netlify.app/#/Components/NcModal:

<template>
	<div>
		<NcButton @click="showModal">Show Modal with fields</NcButton>
		<NcModal
			v-if="modal"
			@close="closeModal"
			name="Name inside modal">
			<div id="first-modal-id" class="modal__content">
			<NcButton @click="showModal2">Show Modal</NcButton>
		  <NcModal v-if="modal2" container="#test" @close="closeModal2" size="small" class="emoji-modal">
              {{"NcModal container='#first-modal-id' size='small'" }}
		  </NcModal>
			</div>
		</NcModal>
	</div>
</template>
<script>
export default {
	data() {
		return {
			modal: false,
			modal2: false,
		}
	},
	methods: {
		showModal() {
			this.modal = true
		},
		closeModal() {
			this.modal = false
		},
		showModal2() {
			this.modal2 = true
		},
		closeModal2() {
			this.modal2 = false
		},
	}
}
</script>
<style>
#first-modal-id {
  height: 200px;
}
</style>

Expected	Actual

Possible solution:

use direct child selector: .modal-wrapper--normal > .modal-container