//
//	Typo
//

h1, .h1 {
	font-size: $fz-1;
	font-family: $ff-ss-serif-cond;
	text-align: center;
	@media ($max-mobile-viewport) {
		font-size: $fz-1m;
	}
}
h2, .h2 {
	@extend %title;
	color: $font-color;
}
h3, .h3 {
	font-size: $fz-2;
	color: $font-color;
	font-weight: 300;
	text-transform: uppercase;
	@media ($max-mobile-viewport) {
		font-size: $fz-2m;
	}
}
h4, .h4 {
	font-size: $fz-3;
	color: $font-color;
	font-family: $ff-ss-serif-cond;
	font-weight: bold;
	@media ($max-mobile-viewport) {
		font-size: $fz-3m;
	}	
}
a {
	&:hover {
		color: $blue-dark;
	}
}
.arrow-link {
	font-family: $ff-ss-serif-cond;
	font-weight: bold;
	text-decoration: none;
	display: block;
	&::before {
		content: "";
		display: inline-block;
		width: 1em;
		height: 0.9em;
		background: url(icons/arrow-right.svg) no-repeat;
		background-size: 100%;
		margin-right: .5em;
		text-decoration: none;
	}
}
.cnil-blue-title {
	color: $blue;
}
label {
	color: $gray;
	font-size: $fz-small;
	font-weight: normal;
	.required {
		color: $error-color;
	}
}


//
//	Layout
//

div#header,
div#footer,
div#main-content-wrapper,
.page-width,
.header-width {
	padding-left: $columns-gutter;
	padding-right: $columns-gutter;
}
@media ($max-mobile-viewport) {
	.central-content #sidebar {
		margin: 0;
	}
	#columns-wrapper {
		padding: 0;
	}	
}


//
//	Header
//

$header-padding-desktop: 28px;
$header-padding-mobile: 12px;

.portal-profil {
	background-color: var(--portal-profil-color);
	color: white;
	font-family: $ff-ss-serif;
	text-transform: uppercase;
	p {
		margin: 0;
		padding: 0.2em 0;
	}
}
#top {
	display: flex;
	align-items: flex-end;
	@media ($max-mobile-viewport) {
		flex-wrap: wrap;
	}
}
#logo.has-logo {
	position: relative;
	flex-grow: 1;
	line-height: 0;
	padding-top: $header-padding-desktop;
	padding-bottom: $header-padding-desktop;
	text-align: left;
	@media ($max-mobile-viewport) {
		padding-top: $header-padding-mobile;
		padding-bottom: $header-padding-mobile;
		padding-left: $nav-menu-side + 10px;
	}
	a::before {
		@media ($max-mobile-viewport) {
			height: 24px;
			width: 79px;
		}
	}
}

#toplinks {
	position: relative;
	font-family: $ff-ss-serif;
	font-size: $fz-xsmall;
	margin-bottom: $header-padding-desktop;
	@media ($max-mobile-viewport) {
		margin-bottom: $header-padding-mobile;
	}
	@media ($min-desktop-viewport) {
		white-space: nowrap;
	}

	.logout {
		vertical-align: text-top;
		&:hover {
			filter: brightness(0.5);
		}
	}
}
.toplinks--list-item:first-child {
	&::after {
		content: "⋅"
	}
}


//
//	NAV
//

.site-nav {
	flex-grow: 1;
	@media (max-width: $nav-mobile-limit) {
		order: 1;
		flex-basis: 100%;
	}
}
.gru-nav-wrapper {
	@media (max-width: $nav-mobile-limit) {
		margin-top: calc(-1 * #{$nav-menu-side} - 7px);
	}
}
div.gru-nav {
	.gru-nav-button {
		margin-left: 0;
		margin-bottom: 12px;
	}
	> ul {
		margin: 0;
	}
}
// hide nav to anonymous user
.anonymous-user {
	.site-nav {
		display: none;
	}
	#logo.has-logo {
		@media ($max-mobile-viewport) {
			padding-left: 0;
		}
	}	
}


//
//	Main
//

main {
	margin-top: 20px;
}

.cnil-page-header {
	p {
		@extend .h3;
		margin-bottom: 2rem;
		text-transform: none;
		text-align: center;
		font-family: $ff-ss-serif-cond;
		strong {
			font-weight: inherit;
		}
	}
}


//
//	Cells
//

%title {
	line-height: 1.1;
}

// foldable icon to left
div.cell.foldable > div > h2:first-child {
	display: flex;
	padding-right: extract-right($title-padding);
	&::after {
		font-size: $fz-3;
		color: $font-color;
		position: static;
		display: inline-block;
		flex: 0 0 1.5rem;
		margin-right: 1rem;
		text-align: center;
		line-height: 1;
		order: -1;
		align-self: center;
	}
}
// More left padding on cells
@media($min-desktop-viewport) {
	.page-template-standard-sidebar #columns .cell {
		&:not(.foldable) .cell--title,
		&:not(.foldable) h2:first-child,
		h2:first-child ~ * {
			padding-left: 3.5rem;
		}
		div.links-list ul {
			padding-left: 0;
		}
	}
}
// Default links-list
%cell-links-list {
	padding-left: 1em;
	padding-right: 1em;
	& > li > a {
		font-family: $ff-ss-serif;
		font-weight: 600;
		padding-left: 0;
		padding-right: 0;
		&:hover {
			text-decoration: underline;
		}
	}
	li div.description {
		padding: 0;
		p {
			margin-right: 0;
			margin-left: 0;
		}
	}
}

// Custom cells
.bordered-links-list {
	.gru-content &.cell {
		.links-list ul {
			& > li {
				position: relative;
				border: 1px solid $gray-dark;
				background-color: $gray-xxlight;
				margin-bottom: 1em;
				padding: 0 1em;
			}
			& > li > a {
				position: static;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
				}
			}
		}
	}
}
.two-cols-links-list {
	.gru-content &.cell {
		.links-list ul {
			@extend .fx-grid;
			--grid-gutter: 1em;
			padding: 1em;
			@media ($min-desktop-viewport) {
				--nb-cols: 2;
			}
		}
	}
}
.cell-light-title {
	.gru-content &.cell {
		.cell--title, h2:first-child {
			@extend .h3;
		}
	}
}
.arrow-links-list {
	.gru-content &.cell {
		.links-list ul {
			& > li {
				border: none;
			}
			& > li:not(:last-child) a {
				padding-bottom: 0;
			}
			& > li > a {
				display: flex;
				flex-wrap: nowrap;
				@extend .arrow-link;
			}
		}
	}
}

.wcs-current-drafts-cell,
.wcs-current-forms-cell {
	.gru-content &.cell {
		// Forms counter
		.cell--title, h2:first-child {
			display: flex;
			.cnil-forms-counter {
				flex-grow: 1;
				text-align: right;
				color: $font-color;
				margin-left: .66em;
			}
		}
		@extend .bordered-links-list;
		.list-of-forms {
			ul > li {
				padding-left: 48px;
				background: url(icons/file.svg) no-repeat;
				background-position: 16px center;
				background-size: 16px auto;
			}
			.form-title {
				flex-grow: 1;
				font-family: $ff-serif;
			}
			.form-number {
				flex-grow: 0;
				font-family: $ff-serif;
				font-weight: normal;
				opacity: 1;
				color: $gray;
				font-size: $font-size-small;
			}
			.form-digest {
				color: $font-color;
			}
			.form-status {
				font-family: $ff-serif;
				font-size: $fz-small;
				color: $blue;
			}
		}
	}
}

#sidebar {
	.cell {
		@extend .cell-light-title;
	}
	.tracking-code-input-cell form {
		input {
			margin-bottom: 1rem;
			margin-top: 0;
		}	
		button {
			vertical-align: baseline;
			margin-bottom: 1rem;
		}

	} 

} 

//
//	WCS & Forms
//

%button {
	text-transform: uppercase;
	font-family: $ff-ss-serif-cond;
	font-weight: bold;
	box-shadow: none !important;
	&:disabled {
		--background: #{$gray};
	}
}

%submit-button {
	--background: #{$blue};
	border-color: var(--background);
}
%cancel-button {
	--color: #{$blue};
	--background: white;
	--hover-color: #{$blue-dark};
	--hover-background: white;
	border-color: currentColor;
}

 div.buttons {
	.previous-button button {
		@extend %cancel-button;
	}
	.cancel-button button {
		&:not(:hover) {
			border-color: white;
		}
	}
}

$form-padding: 1rem;

%form-separator {
	&::before {
		content: "";
		display: block;
		background-color: $body-background;
		height: $fz-small;
		margin-bottom: $form-padding;
		margin-left: -1*$form-padding;
		margin-right: -1*$form-padding;
	}
}

div#rub_service {
	display: flow-root;
	.drafts-recall,
	form {
		padding: $form-padding;
	}
	.drafts-recall {
		border-bottom: $form-padding solid $body-background;
	}
	h3 {
		@extend .h4;
	}
	h3.separator {
		@extend %form-separator;
	}
	h4 {
		font-size: 1rem;
		color: $blue;
		font-family: $ff-serif;
		font-weight: normal;
		&::before {
			content: "– "
		}
	}
	div.buttons {
		@extend %form-separator;
		&::before {
			flex-basis: calc(100% + #{$form-padding*2)};
		}
	}
	div.dataview {
		padding: $form-padding;
		.label {
			@extend label;
		}
	}
	.back-home-button {
		padding: $form-padding;
		a {
			@extend .arrow-link;
		}
	}
}

.widget-with-error {
	input, textarea, select {
		border-color: $error-color;
		border-width: 1px;
		outline: 1px solid $error-color;
	}
}

div#tracking-code {
	background-color: white;
	padding-bottom: 1rem;
	h3 {
		@extend .h3;
		padding-bottom: 0;
	}
	a {
		font-family: $ff-ss-serif;
		color: $blue;
	}
	form {
		padding-left: 1rem;
	}
	.form-discard-draft {
		margin-right: 0;
	}
} 

// Steps
.wcs-steps {
	background-color: white;
	font-family: $ff-ss-serif-cond;
	h2 {
		@extend .h3;
		display: block;
	}
}

@media ($mq-max--wcs-steps-small-layout) {
	.wcs-steps {
		display: flex;
		align-items: baseline;
	}
	.wcs-step {
		&.current {
			font-weight: normal;
		}
		&--marker::before {
			all: unset;
			content: "/";
			order: 2;

		}
		&--marker-nb, &--marker-total {
			transform: none;
			font-size: 1rem;
		}
	}
}

@include desktop-vertical-steps() {
	.wcs-steps {
		font-size: 1rem;
		padding-bottom: 1rem;
		font-weight: bold;
		&--list {
			margin-bottom: 0;
		}
	}
	.wcs-step {
		padding-left: 2em;
		&.step-before {
			color: $blue;
			background-size: 1em auto;
			background-image: url(icons/check.svg);
			background-repeat: no-repeat;
			background-position: top 50% left 0.8em;
		}
		&.step-before &--marker {
			color: inherit;
		}
		&.current {
			background-size: 1ex 1ex;
			background-repeat: no-repeat;
			background-position: top 50% left 1em;
			background-image: radial-gradient(closest-side, #{$font-color} 100%, transparent);
		}
		&--label {
			font-size: 1em;
		}
		&--marker-nb::after {
			content: ".";
		}	
	}	
}

//
//	A2
//

.cnil-login-page,
.cnil-registration-page {
	--padding: 0.5rem;
	background: white;
	padding: var(--padding);
	padding-top: 1px;
	@media ($min-desktop-viewport) {
		--padding: 1rem
	}
}

.a2-block-title,
div.block h2.a2-block-title,
div.a2-block h2.a2-block-title,
#frontend-registration-email h2 {
	@extend .h4;
	text-align: center;
}

//
//	Notifications
//

.errornotice,
.warningnotice,
.successnotice,
.infonotice {
	border: 1px solid var(--dark-color);
	font-size: $fz-small;
	padding: 1em;
	padding-left: 3em;
	a:not(.pk-button) {
		color: var(--dark-color);
	}
	&::before {
		top: 1em;
		color: var(--dark-color);
		background-repeat: no-repeat;
		background-size: 100%;
	}
}
.errornotice {
	--dark-color: #D02829;
	&::before {
		content: "";
		background-image: url(icons/alert-rouge.svg);
	}
}
.warningnotice {
	--dark-color: #776100;
	&::before {
		content: "";
		background-image: url(icons/alert-jaune.svg);
	}
}
.successnotice {
	--dark-color: #008619;
}
.infonotice {
	--dark-color: #004084;
	&::before {
		content: "";
		background-image: url(icons/info.svg);
	}
}


//
//	Footer
//

#footer {
	font-size: $fz-small;

	a:hover {
		color: $blue-light;
	}

	.cell h2:first-child,
	.cell--title {
		background-color: transparent;
		color: white;
		font-size: 1em;
		font-weight: 800;
		font-family: $ff-ss-serif;
		text-transform: uppercase;
	}
	div.links-list ul {
		> li {
			border-bottom: none
		}
		> li > a {
			font-size: $fz-xsmall;
			font-family: $ff-serif;
			font-style: italic;
			padding-bottom: 0.15em;
			padding-top: 0.15em;
		}
	}
	.menucell {
		.menu {
			margin: 1em 0;
		}
		.menu--item {
			padding-right: .33em;
			margin-right: .33em;
		}
		.menu--link {
			text-transform: uppercase;
			font-weight: 800;
			padding: 0;
			&:not(:hover) {
				text-decoration: none;
			}
			&:hover {
				color: $blue-light;
			}
		}
	}
}


