PortableInfobox/styles/PortableInfobox.scss

@import 'skins/shared/color';
@import 'skins/shared/mixins/columns';
@import 'skins/shared/mixins/flexbox';

$infobox-width: 270px;
// temporary value used to mach with Khal Drogo Infobox
$infobox-margin: 15px;
$infobox-item-margin: 5px;
$infobox-background: mix($color-page, $color-links, 90%);
@if ($is-dark-wiki) {
	$infobox-background: mix($color-page, $color-links, 85%);
}

$infobox-section-header-background: mix($color-page, $color-links, 75%);
$infobox-debug-line-number-width: 50px;
$infobox-debug-error-msg-color: white;
$infobox-debug-error-msg-bg: black;

.portable-infobox {
	background-color: $infobox-background;
	clear: right;
	float: right;
	margin: 0 0 $infobox-margin $infobox-margin;
	width: $infobox-width;

	// TODO: experimental wide infobox styles (remove or refactor)
	&.wide-infobox {
		@include column-count(3);
		@include column-gap($infobox-item-margin * 2);

		clear: both;
		float: none;
		margin: 0;
		width: 100%;

		.portable-infobox-item:not(.item-type-title) {
			@include column-break-inside(avoid);
		}

		.item-type-title {
			@include column-span(all);
		}
	}

	.portable-infobox-item-margins {
		padding: $infobox-item-margin $infobox-item-margin * 4 $infobox-item-margin $infobox-item-margin * 2;
	}

	.portable-infobox-image-wrapper {
		text-align: center;
	}

	.portable-infobox-image-caption {
		color: $color-alternate-text;
		font-size: 12px;
		font-style: italic;
		text-align: left;
	}

	.portable-infobox-secondary-background {
		background-color: $infobox-section-header-background;
	}

	.portable-infobox-secondary-font {
		font-size: 12px;
		font-weight: bold;
		line-height: 18px;
		margin-top: 0;
	}

	.portable-infobox-header,
	.portable-infobox-title {
		border: 0;

		margin: 0;
		padding: 0;
	}

	.portable-infobox-title {
		font-size: 18px;
		line-height: 28px;
	}

	.item-type-key-val:not(:last-of-type),
	.item-type-group,
	.item-type-comparison {
		border-bottom: 1px solid $infobox-section-header-background;
	}

	> .portable-infobox-item:last-child {
		border-bottom: 0;
	}

	.portable-infobox-item-label {
		margin-top: 0;
	}

	.portable-infobox-item-value {
		font-size: 14px;
		line-height: 20px;
		padding-left: $infobox-item-margin * 2;

		// experiment with removing margins on all children of data value
		> * {
			margin: 0;
		}

		ul,
		ol {
			list-style-position: inside;
		}
	}

	.portable-infobox-comparison {
		border-collapse: collapse;
		width: 100%;
	}

	.portable-infobox-comparison-set {
		display: block;
	}

	.portable-infobox-comparison-set-header {
		box-sizing: border-box;
		display: block;
		padding: 0;
		text-align: left;
		width: 100%;
	}

	.portable-infobox-comparison-item {
		box-sizing: border-box;
		vertical-align: top;
		width: $infobox-width / 2;

		&:first-of-type {
			border-right: 1px solid $infobox-section-header-background;
		}

		.item-type-key-val {
			border-bottom: 0;
			padding-right: $infobox-item-margin * 2;
		}
	}

	.group-layout-horizontal {
		&.item-type-group {
			display: table;
			table-layout: fixed;
			width: 100%;
		}

		.item-type-header {
			display: table-caption;
		}

		.item-type-key-val {
			border-bottom: 0;
			display: table-cell;
			padding: $infobox-item-margin;
			text-align: center;
		}

		.item-type-key-val:not(:last-of-type) {
			border-right: 1px solid $infobox-section-header-background;
		}

		.portable-infobox-item-label {
			overflow: hidden;
			vertical-align: top;
			white-space: nowrap;
		}

		.portable-infobox-item-value {
			padding-left: 0;
		}
	}
}

.WikiaArticle {
	.portable-infobox-error-info {
		background-color: $color-error;
		color: $infobox-debug-error-msg-color;
		font-size: 18px;
		line-height: 28px;
		margin: 0;
		padding: $infobox-margin * 2 $infobox-debug-line-number-width;
	}

	.portable-infobox-debug {
		background-color: $color-unified-module-background;
		font-family: monospace;
		list-style: none;
		margin: 0;
		width: 100%;

		li {
			margin: 0;
		}

		.error {
			font-size: inherit;
		}
	}
}

.portable-infobox-debug-line {
	@include flexbox();
}

.portable-infobox-debug-line-number,
.portable-infobox-debug-line-code {
	box-sizing: border-box;
}

.portable-infobox-debug-line-number {
	@include flex-basis($infobox-debug-line-number-width);
	@include flex-shrink(0);
	padding-left: $infobox-item-margin * 2;
}

.portable-infobox-debug-error-massage {
	background-color: $infobox-debug-error-msg-bg;
	color: $infobox-debug-error-msg-color;
	font-family: Helvetica, Arial, sans-serif;
	margin: 20px 0 10px 25px;
	padding: $infobox-item-margin * 2 $infobox-item-margin * 3;
	position: relative;
	width: 400px;

	&:before {
		border-bottom: $infobox-margin solid $infobox-debug-error-msg-bg;
		border-left: $infobox-margin solid transparent;
		border-right: $infobox-margin solid transparent;
		content: '';
		display: block;
		height: 0;
		left: 25px;
		position: absolute;
		top: -$infobox-margin;
		width: 0;
	}

	.portable-infobox-debug-error-massage-item {
		margin: $infobox-item-margin 0;
	}
}

.portable-infobox-layout-tabular {
	> .item-type-key-val,
	.item-type-group:not(.group-layout-horizontal) .item-type-key-val {
		@include flexbox;
		@include flex-direction(row);
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;

		.portable-infobox-item-label {
			@include flex-basis($infobox-width / 3);
			margin-bottom: inherit;
		}

		.portable-infobox-item-value {
			padding-left: 0;
		}

		.portable-infobox-item-value:not(:first-child) {
			@include flex-basis($infobox-width * 2 / 3);
			padding-left: 10px;
		}

		li {
			line-height: 19px;
			margin: 0;
		}
	}

	.portable-infobox-item-value {
		font-size: 12px;
		line-height: 18px;
	}
}