/*
 * Citizen
 *
 * SkinStyles for Extension:Translate
 * Module: ext.translate.tag.languages
 * Version: MLEB 2023.01
 *
 * Date: 2023-02-17
*/

.mw-pt-languages {
	display: flex;
	flex-direction: column;
	gap: var( --space-xs );
	// Language tag can appear anywhere in content, reserve spacing just in case
	padding: var( --space-md ) 0;
	font-size: var( --font-size-x-small );
	background-color: transparent;
	border-bottom: 0;
}

// Citizen label styles
.mw-pt-languages-label {
	display: block;
	width: auto;
	padding: 0;
	font-weight: var( --font-weight-normal );
	color: var( --color-subtle );
	letter-spacing: 0.05em;
}

.mw-pt-languages .mw-pt-languages-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-xs );
	padding: 0;
	margin: 0;
}

.mw-pt-languages-list li {
	margin: 0; // Use flexbox instead
}

// Citizen pill styles
// Stricter selector as it might affect language button in langauge menu
.mw-pt-languages-list {
	a.new,
	.mw-pt-progress {
		display: block;
		padding: var( --space-xs ) var( --space-md );
		color: var( --color-subtle );
		border: var( --border-width-base ) solid var( --border-color-interactive );
		border-radius: var( --border-radius-pill );

		&:hover,
		&:active {
			color: var( --color-inverted-fixed );
		}
	}

	a.new {
		border-style: dashed;

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

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

	// Offset right padding for progress icon
	// Extra specificity to override previous styles
	.mw-pt-progress {
		padding-right: ~'calc( var( --space-md ) + 11px )';
		background-position: right 9px center;

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

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

		&.mw-pt-languages-selected {
			font-weight: var( --font-weight-normal );
			color: var( --color-inverted-primary );
			background-color: var( --color-progressive--active );
		}
	}
}

.mw-pt-translate-header ~ .mw-parser-output .mw-pt-languages {
	margin-top: 0; // reset since we don't have the bottom border
}
