/* stylelint-disable selector-max-id */
@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables.less';

#uls-settings-block {
	&.uls-settings-block--vector-2022 {
		display: flex;
		justify-content: space-between;
		padding: 8px 12px;

		// override grid styles, as we use flexbox here
		&.row {
			&:before,
			&:after {
				content: none;
			}
		}

		&.uls-settings-block--with-add-languages {
			background-color: @colorGray15;
			border-top: 1px solid @colorGray12;
		}

		> button {
			&.uls-add-languages-button {
				background: transparent url( ../images/add.svg ) no-repeat left center;
				margin-right: 32px;
				padding-left: 32px;
			}

			&.uls-language-settings-button {
				background: transparent url( ../images/cog.svg ) no-repeat center;
				margin-left: auto;
				min-width: unset;
				border: 0;
			}
		}
	}

	&:not( .uls-settings-block--vector-2022 ) {
		background-color: @colorGray15;
		border-top: 1px solid @colorGray12;
		padding-left: 10px;
		line-height: 1.2em;
		border-radius: 0 0 2px 2px;

		> button {
			background: left top transparent no-repeat;
			// Support: Safari 3.1-6.1 & Android browser 3-4.3
			// Don't support `background-size` values in `background` shorthand
			background-size: 20px auto;
			color: @colorGray5;
			display: inline-block;
			margin: 8px 15px;
			border: 0;
			padding: 0 0 0 26px;
			font-size: medium;
			cursor: pointer;

			&:hover {
				color: @colorGray2;
			}

			&.display-settings-block {
				background-image: url( ../images/display.svg );
			}

			&.input-settings-block {
				background-image: url( ../images/input.svg );
			}
		}
	}
}

.uls-tipsy.uls-tipsy {
	z-index: 1000;
}

.uls-empty-state {
	padding: 28px;

	.uls-empty-state__header,
	.uls-empty-state__desc {
		color: @colorGray5;
	}

	.uls-language-action-items {
		list-style: none;
		margin: 1em 0;
	}
}

.empty-language-selector__language-settings-button {
	margin: 12px;
}