dialog.details-dialog {
	position: fixed;
	inset: 8px 8px 8px auto;
	height: auto;
	max-height: calc(100vh - 16px);
	min-width: 700px;
	border-radius: 28px;
	border: 1px solid var(--border);
	background: var(--background-transparent);
	backdrop-filter: blur(12px);
	opacity: 0;
	translate: 10vw 0;
	overflow: hidden;

	transition: display .2s allow-discrete, overlay .2s allow-discrete, opacity .2s, translate .2s;

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

		@starting-style {
			opacity: 0;
			translate: 10vw 0;
		}
	}

	dialog-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	dialog-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 20px 16px 24px;
	}

	dialog-body {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 4px 12px 0 20px;
		overflow: hidden auto;
		transition: opacity .3s;
		scrollbar-gutter: stable;

		form > * { flex-shrink: 0; }
	}

	&.loading :is(dialog-header, dialog-body, dialog-footer) { opacity: 0; pointer-events: none; }

	dialog-footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 12px;
		padding: 20px;
	}

	form { display: contents; }
}