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

.block-message {
	h5 {
		font-weight: @font-weight-bold;
		margin: 0;
		line-height: @size-icon-medium;
	}

	h6 {
		margin-bottom: 0.187em;
	}
}

.block-message-icon {
	.cdx-mixin-button-layout-flush( 'top', true, 'large' );
	float: left;
	padding: 12px;
}

.block-message-info {
	float: left;
	width: 80%;
	text-align: left;
}

.block-message-item {
	margin-bottom: 1em;
}

.block-message-data {
	margin-bottom: 1.875em;
}

.block-message-buttons {
	width: 100%;
	padding: 1em;
	text-align: right;
	background-color: @background-color-interactive-subtle;
	box-shadow: 0 -4px 5px -4px @background-color-interactive-subtle;

	a.cdx-button,
	button.cancel {
		margin: 0 0.5em 0 0;
		display: inline-block;
	}
}

.block-message-creator {
	a {
		color: inherit;

		&:hover {
			text-decoration: none;
		}
	}
}

.block-message-reason {
	clear: both;
	padding: 1em;
	text-align: left;
	background-color: @background-color-interactive;
	margin-bottom: 0;
	max-height: 30vh;
	overflow-y: scroll;
	display: none;
}

@media screen and ( max-height: 460px ) {
	.drawer-container .block-message {
		// (T390834) On very small screen sizes (i.e. mobile phones in landscape
		// mode), when the block reason is shown, the height of the div with the
		// drawer class (that fills the top half of the popup with a white
		// background) becomes too small (roughly half the screen size), thus
		// causing a transparent region to appear between the top half of the
		// popup and the block reason.
		//
		// This serves to override the rule from the "drawer" class that sets
		// the height of that region so it can cover the whole screen height.
		max-height: none;
	}
}

.block-message-title {
	color: @color-destructive;
}

.drawer {
	padding-left: 0;
	padding-right: 0;
}
