//
//	Typo
//

html {
	@media ($min-desktop-viewport) {
		font-size: 1.2em;
	}
}

h1 {
	font-size: $fz-h1;
	font-weight: 800;
	line-height: 1.1;
}
h2 {
	font-size: $fz-h2;
	font-weight: 700;
}
h3 {
	font-size: $fz-h3;
	font-weight: 600;
}
strong {
	font-weight: 600;
}

//
// COMPONENTS
//

@mixin big-line($align, $color: $violet, $position: after) {
	&::#{$position} {
		content:"";
		width: 3em;
		height: 6px;
		background-color: $color;
		display: block;
		margin: 0.33em 0;
		@if ($align == center) {
			margin-left: auto;
			margin-right: auto;
		}
	}
}

// buttons
%button {
	text-transform: uppercase;
	font-weight: 600;
}
%cancel-button {
	&, &:hover {
		background-color: white;
		color: $violet;
	}
}

//	Cell-icon
//	Slug 'cell-icon'
// 	optionnal class 'cyan' or 'violet'
.cell-icon {
	border: 1px solid $violet;
	&--wrapper {
		background-color: white;
		color: $violet;
		display: block;
		text-align: center;
		padding: 1.25rem;
		line-height: 1.1;
		min-height: 12rem;

		& > *:last-child {
			margin-bottom: 0;
		}
	}
	&--icon {
		display: block;
		width: 100%;
		height: 3em;
		background: no-repeat center;
		background-size: auto 100%;
	}
	&--title {
		font-size: $fz-h2;
		color: inherit;
		line-height: inherit;
		margin: .33em auto;
	}
	&--text {
		&, & > * {
			padding: 0 !important;
			margin-top: 0;
			*:last-child {
				margin-bottom: 0;
			}
		}
	}
	// Colors mods
	&.violet {
		& .cell-icon--wrapper {
			background-color: $violet;
			color: white;
		}
	}
	&.cyan {
		border-color: $cyan-dark;
		& .cell-icon--wrapper {
			background-color: $cyan-dark;
			color: white;
		}
	}
}

//
//	SITE HEADER
//

div#header {
	z-index: auto;
	padding-top: 10px;
	@media ($min-desktop-viewport) {
		padding-top: 30px;
	}
}
#top {
	display: flex;
	align-items: center;
	@media ($max-mobile-viewport) {
		justify-content: center;
	}
}
#logo {
	margin-bottom: -8px;
	position: relative;
	z-index: 102;

	&.has-logo a {
		height: 75px;
		width: 130px;
		@media ($min-desktop-viewport) {
			height: 150px;
			width: 260px;
		}
	}
}

// Pwa navigation
.pwa-navigation {
	padding: 1em 0;
	div > ul li a {
		text-transform: uppercase;
		font-weight: 600;
		display: flex;
		align-items: center;
		background-position: 50% 5px;
		background-size: auto calc( #{$nav-mobile-bottom-bar-height / 2} - 5px );
		span {
			height: auto;
			width: 100%;
			font-size: $fz-small;
		}

	}
	@media ($max-mobile-viewport) {
		left: 0;
	}
	@media ($min-desktop-viewport) {
		position: static;
		background-color: white;
		div > ul li {
			a, &.selected a, &.selected:hover a, &:hover a {
				color: $cyan;
				background-color: transparent
			}
			a {
				color: $violet;
			}
		}
	}
}

// user links
#toplinks {
	@media ($max-mobile-viewport) {
		display: none;
	}
	position: static;
	color: $violet;
	border: none;
	padding: 0;
	box-shadow: none;


	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.4;
	font-size: $fz-small;

	> span {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	a {
		display: block;
		margin: 0.25em 0 !important;
		text-align: center;
		color: inherit;
		white-space: nowrap;
		span {
			padding: 0 !important;
		}

		&.login-link, &.logout {
			@extend %button;
		}

		&.registration, &.account-link {
			font-size: $fz-small;
		}


	}
}

// header shadow
.lso-header-shadow {
	position: relative;
	z-index: 101;
	height: 10px;
	margin-bottom: -10px;
	background-image: linear-gradient(
		hsla(0, 0%, 0%, 0.2),
		transparent
		);
}

//
//	PAGE HEADER
//

// hide default title if cell inside placeholder
* + .lso-page-header--default {
	display: none;
}
// Combo page header
body:not(.wcs-page) {
	#page {
		// no x-scrollbar because arrows page-header ::before element
		overflow-x: hidden;
	}
	.lso-page-header {
		@extend #columns-wrapper;
		position: relative;
		max-width: $width - 200px;
		margin: 0 auto;
		margin-top: 1.5rem;
		.lso-page-header--content {
			h1, h2 {
				&:first-child {
					margin-top: 0;
				}
			}
			div.text-cell * {
				margin-left: 0;
				margin-right: 0;
			}
			@media ($max-mobile-viewport) {
				text-align: center;
			}
		}
		@media ($min-desktop-viewport) {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.lso-page-header--content {
				flex-basis: 50%;
			}
			.lso-page-header--sidebar {
				flex-basis: 40%
			}
			// arrows background:
			min-height: 115px;
			&::before {
				content: "";
				position: absolute;
				z-index: -1;
				display: block;
				top: 0;
				left: 50%;
				width: 50vw;
				height: 100%;
				background: url(img/fleches-outline-pattern.svg) repeat-x;
			}
		}
	}
	#content {
		margin-top: 1.5rem;
	}
}
// WCS form header
.wcs-page-title {
	@extend h2;
	overflow: hidden;
	background-color: $violet;
	color: white;
	padding: 1rem;
	padding-top: 1.5rem;
	margin: 0;
	@include big-line(left, $cyan);
}

.form-content--title,
div#rub_service h2 {
	@extend .desktop-only;
	@extend .wcs-page-title;
}

//
//	CELLS
//

// carrousel
div.carrousel-content {
	$content-mobile-height: 10rem;
	$content-desktop-width: 20rem;
	$content-border-radius: 4rem;
	input + div {
		background-color: $cyan;
		background-color: yellow;
		@media ($max-mobile-viewport) {
			padding-bottom: $content-mobile-height;
		}
		@media ($min-desktop-viewport) {
			padding-left: $content-desktop-width;
		}

		div.carrousel-item {
			padding: 0;
			font-size: 1rem;
			@media ($min-desktop-viewport) {
				align-items: stretch;
				justify-content: flex-start;
			}
			div.carrousel-item-content {
				line-height: inherit;
				background-color: $cyan-dark;
				padding: 2rem;
				margin-bottom: 0;
				@media ($max-mobile-viewport) {
					flex-grow: 1;
					min-height: $content-mobile-height + $content-border-radius;
					border-radius: $content-border-radius $content-border-radius 0 0;
					margin-bottom: -1 * $content-mobile-height;
				}
				@media ($min-desktop-viewport) {
					border-radius: 0 $content-border-radius $content-border-radius 0;
					margin-left: -1 * $content-desktop-width;
					flex: 0 1 #{$content-desktop-width + $content-border-radius};
					display: flex;
					align-items: center;
				}
				.carrousel-item-title {
					display: block;
					font-size: $fz-h1;
					font-weight: 600;
					line-height: 1;
					@include big-line(center);

				}
				.carrousel-item-description {
					line-height: 1.4;
					max-width: none;
				}
			}
		}
	}
	div.carrousel-nav {
		label {
			background-color: white;
		}
		@media ($min-desktop-viewport) {
			text-align: right;
		}
	}
	a.carrousel-previous,
	a.carrousel-next {
		font-size: $fz-small;
		height: 2em;
		width: 2em;
		line-height: 2em;
		text-align: center;
		border: 1px solid white;
		border-radius: 50%;
		&::after {
			font-size: inherit;
		}
		&:hover {
			background-color: $violet;
		}
	}
}

// tracking code input
div.tracking-code-input-cell {
	#tracking-code {
		border-radius: 2em;
		border: 2px solid $violet;
		text-align: center;
		padding-top: .25em;
		padding-bottom: .25em;
	}

	&.cell-icon {
		.cell-icon--icon {
			height: 2.5em;
		}
		h2 + div {
			padding: 0;
		}
		button, button:hover {
			@extend %button;
			background-image: url(img/recherche-blanc.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			width: 2em;
			height: 2em;
			display: block;
			margin: 0 auto;
			margin-top: -0.5em;
			position: relative;
		}
	}
	&.cell-icon.cyan {
		#tracking-code, button {
			border-color: white;
		}
	}
}

// text cell with class 'cyan'
div.text-cell.cyan {
	background-color: $cyan-dark;
	color: white;
	border-color: $cyan-dark;
	// title
	h2:first-child {
		background-color: inherit;
		color: inherit;
	}
}

// Links-list {
.gru-content {
	%cell-links-list {
		& > li {
			position: relative;
			padding-left: 2em;
			&::before {
				content: "⦁";
				color: $cyan-dark;
				display: inline;
				// float: left;
				position: absolute;
				left: 1em;
				top: 0.7ex;

			}
			> a {
				padding-top: 0.25em;
				padding-bottom: 0.25em;
				padding-left: 0;

				+ .description {
					padding-left: 2em;
				}
			}
		}
	}
}

// Foldable cells
div.cell {
	&.foldable {
		> div > h2:first-child {
			&:hover {
				background-color: $violet;
				color: white;
			}
			&::after {
				bottom: 1rem;
			}
		}
	}
}

// Cells with label + value
div.card,
#profile {
	> * {
		margin: 0;
	}
	.label {
		line-height: 1;
	}
	.value {
		margin-bottom: 0.3em;
	}
}

//
//	WCS
//

.wcs-page main {
	@media ($min-desktop-viewport) {
		background: url(img/fleches-outline-pattern.svg) repeat-x left 1rem;
	}
}

$gauche-width-desktop: 17rem-2.2rem+0.7rem;
div#rub_service {
	box-shadow: 0 0 10px 5px hsla(0, 0%, 0%, 0.1);
	@media ($min-desktop-viewport) {
		margin-left: 2.5rem;
		div#gauche + & {
			width: calc(100% - 2.5rem - #{$gauche-width-desktop});
		}
	}
	form {
		padding: 1rem;

		.previous-button button {
			@extend %cancel-button;
		}
	}
}
div#gauche {
	background-color: $cyan-dark;
	color: white;
	height: 100%;
	margin-top: 0;

	@media ($max-mobile-viewport) {
		margin: 0 -0.7rem;
		width: auto;
		padding: 0.7rem;
	}

	@media ($min-desktop-viewport) {
		border-radius: 0 8rem 8rem 0;
		padding: 3.5rem 3rem;
		width: 17rem;
		margin-left: calc(-2.2rem + 0.7rem);
	}

	div#tracking-code {
		text-align: center;
		// icon
		&::before {
			content: "";
			@extend .cell-icon--icon;
			background-image: url(img/suivi-blanc.svg);
		}
		h3 {
			display: block;
			background-color: inherit;
			color: inherit;
			padding: 0;
			text-transform: uppercase;
		}
		a {
			display: block;
			color: inherit;
			padding: 0;
		}
		button {
			margin-right: 0;
		}
	}
}
// Steps
.wcs-steps h2 {
	@extend h3;
	font-weight: 700;
	display: block;
	text-transform: uppercase;
	margin: 0;
	@media ($max-mobile-viewport) {
		text-align: center;
	}
	@media ($min-desktop-viewport) {
		@include big-line(right, white, before);
	}
}
.wcs-step {
	@media ($max-mobile-viewport) {
		justify-content: center;
	}
	&--marker {
		width: auto;
	}
}

//
// FOOTER
//

.has-pwa-navigation footer {
	margin-bottom: 0;
	@media ($max-mobile-viewport) {
		margin-bottom: calc(#{$nav-mobile-bottom-bar-height} + 2em);
	}
}
#footer-wrapper {
	position: relative;
	box-shadow: 0 0 10px 5px hsla(0, 0%, 0%, 0.1);
	// arrows
	padding-top: 25px;
	margin-top: 50px;
	#footer {
		position: relative;
		&::before {
			content: "";
			display: block;
			position: absolute;
			right: 0;
			top: -50px;
			height: 50px;
			width: 50%;
			background: url(img/fleches.svg) repeat-x;
			background-size: contain;
		}
	}
	@media ($max-mobile-viewport) {
		padding-top: 12.5px;
		margin-top: 25px;
		#footer::before {
			top: -25px;
			height: 25px;
			background-size: auto 100%;
		}
	}
	.footer-logo {
		text-align: center;
		img {
			width: 190px;
			height: auto;
		}
		@media ($min-desktop-viewport) {
			float: left;
			height: 100%;
			margin-right: 1.5rem;
		}
	}
	.menucell li {
		&:not(:last-child)::after {
			content: "-";
		}
		a {
			color: inherit;
			font-weight: 600;
			text-transform: uppercase;
			display: inline-block;
		}
	}
}
