// $form-sidebar-position: position of sidebar (tracking code + steps)
// possible values are: left, right, top
$form-sidebar-position: left !default;
$form-sidebar-width: 18.5% !default;
$form-sidebar-gutter: 2% !default;
// $form-titlebar-mode: display mode for the title bar, possible values are:
// * page: full page width (i.e. sidebar + form content)
// * form: form width (+ margin to be aligned on top of form)
$form-titlebar-mode: page !default;
$form-background: $body-background !default;

// hide a bunch of elements
div#droite,
div#services > h3,
div#sidebox div#links {
	display: none;
}

// general layout

.form-content--sidebox, div#rub_service {
	margin-top: 15px;
}

div#rub_service {
	background: $form-background;
}

@if ($form-sidebar-position == top) {
	.form-content--sidebox {
		text-align: center;
		div#tracking-code {
			display: inline-block;
			min-width: 15rem;
			a {
				padding-left: 0;
			}
		}
	}
} @else {
	.form-content--sidebox {
		clear: both;
		width: $form-sidebar-width;
		@if ($form-sidebar-position == left) {
			float: left;
		} @else {
			float: right;
		}
	}

	.form-content--sidebox + div#rub_service {
		width: calc(100% - #{$form-sidebar-width} - #{$form-sidebar-gutter});
		clear: none;
		@if ($form-sidebar-position == left) {
			float: right;
		} @else {
			float: left;
		}
	}
}

// style homepage blocks
div#services > ul {
	@include vendor-prefix('column-count', '2');
	padding: 0;
	margin: 0;
	list-style: none;
	@media screen and ($max-mobile-viewport) {
		@include vendor-prefix('column-count', '1');
	}
}

div#services > ul > li {
	display: inline-block;
}

div#services ul li li {
	list-style: none;
}

div#services > ul > li {
	margin: 0;
	margin-bottom: 10px;
	width: 100%;
}

.form-content--title,
div#tracking-code h3,
div#rub_service h2 {
	@extend %title;
}

div#rub_service h3 {
	border: none;
	text-align: left;
	border-bottom: 2px solid $title-background;
}

div#rub_service div.dataview,
div#rub_service dl#evolutions,
div#rub_service .drafts-recall,
div#rub_service form {
	padding: 0.5rem;
}

div#rub_service div.dataview div.title h3 {
	font-size: 115%;
	border: 0;
}

div#rub_service div.dataview div.subtitle h4 {
	font-size: 110%;
}

div#rub_service div.dataview div.field.status {
	clear: both;
}

// tracking code
div#tracking-code {
	div.tracking-code-part + form {
		margin-top: 1em;
	}
}

div#tracking-code a {
	font-size: 150%;
	display: inline-block;
	color: #444;
}

div#tracking-code {
	@media ($min-desktop-viewport) {
		a, .text-tracking-code-short-text {
			padding-left: 1rem;
			padding-right: 1rem;
		}
		.text-tracking-code-short-text > * {
			padding-left: 0;
			padding-right: 0;
			margin-left: 0;
			margin-right: 0;
		}
	}
}

div#tracking-code {
	margin-bottom: 1em;
}

div#services div.block-custom-text {
	margin: 1em;
}



@media screen and ($max-mobile-viewport) {
	// move .form-content--sidebox on top and tracking code after steps
	.form-content--sidebox {
		float: none;
		width: 100%;
	}
	div#side {
		display: flex;
		flex-direction: column;
		& > div { flex: 1 0 auto; }
	}
	div#tracking-code {
		font-size: 80%;
		order: 1;
		h3 { display: inline-block; }
		.text-tracking-code-short-text { display: none; }
	}
}

@media screen and ($max-mobile-viewport) {
	.form-content--sidebox + div#rub_service,
	div#rub_service {
		width: 100%;
		margin: 0;
		float: none;
	}
	.form-content--sidebox {
		text-align: left;
		div#tracking-code a {
			padding-left: 0.3em;
		}
	}
}


li.required-authentication span {
	display: none;
}

div ul > li.required-authentication > a {
	padding-right: 2rem;
}

li.required-authentication a:after {
	content: "\f084";
	font-family: FontAwesome;
	position: absolute;
	right: 0.7em;
	color: #444;
}

ul#evolutions,
.gru-content #disclose-dataview,
div#receipt-intro {
	margin: 1em;
	padding: 0;
	display: block;
}

div.qommon-map {
	height: 280px;
}

p.use-file-from-fargo span {
	cursor: pointer;
	border-bottom: 1px dotted #999;
}

// journal
ul#evolutions {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

#evolutions:after {
	// the vertical timeline itself
	content: "";
	background: #bbb;
	position: absolute;
	width: 1px;
	top: 40px;
	left: 30px;
	height: calc(100% - 40px);
	z-index: 0;
	border-radius: 3px;
}

ul#evolutions > li {
	list-style-image: none;
	margin: 1em 0 2em 0;
	z-index: 10;
	position: relative;
	li {
		margin: 1rem 0;
	}
}

ul#evolutions > li:after {
	// li:after, horizontal line, from the timeline to the item
	content: "";
	background: #bbb;
	position: absolute;
	width: 100px;
	left: 30px;
	top: 39px;
	height: 1px;
	z-index: -10;
}

ul#evolutions .evolution-metadata {
	width: auto;
	display: inline-block;
	background: $form-background;
	margin: 0 0 0 60px;
	padding: 0.7em;
	padding-top: 30px;
	padding-bottom: 0;
}

ul#evolutions span.time {
	display: block;
	color: #aaa;
}

ul#evolutions li div.msg span.time {
	padding-left: 0;
}

ul#evolutions span.status {
	font-weight: bold;
	display: inline-block;
}

ul#evolutions span.user {
	display: block;
	opacity: 0.5;
}

ul#evolutions span.user span {
	font-size: 80%;
}

ul#evolutions li div.msg {
	padding: 0.7em;
	padding-top: 0;
	position: relative;
	background: $form-background;
	margin-left: 60px;
	margin-right: 30px;
	p.wf-attachment {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

ul#evolutions li.msg-in div.msg {
}

ul#evolutions li.msg-out div.msg {
}

ul#evolutions li div.msg div.comment {
	padding: 0.7em 1em;
	background: #EEEEEE;
}

ul#evolutions li span.item {
	// left circle icon
	position: absolute;
	text-align: center;
	width: 31px;
	height: 31px;
	display: block;
	left:  15px;
	border-radius: 20px;
	border: 1px solid #888;
	top: 24px;
	background: $button-color !important;
	box-shadow: 0 0 0px 5px $form-background;
	&::before {
		content: "";
		display: block;
		width: 7px;
		height: 7px;
		background: $primary-color;
		position: relative;
		left: 11px;
		top: 11px;
		border-radius: 5px;
	}
}

div.dataview {
	div.field {
		margin-bottom: 0.7em;
	}
	div.field-type-items .value ul {
		margin-top: 0;
		margin-bottom : 0;
	}
	.label {
		font-weight: bold;
		margin: 0;
	}
	.value {
		display: block;
		margin-left: 0.7em;
	}
	.field-type-block > .value {
		margin-left: 0;
	}
}

form div.errornotice {
	margin-top: 0;
}

// classes to be used in forms (legacy, grid system to be preferred)
div.halfwidth {
	width: 45%;
	float: left;
}

div.widget.halfwidth.right {
	clear: none;
	margin-left: 5%;
}

div.fullwidth {
	width: 95%;
}

div.halfwidth,
div.fullwidth {
	textarea, select, input {
		width: 100%;
	}
}

div.buttons,
div.dataview > p,
div.dataview div.page {
	clear: both;
}

form div.page,
div.dataview div.page {
	@extend .clearfix;
}

div.form-validation div.page {
	background: #f0f0f0;
	padding-left: 0.7em;
	margin-bottom: 1.5em;
	@media(max-width: $very-small-limit) {
		padding-right: 0.7em;
	}
	> h3 {
		padding-top: 0.7em;
		font-size: 140%;
	}
	.widget:not(.BlockWidget):not(.BlockSubWidget):not([class*=' grid-']) {
		@media(min-width: $very-small-limit + 1) {
			padding-right: 0.7em;
		}
	}
}


div#rub_service div.form-validation div.page div h3 {
	border-bottom-width: 1px;
}

label.activity {
	display: block;
	background: url(/static/img/spinner.gif) no-repeat top right;
	padding-right: 30px;
}

span.geoloc-error {
	padding-left: 0.7em;
	font-weight: normal;
	font-size: smaller;
	float: right;
	@media screen and ($max-mobile-viewport) {
		padding-left: 0;
		float: none;
		display: block;
		z-index: 100;
		background: red;
		color: white;
		text-align: center;
	}
}

.fileprogress {
	border: 1px solid #888;
}

.fileprogress {
	.bar {
		background: $button-background;
		line-height: 1.5em;
		padding-left: 0.7em;
		white-space: nowrap;
		transition: background linear 0.1s;
	}
	&.upload-error .bar {
		background: #FF7575;
		color: black;
		width: 100% !important;
		white-space: normal;
	}
}

.fileinfo {
	line-height: 1.5em;
}

div.fileinfo a.remove {
	text-indent: 0;
	background: none;
	color: transparent;
	display: inline-block;
	text-indent: -10000px;
	position: absolute;
	top: 0;
	right: 0;
	width: 3rem;
	height: 3rem;
	&::before {
		font-size: 150%;
		font-family: FontAwesome;
		content: "\f057";  // times-circle
		@if ($button-background == $widget-background) {
			color: $button-color;
		} @else {
			color: $button-background;
		}
		text-indent: 0;
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		text-align: center;
	}
}

div.RankedItemsWidget label input {
	margin-right: 1em;
}

div.RadiobuttonsWidget, div.SingleSelectHintWidget,
div.SingleSelectWidget, div.SingleSelectWidgetWithOther {
	&.pk-hidden,
	&.hidden {
		display: none !important;
	}
}

div.CheckboxesWidget div.content ul li.disabled {
	color: lighten($font-color, 50);
}

div.RadiobuttonsWidget div.content input[disabled] + span {
	color: lighten($font-color, 50);
}

div.file-upload-widget {
	&:not([class*="grid-"]) {
		div.file-button {
			max-width: 500px;
		}
	}
	div.file-button {
		overflow: hidden;
		background: $widget-background;
		margin: 0;
		border: $widget-border;
		border-radius: $widget-border-radius;
		&:focus-within {
			border: $widget-focus-border;
			@if $widget-focus-outline == none {
				outline: $widget-border;
				outline-style: dotted;
			} @else {
				outline: $widget-focus-outline;
				outline-offset: $widget-focus-outline-offset;
			}
		}
		min-height: 150px;
		position: relative;
		text-align: center;
		div.widget.FileWidget {
			margin-bottom: 0;
		}
		input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.001;
			margin: 0;
			font-size: 0;
			cursor: pointer;
		}
		div.upload-done {
			display: none;
		}
		div.click-to-upload {
			display: block;
		}
		div.widget-message {
			padding-top: 20px;
			&::before {
				pointer-events: none;
				content: "\f016";  // file-o
				font-family: FontAwesome;
				font-size: 40px;
				display: block;
				padding-top: 20px;
				padding-bottom: 10px;
			}
			&::after {
				pointer-events: none;
				content: "\f055";  // plus-circle
				font-family: FontAwesome;
				font-size: 20px;
				display: block;
				position: absolute;
				left: calc(50% + 10px);
				top: 30px;
				@if ($button-background == $widget-background) {
					color: $button-color;
				} @else {
					color: $button-background;
				}
			}
			&.upload-done::after {
				content: "\f05d";  // check-circle-o
			}
		}
		&.file-image div.widget-message::before {
			content: "\f1c5";  // file-image-o
		}
	}
	&.has-file {
		div.file-button {
			div.upload-done {
				display: block;
			}
			div.click-to-upload {
				display: none;
			}
		}
	}
	.filename {
		white-space: pre;
		text-overflow: ellipsis;
		display: block;
		overflow: hidden;
		max-width: 95%;
		margin: 0 auto;
	}
	&.widget-readonly {
		div.file-button {
			// sizing is a bit complicated for image thumbnails, we have
			// .file-button > .fileinfo > img
			// .file-button is set to a fixed height
			// .fileinfo is set to use all of it (height: 100%)
			// img is set to fill whatever is possible (max-height: 100%)
			height: 150px;
			.fileinfo.thumbnail {
				height: 100%;
			}
			div.widget-message {
				display: none;
			}
			.fileinfo.thumbnail .filename {
				display: none;
			}
			.filename {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				display: block;
				padding-top: 30px;
				&::before {
					pointer-events: none;
					content: "\f016";  // file-o
					font-family: FontAwesome;
					font-size: 40px;
					display: block;
					padding-top: 25px;
					padding-bottom: 10px;
				}
			}
			img {
				max-height: 100%;
				max-width: auto;
				position: relative;
				z-index: 10;
			}
		}
	}
	&.pk-compact-file,
	&.short {
		div.file-button {
			min-height: 50px;
		}
		div.widget-message.click-to-upload {
			display: flex;
		}
		div.widget-message.upload-done,
		div.widget-message.click-to-upload {
			align-items: center;
			padding: 5px 10px;
			text-align: left;
			&::before {
				padding-top: 10px;
				padding-right: 20px;
			}
			&::after {
				top: 2px;
				left: 38px;
			}
		}
		&.widget-readonly div.file-button {
			height: 70px;
			div.widget-message.upload-done {
				display: none;
			}
			.filename {
				padding: 5px 10px;
				display: flex;
				align-items: center;
				&::before {
					display: block;
					padding-top: 18px;
					padding-bottom: 15px;
					padding-right: 20px;
				}
			}
			div.fileinfo {
				margin-top: 0;
			}
		}
		&.has-file {
			div.widget-message.upload-done {
				display: flex;
			}
		}
		div.fileinfo {
			text-align: left;
			padding-left: 55px;
			min-height: 1.5em;
			margin-top: -1.5em;
		}
	}
	div.fileprogress {
		position: absolute;
		border: none;
		overflow: hidden;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}

.TableListRowsWidget {
	.widget {
		margin-bottom: 0;
	}
}
// Responsive TableWidget
// work with JS : `new Responsive_table(table);`
.responsive-tableWidget {
	// table headers
	th, td::before {
		text-align: left;
		font-weight: normal;
	}

	@media ($max-mobile-viewport) {
		&, & tbody {
			display: block;
		}
		thead th {
			display: none;
		}
		tbody {
			th {
				display: block;
			}
			tr {
				display: block;
				padding-top: 0.5rem;
				padding-bottom: 0.5rem;

				&:nth-child(even) {
					background-color: rgba(0, 0, 0, 0.065);
				}
			}
			td {
				display: flex;
				align-items: last baseline;
			}
			td::before {
				content: attr(data-col-header);
				display: block;
				flex: 0 1 33%;
				margin-right: .66em;
			}
		}
	}
	@media (max-width: $very-small-limit) {
		tbody td {
			display: block;
		}
	}
}

p.use-file-from-fargo {
	margin-top: 0;
}

div.section.foldable {
	margin-bottom: 1rem;
	> h2:first-child {
		&::after {
			font-family: FontAwesome;
			content: "\f106";  // angle-up
			position: absolute;
			right: 1em;
		}
		cursor: pointer;
		&:focus span.disclose-message,
		&:hover span.disclose-message {
			text-decoration: underline;
		}
	}
	span.disclose-message {
		padding-left: 1ex;
		font-size: 1rem;
		display: none;
	}
	&.folded {
		span.disclose-message {
			display: inline-block;
			@media screen and ($max-mobile-viewport) {
				// never displayed on mobile as the small width
				// makes clear the relation between title and
				// open/close bracket.
				display: none;
			}
		}
		div {
			display: none;
		}
		> h2:first-child::after {
			content: "\f107";  // angle-down
		}
	}
}

.wcs-block-with-remove-button {
	.BlockSubWidget {
		position: relative;
		@include clearfix();
	}
	.remove-button {
		position: absolute;
		right: 3px;
		top: 0.5em;
		margin-right: 0;
		span {
			display: none;
		}
		&::after {
			font-family: FontAwesome;
			content: "\f1f8";  // trash
		}
	}
}

.pk-blocks-zebra {
	.BlockSubWidget {
		position: relative;
		@include clearfix();
	}
	// add a gray background for even numbered blocks, but that means odd
	// childs when the first child is an error.
	.error ~ .BlockSubWidget:nth-child(odd),
	.BlockSubWidget:first-child ~ .BlockSubWidget:nth-child(even) {
		background: hsla(0, 0%, 0%, 0.05);
		box-shadow: -0.5em -0.5em 0 .5em hsla(0, 0%, 0%, 0.05);
	}
}

.form-content--body--title {
	display: none;
	visibility: hidden;
}

@if ($form-titlebar-mode == form) {
	.form-content--titlebar {
		display: none;
	}
	.form-content--body--title {
		display: block;
		visibility: visible;
	}
}