* {
	box-sizing: border-box;
}

:host {
	padding: var(--dialog-container-padding, 5vw 24px);
	z-index: var(--dialog-z-index, 12345678);
	outline: none;
}

:host, #backdrop {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

:host, :host([center]) #dialog {
	overflow-x: var(--dialog-overflow-x, hidden);
	overflow-y: var(--dialog-overflow-y, auto);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

:host([center]) {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

:host([center]) #dialog {
	max-height: var(--dialog-max-height, 100%);
}

:host(:not([open])), :host(:not(:defined)) {
	display: none;
}

#backdrop {
	background: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.6));
	animation: fadeIn var(--dialog-animation-duration, 100ms) var(--dialog-animation-easing, ease-out);
	z-index: -1;
}

#dialog {
	animation: scaleIn var(--dialog-animation-duration, 100ms) var(--dialog-animation-easing, ease-out);
	border-radius: var(--dialog-border-radius, 12px);
	box-shadow: var(--dialog-box-shadow, 0 2px 10px -5px rgba(0, 0, 0, 0.6));
	max-width: var(--dialog-max-width, 700px);
	width: var(--dialog-width, 100%);
	padding: var(--dialog-padding, 24px);
	max-height: var(--dialog-max-height, unset);
	height: var(--dialog-height, auto);
	color: var(--dialog-color, currentColor);
	background: var(--dialog-bg, white);
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	border: none;
}

::slotted(article), article {
	flex-grow: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

::slotted(header), header, ::slotted(footer), footer {
	flex-shrink: 0;
}

@keyframes scaleIn {
	0% {
		transform: scale(0.9) translateY(30px);
		opacity: 0;
	}
	100% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
