/**
 * LESS commands for bbcodes
 *
 * @package de.teralios.tjs.bbcodes
 * @author	Karsten (Teralios) Achterrath
 * @license GNU Lesser General Public License v3.0 <http://www.gnu.org/licenses/lgpl-3.0.txt>
 */
// CSS for box bbcode
.boxBBCode {
	margin-top: @wcfGapSmall;
	margin-bottom: @wcfGapSmall;
	
	.content {
		padding: @wcfGapSmall;
	
		img {
			max-width: 98%;
		}
		
		border-bottom-left-radius: @wcfContainerBorderRadius - 1;
		border-bottom-right-radius: @wcfContainerBorderRadius - 1;
	}
	
	& > .tabularBox {
		 & > .content {
			background-color: @wcfContainerBackgroundColor;
		}
	}
}

.boxLeft {
	float: left;
	margin-right: @wcfGapSmall;
}

.boxRight {
	float: right;
	margin-left: @wcfGapSmall;
}

.boxSize3 {
	width: 74%;
}

.boxSize2 {
	width: 49%;
}

.boxSize1 {
	width: 24%;
}

// CSS for footnotes
.footnoteList {
	.footnoteIndex {
		float: left;
		padding-right: @wcfGapSmall;
		font-weight: bold;
	}
	
	& > ul > li {
		margin-bottom: @wcfGapSmall;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
}

// CSS for procontra bbcode
// BBCode variables
@tjsProColor: rgb(0,191,0);
@tjsProColorHover: rgb(0,127,0);
@tjsProBackgroundColor: rgba(0,255,0,0.1);
@tjsContraColor: rgb(191,0,0);
@tjsContraColorHover: rgb(127,0,0);
@tjsContraBackgroundColor: rgba(255,0,0,0.1);
@tjsNeutralColor: rgb(191,191,191);
@tjsNeutralColorHover: rgb(63,63,63);
@tjsNeutralBackgroundColor: fadeout(@tjsNeutralColorHover, 90%);

.proContraBBCodeLeft {
	display: inline-block;
	width: 50%;
	float: left;
	margin-right: @wcfGapSmall;
}

.proContraBBCodeRight {
	display: inline-block;
	width: 50%;
	float: right;
	margin-left: @wcfGapSmall;
}

.proContraBBCode {
	margin-top: @wcfGapSmall;
	margin-bottom: @wcfGapSmall;
	
	.pro {
		.icon {
			color: @tjsProColor;
		}
		
		li:hover {
			color: @tjsProColorHover;
			background-color: @tjsProBackgroundColor;
			
			.icon {
				color: @tjsProColorHover;
			}
		}
	}

	.contra {
		.icon {
			color: @tjsContraColor;
		}
		
		li:hover {
			color: @tjsContraColorHover;
			background-color: @tjsContraBackgroundColor;
			
			.icon {
				color: @tjsContraColorHover;
			}
		}
	}
	
	.neutral {
		.icon {
			color: @tjsNeutralColor;
		}
		
		li {
			&:hover {
				color: @tjsNeutralColorHover;
				background-color: @tjsNeutralBackgroundColor;	
			}
			
			.icon {
				color: @tjsNeutralColorHover;
			}
		}
	}
	
	.content {
		.pro {
			width: 50%;
			float: left;
		}
			
		.contra {
			margin-left: 50%;
		}
		
		@media only screen and (max-width: 800px) {
			.pro {
				width: 100%;
				float: none !important;
			}
				
			.contra {
				margin-left: 0% !important;
			}
		}
		
		& > div {
			&:nth-child(odd) {
				background-color: @wcfContainerBackgroundColor;
			}
		
			&:nth-child(even) {
				background-color: @wcfContainerAccentBackgroundColor;
			}
			
			&:last-child() {
				border-bottom-left-radius: @wcfContainerBorderRadius - 1;
				border-bottom-right-radius: @wcfContainerBorderRadius - 1;
			}
		}
	}
	
	li {
		margin-top: @wcfGapTiny;
		padding: @wcfGapTiny;
		
		&:first-child {
			margin-top: 0 !important;
		}

		div {
			display: table-row;
			span {
				display: table-cell;
				width: 20px;
			}
		}
	}
}

/** CSS for heading and subheading bbcode */
.headingBBCode .subheadingBBCode {
	font-weight: bold;
	margin-bottom: @wcfGapSmall;
}


.headingBBCode {
	font-size: @wcfHeadlineFontSize;
	margin-top: @wcfGapMedium;
}

.subheadingBBCode {
	font-size: @wcfSubHeadlineFontSize;
	margin-top: @wcfGapSmall;
}

/** CSS for xattach bbcode */
.xAttachBorderBBCode {
	border: 1px solid @wcfContainerBorderColor;
	max-width: (280 + ((@wcfGapTiny) * 2));
	text-align: center;
	
	div {
		padding: @wcfGapTiny;
		font-size: @wcfSmallFontSize;
		
		&:first-child {
			background-color: @wcfContainerBackgroundColor;
			overflow: hidden;
		}
		
		&:nth-child(2) {
			background-color: @wcfContainerAccentBackgroundColor;
		}
		
		&:hover {
			background-color: @wcfContainerHoverBackgroundColor;
		}
	}
}

.xAttachBBCode {
	max-width: (280 + ((@wcfGapTiny) * 2));
	text-align: center;
	div {
		padding: @wcfGapTiny;
		font-size: @wcfSmallFontSize;
	
		&:nth-child(2)::before {
			content: "- ";
		}	
	}
}

.xAttachLeft {
	float: left;
	margin-right: @wcfGapSmall;
	margin-bottom: @wcfGapSmall;	
}

.xAttachRight {
	float: right;
	margin-left: @wcfGapSmall;
	margin-bottom: @wcfGapSmall;	
}
	
.xAttachInline {
	display: inline-block;
	margin: @wcfGapTiny;
}

@media only screen and (max-width: 800px) {
	.xAttachLeft, .xAttachRight {
		float: none;
		display: block;
		margin: @wcfGapSmall;	
	}
}