//
//	utils
//
@mixin bg-to-the-edge($position) {
	--ref-width: #{$mobile-width};
	@media($min-desktop-viewport) {
		--ref-width: #{$width};
	}
	@if ($position == 'left' or $position == 'both') {
		margin-left: Min(calc(-1 * var(--edge-gutter)), calc(-50vw + var(--ref-width) / 2));
		padding-left: Max(var(--edge-gutter), calc(50vw - var(--ref-width) / 2));
	}
	@if ($position == 'right' or $position == 'both') {
		margin-right: Min(calc(-1 * var(--edge-gutter)), calc(-50vw + var(--ref-width) / 2));
		padding-right: Max(var(--edge-gutter), calc(50vw - var(--ref-width) / 2));
	}
}

//
// dots
//
.regulars-dots {
	--dot-color: #{$font-color};
	background-color: transparent;
	background-image: radial-gradient(var(--dot-color) 2px,transparent 2px);
	background-size: 8px 8px;
	background-position: top left;
}

.alternates-dots {
	--dot-color: #{$font-color};
	background-color: transparent;
	background-image:
		radial-gradient(var(--dot-color) 2px,transparent 2px),
		radial-gradient(var(--dot-color) 2px,transparent 2px);
	background-size: 10px 10px;
	background-position: 2px 2px, 7px 7px;
}

//
//	Typo
//
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-family: $title-ff;
	font-weight: 800;
}
h1, .h1 {
	font-size: $fz-1;
}
h2, .h2 {
	font-size: $fz-2;
}
h3, .h3 {
	font-size: $fz-3;
}
h4, .h4 {
	font-size: $fz-4;
}
.button-label {
	font-size: $fz-xsmall;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.2rem !important;
	letter-spacing: 1px;
}
label {
	font-weight: bold;
}

//
//	Buttons
//
%button {
	box-shadow: none;
	@extend .button-label;
	font-weight: bold;
	// add long-arrow-right icon;
	&:hover {
		box-shadow: none;
		border-color: transparent;
	}
}

.button-with-arrow {
	@include button-with-icon(left,  '\f178') {
		--icon-color: #{$red};
		--icon-hover-color: white;
	}
}
.button-with-left-arrow {
	@include button-with-icon(left,  '\f177') {
		--icon-color: #{$red};
		--icon-hover-color: white;
	}
}

%submit-button {
	--color: white;
	--background: #{$font-color};
	@extend .button-with-arrow;
}

%cancel-button {
	--background: #{$gray-light};
	border-color: var(--background);
}

%delete-button {
	--background: #{$red};
	--color: white;
}

.pk-button {
	@extend .button-with-arrow;
}

//
//	Icons
//
.black-rounded-icon {
	--size: 80px;
	--disc-color: #{$font-color};
	--circle-size: 10px;
	--icon-color: white;
	--circle-color: white;
	background-color: var(--disc-color) !important;
	box-shadow:
		0 0 0 var(--circle-size) var(--circle-color),
		0 0 0 calc(var(--circle-size) + 1px) var(--disc-color);
	color: --icon-color;
	height: var(--size);
	width: var(--size);
	flex-shrink: 0;
	border-radius: 50%;
	border: var(--circle-size) solid var(--disc-color);
	margin: calc(var(--circle-size) + 1px);
	> img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

//
//	Layout
//
// add edge-gutter
.page-width,
.header-width,
.nav-width,
.footer-width,
div#header {
	@if $theme-edge-gutter {
		--edge-gutter: #{$theme-edge-gutter};
		box-sizing: content-box;
		padding-left: var(--edge-gutter,);
		padding-right: var(--edge-gutter);
		width: auto !important;
		@media ($max-mobile-viewport) {
			--edge-gutter: 1em;
		}
	}
}
@media ($max-mobile-viewport) {
	.central-content #sidebar {
		margin: 0;
	}
	#columns-wrapper {
		padding: 0;
	}
}


//
//	Header
//
$menu-item-desktop-size: 130px;
.header-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: inherit;
	background-color: $nav-item-background;
	color: $nav-color;
	height: $menu-item-desktop-size;
	min-width: $menu-item-desktop-size;
	flex: 1 1 $menu-item-desktop-size;
	padding: 1em;
	border-left: 1px solid #3d3d3D;
	&:hover {
		background-color: $nav-item-selected-background;
	}
}
.site-header {
	box-shadow: 0 0 10px hsla(0, 0%, 13.7%,.2);
	@media($min-desktop-viewport) {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}
#top {
	min-height: 100px;
	display: flex;
	align-items: center;
	@media ($min-desktop-viewport) {
		@include bg-to-the-edge(right);
		padding-right: 0;
		justify-items: right;
	}
}
// Logo
#logo {
	flex-grow: 1;
	padding-left: 0;
	position: relative;
	&.has-logo a {
		display: flex;
		background-position: left center;
		&::before {
			width: 100%;
			@media ($max-mobile-viewport) {
				height: 57px;
			}
		}
	}
	// dots
	&::before {
		content: "";
		width: 56px;
		height: 30px;
		position: absolute;
		right: calc(100% + 20px);
		top: 0;
		bottom: 0;
		left: auto;
		margin: auto;
		@extend .regulars-dots;
	}
}
// nav
.site-nav {
	flex: 0;
}
div.gru-nav {
	> ul {
		display: flex;
		margin: 0;
		> li {
			flex-basis: $menu-item-desktop-size;
			vertical-align: top;
			a {
				@extend .header-link;
			}
		}
		@media ($max-mobile-viewport) {
			padding: 1em;
			li:not(:last-child) {
				border-bottom: 1px solid $gray-light;
			}
			li > a {
				display: block;
				min-height: 0;
				height: auto;
				font-size: $fz-small;
				background-color: white;
				text-align: left;
				padding: 1em 2em;
				border: none;
			}
		}
	}
}
div.gru-nav .gru-nav-button {
	@extend .black-rounded-icon;
	--size: 40px;
	--circle-size: 5px;
	&:hover {
		--disc-color: #{$red};
	}
	&.toggled {
		--disc-color: #{$gray-light};
		--icon-color: #{$font-color};
		--circle-color: var(--disc-color);
		.icon-bar {
			background-color: var(--icon-color);
		}
	}
	top: auto;
	left: 75%;
	right: 0;
	bottom: 35px;
	margin: auto;
	&:after {
		content: "Menu";
		display: block;
		position: absolute;
		top: calc(100% + 5px);
		left: 50%;
		transform: translateX(-50%);
		margin: auto;
		@extend .button-label;
		font-weight: 800;
	}
	+ ul {
		@media ($max-mobile-viewport) {
			width: 100%;
			max-width: 30em;
		}
	}
}
.menu--item.selected .menu--label {
	position: relative;
	display: block;
	&::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 4px;
		bottom: -10px;
		left: 0;
		background-color: white;
	}
}
// toplinks
#toplinks {
	position: static;
	a {
		@extend .header-link;
		@extend .button-label;
		font-weight: bold;
		flex-direction: column;
		text-decoration: none;
		// icon
		&::before {
			content: "";
			width: 25px;
			height: 25px;
			display: block;
			background-image: var(--icon, none);
			background-size: contain;
			margin-bottom: .33em;
		}
		&.account-link {
			--icon: url(img/account.svg);
			max-width: 14em;
		}
		&.login-link {
			--icon: url(img/login.svg);
		}
		&.registration {
			--icon: url(img/registration.svg);
		}
		&.logout {
			--icon: url(img/logout.svg);
		}
	}
	@media($max-mobile-viewport) {
		display: none;
	}
}
.toplinks--list {
	display: flex;
}

//
//	Main
//

div#main-content-wrapper {
	z-index: auto;
}

.theme-page-header {
	background-color: $red;
	border-top: 1px solid transparent;
	min-height: 15rem;
	display: flex;
	@include bg-to-the-edge('both');
	@media ($min-desktop-viewport) {
		background-color: $gray-light;
		border-left-width: Max(#{$theme-edge-gutter)}, calc(50vw - var(--ref-width) / 2));
		border-left-color: $red;
		border-left-style: solid;
		padding-left: 0;
	}
}
.theme-page-title {
	background-color: $red;
	color: white;
	margin: 0;
	display: flex;
	align-items: center;
	font-size: 28em / $base-font;
	position: relative;
	@media ($min-desktop-viewport) {
		font-size: $fz-1;
		width: 40%;
		min-width: 8em;
		position: relative;
		&::after {
			content: "";
			width: 125px;
			height: 100%;
			background-color: $red;
			border-top-right-radius: 125px 100%;
			position: absolute;
			left: 100%;
		}
	}
	// dots
	&::before {
		content: "";
		width: 125px;
		height: 75px;
		position: absolute;
		right: calc(100% + 20px);
		top: 0;
		bottom: 0;
		left: auto;
		margin: auto;
		@extend .alternates-dots;
		--dot-color: white;
	}
}

.central-content {
	margin-top: $central-content-top;
	@media ($min-desktop-viewport) {
		align-items: flex-start;
	}
}



//
//	Cells
//

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

.white-body-cell {
	.gru-content &.cell {
		overflow: hidden;
		& h2 + div,
		.cell--body,
		.links-list {
			background-color: white;
		}
		.links-list ul {
			& > li > a:hover {
				background-color: transparent;
			}
		}
	}
}

.menu-with-icons {
	.gru-content &.cell {
		overflow: hidden;
		.links-list ul {
			@extend .fx-grid;
			@media ($min-grid-desktop-viewport) {
				--nb-cols: 2;
				--grid-gutter: 2px;
			}
			& > li:not(:last-child) {
				border-bottom-color: $cell-background;
			}
		}
		.menu-with-icons--link {
			display: flex;
			background-color: white;
			border-radius: 0;
			align-items: center;
			color: $cell-entry-color;
			text-decoration: none;
			@media ($min-desktop-viewport) {
				justify-content: flex-end;
			}
			&:hover {
				.menu-with-icons--icon {
					color: $cell-entry-hover-color;
					--disc-color: #{$red};
				}
			}
		}
		.menu-with-icons--icon {
			@extend .black-rounded-icon;
			padding: var(--circle-size);
		}
		.menu-with-icons--label {
			font-weight: bold;
			margin-left: 1em;
			@media ($min-desktop-viewport) {
				flex: 0 1 30%;
				margin-right: 20%;
			}
		}
	}
}

.tracking-code-input-cell {
	form button {
		@extend %submit-button;
	}
	@media ($min-desktop-viewport) {
		&.two-columns form {
			column-count: 2;

			p {
				break-inside: avoid;
				break-before: avoid;
			}
			button {
				display: block;
			}
		}
	}
}

// Black sidebar
.central-content #sidebar {
	background-color: $font-color;
	color: white;
	@media ($min-desktop-viewport) {
		@include bg-to-the-edge(left);
		box-sizing: content-box;
		border-radius: 0 $cell-border-radius $cell-border-radius 0;
	}
	@media ($max-mobile-viewport) {
		@include bg-to-the-edge(both);
		box-sizing: content-box;
	}
	a:not([class*="pk-button"]) {
		color: currentColor;
		text-decoration: underline;
	}
	.cell {
		background-color: transparent;
		border: none;
		h2:first-child, .cell--title {
			color: currentColor;
		}
	}
}

// RSU frontoffice
.gru-content .rsu-frontoffice.cell {
	overflow: hidden;
	display: flow-root;
	h2 {
		@extend %title;
	}
	.cell--body > .rsu-part:last-child {
		margin-bottom: -1rem;
	}
	.cell--body > .rsu-part:first-child {
		margin-top: -1rem;
	}
	.rsu-part {
		overflow: hidden;
		background-color: white;
		margin-left: -1rem;
		margin-right: -1rem;
		margin-top: extract-width($cell-border);
		padding: 1rem;
		&--header {
			margin-bottom: 1rem;
			@media(min-width: $very-small-limit + 0.01) {
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}
		h4 {
			margin: 0;
			flex-grow: 1;
		}
		.profile {
			@extend .fx-grid;
			--grid-gutter: 1rem;
			@media($min-grid-tablet-viewport) {
				--nb-cols: 4;
			}
			.label {
				@media(min-width: $very-small-limit + 0.01) {
					margin-bottom: 0.7em;
				}
			}
			.value {
				margin-left: var(--grid-gutter);
				--nb-cols: #{(4/3)};
			}
		} 
	}
	table.invoices {
		th, td {
			@media (max-width: $very-small-limit) {
				padding-right: 0.7em;
			}
		}
		a.icon-view {
			white-space: normal ;
		}
		.invoice-date {
			color: $red;
		}
	}
}

// Menu "Mes autres espaces"
.rsu-frontoffice-app {
	@extend .menu-with-icons;
	.gru-content &.cell {
		&.grid-1-2 {
			margin-right: 0 !important;
			@media screen and (min-width: $very-small-limit + 0.01) {
				width: 50%;
			}
			border-radius: 0;
			border-top: 0;
		}
		.cell--body {
			background-color: white;
		}
		p {
			margin: 0 !important;
			padding: 0 !important;
		}
	}
}
.gru-content .rsu-frontoffice-app-title.cell {
	display: none;  // show via javascript in rsu-frontoffice-app.html
	& + .rsu-frontoffice-app.grid-1-2 {
		@media (min-width: $very-small-limit + 0.01) {
			border-bottom-left-radius: $cell-border-radius;
			border-right-width: #{extract-width($cell-border) / 2};
			width: 50%;
		}
		@media (max-width: $very-small-limit) {
			margin-bottom: 0;
		}

		& + .rsu-frontoffice-app.grid-1-2 {
			@media (min-width: $very-small-limit + 0.01) {
				border-bottom-right-radius: $cell-border-radius;
				border-left-width: #{extract-width($cell-border) / 2};
			}
			@media (max-width: $very-small-limit) {
				border-radius: 0 0 $cell-border-radius $cell-border-radius;
			}
		} 
	}
}

//
//	WCS & FORMS
//

// black sidebar
.form-content--sidebox {
	background-color: $font-color;
	color: white;
	padding-top: $central-content-top;
	@media ($min-desktop-viewport) {
		@include bg-to-the-edge(left);
		box-sizing: content-box;
		border-radius: 0 $cell-border-radius $cell-border-radius 0;
	}
	@media ($max-mobile-viewport) {
		@include bg-to-the-edge(both);
		box-sizing: content-box;
		margin-top: -$central-content-top;
	}
}
// Steps
.wcs-steps {
	font-size: 30em / $base-font;
	font-weight: bold;
	font-family: $title-ff;
	@media ($mq-max--wcs-steps-small-layout) {
		font-size: $fz-4;
	}
}
.wcs-step {
	&--marker {
		border: 5px solid $font-color;
		outline: 1px solid white;
	}
	&.current &--marker {
		outline-color: $gray;
	}
	@media ($mq-max--wcs-steps-small-layout) {
		justify-content: center;
	}
}
// WCS tracking code
.tracking-code-part {
	font-weight: bold;
	font-family: $title-ff;
	font-size: $fz-4;
	color: white;
	background-color: $red;
	position: 1em;
	border-radius: 10em;
	display: inline-block;
	padding: 1em;
}
div#tracking-code {
	text-align: center;
	margin-bottom: $central-content-top;
	h3, a {
		font-size: 1em;
		color: inherit;
		display: inline;
		padding: 0;
	}
	h3::after {
		content: " :";
	}
	a {
		text-decoration: underline;
	}
	.form-discard-draft {
		all: inherit;
		font-size: $fz-small;
		text-decoration: underline;
		width: 100%;
	}
}

// typo
div#rub_service {
	h3 {
		border-bottom: 4px solid $red;
	}
}

// widgets on error
.widget-with-error input {
	border-color: $error-color;
	border-width: 1px;
}

.previous-button button {
	@extend .button-with-left-arrow;
}

//
//	Notif
//

.errornotice, .warningnotice, .successnotice, .infonotice {
	border-radius: $widget-border-radius;
	a:not(.pk-button) {
		font-weight: bold;
	}
}
.errornotice {
	color: white;
}


//
//	Footer
//
#footer > * {
	font-size: $fz-small;
}
#footer-wrapper {
	position: relative;
	overflow: hidden;
	min-height: 500px;
	border-top: 1px solid $gray;
	background-color: transparent;
	@media ($max-mobile-viewport) {
		min-height: 200px;
	}
	&::before{
		content: '';
		display: block;
		width: 954px;
		height: 888px;
		position: absolute;
		z-index: -1;
		left: calc(100% - 225px);
		top: calc(100% - 500px);
		background-size: contain;
		background-repeat: no-repeat;
		background-color: $red;
		clip-path:ellipse(50% 50% at 50% 50%);
		@media ($max-mobile-viewport) {
			width: 430px;
			height: 380px;
			left: calc(100% - 130px);
			top: calc(100% - 200px);
		}
		@media (max-width: $very-small-limit) {
			content: none;
		}
	}
}

//
//	PWA
//

.pwa-navigation {
	padding-right: 25%;
	div > ul li {
		--disc-color: #{$font-color};
		background-image: 
			radial-gradient(
				circle at 50% 35px,
				var(--disc-color) 18px,
				white 19px,
				white 23px,
				 var(--disc-color) 24px,
				 white 25px);
		// background-size: 50px;
		background-repeat: no-repeat;
		background-position: 50%;

		&:hover, &.selected{
			--disc-color: #{$red};
		}
	}

	div > ul li a {
		background-size: 22px 22px;
		background-position: 50% 25px;
		padding-top: 60px;
		font-family: $title-ff;
		font-weight: 800;
		span {
			font-size: $fz-xsmall;
		}
	}
}
