Template:TemplateBase/SncaBox/styles.css

/* MediaWiki CSS Sanitizer Safe */
.snca-box {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 600px;
	min-height: 60px;
	margin: 6px auto;
	box-sizing: border-box;
	border: 1px solid #dcdcdc;
	border-left-width: 6px;
	border-left-style: solid;
	border-radius: 2px;
	padding: 8px 12px;
	gap: 12px;
	word-wrap: break-word;
}

/* Preset Themes */
.snca-box-neutral { background-color: #f8f9fa; border-left-color: #a2a9b1; }
.snca-box-ok { background-color: #f0fff0; border-left-color: #52d85b; }
.snca-box-info { background-color: #eef2ff; border-left-color: #5457e5; }
.snca-box-warning { background-color: #fef6e7; border-left-color: #ff9d00; }
.snca-box-critical { background-color: #fff0f0; border-left-color: #e23639; }

/* Inner Layout Utilities */
.snca-box-asset {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.snca-box-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 4px;
}

/* Dynamic Alignment Classes */
.snca-box-align-left { align-items: flex-start; text-align: left; }
.snca-box-align-center { align-items: center; text-align: center; }
.snca-box-align-right { align-items: flex-end; text-align: right; }

.snca-box-title {
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.2;
}

.snca-box-text {
	font-size: 0.95em;
	line-height: 1.4;
}

/* PARSER ARTIFACT FIX */
/* Neutralize MediaWiki parser paragraph injections inside our flex container.
   This prevents scaled template assets and text from floating to the top. */
.snca-box-content p,
.snca-box-asset p {
	margin: 0;
	display: contents;
}

/* IMAGE SAFEGUARD */
/* If an editor forgets to add a size like |40px, this prevents giant images from 
   exploding the box. It caps height to 50px. It still allows intentional widths 
   like |100px to work. It targets Wiki images only, leaving template assets alone. */
.snca-box-asset a.image img,
.snca-box-asset span[typeof^="mw:File"] img {
	max-height: 50px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* MOBILE RESPONSIVENESS */
@media screen and (max-width: 650px) {
	/* Hide the right-side asset specifically, avoiding layout overlap with text */
	.snca-box-asset.snca-box-asset-right {
		display: none;
	}
}