.root {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;

	.content {
		position: fixed;
		max-width: 600px;
		max-height: 85vh;
		border-radius: var(--modal-radius, 0px);
		background: var(--modal-background, #fff);
		box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);

		overflow-y: auto;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
			gap: var(--spacing-md, 16px);
		}

		.children {
			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
		}

		.footer {
			display: flex;
			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
			justify-content: center;
			gap: var(--spacing-md, 16px);
		}

		&.fullwidth {
			min-width: 85vw;
		}

		&.fullscreen {
			min-width: 85vw;
			padding: 0;
		}
	}

	.backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		overflow: hidden;
	}
}