.tify-text {
	@extend %panel;
	overflow-y: auto;
}

.tify-text-item {
	margin: 0 g(-.75);
	padding: 0 g(.5);

	&.-current {
		box-shadow: g(-.25) 0 $base-color-pale;
		color: $link-color;
	}

	img {
		// Ensure visibility in dark mode since images with transparency may require a white background
		background: $panel-bg;
		color-scheme: light;
		height: auto;
		margin: g(.5) 0;
		max-width: 100%;
	}
}

.tify-text-toggle {
	@extend %iiif-html;
	border-radius: $br;
	cursor: pointer;
	display: block;
	overflow-wrap: break-word;
	padding: g(.25);
	text-decoration: none;

	&:focus,
	&:hover {
		background: $base-color-paler;
		color: $link-color;

		// Element label and page number
		> span {
			background: $base-color-paler;
		}
	}

	p {
		margin: 0;
	}
}

.tify-text-list {
	list-style: none;
	padding: 0 !important;
}

.tify-text-none {
	color: $text-color-muted;
	font-style: italic;
}

.tify-text-page {
	margin: 0 g(.25) g() g(.5);

	.tify-page-name {
		width: auto;
	}

	.tify-page-name-number:not(:only-child) {
		margin-left: 0;
	}
}