eml-view {
	display: block;
	font-family: var(--sl-font-sans);

	> sl-spinner {
		font-size: 3rem;
		margin: 3rem auto;
		display: block;
	}

	> sl-card {
		display: block;
		--border-radius: var(--sl-border-radius-large);

		&::part(footer) {
			padding: 0;
		}

		> [slot='footer'] {
			&,
			iframe {
				border-bottom-left-radius: calc(var(--border-radius) - 1px);
				border-bottom-right-radius: calc(var(--border-radius) - 1px);
			}
		}
	}

	header {
		display: grid;
		grid-template-areas:
			"avatar info actions"
		;
		grid-template-columns: min-content 1fr;
		margin-bottom: var(--sl-spacing-small);
		color: var(--sl-color-neutral-600);

		sl-avatar { grid-area: avatar; }
		.eml-info { grid-area: info; }
		aside { grid-area: actions; }

		sl-avatar {
			margin-right: var(--sl-spacing-x-small);
		}

		aside {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: var(--sl-spacing-x-small);
		}

		.eml-date {
			font-size: var(--sl-font-size-small);
			display: flex;
			align-items: center;
			height: 1.2rem;

			sl-divider {
				--spacing: var(--sl-spacing-small);
			}
		}

		details {
			display: contents;

			summary {
				display: inline list-item;
				font-size: var(--sl-font-size-small);
				color: var(--sl-color-neutral-500);
				cursor: pointer;
			}

			dl {
				margin: 0;
				display: grid;
				grid-template-columns: max-content auto;
				gap: 0 var(--sl-spacing-x-small);

				dt {
					&::after {
						content: ':';
					}
				}

				dd {
					margin: 0;
				}
			}
		}
	}

	h1 {
		font-size: var(--sl-font-size-x-large);
		font-weight: var(--sl-font-weight-normal);
		margin: var(--sl-spacing-small) 0;
	}

	sl-tab-panel {
		&::part(base) {
			padding: 0;
		}
	}

	iframe {
		display: block;
		width: 100%;
		min-height: 500px;
		border: none;
	}

	pre {
		text-wrap-mode: wrap;
		white-space-collapse: preserve;
		font-family: var(--sl-font-mono);
		margin: 0;
		padding: var(--sl-spacing-medium) var(--sl-spacing-large);
	}

	sl-dialog.eml-dialog-headers {
		&::part(body) {
			padding-top: 0;
		}

		table {
			border-collapse: collapse;
			width: 100%;
			vertical-align: top;
			font-size: var(--sl-font-size-small);
			word-break: break-word;

			thead, tbody, tr, th, td {
				text-align: inherit;
				vertical-align: inherit;
			}

			thead {
				vertical-align: bottom;

				th:first-child {
					min-width: 150px;
				}
			}

			> :not(caption) > * > * {
				border-bottom: solid 1px var(--sl-color-neutral-200);
				padding: var(--sl-spacing-2x-small);
			}
		}
	}

	a.eml-emailaddress {
		color: var(--sl-color-primary-600);

		&:not(:focus, :hover) {
			text-decoration: none;

			&:has(.eml-emailaddress-name) .eml-emailaddress-address {
				color: var(--sl-color-neutral-400);
			}
		}

		&:has(.eml-emailaddress-name) .eml-emailaddress-address {
			&::before { content: '<' }
			&::after { content: '>' }

			font-size: var(--sl-font-size-small);
		}
	}

	.eml-attachments {
		--gap: var(--sl-spacing-medium);
		columns: 250px;
		column-gap: var(--gap);
	}

	.eml-attachment {
		border: 1px solid var(--sl-color-neutral-300);
		border-radius: var(--sl-border-radius-medium);
		display: grid;
		grid-template-areas:
			"thumb"
			"info "
		;
		grid-template-rows: min-content min-content;
		overflow: clip;
		color: var(--sl-color-neutral-600);
		text-decoration: none;
		margin-bottom: var(--gap);
		break-inside: avoid-column;

		img {
			grid-area: thumb;
			display: grid;
			width: 100%;
			height: auto;
			aspect-ratio: 2/1;
			object-fit: scale-down;
			padding: var(--sl-spacing-x-small);
			border-bottom: 1px solid var(--sl-color-neutral-300);
		}

		.eml-attachment-info {
			grid-area: info;
			background-color: var(--sl-color-neutral-100);
			padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
			display: flex;
		}

		sl-icon {
			font-size: var(--sl-font-size-x-large);
			margin-right: var(--sl-spacing-small);
			margin-top: var(--sl-spacing-2x-small);
			flex-shrink: 0;
		}

		.eml-attachment-info-text {
			flex-grow: 1;
			font-size: var(--sl-font-size-x-small);
		}

		.eml-attachment-filename {
			font-weight: var(--sl-font-weight-bold);
			word-break: break-word;
		}

		&:where(:hover, :focus):not(:has(sl-icon-button:hover)) .eml-attachment-filename {
			text-decoration: underline;
		}

		sl-icon-button {
			margin-left: var(--sl-spacing-small);
		}
	}

	.eml-attachments + .eml-inline-attachments {
		margin-top: var(--sl-spacing-medium);
	}

	.eml-inline-attachments {
		summary {
			display: inline;
			cursor: pointer;
			color: var(--sl-color-neutral-600);

			&:hover, &:focus {
				text-decoration: underline;
			}
		}

		&[open] > summary {
			display: none;
		}
	}

	sl-dialog.eml-dialog-preview {
		&::part(body) {
			padding-top: 0;
			height: 100vh;
		}
	}

	.eml-dialog-preview-content {
		height: 100%;

		> * {
			width: 100%;
			min-height: 100%;
			object-fit: scale-down;
		}

		> video {
			background-color: black;
		}

		> eml-view {
			margin-bottom: var(--body-spacing);
		}
	}
}