/*
 * Club message and dev email alerts, and their modals (templates/messageAlerts.tpl).
 * The icon and text use the site's .alert-body table-cell layout (base.css).
 */

/* A dev email: grey and dashed, so it can't be taken for a real alert */
.alert-dev {
	background-color: #f7f7f7;
	border: 1px dashed #999;
	color: #555;
}

.message-alert-label {
	margin-right: 4px;
}

.message-alert-meta {
	font-size: 12px;
	margin-top: 2px;
}

.message-alert-action {
	padding-top: 10px;
}

.message-modal-meta {
	margin-top: 4px;
}

/* Plain text: keep its line breaks */
.message-body {
	white-space: pre-wrap;
}

/* From 768px: icon, text, then the button on the right, in one row */
@media (min-width: 768px) {
	.message-alert {
		display: table;
		width: 100%;
	}
	.message-alert .alert-body {
		width: 100%;
	}
	.message-alert-action {
		display: table-cell;
		vertical-align: middle;
		padding-top: 0;
		padding-left: 15px;
		white-space: nowrap;
	}
}

/* Below 768px: the icon stays beside the text; the button goes full width under both */
@media (max-width: 767px) {
	.message-alert-action {
		display: block;
	}
	.message-alert-action .btn {
		display: block;
		width: 100%;
	}
}

/* Long titles and unbroken addresses wrap rather than widen the page */
.message-alert .alert-body,
.message-modal-title,
.message-modal-meta,
.message-body {
	overflow-wrap: anywhere;
	word-break: break-word;
}