PortableInfobox/resources/PortableInfobox.less

.prefixer( @property; @value; @prefixes: webkit, moz, ms; @unprefixed: true ) {
	.prefixer-loop( @propety; @value; @prefixes; @i: length( @prefixes ) ) when ( @i > 0 ) {
		@prefix: extract( @prefixes, @i );
		-@{prefix}-@{property}: @value;
		.prefixer-loop( @propety; @value; @prefixes; ( @i - 1 ) );
	}
	.prefixer-loop( @property; @value; @prefixes );

	& when ( @unprefixed ) {
		@{property}: @value;
	}
}

.flexbox( @flex-direction: row ) {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	& when ( @flex-direction = row ) {
		.prefixer( box-orient; horizontal; webkit, ms; false );
	}
	& when ( @flex-direction = column ) {
		.prefixer( box-orient; vertical; webkit, ms; false );
	}
	.prefixer( flex-direction; @flex-direction; webkit, ms );
}

.flex-wrap( @value: wrap ) {
	.prefixer( flex-wrap; @value );
}

.flex-basis( @value ) {
	-ms-flex-preferred-size: @value;
	.prefixer( flex-basis; @value; webkit, moz );
}

.flex-grow( @value ) {
	-ms-flex-positive: @value;
	.prefixer( flex-grow; @value; webkit, moz );
}

.flex-shrink( @value ) {
	-ms-flex-negative: @value;
	.prefixer( flex-shrink; @value; webkit, moz );
}

.hyphens( @value ) {
	& when ( @value = auto ) {
		word-wrap: break-word;
	}
	& when ( @value = none ) {
		word-wrap: normal;
	}

	.prefixer( hyphens; @value );
}

.transform( @value ) {
	.prefixer( transform; @value );
}

@pi-background: #f8f9fa;
@pi-secondary-background: #eaecf0;
@pi-border-color: #a2a9b1;
@pi-item-spacing: 5px 10px;
@pi-margin: 15px;
@pi-width: 270px;

:root {
	--pi-background: @pi-background;
	--pi-secondary-background: @pi-secondary-background;
	--pi-border-color: @pi-border-color;
	--pi-item-spacing: @pi-item-spacing;
	--pi-margin: @pi-margin;
	--pi-width: @pi-width;
}

.portable-infobox {
	background: @pi-background;
	background: var( --pi-background );
	clear: right;
	float: right;
	font-size: .85em;
	margin: 0 0 @pi-margin @pi-margin;
	margin: 0 0 var( --pi-margin ) var( --pi-margin );
	width: @pi-width;
	width: var( --pi-width );

	.pi-border-color {
		border-color: @pi-border-color;
		border-color: var( --pi-border-color );
	}
	.pi-secondary-background {
		background-color: @pi-secondary-background;
		background-color: var( --pi-secondary-background );
	}
	.pi-secondary-font {
		margin: 0;
		padding: 0;
	}
	.pi-item-spacing {
		padding: @pi-item-spacing;
		padding: var( --pi-item-spacing );
	}

	.pi-title {
		border: 0;
		margin: 0;
		font-family: inherit;
		font-size: 1.75em;
		line-height: 1.5;
	}
	.pi-header {
		border: 0;
		margin: 0;
		font-family: inherit;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.3;
	}
	.pi-media {
		margin: 0;
		max-width: 100%;
		text-align: center;
	}
	.pi-data-label {
		font-size: inherit;
		line-height: inherit;
	}
	.pi-data-value {
		flex-basis: 200px;
		-webkit-flex-basis: 200px;
		-moz-flex-basis: 200px;
		> :not( ul ),
		li {
			margin: 0;
		}
		ol {
			list-style-position: inside;
		}
	}
	>.pi-item:last-child {
		border-bottom: 0;
	}
}

.pi-section-navigation {
	.flexbox();
	.flex-wrap();
	justify-content: center;
	width: 100%;

	.portable-infobox & {
		margin: 0 -1px;
		padding: 2px 0 1px;
		list-style: none;
		text-align: center;
	}

	.client-nojs & {
		display: none;
	}

	.pi-section-tab {
		border-width: 1px;
		border-style: solid;
		border-color: @pi-secondary-background;
		border-color: var( --pi-secondary-background );
		box-sizing: border-box;
		cursor: pointer;
		display: inline-block;
		margin: -1px -1px 0 0;
		max-width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: bottom;
		white-space: nowrap;

		&.pi-section-active, &.current {
			background: @pi-secondary-background;
			background: var( --pi-secondary-background );
			font-weight: bold;
		}
	}
}
.client-js {
	.pi-section-content {
		display: none;

		&.pi-section-active {
			display: block
		}
	}
}

.pi {
	&-media-collection {
		overflow: hidden;
		margin: 0;
		&-tabs {
			&:extend( .pi-section-navigation );

			.portable-infobox & {
				&:extend( .portable-infobox .pi-section-navigation );
			}
			.client-nojs & {
				display: none;
			}
		}
		&-tab-content {
			display: none;
			&.current {
				display: block;
			}
		}
		.pi-tab-link {
			&:extend( .pi-section-navigation .pi-section-tab );

			&.current {
				&:extend( .pi-section-navigation .pi-section-tab.pi-section-active );
			}
		}
	}
	&-image-thumbnail {
		max-width: @pi-width;
		max-width: var( --pi-width );
		height: auto;
	}
	&-video-player {
		width: @pi-width;
		width: var( --pi-width );
		height: auto;
		display: block;
	}
	&-audio-player {
		width: @pi-width;
		width: var( --pi-width );
		&::-webkit-media-controls-enclosure {
			border-radius: 0;
		}
	}
	&-caption {
		.hyphens( auto );
		color: #808080;
		font-size: 1em;
		font-style: italic;
		word-wrap: break-word;
	}
	&-data {
		border-bottom-style: solid;
		border-bottom-width: 1px;
		.flexbox();
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		&-label {
			.flex-basis( 90px );
			.hyphens( auto );
			overflow: hidden;
			word-wrap: break-word;
		}
		&-value {
			.flex-grow( 1 );
			.hyphens( auto );
			padding-left: 0;
			word-break: break-word;
			&:not( :first-child ) {
				padding-left: 10px;
			}
		}
	}
	&-group {
		border-bottom-style: solid;
		border-bottom-width: 1px;
		>.pi-item:last-child {
				border-bottom: 0;
		}
	}
	&-horizontal-group {
		border-spacing: 0;
		table-layout: fixed;
		text-align: center;
		width: 100%;
		.pi-header {
			text-align: left;
		}
		thead + tbody .pi-data-value {
			padding-top: 0;
		}
		.pi-horizontal-group-item {
			vertical-align: top;
			&:not( :first-child ) {
				border-left-style: solid;
				border-left-width: 1px;
			}
		}
		.pi-data-label {
			padding-bottom: 0;
		}
	}
	&-smart {
		&-data {
			&-label:not( :first-child ),
			&-value:not( :first-child ) {
				border-color: @pi-border-color;
				border-color: var( --pi-border-color );
				border-left-style: solid;
				border-left-width: 1px;
			}
		}
		&-group {
			border-bottom-style: solid;
			border-bottom-width: 1px;
			.flexbox( column );
			text-align: center;

			&:after {
				content: "";
				clear: both;
				display: block;
			}
			&:last-child {
				border-bottom: 0;
			}
			&-head,
			&-body {
				.flexbox();
			}
			&-head + .pi-smart-group-body .pi-data-value {
				padding-top: 0;
			}
			.pi-smart-data-label {
				padding-bottom: 0;
				box-sizing: border-box;
				.flex-grow( 1 );
				.flex-basis( auto );
				float: left;
			}
			.pi-smart-data-value {
				box-sizing: border-box;
				.flex-basis( auto );
				float: left;
			}
		}
	}
	&-layout-stacked {
		.pi-data {
			display: block;
		}
		.pi-data-value:not( :only-child ) {
			padding-left: 10px;
		}
	}

}

.pi-collapse() {
	.pi-collapse .pi-header:first-child {
		padding-right: 25px;
		position: relative;
		&::after {
			border-color: currentColor;
			border-style: solid;
			border-width: 2px 2px 0 0;
			content: '';
			display: block;
			height: 5px;
			right: 10px;
			position: absolute;
			top: 50%;
			width: 5px;
			.transform( rotate( -45deg ) );
			margin-top: -3px;
		}
	}
	.pi-collapse-closed {
		.pi-header:first-child::after {
			.transform( rotate( 135deg ) );
			margin-top: -5px;
		}
		> :nth-child( n+2 ) {
			display: none;
		}
		.pi-horizontal-group {
			thead,
			tbody {
				display: none;
			}
		}
	}
}

.client-js {
	@media screen and ( min-width: 720px ) {
		& when ( @responsibly-open-collapsed = 1 ) {
			.pi-collapse()
		}
	}
	& when not ( @responsibly-open-collapsed = 1 ) {
		.pi-collapse()
	}
}

@media screen and ( max-width: 720px ) {
	.portable-infobox {
		float: none;
		width: initial;
		font-size: initial;
		margin: 0;
	}

	.pi-title {
		text-align: center;
	}

	.pi-data-label {
		flex-basis: 30%
	}

	.pi-media-collection-tabs li,
	.pi-section-navigation li {
		li { flex: 1 50% }
	}
}

/* PI errors */
.pi-error-info.pi-error-info {
	background-color:  #f33;
	color: #fff;
	font-size: 18px;
	line-height: 28px;
	margin: 0;
	padding: 30px 50px;
}
.pi-debug.pi-debug {
	background-color: #e6e6e6;
	font-family: monospace;
	list-style: none;
	margin: 0;
	width: 100%;
	li {
		margin: 0;
	}
	.error {
		font-size: inherit;
	}
}
.pi-debug-line {
	.flexbox();
	&-number {
		box-sizing: border-box;
		.flex-basis( 50px );
		.flex-shrink( 0 );
		padding-left: 10px;
	}
	&-code {
		box-sizing: border-box;
	}
}
.pi-debug-error-message {
	background-color: #000;
	color: #fff;
	font-family: Helvetica,Arial,sans-serif;
	margin: 20px 0 10px 25px;
	padding: 10px 15px;
	position: relative;
	width: 400px;
	&:before {
		border-bottom: 15px solid black;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		content: '';
		display: block;
		height: 0;
		left: 25px;
		position: absolute;
		top: -15px;
		width: 0;
	}
	.pi-debug-error-message-item {
		margin: 5px 0;
	}
}

/* Skin specific fixes */
.skin-minerva {
	.portable-infobox {
		font-size: .8em;
	}

	.pi-caption {
		margin: @pi-item-spacing;
		margin: var( --pi-item-spacing );
	}

	.pi-horizontal-group {
		display: table;
		margin: 0;
		width: 100% !important;

		.pi-header {
			display: table-caption;
		}
	}

	.pi-navigation {
		box-sizing: border-box;
		width: 100%;
		float: none;
	}
}

.skin-timeless #mw-content-text {
	.portable-infobox {
		font-size: .8em;
	}

	.pi-title {
		border: none;
		font-size: 1.75em;
		line-height: 1.5;
		margin: 0;
	}

	.pi-header {
		border: none;
		font-family: inherit;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.3;
		margin: 0;
	}

	.pi-data-label {
		font-family: inherit;
		font-size: inherit;
		font-weight: bold;
		line-height: inherit;
		margin: 0;
	}
}