@mixin roundedCell {
	border-radius: $custom-border-radius;
	box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);
	overflow: hidden;

	h2 {
		display: block !important;
		text-align: center;
		background: none;
		color: black;
		padding-top: 0.7em;
		padding-bottom: 0.7em;

		+ div {
			padding: 1rem;
			padding-top: 0;
		}
	}
}

// add black triangle on bottom of element
// $position: left | right;
@mixin triangle($position: right, $width: 1rem 0.7rem) {
	position: relative;
	&::after {
		content: "";
		width: 0;
		height: 0;
		border: solid transparent;
		border-width: $width;
		border-top-color: $font-color;
		position: absolute;
		top: 100%;
		z-index: 1;
		@if $position == right {
			right: 1rem;
		}
		@if $position == left {
			left: 0;
		}
	}
}

@mixin underlined-with-triangle {
	@include triangle(left, 0.8rem 0.6rem);
	&::before {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: $font-color;
	}
}

@mixin image-to-white {
	filter:
		invert(100%)
		grayscale(100%)
		contrast(60%)
		brightness(200%)
		drop-shadow(0 0 3px #000);
}

@mixin white-button {
	color: $font-color;
	background-color: white;

	&:hover {
		color: $primary-color;
		border-color: currentColor;
		background-color: white;
	}
}

%button {
	display: inline-block;
	text-transform: uppercase;
	&:hover {
		text-decoration: none;
	}
}

%cancel-button {
	@extend %button;
	@include white-button;
}

.white-button {
	@extend %cancel-button;
}


// typo

html, body {
	@media ($min-desktop-viewport) {
		font-size: 110%;
		overflow-x: hidden;
	}
}
h1 {
	font-size: $fz-h1;
	font-family: $ff-title;
	text-transform: uppercase;
}
h2 {
	font-size: $fz-h2;
	font-family: $ff-title;
	text-transform: uppercase;
}
h3 {
	font-size: $fz-h3;
	font-family: $ff-text;
	text-transform: uppercase;
}
h4 {
	font-size: $fz-h4;
	font-family: $ff-text;
}
h5 {
	font-size: $fz-h5;
	font-family: $ff-title;
}
a:hover {
	text-decoration: underline;
}

// forms
input[readonly], select[readonly], textarea[readonly] {
	border: $widget-border;
	background: none;
	border-radius: $widget-border-radius;
}

// utils
.site-wrapper {
	width: $width;
	max-width: 100%;
	margin: 0 auto;
}

// header
#top {
	display: flex;
	align-items: center;
}
#logo {
	flex-grow: 1;
	padding-left: 0;
	&.has-logo a {
		height: $logo-size;
		width: $logo-size;
		margin-right: .5rem;
		margin-left: .5rem;
		min-width: 0;
	}
}
// toplinks
#toplinks {
	// reset
	position: relative;
	border: none;
	box-shadow: none;
	padding: 0;
	border-radius: 0;

	text-transform: uppercase;
	line-height: 1.5;
	font-size: $fz-small;
	margin-right: $nav-menu-side * 2;
	word-spacing: 0.7em;
	@media (max-width: $very-small-limit + 1) {
		margin-right: $nav-menu-side * 1.25;
	}
	a {
		color: $font-color;
		&:hover {
			text-decoration: underline;
		}
	}
	span.connected-user {
		padding-right: 0;
	}
	// user icon
	min-height: $fz-h3;
	padding-right: $fz-h3 + 0.7;
	background: url(icons/usager.svg) no-repeat right center;
	background-size: auto $fz-h3;

	// label align
	display: flex;
	align-items: center;
}

// nav
div.gru-nav {
	$btn-bottom-space: ( $logo-size - $nav-menu-side ) / 2 ;
	$nav-width: 25rem;

	position: relative;
	z-index: 101;

	@media (min-width: $very-small-limit + 1) {
		transform: translateX(-1rem);
	}

	&-wrapper {
		margin-top: 0;
	}
	.gru-nav-button {
		margin-left: 0;
		position: absolute;
		top: calc((#{$nav-menu-side} + #{$btn-bottom-space}) * -1) ;
		right: 0;

		+ ul {
			display: none;
		}
		&.toggled + ul {
			display: block;
		}

		+ ul {
			margin: 0;
			text-transform: uppercase;
			font-size: $fz-small;
			text-align: center;
			padding-bottom: 1px;

			position: absolute;
			top: 0;
			right: 0;
			width: $nav-width;
			max-width: 100%;

			a {
				font-weight: 400;
				position: relative;
				// separarator line
				&::after {
					content: "";
					width: calc(100% - 4em);
					height: 1px;
					background-color: $nav-active-color;
					position: absolute;
					top: 100%;
					left: 0;
					right: 0;
					margin-left: auto;
					margin-right: auto;
				}

			}
			a:hover, li.selected > a {
				&::after {
					width: 100% !important;
				}
			}
			// background shadow in first item
			> li:first-child a {
				background-image: $top-gradient;
			}

			ul {
				text-align: center;
				 li a  {
					padding-left: 0.75em;
				 }
			}
		}
	}
}

// PWA nav
@media ($min-desktop-viewport) {
	.pwa-navigation {
		display: none;
	}
	.has-pwa-navigation footer {
		margin-bottom: 0;
	}
}
.pwa-navigation {
	text-transform: uppercase;
	box-shadow: 0 0 2px 1px white;

	div > ul li {
		a {
			background-size: 28px auto;
			span {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		&.selected a {
			filter: brightness(200%);
		}
		&:hover {
			background-color: $primary-color;
		}
		&:not(.selected) a, &:hover a {
			filter: grayscale(100%) brightness(500%);
			text-decoration: none;
		}
	}
}

// Default bandeau
.default-bandeau {
	background: var(--page-picture) no-repeat center;
	background-size: cover;
	background-color: $gray-light;
	height: 350px;
	display: flex;

	&--img-wrapper {
		margin: auto;
		text-align: center;
	}
	&--img {
		@include image-to-white;
		height: 180px;
		width: auto;
		margin: auto;
	}

	// Don't display ".default-bandeau" if placeholder "bandeau" as one or more cell
	.top-bandeau > * + & {
		display: none;
	}
}

// Content layout
.gru-content {
	flex-wrap: wrap;

	#sidebar {
		margin: 0;
		padding-left: 1rem;
		padding-right: 1rem;
		@media ($max-mobile-viewport) {
			order: -1;
			background-color: $font-color;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		@media ($min-desktop-viewport) {
			padding-left: 1.5rem;
			padding-right: 1.5rem;
		}
	}
}

// Gutter columns
#columns-wrapper {
	@media ($max-mobile-viewport) {
		padding: 0;
	}
	@media ($min-desktop-viewport) {
		#sidebar + & {
			flex-basis: 50%;
		}
	}
}
div#services > ul > li,
.column div.a2-block,
.gru-content div.cell,
.block {
	margin-bottom: 0.5em;
}
.top-column div.cell {
	margin-right: 0;
	margin-left: 0;
}




// Page header
.page-header {
	&:empty {
		display: none;
	}

	flex: 1 1 100%;
	background-color: $font-color;
	color: white;
	margin: 0;
	text-align: center;
	display: flex;

	@include triangle;

	// cells & cells content styles
	& *:not(&--logo-wrapper):not(&--logo) {
		margin: 0 !important;
		padding: 0 !important;
		background-color: transparent !important;
		color: inherit !important;
		text-align: inherit !important;
		flex: 1 1 auto;
	}
	// cells styles
	& > *:not(&--logo-wrapper):not(&--logo) {
		padding: 2rem !important;
	}


	body[class*="-sidebar"] &,
	body.page-template-homepage & {
		@media ($min-desktop-viewport) {
			padding-left: $sidebar-width;
		}
	}
}
// if logo
.page-header-with-logo {
	@media ($max-mobile-viewport) {
		flex-direction: column;
	}
	body[class*="-sidebar"] & {
		padding-left: 0;
	}

	.page-header--logo-wrapper {
		background-color: $gray-light;
		background-image: $top-gradient;
		flex: 0 0 $sidebar-width;
		display: flex;
		@media ($max-mobile-viewport) {
			flex-basis: 6rem;
		}
	}
	.page-header--logo {
		margin: auto;
		height: 5rem;
		@media ($min-desktop-viewport) {
			height: 6rem;
			width: 80%;
		}
	}
}


// Links-list
%cell-links-list {
	& > li {
		font-weight: bold;
		color: $gray;

		&:hover {
			color: black;
		}

		&:not(.add-more-items) {
			position: relative;
			display: flex;
			align-items: center;
			padding-left: 3rem;
			font-size: $fz-small;
			text-transform: uppercase;
			background-color: $gray-light;
			overflow: hidden;
			&::before {
				content: ">";
				font-size: $fz-h3;
			}

			&:not(:last-child) {
				margin-bottom: 0.33em;
			}
		}

		> a {
			position: static;
			padding: .7rem;
			font-family: $ff-title;
			flex-grow: 1;

			&:hover {
				text-decoration: none;
			}
		}

		div.description {
			display: none;
		}

		&.required-authentication a::after {
			content: "";
			top: 0;
			bottom: 0;
			left: 1rem;
			right: auto;
			margin: auto;
			width: 1.5rem;
			height: 1.5rem;
			background: url(icons/cadenas.svg) center;
			background-size: 100% 100%;

		}

		// Gray logo keyword options
		@each $name, $file in $logos-gris {
			&[class*="keyword-"][class*="-#{$name}"]{
				&::after {
					content: "";
					background: url(/assets/logo:gris:#{$file}) no-repeat right center;
					background-size: contain;
					height: 3rem;
					width: 7rem;
					margin-right: 10px;
					flex: 0 0 auto;
				}
			}
		}
	}
}

// Cells
.gru-content div.cell {
	// Cells titles
	h2:first-child {
		background-color: $font-color;
		color: white;
		padding-bottom: 1.1em;
		padding-top: 1.1em;
		line-height: 1.1;

		display: flex !important;
		flex-wrap: wrap;
		align-content: center;
	}

	&.foldable > div > h2:first-child {
		&::after {
			position: absolute;
			bottom: 0.15em;
			right: auto;
			left: auto;
			transform: scaleY(1.3);
		}
	}

	&.link-list-cell h2 + div {
		padding: 0;
	}
	// Cell title icon option
	&[class*=" icon-"] {
		$title-height: 6.3rem;
		$gradient-width: 2rem;

		h2:first-child {
			padding-left: $title-height + $gradient-width;
			min-height: $title-height;

			// Add icon
			&::before {
				content:"";
				display: block;
				box-sizing: content-box;
				// icon position
				background-size: 90%;
				background-position: center;
				background-repeat: no-repeat;
				width: $title-height;
				height: 100%;
				// vertical center block
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: auto;
				margin: auto;
				// Add right gradient with border-image
				border-right: 2rem solid;
				border-image-source: linear-gradient(to right, hsla(0, 0%, 0%, 0.5) 0, transparent 100%);
				border-image-repeat: stretch;
				border-image-slice: 0 100% 0 0;
			}
		}
		&.foldable > div > h2:first-child {
			&::after {
				left: $title-height + $gradient-width;
			}
		}
	}
	@each $name, $file in $icons {
		&.icon-#{$name} {
			h2:first-child {
				&::before {
					background-image: url(icons/#{$file});
				}
			}
		}
	}

	// cell color option
	@each $name, $hexa in $colors {
		&.color-#{$name} {
			h2:first-child {
				background-color: $hexa;
			}

			li:not(.add-more-items) {
				&::before {
					color: $hexa;
				}
			}
		}
	}

	// cell description / intro
	.description, .intro {
		font-size: $fz-small;
	}

	// WCS FORM CELL SIGNALISATION
	&.wcs-form-cell.signalement {
		a {
			@extend %title;
			padding-top: 0;
			padding-bottom: 0;
			background-color: $red-orange;
			color: white;
			text-transform: uppercase;
			display: flex;
			align-items: center;
			justify-content: center;

			// add megaphone icon
			$title-height: 6rem;
			&:before {
				content: "";
				flex-shrink: 0;
				background-size: auto 100%;
				background-position: left;
				background-repeat: no-repeat;
				width: $title-height;
				height: $title-height;
				background-image: url(icons/megaphone.svg);
			}

			&:hover {
				background-color: darken($red-orange, 10%);
			}

		}
		.description {
			display: none;
		}
	}
}



// Sidebar specifity
.page-header:not(:empty):not(.page-header-with-logo) + #sidebar {
	@media ($min-desktop-viewport) {
		transform: translateY(-4.5rem);
	}
}
// hide SIdebar on mobile && not home page
body:not(.page-template-homepage) #sidebar {
	@media ($max-mobile-viewport) {
		display: none;
	}
}

.gru-content #sidebar {

	padding-top: 1.5rem;

	div.cell {
		@include roundedCell;
		margin-right: 0;
		margin-bottom: 1.5rem;
		width: 100%;
		max-width: 25rem;
		text-align: center;

		p {
			font-size: $fz-small;
			margin: 0.66em 0;
		}

		// inline form
		form {
			position: relative;
			display: flex;
			border: 1px solid;
			border-radius: $custom-border-radius;
			padding: 0;

			input, select {
				border-radius: 0;
				border: none;
				background-color: transparent;
				margin: 0;
				flex: 1 1 auto;
				width: 50%;
			}
			button {
				border-radius: $custom-border-radius;
				box-shadow: none;
				margin: 0;
				padding: .33em;
			}
			.errornotice {
				font-size: $fz-small;
				text-align: left;
				position: absolute;
				top: 100%;
			}
		}

	}
	//
	div.tracking-code-input-cell {
		button {
			transform: translateX(1px);
			border: none;
		}
	}

	// search cell
	div.search-cell {
		button {
			order: -1;
			@include white-button;
			border-color: transparent;
			background-color: transparent;
			transform: translateX(-1px);
			// hide label
			.submit-label {
				@include sr-only();
			}

			&::after {
				content: "\f002";
				font-family: FontAwesome, sans-serif;
			}
		}
	}
	.link-cell.pk-button {
		ul > li {
			padding: 0;
			&::before {
				content: none;
			}
		 	> a {
				@media ($max-mobile-viewport) {
					@include white-button;
				}
			}
		}
	}
}

// carrousel
div.carrousel-content {
	input + div {
		div.carrousel-item {
			font-size: 1rem;
			padding: $carrousel-navigation-bullet-size + 20;
			div.carrousel-item-content {
				line-height: normal;
				a {
					padding: .33em;
					background-color: #222;
					display: block;
					border-radius: .5em;

					&:hover {
						background-color: black;
						text-decoration: none;
					}
				}
				strong {
					text-transform: uppercase;
					font-size: $fz-h2;
				}
			}
			// no image mask
			&::after {
				content: none;
			}
		}
	}

	div.carrousel-nav {
		text-align: left;
		label {
			box-shadow: 0 0 1px 1px white;
			background-color: hsla(0, 0%, 100%, 0.5);
			margin: 0 0 0 $carrousel-navigation-bullet-size;
		}
	}
}

// Retour Icitoyen
#sidebar .retour-icitoyen {
	&--title {
		margin: 0;
		padding: 0 !important;
	}
	&--content {
		padding: 1rem;
	}
	&--back-btn {
		font-size: $fz-small;
		margin-right: 0;
	}
}

// cell Choix commune
// use select2 autocomplète
#form-cell-choix-commune {
	span.select2-container {
		min-width: 0;
		margin: 0;
	}
	div.select2-container, span.select2-container {
		padding-bottom: 0;
	}
}

// WCS
.form-content--title {
	@extend h1;
}

div#gauche {
	@media ($max-mobile-viewport) {
		margin-top: 0;
	}
	@media ($min-desktop-viewport) {
		width: $sidebar-width;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#tracking-code {
		text-align: center;
		padding-bottom: 0.5rem;
		border-bottom: 2px solid $font-color;
		.tracking-code-part {
			h3 {
				padding-left: 0;
			}
			a:hover {
				color: $primary-color;
			}
			@media ($min-desktop-viewport) {
				h3, a {
					padding: 0;
				}
			}
		}
		form {
			@media ($max-mobile-viewport) {
				margin-top: 0;
			}
			button {
				margin-right: 0;
			}
		}
	}
}

div#gauche + div#rub_service {
	@media ($min-desktop-viewport) {
		padding-left: 2rem;
		padding-right: 2rem;
		width: calc(100% - #{$sidebar-width});
	}
}
div#rub_service {
	> h2:first-child {
		display: none;
	}
	.quixote {
		h3 {
			font-size: $fz-h4;
			@include underlined-with-triangle;
		}
		.submit-button button {
			&::after {
				font-family: FontAwesome;
				content: "\0025ba";
				vertical-align: .1em;
				padding-left: .66em;
			}
		}
		.previous-button button {
			&::before {
				font-family: FontAwesome;
				content:"\0025c4";
				vertical-align: .1em;
				padding-right: .66em;
			}
		}
	}
	.section.foldable {
		> h2 {
			font-size: $fz-h4;
			border-bottom: 2px solid $font-color;

			&:hover {
				&::after {
					color: $primary-color;
				}
			}
		}
		.dataview {
			h3 {
				font-size: $fz-h6;
			}
		}
	}
}

// steps
.wcs-step {
	padding: 0;
	&--marker {
		@include desktop-vertical-steps() {
			clip-path: polygon(0 0, 100% 50%, 0 100%);
			align-items: center;
			flex: 0 0 #{$wcs-step-marker-size - 0.5};
			&-nb {
				margin: .15em;
			}
		}
	}
	&--label {
		letter-spacing: 0;

		@include desktop-vertical-steps() {
			font-size: .6em;
		}
	}
}

// Remove cancel buttons on login page
#login-page .cancel-button {
	display: none;
}

// Footer
#footer {
	$block-border: 1px solid fade-out($font-color, 0.3);

	a {
		color: $red-light;
	}

	.menucell {
		clear: both;
		border-top: $block-border;
		padding-top: .7rem;

		li {
			background-color: transparent;
			padding: 0;
			margin-bottom: 0;
			color: $footer-color;
			&::before {
				content: none;
			}
			a {
				// background-color: transparent;
				padding-top: 0;
				padding-bottom: 0;
				color: white;
				&:hover {
					color: $red-light;
				}
			}
		}
	}

	// Text-cell liste of logos
	.text-cell.footer-logos {
		background-color: $gray-light;
		@media ($min-desktop-viewport) {
			width: 100vw;
			margin-left: calc(-50vw + 50%);
		}
		> div {
			margin: 0 auto;
			max-width: $width;
			@media ($min-desktop-viewport) {
				padding-left: 1rem;
				padding-right: 1rem;
			}
		}
		ul {
			list-style: none;
			margin: 0;
			padding: .5rem 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;

			& + ul {
				border-top: $block-border;
				width: auto;
			}
		}

		li{
		}

		a {
			display: block;
			width: 6.5rem;
			height: 5rem;
			text-align: center;
			padding: 0.5rem;
			box-shadow: inset 0 0 6px $gray-light;

			&:hover {
				background-color: white;
			}
		}

		img {
			height: 100%;
			width: 100%;
			object-fit: contain;
		}
	}

}

#frontend-registration-fc.a2-block {
	> h2 {
		display: none;
	}
	> div {
		padding: 0;
	}
}
