// sass-lint:disable class-name-format, no-ids, no-qualifying-elements

.translate-info {
	background-color: $gray-lightest;
	padding: 15px;
}

.translate-info h2 {
	border-bottom: 1px solid $gray-lighter;
	color: $blue;
	margin: 10px 0;
}

.translate-info ul {
	@include list-unstyled;
}

.translate-info li {
	@include td-margin(left, 15px);
	background-color: $white;
	border-color: $gray-lighter;
	border-style: solid;
	border-width: 1px;
	margin: 5px;
	padding: 2px 5px;
}

#mfTransContainer {
	@include container-sm;
}

#mfTransContainer a {
	color: darken($blue, 10%);
	font-weight: bold;

	&:hover {
		cursor: pointer;
		text-decoration: underline;
	}
}

table.mfTrans {
	border: 0;
	width: 100%;
}

table.mfTrans th,
table.mfTrans td {
	background-color: $body-bg;
}

table.mfTrans tr:first-child {
	font-size: medium;
}

table.mfTrans th:first-child,
table.mfTrans th:last-child {
	background-color: $gray-lightest;
}

$translate-trans: $green-dark;

table.mfTrans th:nth-child(2),
table.mfTrans th:nth-child(3) {
	background-color: lighten($translate-trans, 25%);
	color: $black;
}

$translate-fuzzy: $yellow;

table.mfTrans th:nth-child(4),
table.mfTrans th:nth-child(5) {
	background-color: lighten($translate-fuzzy, 25%);
	color: $black;
}

$translate-untrans: $red-dark;

table.mfTrans th:nth-child(6),
table.mfTrans th:nth-child(7) {
	background-color: lighten($translate-untrans, 25%);
	color: $black;
}

table.mfTrans th:last-child {
	background-color: lighten($blue-lighter, 5%);
}

table.mfTrans tr:hover td:first-child {
	background-color: darken($gray-lightest, 5%);
}

table.mfTrans tr:hover td:nth-child(2),
table.mfTrans tr:hover td:nth-child(3) {
	background-color: lighten($translate-trans, 15%);
}

table.mfTrans tr:hover td:nth-child(4),
table.mfTrans tr:hover td:nth-child(5) {
	background-color: lighten($translate-fuzzy, 15%);
}

table.mfTrans tr:hover td:nth-child(6),
table.mfTrans tr:hover td:nth-child(7) {
	background-color: lighten($translate-untrans, 15%);
}

table.mfTrans tr:hover td:last-child {
	background-color: $blue-lighter;
}

div.mfTransGraph {
	&.trans {
		background-color: $translate-trans;
	}

	&.fuzzy {
		background-color: $translate-fuzzy;
	}

	&.untrans {
		background-color: $translate-untrans;
	}
}

#mfTransNewText,
#mfTransNewSubmit {
	@include td-margin(left, 5px);
	display: inline-block;
}

#mfTransNewText {
	width: auto;
}

#mfTransLang {
	@include container;
}
