$icons: (
	"association": "icon-association.png",
	"citoyennete": "icon-citoyennete.png",
	"collectivite": "icon-collectivite.png",
	"culture": "icon-culture.png",
	"eco": "icon-eco.png",
	"education": "icon-education.png",
	"enfance": "icon-enfance.png",
	"entreprise": "icon-entreprise.png",
	"environnement": "icon-environnement.png",
	"particulier": "icon-particulier.png",
	"sante": "icon-sante.png",
	"securite": "icon-securite.png",
	"sport": "icon-sport.png"
);

$social-icons: (
	"facebook": "facebook.svg",
	"twitter": "twitter.svg",
	"youtube": "youtube.svg",
	"vimeo": "vimeo.svg",
	"instagram": "instagram.svg"
);

$header-height: 350px;
$header-border-height: 50px;
$mobile-header-height: 280px;

%button {
	@extend %button;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.889rem;
}

%cancel-button {
	@extend %cancel-button;
	color: #000;
	border: 1px solid #000;
	background: #fff;
}

%custom-radio-checkbox-widget {
	input + span {
		padding-left: 1.75rem;
		&::before {
			height: 1.1rem;
			width: 1.1rem;
			top: 0;
		}
		&::after {
			left: 4px;
			top: 4px;
			width: calc(1.1rem - 6px);
			height: calc(1.1rem - 6px);
			background: rgba(194, 197, 200, 0.47);
		}
	}
	label + label, li + li {
		margin-top: 0.5rem;
	}
	input {
		&:active + span {
			&::before {
				top: -2px;
				left: -2px;
				border: 3px solid $widget-custom-radio-checkbox-border-color;
				opacity: 0.5;
			}
		}
	}
}

div.widget div.title {
	margin-bottom: 10px;
}

@mixin after-line($color: #cbd05d) {
	&::after {
		display: block;
		margin-top: 0.5em;
		content: '';
		background: $color;
		width: 2em;
		height: 2px;
	}
}

.with-after-line {
	@include after-line;
}

%header {
	background: $primary-color;
	padding: 1.5em 3em;
	margin-bottom: 2em;
	text-transform: uppercase;
	@media screen and ($max-mobile-viewport) {
		padding: 2em;
		margin-bottom: 1em;
	}
	@include after-line;
}

div#header-wrapper {
	border-top: $header-border-height solid #000;
	height: $header-height;
	background: url('/assets/header:logo') center top no-repeat;
	@media screen and ($max-mobile-viewport) {
		border-top: $header-border-height solid #000;
		background-size: auto $mobile-header-height - $header-border-height;
		height: $mobile-header-height;
	}
}

div#header {
	#logo {
		position: absolute;
		top: -$header-border-height;
		left: 20px;
		background: url('img/logo.svg') center center no-repeat;
		background-size: contain;
		height: $header-border-height;
		width: 100px;
		@media screen and ($max-mobile-viewport) {
			top: -$header-border-height;
			left: 0;
			padding-left: 40px;
			height: $header-border-height;
			width: 60px;
		}
		@media screen and (max-width: 350px) {
			padding-left: 5px;
		}
	}
	#logo a {
		display: block;
		height: $header-border-height;
		width: 335px;
		margin-left: 20px;
		background: url('img/header-text.png') center right no-repeat;
		text-indent: -9999px;
		@media screen and ($max-mobile-viewport) {
			margin-left: 0;
			padding-left: 0;
			height: $header-border-height;
			width: 250px;
			background-size: contain;
		}
		@media screen and (max-width: 350px) {
			width: 50px;
			background: none;
		}
	}
}

#toplinks {
	top: -$header-border-height;
	background: transparent;
	border: 0;
	@media screen and ($max-mobile-viewport) {
		display: none;
	}
	a {
		color: white;
	}
}

div#nav-wrapper {
	margin-top: -2.5em;
	@media screen and ($max-mobile-viewport) {
		margin: 0;
		position: absolute;
		right: 0;
		top: $header-border-height;
		z-index: 1;
	}
	button {
		position: absolute;
		top: -$header-border-height;
		right: 0;
	}
}

div.pwa-navigation ul li a {
	line-height: 1.75em;
}

div.gru-nav {
	.gru-nav-button {
		border-width: 10px;
		border-color: transparent;
		border-style: solid;
		+ ul {
			border-top: 0;
		}
	}
	ul a {
		text-transform: uppercase;
		position: relative;
	}
	> ul {
		display: flex;
		justify-content: space-between;
		margin: 1em 0;
		@media screen and ($max-mobile-viewport) {
			margin: 0;
		}
		> li {
			&:first-child,
			&.selected, &.selected + li,
			&:hover, &:hover + li {
				> a::before {
					opacity: 0;
				}
			}
			&:hover, &.selected {
				background: $nav-active-color;
				@media screen and ($max-mobile-viewport) {
					background: transparent;
				}
			}
			flex-grow: 1;
			> a {
				margin: 0;
				padding: 1.25em 2em;
				line-height: 1.5em;
				width: 100%;
				text-align: center;
				@media screen and ($max-mobile-viewport) {
					padding: 0 1em;
					text-align: left;
				}
				&::before {
					position: absolute;
					left: 0;
					top: 10px;
					content: '';
					width: 1px;
					height: calc(100% - 20px);
					background: #c2c5c8;
					opacity: 1;
					transition: opacity 0.5s;
				}
				+ ul {
					li {
						&:hover {
							background: #cbd05d;
							> a {
								background: #cbd05d;
								color: #000;
							}
						}
						> a {
							font-weight: normal;
							color: #f4f7fa;
							font-size: 85%;
							padding: 0.75em 3em;
							@media screen and ($max-mobile-viewport) {
								padding: 0.5em 3em;
							}
							&::before {
								position: absolute;
								left: 3.5em;
								content: '\f054'; /* chevron-right */
								font-family: FontAwesome;
								font-size: 60%;
							}
						}
					}
				}
				@media screen and ($max-mobile-viewport) {
					margin: 0;
				}
			}
		}
	}
}

div#side, div#sidebar {
	box-shadow: 3px 3px 20px 0px #dedede;
}

div#tracking-code {
	h3 {
		background: #fff;
		font-weight: bold;
	}
	a {
		padding: 0 1rem;
		font-size: 110%;
		&::after {
			margin-top: 5px;
			content: '';
			display: block;
			width: 60px;
			height: 2px;
			background: #cbd05d;
		}
	}
}

.wcs-step {
	padding-top: $wcs-steps-spacing;
}

.wcs-steps--list {
	background: $primary-color;
}

.wcs-step--marker {
	border-right: 1px solid #c2c5c8;
}

.wcs-step.current {
	background: #fff;
}

.gru-content {
	div.cell {
		&.demarche, &.rubriques-internes {
			background: #d1e8f6;
			h2:first-child, ul {
				margin-left: 1rem;
				margin-right: 1rem;
			}
			h2:first-child {
				text-align: center;
				border: 0;
				padding-left: 0;
				padding-right: 0;
				text-transform: uppercase;
				background: transparent;
			}
		}
		&.demarche h2:first-child {
			font-size: 1rem;
			border-bottom: 2px solid black;
		}
	}
	div.cell, .block {
		margin-bottom: 2em;
	}
	div.a2-block {
		h2 {
			@extend %header;
		}
	}
    div.wcsformsofcategorycell, div.linklistcell {
		h2:first-child {
			text-transform: uppercase;
			background: transparent;
			border: 1px solid #c2c5c8;
			padding: 1em;
			padding-left: 3em;
			&::after {
				color: $purple;
			}
		}
		> div {
			position: relative;
		}
		picture {
			position: absolute;
			top: 0.5em;
			cursor: pointer;
			img {
				width: 3em;
			}
		}
		&.foldable {
			picture {
				display: block;
			}
		}
		.add-more-items--button {
			font-weight: bold;
			color: $purple;
		}
		&.rubriques-internes {
			h2:first-child + div.links-list {
				li {
					border: 0;
				}
			}
			&.has-asset-picture h2:first-child {
				padding-left: 1rem;
			}
			ul {
				&:first-child {
					padding-top: 0.5rem;
					border-top: 1px solid $title-color;
				}
				&:last-child {
					padding-bottom: 0.5rem;
				}
			}
			.links-list li a {
				padding: 0.5rem 0;
				&:hover {
					background: transparent;
					text-decoration: underline;
				}
			}
			.add-more-items--button {
				color: black;
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		div#sidebar {
			order: 1
		}
	}
}

div#footer {
	font-size: 80%;
	@media screen and ($max-mobile-viewport) {
		padding: 0 2em;
	}
	div.links-list {
		@media screen and ($max-mobile-viewport) {
			margin: 0 0.5em;
		}
		li {
			border: 0;
			display: flex;
			align-items: baseline;
			&::before {
				content: '\f054'; /* chevron-right */
				font-family: FontAwesome;
				font-size: 70%;
				margin-right: 3px;
			}
		}
		a {
			color: #000;
			padding: 0.1rem;
			&:hover {
				background: transparent;
				text-decoration: underline;
			}
		}
	}
	div.cell.social-links ul {
		margin: 0;
		padding: 0;
		display: flex;
		@media screen and ($max-mobile-viewport) {
			margin: 2em 0;
		}
		li {
			list-style-type: none;
			&:not(:first-child) a {
				border-left: 1px solid #000;
			}
			@each $name, $img in $social-icons {
				a.icon-#{$name} {
					width: 2.5em;
					display: block;
					overflow: hidden;
					color: transparent;
					padding: 0 15px;
					background: url('img/#{$img}') center center no-repeat;
				}
			}
		}
	}
}

div.searchcell {
	position: relative;
	form {
		padding: 0;
	}
	input.combo-search-input {
		padding-right: 50px;
		line-height: 2em;
		margin-right: 0;
		font-weight: bold;
                padding: 0.7em;
                border-bottom: 2px solid #d2d2d2;
                &:focus {
                    border-bottom: 2px solid #d2d2d2;
                }
	}
	button, button:hover {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: transparent;
		border: 0;
		box-shadow: none;
		margin: auto 0;
		height: 50px;
		width: 60px;
		padding: 0;
		border-left: 1px solid #c2c5c8;
		background-image: url('img/loupe.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 35%;
		overflow: hidden;
		color: transparent;
		text-overflow: hide;
	}
}

div#columns > div.search-cell {
	display: flex;
	justify-content: center;
	> div {
		width: 75%;
		@media screen and ($max-mobile-viewport) {
			width: 100%;
		}
	}
}

/* general headers styles */

h1, h2, h3, h4 {
	font-weight: bold;
	text-transform: uppercase;
}

.form-content--title,
h1, div#rub_service h2 {
	font-size: 1.667rem;
}

.form-content--title,
div#rub_service h2 {
	@include after-line();
}

h2, div#rub_service h3 {
	font-size: 1.444rem;
	color: $purple;
}

h3, div#rub_service h4 {
	font-size: 1.222rem;
}

h4 {
	font-size: 1.056rem;
}

input, select {
	line-height: 2.25em;
}

.a2-block {
	form p {
		margin-left: 0;
	}
	h2 {
		@extend %header;
	}
}

h1.login-page-title, div#registration-blocks h1 {
	@extend %header;
}

div#login-page a {
	font-weight: bold;
	text-decoration: underline;
}

div#registration-blocks {
	h2 {
		display: none;
	}
}

div#sidebar {
	margin-right: 2.5em;
	h1, h2, h3 {
		@include after-line($purple);
	}
	h2 {
		margin: 0.5em;
	}
}

div.linkcell.homepage-link {
	border: 1px solid #d2d2d2;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 90%;
	a {
		padding-top: 5rem;
		@media screen and ($max-mobile-viewport) {
			padding-top: 1rem;
			padding-left: 5rem;
		}
		@include after-line(#000);
	}
	&[class*=" icon-"] {
		a {
			background-position: 1rem 1rem;
			background-size: auto 2.5rem;
			display: block;
			@media screen and ($max-mobile-viewport) {
				background-position: 1rem center;
			}
		}
	}
}

.linkcell.file-link a, a.file-link {
	padding: 0.5em 0 0.5em 1.5em;
	background: url('img/file.png') center left no-repeat;
	&:hover {
		text-decoration: underline;
	}
}

.linkcell.external-link a, a.external-link {
	text-decoration: underline;
	position: relative;
	margin-right: 1.5em;
	line-height: 1;
	&::after {
		position: absolute;
		content: '\f08e'; /* external-link */
		font-family: FontAwesome;
		margin-left: 5px;
		bottom: 0;
	}
}

.linkcell.external-link a {
	padding: 0;
	&::after {
		position: relative;
		float: right;
	}
}

.underline-text {
	text-decoration: underline;
}

#registration-blocks #frontend-registration-fc,
#login-page .block.block-fc {
	border-left: 0;
	&::after {
		display: none;
	}
}

@each $name, $file in $icons {
	div.linkcell.icon-#{$name} a {
		background-image: url(icons/#{$file});
		background-repeat: no-repeat;
	}
}

/* customize json contact service cell */
div.cell.contact-service {
	background: #f3f7fa;
}

/* customize json contact commune cell */
div.cell.contact-commune, div.cell.contact-commune-rgpd,
div.coordonnees-generales {
	> div > div {
		padding-top: 0.4em;
		margin-top: 10px;
		background:#f4f7fa;
	}
	h3.service-title {
		margin-top: 0px;
		background-size: contain;
	}
}

div.cell.contact-service, div.cell.contact-commune,
div.cell.contact-commune-rgpd, div.coordonnees-generales {
	h3.service-title {
		margin-left: 1em;
		margin-right: 1em;
		padding: 2em 0 2em 260px;
		background-repeat: no-repeat;
		background-position: center left;
		@media screen and ($max-mobile-viewport) {
			padding: 120px 0 0 0;
			background-position: top center;
		}
	}
	.title {
		font-weight: bold;
	}
	div.service-details, div.commune-details {
		display: flex;
		flex-wrap: wrap;
		> div {
			width: 50%;
			padding: 0 20px;
			@media screen and ($max-mobile-viewport) {
				width: 100%;
			}
			&:first-child {
				border-right: 1px solid gray;
				@media screen and ($max-mobile-viewport) {
					border-right: 0;
					border-bottom: 1px solid gray;
				}
			}
		}
	}
}

.three-cols-header {
	margin-bottom: 2em;
	@media screen and ($max-mobile-viewport) {
		padding: 0 0.7em;
	}
}

.three-cols-column {
	width: 33%;
	@media screen and ($max-mobile-viewport) {
		width: auto;
	}
}

div.linkcell .internal-page-link {
	padding: 220px 1rem 0.5rem;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 195px;
	box-shadow: 0px 1px 3px #aaa;
	h2 {
		&:first-child {
			font-size: 1rem;
			background: transparent;
			padding: 0;
		}
		a {
			color: $purple;
			text-transform: uppercase;
		}
	}
	&--description {
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	&--arrow {
		background: $purple;
		width: 1.75em;
		height: 1.75rem;
		display: flex;
		justify-content: center;
		align-items: center;
		&::before {
			content: '\f054'; /* fa-chevron-right */
			font-family: FontAwesome;
			color: white;
		}
		&-container {
			display: flex;
			justify-content: flex-end;
		}
		&:hover {
			background: white;
			border: 1px solid $purple;
			text-decoration: none;
			&::before {
				color: $purple;
			}
		}
	}
}

.demarche-link {
	padding-bottom: 1.5rem;
	&--description {
		margin: 1.5rem;
	}
	&--arrow {
		background: $nav-background;
		color: white;
		font-weight: bold;
		text-transform: uppercase;
		padding: 0.75rem 1rem 0.75rem 2.75rem;
		border-radius: 5px;
		box-shadow: 0px 1px 3px #aaa;
		display: flex;
		@media ($max-mobile-viewport) {
			padding: 0.75rem 1rem;
		}
		&::after {
			content: '\f054'; /* fa-chevron-right */
			font-family: FontAwesome;
			background: $green;
			color: black;
			margin-left: 1rem;
			height: 1.25em;
			padding: 2px 5px;
		}
		&:hover::after {
			background: white;
		}
	}
	&--arrow-container {
		display: flex;
		justify-content: center;
	}
}
