.tify-media {
	@extend %panel;
	background: transparent;
	box-shadow: none;
	display: flex;
	flex: 3;
	flex-direction: column;
	padding: 0;
	user-select: none;
	z-index: 0;
}

.tify-media-buttons {
	display: flex;

	&.-controls {
		flex-direction: column;
		left: g(.5);
		position: absolute;
		top: g(.5);
	}
}

%dot-marker {
	&::after {
		background: $base-color;
		border-radius: 50%;
		box-shadow: 0 0 g(.25) $base-color-paler;
		content: '';
		display: block;
		height: .5em;
		position: absolute;
		right: g(.125);
		top: g(.125);
		width: .5em;
	}
}

.tify-media-button {
	@extend %button-translucent;

	&.-active {
		@extend %dot-marker;
	}

	.tify-media-buttons.-pagination & {
		position: absolute;

		&.-left {
			bottom: g(.5);
			left: g(.5);
		}

		&.-right {
			bottom: g(.5);
			right: g(.5);
		}

		&.-top {
			right: g(.5);
			top: g(.5);
		}

		&.-bottom {
			bottom: g(.5);
			right: g(.5);
		}
	}

	.tify-media-buttons.-controls & {
		&:not(:first-child) {
			border-top: 0 !important;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			padding-top: g(.25);
		}

		&:not(:last-child) {
			border-bottom: 0 !important;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			padding-bottom: g(.25);
		}
	}
}

.tify-media-dropdown {
	> .tify-dropdown-button {
		@extend %button-translucent;
	}

	&:not(:first-child) > .tify-dropdown-button {
		border-top: 0 !important;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding-top: g(.25);
	}

	&:not(:last-child) > .tify-dropdown-button {
		border-bottom: 0 !important;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		padding-bottom: g(.25);
	}

	.tify-dropdown-button:not(:disabled):active {
		box-shadow: $inset-shadow;
	}

	&.-active .tify-dropdown-button {
		@extend %dot-marker;
	}

	.tify-dropdown-content {
		max-width: g(12);

		button {
			padding: g(.25) g(.5);
		}
	}

	&.-filters {
		[type=range] {
			margin: g(-1.25) 0 0;
			padding: g(1.5) 0 g(.25);
		}

		.tify-dropdown-content {
			display: flex;
			flex-direction: column;
			gap: g(.5);
			padding: g(.5);
			width: g(10);
		}
	}

	&.-layers .tify-dropdown-content {
		width: max-content;

		h4 {
			// stylelint-disable-next-line scss/at-extend-no-missing-placeholder
			@extend h3;
			margin: 0 !important;
		}

		ol:not(:last-child) {
			margin-bottom: g(.5);
		}
	}

	label {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: g(.25);
		position: relative;

		// "100 %"
		> b {
			font-size: $font-size-small;
			margin-left: auto;
		}

		> .tify-icon {
			align-self: center;
		}
	}

	p {
		margin: 0;
	}
}

// NOTE: OpenSeadragon adds `position: relative`
.tify-media-image {
	flex: 1;
	overflow: hidden; // For OpenSeadragon plugins that add own elements
	white-space: nowrap;

	.openseadragon-canvas {
		outline: 0;
		z-index: 0;

		// Single annotation overlay container
		// TODO: Revisit after next OpenSeadragon release (> 5.0.1)
		div:has(> .tify-media-overlay) {
			border-radius: $br;
			box-shadow: 0 0 0 1px $link-color, 0 0 0 2px oklch(0% 0 0deg / 25%);

			// NOTE: Separating focus and hover to work around LightningCSS bug
			&:focus {
				box-shadow: 0 0 0 2px $link-color, 0 0 0 3px oklch(0% 0 0deg / 25%);
			}

			&:hover {
				box-shadow: 0 0 0 2px $link-color, 0 0 0 3px oklch(0% 0 0deg / 25%);
			}
		}
	}

	&.-annotations-hidden {
		// Annotation overlays
		// stylelint-disable-next-line no-descending-specificity
		.openseadragon-canvas > div {
			visibility: hidden;
		}
	}
}

.tify-media-overlay {
	@extend %button;
	background: none;
	min-height: 0;
	min-width: 0;

	&:not(:disabled) {
		&:focus,
		&:hover {
			background: none;
		}
	}

	&.-current {
		mix-blend-mode: difference;
		outline: calc(g(.25) - 2px) solid #fff;
		outline-offset: 2px;
	}
}

.tify-media-reset {
	@extend %button-small;
	gap: .2em;
	height: g(2);
	width: 100%;
}