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

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

#filetoc {
	display: flex;
	padding: 0;
	margin: 0;
	font-weight: var( --font-weight-medium );
	white-space: nowrap;
	background-color: transparent; // sticky header will handle background
	border: 0;
	.citizen-sticky-header;

	@media ( min-width: @min-width-breakpoint-desktop ) {
		right: ~'calc( var( --space-xl ) * -1 )'; // Fix #797
	}

	li {
		padding-right: 0;
	}

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

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

		&:active {
			background-color: var( --background-color-button-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 );
		margin: var( --space-xxs );
		font-size: var( --font-size-small );
		color: var( --color-subtle );
		background-color: var( --color-surface-0 );
		border: var( --border-width-base ) solid var( --border-color-base );
		border-radius: var( --border-radius-pill );

		&:hover {
			color: var( --color-inverted-primary );
			background-color: var( --color-progressive--hover );
		}

		&:active {
			color: var( --color-inverted-primary );
			background-color: var( --color-progressive--active );
		}
	}

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

.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;
		background-color: var( --color-surface-2 );
		transition: var( --transition-hover );
		transition-property: 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 );
	}
}

.filehistory a img,
#file img:hover {
	// Because this gets overriden by a default style
	background-color: var( --color-surface-2 );
}

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

.fullMedia {
	font-size: var( --font-size-small );
}

.mw_metadata {
	margin: 0;
	font-size: var( --font-size-x-small );
}

.mw_metadata caption {
	font-weight: var( --font-weight-semibold );
	color: var( --color-emphasized );
}

.mw_metadata tr + tr {
	border-top: var( --border-width-base ) solid var( --border-color-base );
}

.mw_metadata td,
.mw_metadata th {
	padding: var( --space-xs );
	background-color: transparent;
	border: 0;
}