/**
 * Dialog/modals
 */
 dialog {
	border: none;
	padding: 0; // This must remain as zero
	animation: dialog-fade-out 0.25s ease-out;

	&:not(.onboarding) {
		background-color: var(--color-light);
		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
		border-radius: .3rem;
		width: min(30rem, 80%);
	}

	&[open] {
	  animation: dialog-fade-in 0.25s ease-out;
	}
	&::backdrop {
		animation: dialog-backdrop-fade-in 0.25s ease-out forwards;
		background-color: rgb(0 0 0 / 0.5);
	}

	// Dialog cannot have direct padding, for JS closing to work correctly.
	> * {
		padding: 1rem;
	}

	form {
		display: block;
	}
	.dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-block-start: 0;

		:where(button,[type=submit]){
			cursor: pointer;
			background-color: transparent;
			border: 0;
			border-radius: .3rem;
			outline-color: transparent;
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1;
			color: var(--color-dark);
			text-shadow: 0 1px 0 var(--color-light);
			opacity: 0.5;
			padding: calc(1rem - 4px);
			margin: calc(-1rem + 4px);

			&:where(:focus-within,:hover) {
				color: var(--color-dark);
				opacity: .75;
			}
		}
		+ * {
			margin-block-start: var(--flow-space, 1em);
		}
	}
}