@import '../mixins/surface';
@import '../mixins/elevation';

.dialog {
	@include surface;
	@include elevation(24);

	--translate-y: calc(-50% - var(--increment));

	position: fixed;
	top: 50%;
	right: calc(var(--increment) / 2);
	left: calc(var(--increment) / 2);
	transform: translateY(var(--translate-y, 0));
	min-width: 28rem;
	max-width: 56rem;
	margin: var(--increment) auto;

	display: flex;
	flex-flow: column nowrap;
	overscroll-behavior: contain;

	&:not([open]) {
		opacity: 0;
		pointer-events: none;
	}

	&::backdrop {
		background-color: RGBA(var(--scrim-color, 0, 0, 0), var(--scrim-opacity, 0.32));
	}

	& + .backdrop {
		background-color: RGBA(var(--scrim-color, 0, 0, 0), var(--scrim-opacity, 0.32));
	}
}