/* The root class for the Dialog */
.root {
}

/* Added to `.root` for an open dialog */
.open {
}

/* Contains the dialog */
.main {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--color-background);
	width: 450px;
	overflow: hidden;
	outline: none;
	max-width: calc(100% - 30px);
}

/* Contains the title of the Dialog */
.title {
	position: relative;
}

/* Added to the close control */
.close {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 35px;
	cursor: pointer;
	font-size: 0;
	border: none;
	background: none;
}

/* Added to the close icon */
.closeIcon {
	font-size: 14px;
}

/* Contains the content of the Dialog */
.content {
}

/* Added when a visible underlay is used */
.underlayVisible {
	background: var(--underlay-background);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Enter animation for the Dialog */
.enter,
/* Enter animation for the Dialog's underlay */
.underlayEnter {
	animation-duration: var(--short-animation-duration);
	animation-fill-mode: both;
	animation-name: fadeIn;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* Exit animation for the Dialog */
.exit,
/* Exit animation for the Dialog's underlay */
.underlayExit {
	animation-duration: var(--short-animation-duration);
	animation-fill-mode: both;
	animation-name: fadeOut;
}

.actions {
}
