/*
 * Citizen
 *
 * SkinStyles for File pages
 * Module: mediawiki.action.view.filepage
 * Version: 1.39.0
 *
 * Date: 2022-10-28
*/

@import '../../../resources/variables.less';

// Custom sticky header handling
#citizen-body-header-sticky-sentinel {
	display: none;
}

#filetoc {
	position: sticky;
	z-index: @z-index-page-header;
	top: 0;
	display: flex;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var( --border-color-base );
	margin: 0;
	background-color: var( --color-surface-0 );
	font-weight: var( --font-weight-medium );

	li {
		padding-right: 0;
	}

	a {
		display: block;
		padding: var( --space-xxs ) var( --space-md );
		border-radius: var( --border-radius--small );
		margin-top: var( --space-xs );
		margin-bottom: var( --space-xs );

		&:hover {
			background-color: var( --background-color-quiet--hover );
		}

		&:active {
			background-color: var( --background-color-quiet--active );
		}
	}
}

.mw-filepage-resolutioninfo {
	margin-top: var( --space-xs );
	margin-right: ~'calc( var(  --space-xxs ) * -1 )';
	// Compensate for margin in links, because we can't use flex gap
	margin-left: ~'calc( var(  --space-xxs ) * -1 )';
	// HACK: Hide text
	font-size: 0;

	.mw-thumbnail-link {
		display: inline-block;
		padding: var( --space-xxs ) var( --space-md );
		border: 1px solid var( --border-color-base );
		border-radius: 100px;
		margin: var( --space-xxs );
		background-color: var( --color-surface-0 );
		color: var( --color-base--subtle );
		font-size: 0.875rem;

		&:hover {
			background-color: var( --color-primary--hover );
			color: #fff;
		}

		&:active {
			background-color: var( --color-primary--active );
			color: #fff;
		}
	}

	// Current preview resolution
	> .mw-thumbnail-link {
		background-color: var( --color-primary );
		color: #fff;
	}
}

.fullImageLink {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: var( --space-xl );
	margin-bottom: var( --space-xl );

	img {
		// Large image can overflow
		max-width: 100%;
		height: auto;
		transition: @transition-transform;
	}

	// Add affordance for full res image
	> a:hover > img {
		transform: scale( 1.1 );
	}
}

#file {
	> a {
		overflow: hidden;
		border-radius: var( --border-radius--medium );
		box-shadow: var( --box-shadow-card );
	}
}

.fileInfo {
	color: var( --color-base--subtle );
}

.fullMedia {
	border-bottom: 1px solid var( --border-color-base );
	font-size: 0.875rem;
}