/*
 * Citizen - Translate Styles
 * https://starcitizen.tools
*/

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

.mw-pt-languages {
	display: block;
	border: 0;
	background: 0;
	margin: 0 @negative-margin;
	padding: @margin-side;
}

.mw-pt-languages-label {
	display: block;
	border: 0;
	padding: 0;
	color: @base-30;
	background: 0;
	font-size: 0.8125rem;
	font-weight: normal;
	text-transform: uppercase;
  letter-spacing: 1px;
	width: auto;

}

.mw-pt-languages-list {
	padding: @content-margin-top 0 0 0;
	display: flex;
	width: auto;
	visibility: hidden; // Hide dots

	> * {
		visibility: visible;
	}
}

.mw-pt-languages-selected,
.mw-pt-languages-ui {
	font-weight: 400;
	.boxshadow(2)!important;

	&:hover {
		transform: none!important;
	}
}

.mw-pt-progress {
	margin: 0 0 @margin-side / 2 0;
	padding: @margin-side / 4 @margin-side / 2;
  display: block;
  border: 1px solid @base-90;
  background: @base-90;
  color: @base-30;
  font-size: @content-caption-size;
  .boxshadow(1);
  transition: @transition-transform-quick,
							@transition-box-shadow-quick;

	&:hover {
		.boxshadow(2);
		transform: translateY(-2px);
	}
}

.mw-pt-progress--stub {
	background: @base-90;
}

.mw-pt-progress--low {
	background: @red-50;
	border-color: @red-50;;
	color: @base-100;
}

.mw-pt-progress--med {
	background: @yellow-50;
	border-color: @yellow-50;
	color: @base-100;
}

.mw-pt-progress--high {
	background: @green-50;
	border-color: @green-50;
	color: @base-100;
}

.mw-pt-progress--complete {
	background: @green-30;
	border-color: @green-30;
	color: @base-100;
}

@media only screen and (max-width: @screen1) {
	.mw-pt-languages {
		margin: 0!important; // somehow got overrided
		padding: @margin-side 0;
	}
}

@media only screen and (max-width: @screen2) {
	.mw-pt-languages {
		margin: 0 ~"calc((100vw - @{page-width}) / -2)";
	}
}