$notification-blocks:
	"info" "info-icon-blue-neg" "#0d74ef",
	"success" "info-icon-blue-neg" "#0d74ef",
	"error" "error-icon" "#ff5801",
	"warning" "warning-icon-red" "#ff1400",
;

@each $name, $img, $color in $notification-blocks {
	.#{$name}notice {
		border: 1px solid #{$color};
		color: #{$color};
		font-weight: bold;
		&::before {
			content: url('img/#{$img}.svg');
		}
	}
}

$warningnotice-alt :
	"icon-news" "news-icon-red",
	"icon-info" "info-icon-red",
	"icon-warning" "warning-icon-red",
	"icon-calendar" "calendar-icon-red"
;

.warningnotice {
	@each $class, $img in $warningnotice-alt {
		&.#{$class}::before {
			content: url('img/#{$img}.svg');
		}
	}
}


@mixin fill-viewport() {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		padding-right: calc(50vw - 50%);
		padding-left: calc(50vw - 50%);
}

html {
	overflow-x: hidden;
}

.h, h1, h2, h3, h4, %button {
	font-family: $title-font-family;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.03em;
}

label {
	font-size: $fz-4;
}

.big-title {
	font-size: $fz-2;
	border-bottom: none;
	margin-bottom: .8rem;
	padding: $title-padding;
	&::after {
		content: "";
		width: 50px;
		height: 6px;
		background-color: currentColor;
		display: block;
		margin-top: .8rem;
	}
	@media ($min-desktop-viewport) {
		font-size: $fz-1;
	}

}

.title-with-dash {
	border-bottom: none;
	&::before {
		content: "";
		margin-left: -2rem;
		width: 2rem;
		height: 0.11em;
		transform: translateX(-2rem);
		display: inline-block;
		background-color: currentColor;
		vertical-align: 0.3em;
	}
}

%button {
	display: inline-block;
	padding: 0.6em 1em 0.5em;
	box-shadow: none;
}

%cancel-button {
	&, &:hover {
		padding: 1.1em 2em 1em;
		background-color: #fff;
		color: black;
		border-color: $gray;
	}
}

%orange-button {
	@extend %cancel-button;
	&, &:hover {
		background-color: $orange !important;
		border-color: $orange;
	}
}
	
//
//	Backgrounds
//
body {
	background-image: 
		url(img/bg-dots-gray.svg),
		url(img/bg-lines-gray.svg);
	background-position: 
		60% -400px,
		left calc(45% - #{$width/2}) top 50px;
	background-size: 
		800px,
		260px;
	background-repeat: no-repeat;
	@media ($max-mobile-viewport) {
		background-size: 
			400px, 
			260px;
		background-position: 
			50% -200px,
			left calc(50% - #{$width/2}) top 100px;
	}
}
// Orange dots
main {
	overflow: hidden;
}
#main-content{
	position: relative;
	&::before {
		content: "";
		width: 700px;
		height: 700px;
		position: absolute;
		top: 90vh;
		right: 100%;
		z-index: -1;
		background-image: url(img/bg-dots-orange.svg);
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;
		@media ($max-mobile-viewport) {
			width: 400px;
			height: 400px;
		}
	}
}

//
//	HEADER
//
div#header {
	@media ($max-mobile-viewport) {
		max-width: $mobile-width;
	}
}

#logo.has-logo {
	padding-left: 0;
	a {
		max-width: 100%;
		width: 340px;
		height: 105px;
		margin-bottom: 3rem;
		@media ($min-desktop-viewport) {
			margin-top: 3rem;
			width: 560px;
			height: 180px;
		}
	}
}

#top {
	@media ($max-mobile-viewport) {
		display: flex;
		flex-direction: column;

		#toplinks {
			text-align: left;
			position: static;
			order: -1;
		}
	}
}

//
//	TOPLINKS
//

#toplinks {
	$buttons-gutter: 1.5rem;
	$space-for-nav: $nav-menu-side + $buttons-gutter + 1rem;
	$space-for-nav-unitless: $space-for-nav / 1rem;
	max-width: none;
	border: none;
	box-shadow: none;
	background: none;
	@extend .h;
	font-weight: normal;
	padding: 1rem 0;
	word-spacing: calc($buttons-gutter - 0.33em);
	@media ($min-desktop-viewport) {
		right: $space-for-nav;
	}
	// @debug 5px * math.div(math.div(30deg, 2s), 24em);
	@media (min-width: #{$width + ($space-for-nav-unitless * 2) }) {
		right: 0;
	}
	a {
		@extend %button;
		margin-right: 0;
		font-weight: 400;
	}
	span.connected-user {
		padding-right: 0;
	}
}

//
//	NAV
//
div.gru-nav > ul > li {
	margin-bottom: 1rem;
	a {
		@extend .h;
		font-size: $fz-4;
		background-color: #fff;
		text-align: center;
	}
}

#nav .gru-nav-button {
	& + ul {
		// subnav 
		ul li a {
			padding-left: 20px;
		}
	}
}

// right-to-left adaptation
@if $responsive-menu == left-to-right {
	body {
		border-left: none;
	}
	div.gru-nav .gru-nav-button {
		border: 8px solid black;
		border-radius: 50%;
		left: auto;
		right: 1.5rem;
		top: 0.75rem;

		&.toggled {
			background: white;
			border-color: white;
			.icon-bar {
				border-color: black;
				background-color: black;
			}
		}
		+ ul {
			transform: translateX(100%);
			left: auto;
			right: 0;
			width: auto;
			padding-left: 2rem;
			padding-right: 2rem;
		}
	}
}

// Main
div#main-content {
	@media ($min-desktop-viewport) {
		margin: 0 0.7em;
	}
}

//
// TOP MESSAGE
//

$topmessage-alt :
	"icon-news" "news-icon-blue",
	"icon-info" "info-icon-blue",
	"icon-warning" "warning-icon-blue",
	"icon-calendar" "calendar-icon-blue"
;


.top-message {
	@media ($max-mobile-viewport) {
		margin: 0 0.7em;
	}
	> .text-cell {
		background-color: $blue;
		color: white;
		padding-top: 1rem;
		padding-bottom: 1rem;
		margin-bottom: $columns-gutter;
		@include fill-viewport();
		display: flex;
		align-items: center;
		&::before {
			content: "";
			align-self: stretch;
			flex: 0 0 65px;
			margin-right: 40px;
			background: url(img/info-icon-blue.svg) no-repeat;
			background-size: contain;
			background-position: center;
		}
		a {
			color: inherit;
		}

		@each $class, $img in $topmessage-alt {
			&.#{$class}::before {
				background-image: url(img/#{$img}.svg);
			}
		}
	}

}




//
//	CELLS
//

.gru-content div.cell {
	margin-bottom: 2rem;

	&.foldable {
		> div > h2:first-child {
			background-color: $orange;
			padding-left: 1rem;
			padding-right: 2rem;
			padding-top: calc(1.25rem + 2px);
			padding-bottom: 1.25rem;
			&::after {
				right: 0.7rem;
			}
		}
		&.folded {
			> div > h2:first-child {
				background-color: $gray-light;
				&:focus-visible, &:focus {
					background-color: $orange;
					outline: none;
				}
			}
		}
	}

	&.has-asset-picture {
		$image-width: 3rem;
		> div {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;

			> * {
				flex: 0 0 100%;
			}

			> h2:first-child {
				flex: 1 0 50%;
				margin-left: -1 * ($image-width + 1);
				padding-left: $image-width + 2;
			}

			> picture {
				display: block;
				order: -1;
				flex: 0 0 $image-width;
				align-self: stretch;
				margin-left: 1rem;
				position: relative;
				z-index: 1;
				img {
					padding: 0;
					width: 100%;
					height: 100%;
					object-fit: contain;
					position: absolute;
					top: 0; bottom: 0; left: 0; right: 0;
					border-top: 4px solid transparent;
					border-bottom: 4px solid transparent;
				}
			}
		}
	}

	div.links-list ul {
		& > li {
			background-color: $gray-xlight;
			border-bottom: $cell-entry-border;
			> a {
				text-transform: uppercase;
			}
		}
	}
}

.cell-with-dash {
	.gru-content &.cell {
		padding-left: 4rem;
		h2:first-child {
			@extend .title-with-dash;
		}
	}
}

.cell-blue {
	.gru-content &.cell {
		color: $blue;
		h2:first-child {
			color: inherit;
		}
	}
}

%button-links-list {
	margin-top: 1rem;
	& > li {
		border-bottom: none !important;
		background-color: transparent;
	}
	& > li > a {
		@extend %cancel-button;
		text-align: center;
		justify-content: center;
		margin-right: 0;
		margin-bottom: 1rem;
		width: 100%;
		&:hover {
			background: $orange;
			border-color: $orange;
			color: black;
			box-shadow: none;
		}
	}
}

%small-button-links-list {
	@extend %button-links-list;
	& > li > a {
		&, &:hover {
			padding: 0.5em 1em 0.3em;
		}
	}
}

.button-links-list {
	.gru-content &.cell {
		div.links-list ul {
			@extend %button-links-list;
		}
	}
}

.small-button-links-list {
	.gru-content &.cell {
		div.links-list ul {
			@extend %small-button-links-list;
		}
	}
}

.cell-with-big-title {
	.gru-content &.cell {
		h2:first-child {
			@extend .big-title;
		}
	}
}

div.tracking-code-input-cell {
	@extend .cell-with-dash;
	@extend .cell-blue;
	p {
		&:first-child {
			margin-bottom: 0;
		}
		+ p {
			margin-top: 0;
		}
	}
	form {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	input#tracking-code {
		flex: 1 1 0;
		margin: 0;
		min-width: 8em;
	}
	button {
		margin-right: 0;
		border-radius: 3px;
		margin-left: 0.25em;
		&:hover {
			background: $orange;
			color: black;
			box-shadow: none;
		}
	}
	&.cell h2 + div {
		padding: 1rem 0;
	}
}

.gru-content .text-cell {
	h1 {
		@extend .big-title;
	}
	h2:not(:first-child) {
		@extend %title;
		padding-left: 0;
		padding-right: 0;
		margin: $title-padding;
	}
}

//
//	WCS
//

div#tracking-code {
	margin-left: 4rem;
	color: $blue;
	h3 {
		@extend .title-with-dash;
		color: inherit;
	}
	a {
		font-size: $fz-small;
		border: 1px solid;
		padding: 0.5em 1em !important;
		color: inherit;

		@media ($max-mobile-viewport) {
			margin-left: 1em;
			vertical-align: super;
		}
	}
	@media ($max-mobile-viewport) {
		order: 0;
	}
}

.form-content--title {
	@extend .big-title;
	padding-left: 0;
	@media ($min-desktop-viewport) {
		margin-left: calc(#{$form-sidebar-width} + #{$form-sidebar-gutter});
	}
}

div.gru-content
div#rub_service {
	form {
		padding: 0;
	}
	h3 {
		font-size: $fz-3;
		padding-bottom: .33em;
		border-bottom: 2px solid;
		@media ($min-desktop-viewport) {
			font-size: $fz-2;
		}
	}
	h4 {
		font-size: $fz-4;
		@media ($min-desktop-viewport) {
			font-size: $fz-3;
		}
	}

}

.wcs-step {
	&:not(.current) {
		border: 1px solid $gray-light;
	}
	&--label {
		font-size: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&--marker {
		border-right: 1px solid $gray;
		font-weight: 700;
	}
	@media ($max-mobile-viewport) {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		&--marker-nb, &--marker-total {
			font-weight: bold;
		}
	}
}

div.gru-content .submit-button button,
div.gru-content button.submit-button  {
	@extend %orange-button;
}
div.gru-content .previous-button button {
	@extend %cancel-button;
}

.quixote:not(#wf-actions) div.buttons {
	@media (max-width: $very-small-limit) {
		display: block;

		div {
			display: block;
		}
		button {
			width: 100%;
			margin: 0;
		}
	}
}

//
//	A2
//

.fc-login,
#fc-linking,
#frontend-registration-fc > div {
	background-color: $gray-xlight;
}

#profile {
	background-color: $gray-xlight;
	// padding: 1rem;
	.field {
		border-bottom: 1px solid;
		margin-bottom: 1rem;
	}
	.label {
		color: black;
		font-size: 1rem;
		font-weight: 700;
	}
	.value {
		margin-left: 1rem;
	}
}

div#account-management ul {
	@extend %small-button-links-list;
}

div.widget div.title {
	margin-bottom: 0.25em;
}

//
//	FOOTER
//

.has-pwa-navigation footer {
	@media ($min-desktop-viewport) {
		margin: 0;
	}
}

footer {
	background: url(img/bandeau-footer.png) no-repeat;
	background-size: 100% 50px;
}
#footer-wrapper {
	margin-top: 50px;

	div.links-list ul > li > a {
		background-color: transparent;
		padding: 0;
		padding-top: 0.33em;
		&:hover {
			text-decoration: underline;
		}
	}
}

// MISC

a.lien {
	&-telechargement, &-externe {
		text-transform: uppercase;
		font-weight: bold;
		&::before {
			margin-right: 0.45em;
			line-height: 1;
			display: inline-block;
			width: 1.15em;
			text-align: center;
			vertical-align: middle;
		}
	}
	&-telechargement::before {
		content: url('img/download.svg');
	}
	&-externe::before {
		content: url('img/fleche.svg');
	}
}
