dtx-toast {
	position: fixed;
	width: 400px;
	z-index: 9999;

	&.top { top: 32px; }
	&.left { left: 32px; }
	&.right { right: 32px; }
	&.bottom { bottom: 32px; }
	&.center { left: calc(50% - 200px); }
}

.toast {
	position: relative;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	width: inherit;
	max-height: 400px;
	margin-top: 12px;
	padding: 20px 32px 20px 16px;
	border: none;
	border-radius: 16px 4px 16px 4px;
	color: var(--text);
	background: var(--border);
	overflow: hidden;
	transition: .3s, overlay .6s allow-discrete, display .3s allow-discrete;

	translate: 0 50%;
	opacity: 0;

	&[open] {
		display: flex;
		translate: 0;
		opacity: 1;

		@starting-style {
			translate: 0 50%;
			opacity: 0;
		}
	}

	&.modal[open] {
		translate: -50% -50%;

		@starting-style {
			translate: -50% -30%;
			opacity: 0;
		}
	}

	&.modal {
		position: fixed;
		inset: 50% auto auto 50%; /* OUCH */
		max-height: 80vh;
		margin: 0;
		padding: 20px 16px;
		background: var(--background-transparent);
		backdrop-filter: blur(12px);
		translate: -50% -30%;
	}

	p {
		display: flex;
		align-items: center;
		min-height: 24px;
		color: inherit;
	}
	.details {
		flex-basis: 100%;
		color: var(--text-light);
		font-size: 12px;
		line-height: 1.5;
	}
	.actions {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 -2px auto;

		> * { width: fit-content; padding: 8px; }
	}

	/* close button */
	> dtx-button {
		position: absolute;
		inset: 0 0 0 auto;
		width: 16px;
		height: 100%;
		border-radius: 2px 4px 16px 2px;
		background: rgb(from var(--text) r g b / .2);
		color: inherit;
		opacity: 0;
		transition: .2s;
	}
	&:hover > dtx-button { opacity: 1; }

	&.info > span { color: var(--text); }
	&.check_circle > span { color: var(--success); }
	&.warning > span { color: var(--warning); }
	&.error > span { color: var(--error); }
}