.res-showImages {
	// Override native expando-class, since it restricts the size of inner expandos
	.expando {
		position: initial !important;
	}

	.usertext iframe {
		border: none;
	}

	.md .usertext-body img {
		display: inherit;
	}
}

// Image Viewer
img {
	image-orientation: from-image;
}

%expando-button-overlay {
	display: inline-block;
	content: ' ';
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.title ~ .expando-button {
	.res-showImages-highlightSpoilerButton .thing.spoiler &::before {
		@extend %expando-button-overlay;

		background-image: linear-gradient(45deg, rgba(255, 130, 0, .3) 25%, transparent 25%, transparent 50%, rgba(255, 130, 0, .3) 50%, rgba(255, 130, 0, .3) 75%, transparent 75%, transparent);
	}

	.res-showImages-highlightNSFWButton .thing.over18 &::before {
		@extend %expando-button-overlay;

		background-image: linear-gradient(45deg, rgba(255, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(255, 0, 0, .15) 50%, rgba(255, 0, 0, .15) 75%, transparent 75%, transparent);
	}
}

// Hide pinned Reddit-hosted videos
.res-showImages-hidePinnedRedditVideos {
	.pinnable-content.pinned { display: none; }
}

// Place inline expandos so that they don't impact the line height
.res-freetext-expando {
	display: inline-flex;
	height: 1em;
	margin: 0 !important;
	vertical-align: middle;

	.expando-button {
		margin: calc(calc(1em * .5) - 50%) 0 0 0 !important;
		transform: scale(0.8); // Try to not exceed height of line
	}

	+ .res-expando-box { margin-top: 5px !important; }
}

.expando-button {
	cursor: pointer;
	user-select: none;
	vertical-align: top !important;
	width: 23px;
	height: 23px;
	display: inline-block;
	margin-right: 5px;
	padding: 0;
	background-image: url('../images/expandoEmpty.svg');

	// Race conditions may cause Reddit to add an expando after ours
	&[data-host] + & {
		display: none !important;
	}

	&-duplicate {
		filter: sepia(0.5);
	}

	&.image.collapsed {
		background-image: url('../images/expandoImage.svg');

		&:hover {
			background-image: url('../images/expandoImage-active.svg');
		}
	}

	&.image.gallery.collapsed {
		background-image: url('../images/expandoImageGallery.svg');

		&:hover {
			background-image: url('../images/expandoImageGallery-active.svg');
		}
	}

	&.video-muted.collapsed {
		background-image: url('../images/expandoVideo.svg');

		&:hover {
			background-image: url('../images/expandoVideo-active.svg');
		}
	}

	&.expando-button-requires-permission {
		background-image: url('../images/expandoPadlock.svg');

		&:hover {
			background-image: url('../images/expandoPadlock-active.svg');
		}
	}

	&.expanded {
		background-image: url('../images/expandoClose.svg');

		&:hover {
			background-image: url('../images/expandoClose-active.svg');
		}
	}
}

.res-expando-siteAttribution {
	display: flex;
	align-items: center;

	&-generic {
		clear: left;
		margin: .5em;
	}

	> a:first-of-type {
		display: flex;
		align-items: center;
		color: inherit;

		> img {
			max-height: 20px;
			margin-right: 4px;
		}
	}

	.gearIcon {
		margin-left: 4px;
		opacity: .3;

		&:hover,
		&:active {
			opacity: 1;
		}
	}
}

.res-media-dragging {
	pointer-events: none;
}

.res-media-rotatable {
	&[rotation] { transform-origin: top left; }
	&[rotation='0'] { transform: initial; }
	&[rotation='1'] { transform: rotate(90deg) translateY(-100%); }
	&[rotation='2'] { transform: rotate(180deg) translate(-100%, -100%); }
	&[rotation='3'] { transform: rotate(270deg) translateX(-100%); }
}

.res-media-controls {
	position: absolute;
	display: inline-flex;
	align-items: center;
	z-index: 2;
	background: rgba(0, 0, 0, .3);
	opacity: 0;
	cursor: pointer;

	&-left { left: 10px; }
	&-right { right: 10px; }
	&-bottom { bottom: 10px; }
	&-top { top: 10px; }

	button {
		border: none;
		margin: 0 !important;
		background: transparent;
		padding: 6px;
		filter: saturate(0);
		line-height: 0;

		&::after {
			cursor: pointer;
			line-height: 14px;
			color: #eee;
			vertical-align: baseline;
		}

		&:hover::after { color: #b9b9b9; }
	}

	&-lookup::after { content: '\F178'; }
	&-download::after { content: '\F058'; }
	&-rotate::after { content: '\F0B0'; }
	&-rotate-left { transform: scaleX(-1); }

	&-clippy {
		color: white;
		font-family: normal 16px verdana, arial, helvetica, sans-serif;
		white-space: nowrap;

		&::after {
			content: '\2139';
			padding: 0 2px;
		}
	}

	.res-media-dragging &,
	.res-media-load-error & {
		display: none !important;
	}
}

.res-media-with-controls-wrapper {
	min-height: 46px;
	position: relative;

	&:hover .res-media-controls {
		opacity: .8;
	}
}

.res-expando-box {
	display: block;
	clear: left; // Necessary on some custom stylesheets where .entry .flat-list has no height
	min-height: 20px;

	.res-expando-box-inner {
		// Reset a few possible parent styles
		font-style: normal; // Italics
		font-weight: normal; // Bold
		white-space: normal; // Whitespace nowrap
		display: inline-block; // Strikethrough
	}

	.usertext-body {
		user-select: text; // Allow selection if is a text expando
	}

	.res-media-independent {
		z-index: 35;
		position: absolute;
		will-change: transform;
	}

	&[hidden],
	[hidden] {
		display: none !important;
	}

	.res-title {
		font-size: 13px;
	}

	.res-caption {
		font-size: 11px;
		white-space: pre-wrap;
	}

	.res-credits {
		font-size: 10px;
	}
}

.res-expando-restore-position {
	cursor: pointer;

	&::after {
		content: '« return to originating expando »';
		font-size: 9px;
	}
}

.res-gallery {
	.res-gallery-title {
		margin: 3px;
		font-size: 15px;
	}

	.res-gallery-caption {
		margin-bottom: 3px;
		font-size: 12px;
	}

	.res-gallery-to-filmstrip {
		margin-left: 1em;
		cursor: pointer;

		&::before {
			content: '🎞';
			display: block;
			transform: rotate(90deg);
		}
	}

	.res-gallery-below {
		margin: 0 5px 5px 5px;
		font-size: 11px;

		> div {
			display: flex;
			justify-content: space-between;
			padding-top: 3px;
		}

		.res-gallery-increase-concurrent {
			cursor: pointer;
		}
	}
}

.res-image {
	.res-expando-link {
		// Limits width to that of child elements
		display: table;
		line-height: 0;
	}

	.res-image-media {
		user-select: none;

		@at-root .res-media-load-error#{&} {
			content: '';

			&::after {
				content: 'Loading of image ' attr(src) ' failed. Click to view directly';
			}
		}
	}
}

.res-video {
	$va: &;

	display: inline-block;

	&-container {
		overflow: hidden;
		position: relative;
		display: inline-block;
	}

	video {
		display: block;
	}

	&-interface {
		display: none;
		user-select: none;
		cursor: default;
	}

	&-progress {
		width: 100%;
		height: 12px;
		padding: 8px 0 2px 0;
		background-clip: content-box;
		background-color: rgba(255, 255, 255, 0.2);
		box-sizing: border-box;
	}

	&-position-thumb {
		display: none;
		position: relative;
		top: -9px;
		height: 16px;
		width: 16px;
		margin-left: -8px !important;
		border-radius: 50%;
		background-color: white;
		box-shadow: -1px -1px 2px -1px inset;
		opacity: .8;

		#{$va}-progress:hover & {
			display: block;
		}
	}

	&-position {
		height: 100%;
		position: relative;
		width: 2%;
		margin-left: -1% !important;
		background-color: rgba(255, 47, 0, .6);
		border-radius: 1px;
	}

	&-main {
		display: flex;
		padding: 3px 5px 5px 5px;
		justify-content: space-between;
		flex-wrap: wrap;
		color: rgba(256, 256, 256, .95);

		> * {
			height: 20px;
		}
	}

	&-controls,
	&-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 11px;
	}

	&-info {
		margin-left: auto !important;
	}

	&-link {
		padding: 0 3px;
		color: rgba(256, 256, 256, .9);

		&:not(:last-of-type)::after {
			content: '|';
			padding-left: 3px;
		}
	}

	&-error {
		color: #cc3a50;
		font-size: 200%;
		position: absolute;
		top: 0;
		text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

		&::before {
			font: normal 18px/16px Batch;
			content: '\F15b';
		}
	}

	&-button {
		cursor: pointer;
		margin-right: 7px !important;

		&:hover {
			color: rgba(256, 256, 256, .8);
		}
	}

	&-controls-group {
		display: flex;
		align-items: center;
		position: relative;

		#{$va}-button {
			margin-right: 0 !important;
		}
	}

	&-time,
	&-speed {
		font-family: monospace;
		font-size: 11px;
		line-height: 9px;
		width: 38px;
		text-align: center;
	}

	&:not([playing]) &-playback-rate {
		display: none;
	}

	&[playing] &-current-time {
		display: none;
	}

	&-volume {
		position: relative;

		&[level='0']::after { content: '\f038'; }
		&[level='1']::after { content: '\f039'; }
		&[level='2']::after { content: '\f03a'; }
		&[level='3']::after { content: '\f03b'; }

		&:not(:hover) &-level {
			display: none;
		}

		&-level {
			position: absolute;
			background-color: rgba(0, 0, 0, 0.67);
			cursor: pointer;
			height: 50px;
			width: 16px;
			bottom: 100%;
			left: 0;
			border-radius: 4px;
			padding: 2px;
			display: flex;
			margin-left: -2px !important;
		}

		&-percentage {
			width: 100%;
			background-color: white;
			border-radius: 4px;
			pointer-events: none;
			align-self: flex-end;
		}
	}

	&:not(&-has-native-controls):hover &-interface {
		display: block;
		background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .6));
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	// Push below and remove progress bar and redundant button if native browser controls are visible
	&-has-native-controls &-interface {
		display: block;
		background: rgba(52, 47, 38, 1);
		border-top: 1px solid #e4e4e4;

		#{$va}-toggle-pause,
		#{$va}-progress {
			display: none !important;
		}
	}

	&[playing] &-toggle-pause::after { content: '\f16c'; }
	&:not([playing]) &-toggle-pause::after { content: '\f16b'; }

	&[reversed] &-reverse::after { content: '\f16d'; }
	&:not([reversed]) &-reverse::after { content: '\f169'; }

	&-time-decrease::after { content: '\f168'; }
	&-time-increase::after { content: '\f16e'; }
	&-speed-decrease::after { content: '\f14d'; }
	&-speed-increase::after { content: '\f14c'; }
}

// style expando text content in comments
.commentarea .res-expando-box div.usertext-body .md {
	background-color: #fafafa;
	border: 1px solid #369;
	border-radius: 7px;
	padding: 5px 10px;

	// Nightmode styles
	.res-nightmode & {
		color: rgb(221, 221, 221);
		border-color: rgb(102, 102, 102);
		background: none;
	}
}

body:not(.res-showImages-displayImageCaptions) {
	.res-caption,
	.res-credits {
		display: none;
	}
}

.res-showImages-captionsPosition {
	@at-root {
		.res-image,
		.res-video,
		.res-gallery {
			display: inline-flex;
			flex-direction: column;
		}

		// Keep these below any captions
		.res-gallery-below,
		.res-expando-siteAttribution,
		.res-gallery-increase-concurrent {
			order: 2;
		}
	}

	&-creditsBelow {
		.res-credits {
			order: 1;
		}
	}

	&-titleAbove {
		.res-caption,
		.res-credits {
			order: 1;
		}
	}

	&-allBelow {
		.res-title,
		.res-caption,
		.res-credits {
			order: 1;
		}
	}
}

.res-iframe-expando {
	iframe {
		border: none;
		width: 100%;
	}

	&-drag-handle {
		box-sizing: border-box;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
		cursor: nwse-resize;

		.res-icon::before {
			content: '\F0A5';
			transform: scaleX(-1);
			display: inline-block;
			padding: 4px;
		}
	}
}

// Extras for certain text expando's
.res-expando-box[data-host='wikipedia'] {
	.md {
		padding: 5px;
		max-width: none;

		table {
			width: 45%;
			max-width: 300px;
			border: none;
			background: #eee;
			margin: 8px;

			&:first-of-type {
				float: right;
			}

			.res-nightmode & {
				color: rgb(221, 221, 221);
				background: rgb(57, 57, 57);
			}
		}

		p {
			line-height: 1.2rem;
			font-size: .9rem;
		}

		h2 {
			font-weight: bold;
			font-size: 1rem;
		}
	}

	.res-text-media {
		&::before,
		&::after {
			content: '';
			display: table;
		}

		&::after {
			clear: both;
		}
	}
}
