mediawiki-extensions-CookieWarning/resources/ext.CookieWarning/ext.CookieWarning.mobile.less

@import 'minerva.variables';
@import 'minerva.mixins';

@cookieWarningFontSize: 12px;

.mw-cookiewarning-container {
	background-color: #ffffff;
	padding: 16px;
	font-size: @cookieWarningFontSize;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;

	.mw-cookiewarning-cimage {
		width: 28px;
		height: 100%;
		font-size: 28px;
		margin-right: 15px;
		float: left;
		text-align: center;
		line-height: 100%;
	}

	form {
		float: right;
		margin-left: 5px;
		/* borrowed from mediawiki/core Login Button, following `ButtonWidget (progressive)‎` from OOjs UI */
		.mw-cookiewarning-dismiss {
			height: 32px;
			background-color: #f8f9fa;
			color: #36c;
		}
		.mw-cookiewarning-dismiss:hover {
			background-color: #fff;
			border-color: #859ecc;
			box-shadow: none;
		}
		.mw-cookiewarning-dismiss:active {
			background-color: #eff3fa;
			color: #2a4b8d;
			border-color: #2a4b8d;
		}
		.mw-cookiewarning-dismiss:focus {
			border-color: #36c;
			box-shadow: inset 0 0 0 1px #36c;
		}
	}
}

@media all and ( min-width: @deviceWidthTablet ) {
	.mw-cookiewarning-container {
		max-width: @contentMaxWidthTablet / @cookieWarningFontSize * 16;
		margin: 0 @contentPaddingTablet;
		line-height: @contentPaddingTablet;

		.mw-cookiewarning-cimage {
			line-height: inherit;
		}
	}
}

@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
	.mw-cookiewarning-container {
		margin-left: auto;
		margin-right: auto;
		max-width: @contentMaxWidthTablet / @cookieWarningFontSize * 16;
	}
}