@import 'mediawiki.skin.variables.less';

@width-icon-gutter: 1em;

#mwe-popups-settings {
	z-index: 1000;
	background-color: @background-color-base;
	width: 420px;
	border: @border-base;
	box-shadow: @box-shadow-drop-medium;
	border-radius: @border-radius-base;
	font-size: @font-size-small;

	header {
		box-sizing: border-box;
		border-bottom: @border-subtle;
		position: relative;
		display: table;
		width: 100%;
		padding: 5px 7px;

		> div {
			display: table-cell;
			width: calc( @size-icon-medium + ( 2 * @width-icon-gutter ) );
			vertical-align: middle;
			cursor: pointer;
		}

		h1 {
			margin-bottom: 0.6em;
			padding-top: 0.5em;
			border: 0;
			width: 100%;
			font-family: sans-serif;
			font-size: @font-size-large;
			font-weight: bold;
			text-align: center;
		}
	}

	main#mwe-popups-settings-form {
		display: block;
		width: 350px;
		padding: 32px 0 24px;
		margin: 0 auto;

		p {
			color: @color-subtle;
			font-size: @font-size-small;
			margin: 16px 0 0;

			&:first-child {
				margin-top: 0;
			}
		}

		form {
			img {
				margin-right: 60px;
			}

			label {
				font-size: @font-size-small;
				line-height: 16px;
				width: 300px;
				margin-left: 10px;
				flex-direction: column;

				> span {
					color: @color-emphasized;
					font-size: @font-size-small;
					font-weight: @font-weight-bold;
					display: block;
					margin-bottom: 5px;
				}

				&::before {
					// stylelint-disable-next-line declaration-no-important
					top: ( 1.5625em / 2 ) !important;
				}
			}
		}
	}
}

.mwe-popups-settings-help {
	@width-popups-settings-help-icon: 180px;
	@height-popups-settings-help-icon: 140px;
	font-size: @font-size-small;
	font-weight: @font-weight-bold;
	margin: 40px;
	position: relative;

	.popups-icon {
		background-size: contain;
		width: @width-popups-settings-help-icon;
		max-width: none;
		height: @height-popups-settings-help-icon;
		margin: 0;
		padding: 0;
	}

	p {
		left: @width-popups-settings-help-icon;
		bottom: 20px;
		position: absolute;
	}
}