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

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

#page-tools {
	z-index: 0;
	margin-top: 0;

	#p-views {
		ul {
			flex-direction: column;

			li > a {
				width: auto;
				height: auto;
				padding: @margin-side / 4 @margin-side / 2 @margin-side / 4 0;
				opacity: 1;

				&:hover {
					opacity: 1;
					color: @color-link-active;
				}

				&:after {
					content: none;
				}

				> span {
					position: relative !important;
					clip: unset;
					width: auto;
					height: auto;
					margin: 0;
				}
			}
		}
	}
}

.tux-messagelist,
.tux-action-bar,
.tux-messagetable-header.floating {
	margin: 0 @negative-margin !important;
}

.tux-action-bar.floating,
.tux-messagetable-header.floating {
	.boxshadow(3);
}

.tux-messagelist,
.tux-action-bar,
.tux-messagetable-header {
	transition: @transition-margin, @transition-width;
}

.tux-messagelist,
.tux-action-bar:not( .floating ) {
	width: auto !important;
}

.tux-messagetable-header {
	padding: 0; // Reserve spaces for tabs
	display: flex;
	align-items: center;

	&.floating {
		> div:first-of-type {
			padding: 0 20px 10px;
		}
	}
}

.tux-message-selector {
	li {
		&.selected {
			border: 0;
		}

		a {
			color: @base-50;
			padding: @margin-side / 2 @margin-side;
			display: block;
			transition: @transition-color-quick;

			&:hover {
				color: @accent-50;
			}

			&:first-of-type {
				padding-left: 0;
			}
		}
	}

	.more {
		padding: @margin-side / 2 @margin-side !important;

		> ul {
			margin: 0;
			padding: 8px 0;
			width: auto;
			top: 0;
			left: 0;
			border: 0;
			.boxshadow(5);

			li {
				padding: 0;
				white-space: nowrap;
				font-size: @ui-menu-text-big;

				a {
					margin: 0;
					padding: 10px 15px !important;
				}

				input {
					margin: @margin-side / 2 @margin-side / 4 @margin-side @margin-side;
				}

				label {
					padding-right: @margin-side;
				}
			}
		}
	}
}

@media only screen and ( max-width: @screen2 ) {
	#page-tools {
		margin: 0 auto @margin-side * 2;
		float: none;
		max-width: @page-width;

		#p-views {
			ul {
				flex-direction: row;
			}
		}
	}

	.tux-messagelist,
	.tux-action-bar,
	.tux-messagetable-header.floating {
		margin: 0 ~'calc((100vw - @{page-width}) / -2)' !important;
	}
}

@media only screen and ( max-width: @screen1 ) {
	.tux-messagelist,
	.tux-action-bar,
	.tux-messagetable-header.floating {
		margin: 0 -@margin-side !important; // fill margin
	}
}