$info-content-max-height: g(6.75);

.tify-info {
	@extend %panel;
	overflow-y: auto;
	padding-bottom: g();
}

.tify-info-button {
	@extend %button-small;
	border-radius: 0;

	&[aria-pressed=true] {
		@extend %button-active;
	}

	&:first-child {
		border-radius: $br 0 0 $br;
	}

	&:last-child {
		border-radius: 0 $br $br 0;
	}
}

.tify-info-content {
	position: relative;

	&.-collapsed {
		max-height: $info-content-max-height;
	}
}

.tify-info-header {
	display: inline-flex;
	position: relative;
}

.tify-info-image-labels {
	font-size: $font-size-small;
	list-style: none;
	margin: g(.5) 0;
}

.tify-info-logo {
	display: block;
	height: auto;
	max-height: g(6);
	max-width: g(12);
	width: auto;
}

.tify-info-metadata {
	.tify-info-section.-pages & {
		margin-top: g(.5);
	}

	> div {
		margin-bottom: g(.5);
	}
}

.tify-info-section {
	@extend %iiif-html;
	margin: g() 0;
	overflow-wrap: break-word;

	&:first-of-type {
		margin-top: 0;
	}

	&.-logo {
		// Ensure visibility in dark mode since most logos require a white background
		background: $panel-bg;
		color-scheme: light;
		margin: g(-.25) g(-.5) g(-1);
		padding: g(.25) g(.75);

		> :last-child {
			margin: 0;
		}
	}

	&.-pages {
		.tify-page-name {
			font-weight: bold;
		}
	}

	&.-title {
		> p {
			font-weight: bold;
		}
	}
}

.tify-info-toggle {
	@extend %button-small;
	margin: g(.5) 0;

	> .tify-icon {
		margin-left: -.5em;
	}
}

.tify-info-value {
	@extend %iiif-html;

	> div:last-child > :last-child {
		margin-bottom: 0;
	}

	.tify-info-content.-collapsed & {
		max-height: calc(#{$info-content-max-height} - g(2)); // 2 = button height
		overflow: hidden;

		&::after {
			background: $panel-bg;
			bottom: g(1 + .75); // = button height + margin
			content: '';
			font-size: $font-size-small;
			height: g(2);
			mask-image: linear-gradient(transparent, #000);
			position: absolute;
			width: 100%;
		}
	}
}