@import './variables';

.s-dialog__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: fixed;
	top: 0;
	left: 0;
	// z-index: 1010;
	height: 100%;
	width: 100%;
	isolation: isolate;

	&:not(.is-closing) {
		visibility: hidden;
	}

	&.active {
		visibility: visible;
	}
}

.s-dialog {
	align-items: var(--s-dialog-align-items, center);
	display: flex;
	height: var(--s-dialog-height); //100%
	width: var(--s-dialog-width, auto);
	justify-content: var(--s-dialog-justify-content, center);
	// position: fixed;
	// left: 0;
	// top: 0;
	transform-origin: var(--s-dialog-transform-origin, center);
	transition: 0.2s map-get($transitions, 'fast-in-fast-out'), z-index 1ms;
	z-index: var(--s-dialog-z-index, 1);
	outline: none;
	overflow-y: var(--s-dialog-overflow, scroll);

	&[aria-hidden='true'] {
		display: none;
	}
}

.s-dialog__content {
	background-color: var(--theme-surface);
	border-radius: $dialog-border-radius;
	margin: $dialog-margin;
	overflow-y: var(--s-dialog-content-overflow, auto);
	pointer-events: auto;
	z-index: inherit;

	@include elevation($dialog-elevation);

	&:not(.fullscreen) {
		// max-height: $dialog-max-height;
		width: var(--s-dialog-width);
	}

	&.fullscreen {
		border-radius: 0;
		margin: 0;
		height: 100%;
		width: 100%;
		position: fixed;
		overflow-y: auto;
		top: 0;
		left: 0;
	}

	> .s-card {
		> .s-card-title {
			font-size: $dialog-card-title-font-size;
			font-weight: $dialog-card-title-font-weight;
			letter-spacing: $dialog-card-title-letter-spacing;
			padding: $dialog-card-title-padding;
		}

		> .s-card-text {
			padding: $dialog-card-text-padding;
		}

		> .s-card-subtitle {
			padding: $dialog-card-subtitle-padding;
		}
	}
}

.fullscreen {
	border-radius: 0;
	margin: 0;
	height: 100%;
	position: fixed;
	overflow-y: auto;
	top: 0;
	left: 0;

	> .s-card {
		min-height: 100%;
		min-width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}
}

.no-scroll {
	overflow: hidden;
	padding-right: var(--s-scroll-padding);
}