$notification_base_color: #F9DEDE !default;

$notification_error_color: $notification_base_color !default;
$notification_warning_color: saturate(adjust-hue($notification_base_color, 45deg), 20%) !default;
$notification_success_color: adjust-hue($notification_base_color, 120deg) !default;
$notification_info_color: adjust-hue($notification_base_color, 220deg) !default;

// $notification-style:
//  classic: black icon
//  border-icon: colored icon on left boder
//  border-bar: colored bar with icon on the left
$notification-style: classic !default;

$notification-icon-size: null !default;

$timetable-cell-background: transparentize($button-background, 0.8) !default;
$timetable-cell-hover-color: $button-color !default;
$timetable-cell-hover-background: $button-background !default;
$timetable-cell-selected-color: $timetable-cell-hover-color !default;
$timetable-cell-selected-background: $timetable-cell-hover-background !default;

@if $notification-style == border-bar {
	$notification-icon-size: 1.5rem !default;
} @else {
	$notification-icon-size: 2rem !default;
}

$notification-left-padding: calc(#{$notification-icon-size} + 2rem);
@if $notification-style == border-icon {
	$notification-left-padding: $notification-icon-size;
}
@if $notification-style == border-bar {
	$notification-left-padding: calc(#{$notification-icon-size} + 1rem);
}

$notification-icon-position: top !default; // top || center

// add a border with "OU" between authentication blocks
$or-separator: if($cell-border == none, true, false) !default;

div.textcell {
	h3, h4, h5, p, table {
		margin: 0.7em 1rem;
	}
	p, table, ul, ol {
		line-height: 1.4;
	}
}

@media screen and ($max-mobile-viewport) {
	img {
		max-width: 100%;
	}
}

span#environment-label,
div#footer div.cell.test-banner {
	position: fixed;
	line-height: 200%;
	font-weight: bold;
	color: white;
	top: 5em;
	right: -5em;
	background: red;
	width: 25em;
	z-index: 1000;
	@include vendor-prefix('transform', 'rotate(45deg)');
	@include vendor-prefix('transform-origin', 'center center');
	text-align: center;
	border: 2px solid darken(#f00, 10%);
	white-space: pre;
	opacity: 0.9;
	pointer-events: none;
	@media screen and ($max-mobile-viewport) {
		top: auto;
		bottom: 3rem;
		right: -1rem;
		width: 25vw;
		padding: 0 1rem;
		font-size: 70%;
		opacity: 0.7;
		border: 0;
		@include vendor-prefix('transform', 'rotate(-45deg)');
		@include vendor-prefix('transform-origin', 'bottom right');
	}
}

div#footer div.cell.test-banner p {
	margin: 0;
}

#login-methods {
	width: 48%;
	float: left;
}

#welcome-text {
	padding: 0 1em;
	width: 48%;
	width: calc(48% - 2em);
	float: right;
}


@media screen and ($max-mobile-viewport) {
	#welcome-text,
	#login-methods {
		width: auto;
		float: none;
	}
}

div#login-methods label {
	display: block;
}

div#login-methods input {
	margin-left: 0.7em;
}

@if $or-separator {
	// add a border with "OU" between authentication blocks
	#registration-blocks .a2-block:not(:first-child),
	#login-page .block:not(:first-child) {
		position: relative;
		padding-left: 2rem;
		border-radius: 0;
		overflow: visible;
		&::after {
			content: "OU";
			display: block;
			position: absolute;
			left: -1.5rem;
			width: 3rem;
			text-align: center;
			top: 0;
			height: 100%;
			line-height: 3rem;
			padding-top: 1rem;
			background-image:
				linear-gradient(black, black),
				linear-gradient(black, black);
			background-size: 1px 1rem, 1px 100%;
			background-repeat: no-repeat;
			background-position: center 0, center 4rem;
		}
		@media screen and ($max-mobile-viewport) {
			padding-left: 0;
			margin-top: 3rem;
			&::after {
				padding-top: 0;
				left: 0;
				top: -3rem;
				height: 3rem;
				width: 100%;
				background-size: calc(50% - 2rem) 1px;
				background-repeat: no-repeat;
				background-position: right, left;
			}
		}
	}
}

.block-fc a.button:focus {
	@if $button-focus-outline == none {
		outline: 1px dotted $button-background;
	} @else {
		outline: $button-focus-outline;
		outline-offset: $button-focus-outline-offset;
	}
}

div.card,
#profile {
	.label {
		color: lighten($font-color, 20%);
		font-size: 90%;
		display: block;
	}

	.value {
		display: block;
		margin-left: 0;
		margin-bottom: 0.7em;
		span.nodata {
			font-style: italic;
		}
	}
}

div.card {
	p {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.consents {
	&--list {
		padding-left: 0;
		list-style: none;
	}
	&--form {
		display: flex;
		justify-content: space-between;
	}
	&--client {
		display: block;
		font-size: 110%;
	}
	&--dates {
		font-size: 90%;
	}
	@media screen and ($max-mobile-viewport) {
		&--since, &--expired {
			display: block;
		}
		&--separator {
			display: none;
		}
	}
	form div button {
		margin-right: 0;
		min-width: auto;
	}
}


a#publik-portal-agent {
	z-index: 10000;
	position: absolute;
	top: 0px;
	right: 5px;
	background: white;
	color: #767676;
	padding: 5px 10px;
	border: 1px solid;
	border-width: 0 1px 1px 1px;
	@media screen and ($max-mobile-viewport) {
		display: none;
	}
}

div#consent_banner {
	position: fixed;
	width: 100%;
	z-index: 10000;
	background: rgba(255, 255, 255, 0.95);
	text-align: center;
	box-shadow: 0 0 8px 1px #666;
	padding: 0.7em 0;
	bottom: 0;

	& div.actions {
		padding-top: 0.7em;
	}

	& button {
		position: absolute;
		right: 0;
		top: 0;
		background: transparent;
		border: none;
		cursor: pointer;
	}
}

%top-consent-banner {
	@media screen and ($max-mobile-viewport) {
		position: absolute;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 0 8px 1px #333;
		top: 0;
		bottom: auto;
	}
}

@if $nav-mobile-mode == bottom-bar {
	div#consent_banner {
		@extend %top-consent-banner;
	}
} @else {
	.has-pwa-navigation div#consent_banner {
		@extend %top-consent-banner;
	}
}

.block-password input[type=text], .block-password input[type=password] {
	width: 25em;
}

ul.logout-list {
	padding: 0;
	margin: 1em;
}

div#continue-link {
	margin: 1em;
}

// overlay for page changes; this requires one of transitions/$foo.scss files,
// (see additional explanations in there) and some custom javascript code to
// create the overlay on a given event; for example:
//
//    $(function() {
//      $(window).on('pageshow', function() {
//        $('#page-change-overlay').remove();
//      });
//      $('form.quixote').on('submit', function() {
//        var overlay = $('<div id="page-change-overlay"></div>').appendTo('body');
//        overlay[0].offsetHeight; // force redraw to get fade-in of overlay
//        overlay.toggleClass('on');
//        return true;
//      });
//    });
div#page-change-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transition: all 0.3s ease;
	z-index: 100000;
	background: white;
	opacity: 0;
}

div#page-change-overlay.on {
	z-index: 100000;
	opacity: 0.9;
}

// django.contrib.messages
#messages {
	& ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

@mixin notification-message-base($color, $symbol) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: $color;
	color: text-color($color);
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 0.5rem;
	padding-left: $notification-left-padding;
	position: relative;
	border: none;
	min-height: calc(#{$notification-icon-size} + 1rem);
	@if $notification-style == border-icon {
		border-left: 4px solid darken($color, 40%);
	}
	@if $notification-style == border-bar {
		padding-left: 1rem;
		border: 1px solid $color;
		border-left-width: $notification-left-padding ;
		background: white;
		color: $font-color;
	}

	&::before {
		content: $symbol;
		font-family: FontAwesome;
		font-size: $notification-icon-size;
		text-align: center;
		display: block;
		width: 1em;
		height: 1em;
		position: absolute;
		margin: auto;
		left: 0;
		right: calc(100% - #{$notification-left-padding});
		top: 0.5rem;
		@if $notification-icon-position == center {
			bottom: 0.5rem
		}
		@if $notification-style == border-icon {
			color: darken($color, 40%);
			background: white;
			border-radius: 50%;
			transform: translateX(calc(#{$notification-icon-size / -2} - 2px));
		}
		@if $notification-style == border-bar {
			color: white;
			left: calc( -1 * #{$notification-left-padding});
			right: 100%;
		}
	}

	p {
		margin: 0 0 0.6rem 0;
		&:last-child {
			margin-bottom: 0;
		}
	}
}

@mixin notification-message($color, $symbol) {
	@include notification-message-base($color, $symbol);
	&[class*=grid-].comment-field {
		// adapt when used as comment field in grid system.
		@if $grid-gutter != 0px {
			box-sizing: border-box;
		}
		margin-right: 1rem;
	}
	&:not([class*=grid-]).comment-field {
		// clear everything if not in a grid.
		clear: both;
	}

	.gru-content &.cell {
		h2:first-child {
			background: transparent;
			font-weight: bold;
			padding: 0;
			margin: 0;
			color: inherit;
		}
	}
}

.errornotice { @include notification-message($notification_error_color, "\f06a"); }
.warningnotice { @include notification-message($notification_warning_color, "\f071"); }
.successnotice { @include notification-message($notification_success_color, "\f058"); } // check-circle
.infonotice { @include notification-message($notification_info_color, "\f05a"); }

#messages li.error { @extend .errornotice; }
#messages li.warning { @extend .warningnotice; }
#messages li.success { @extend .successnotice; }
#messages li.info { @extend .infonotice; }

form ul.errorlist.nonfield {
	margin-top: 0;
	li {
		@extend .errornotice;
		margin-top: 0;
	}
}

// lingo cells
table.invoices th.invoice-amount {
	text-align: right;
	padding-right: 0.7em;
}

td.amount {
	text-align: right;
}

table.invoices {
	width: 100%;

	th {
		text-align: left;
		padding: 0.3em;
	}

	td {
		padding: 0.3em 0.7em;
	}

	tr:nth-child(even) {
		background: #eee;
	}

	td:last-child {
		width: 8em;
		line-height: 150%;
	}

	a.icon-view, a.icon-pdf {
		white-space: nowrap;
	}

	a.icon-view:before {
		padding-right: 0.7em;
		font-family: FontAwesome;
		content: "\f06e\00a0";  // eye
	}

	a.icon-pdf:before {
		padding-right: 0.7em;
		font-family: FontAwesome;
		content: "\f1c1\00a0";  // file-pdf-o
	}
}

// invoice popup
div.ui-dialog #item {
	span.amount, span.timestamp {
		flex-grow: 1;
		text-align: right;
	}
	div {
		margin: 1.5em 0;
		border-bottom: 1px dotted #ccc;
		padding-bottom: 0.3em;
		display: flex;
		flex-wrap: wrap;
		&.paid-info::before,
		&.no-online-payment-reason::before {
			content: '\f05a';  // info-circle
			font-family: FontAwesome;
			margin-right: 0.3em;
		}
	}
}

div.ui-dialog.alert .ui-dialog-titlebar {
	background: #E65050;
}

// fargo
div#user-files {
	position: relative;

	table {
		width: 100%;
		border-collapse: collapse;
	}

	th {
		text-align: left;
		padding: 0.3em;
		text-transform: lowercase;
	}

	th a {
		color: inherit;
	}

	tbody tr {
		cursor: pointer;
	}

	tbody tr:hover td.title {
		text-decoration: underline;
	}

	tr.description-row {
		cursor: auto;
		font-size: 90%;
	}

	td {
		padding: 0.3em 1em;
		border: 1px solid white;
	}

	td.size {
		text-align: right;
	}

	td.thumbnail {
		text-align: center;
	}

	tbody tr.odd {
		background: white;
	}

	tbody tr.even {
		background: #eee;
	}

	a.icon-remove,
	a.icon-edit {
		&::before {
			font-family: FontAwesome;
			font-weight: normal;
			font-style: normal;
			display: inline-block;
			text-decoration: none;
			content: "\f040";  // pencil
			color: $button-background;
		}
		display: inline-block;
	}
	a.icon-remove::before { content: "\f057"; }  // times-circle

	// support for legacy delete button markup, to be removed
	button.icon-remove-sign {
		border: none;
		background: none;
		box-shadow: none;
		padding: 2px;
		line-height: 100%;
		color: $button-background;
		margin-right: 0;
	}
	button.icon-remove-sign::before {
		font-family: FontAwesome;
		content: "\f057";
	}

	td.action-column {
		width: 1.5em;
		text-align: center;
		vertical-align: middle;
	}

	tr::before {
		font-family: FontAwesome;
		content: "";
		vertical-align: middle;
		text-align: center;
		display: table-cell;
		width: 2em;
	}

	tr.mime-text::before { content: "\f0f6"; }  // -file-text-o
	tr.mime-image::before { content: "\f1c5"; }  // -file-image-o
	tr.mime-audio::before { content: "\f1c7"; }  // -file-audio-o
	tr.mime-video::before { content: "\f1c8"; }  // -file-video-o
	tr.mime-application::before { content: "\f016"; }  // -file-o
	tr.mime-application-pdf::before { content: "\f1c1"; }  // -file-pdf-o

	td.thumbnail {
		max-width: 100px;
		img {
			min-width: 60px;
			max-width: 100%;
		}
	}

}

// fargo
div.table-container {
	ul.pagination {
		min-height: 2rem;
		list-style: none;
		margin: 0 0 1em 0;
		padding: 1.5em 0.7em 1em 0;
		li {
			display: none;
			float: left;
			line-height: 150%;
		}
		> li.cardinality {
			float: right;
		}
		li.previous, li.next {
			display: block;
			a {
				@extend %button !optional;
			}
		}
		li.current {
			display: block;
			position: absolute;
			right: 1rem;
		}
	}
}

.fargo-pick-popup th {
	text-align: left;
	padding: 0.3em;
	text-transform: lowercase;
}

table.shades tbody tr:nth-child(2n+1) {
	background: #eee;
}

table.headers th {
	background: $button-background;
	color: $button-color;
	padding: 0.7em 1em;
}

table.centered-cells td {
	text-align: center;
}

.combo-search-results em {
	background: yellow;
}

div.a2-continue {
	padding: 1em;
}

div.timetable-widget {
	// style for templates/qommon/forms/widgets/select--meetings.html
	margin-top: 0.7em;
	display: flex;
	align-items: flex-start;
	width: 100%;
	& > div {
		flex: 0 1 auto;
		width: 20%;
		padding: 0 2px;
		text-align: center;
		display: none;
	}

	div.head {
		padding-bottom: 0.7em;
	}
	button {
		margin: 0;
		width: 3em;
		height: 3em;
		&.next {
			margin-left: 1em;
		}
		&.prev {
			margin-right: 1em;
		}
	}

	div span.timetable-cell {
		display: block;
		cursor: pointer;
		padding: 0.2em 0;
		&.disabled {
			opacity: 0.3;
			cursor: not-allowed;
		}
		border-radius: $button-border-radius;
		margin-bottom: 4px;
	}

	span.timetable-cell.selectable {
		background: $timetable-cell-background;
		&:hover {
			background: $timetable-cell-hover-background;
			color: $timetable-cell-hover-color;
			box-shadow: 1px 0px 5px $button-background;
		}
		&.on {
			background: $timetable-cell-selected-background;
			color: $timetable-cell-selected-color;
		}
	}

	&.mobile {
		> div {
			width: 100%;
		}
		div span.timetable-cell {
			display: inline-block;
			padding: 0.5em;
			margin: 0.5em;
		}
		button {
			&.prev, &.next {
				margin: 0;
			}
		}
	}
}

div.location-icon {
	pointer-events: none;
	width: 10px;
	height: 10px;
	background: red;
	border-radius: 100%;
	position: relative;
	top: -5px;
	left: -5px;
	border: 1px solid #800;
	z-index: -100 !important;
}

div.leaflet-control-gps {
	&.pending {
		opacity: 0.5;
		a {
			cursor: wait;
		}
	}
}

#fc-linking {
	padding: 0 1rem;
	&.no-account {
		text-align: center;
	}
}

div.leaflet-bottom, div.leaflet-top {
	z-index: 800;
}

.login-actions {
	ul, li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

.field-live-hint {
	position: absolute;
	background: #ffffee;
	color: #333;
	z-index: 1000000;
	padding: 1em 1em;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
	span::before {
		font-family: FontAwesome;
		content: "\f0eb";  // lightbulb
		padding-right: 0.5em;
	}
	button.action,
	button.close {
		margin: 0 1em;
		padding: 0;
		color: blue !important;
		border: none !important;
		text-decoration: underline !important;
		background: transparent !important;
		box-shadow: none !important;
		min-width: auto;
	}
	button.close {
		color: #333 !important;
		margin: 0;
		text-decoration: none !important;
		&::after {
			content: "×";
		}
	}
}
