%button {
	box-shadow: none;
	text-decoration: none;

	&:hover {
		box-shadow: none;
		text-decoration: none;
	}

	&:disabled {
		border-color: $grey-400;
		color: $grey-500;
	}
}

%title {
	@media screen and ($max-mobile-viewport) {
		font-size: 1.75rem;
	}
}

div.a2-continue,
div#services > ul > li,
div.a2-block,
.gru-content .cell,
.block {
	border-bottom: 4px solid $blue-france-500;
}

div.gru-content {
	margin-top: 15px;
	.cell, .block {
		margin-bottom: 20px;
	}
}

.ui-dialog-buttonset button.submit-button,
div.gru-content button.submit-button,
div.gru-content button[name=submit] {
	background: $blue-france-500;
	&:hover {
		background: #1515c8;
	}
	color: white;
}

form div[class*=" grid-"] span.select2-selection,
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="number"],
input[type="search"], input[type="file"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"],
input[type="week"], textarea, select {
	box-shadow: inset 0 -2px 0 0 $grey-600;
	border-radius: 0.25rem 0.25rem 0 0;
	&[disabled] {
		cursor: not-allowed;
	}
	&[readonly], &[disabled] {
		box-shadow: inset 0 -2px 0 0 $grey-400;
	}
	&[readonly]:focus {
		outline: none;
	}
	&:focus:not([readonly]) {
		box-shadow: inset 0 -2px 0 0 $grey-600;
	}
}

div.select2-container .select2-dropdown.select2-dropdown--below,
span.select2-container .select2-dropdown.select2-dropdown--below {
	border: 1px solid $grey-600;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	box-shadow: none;
}

footer {
	margin-top: 1em;
	border-top: 2px solid $blue-france-500;
}

div.file-upload-widget div.file-button div.widget-message::after {
	color: $blue-france-500;
}

a {
	text-decoration: underline;
}

div#tracking-code {
	h3, a {
		padding-left: 0;
		text-decoration: none;
	}
}

div#rub_service {
	h2:first-child {
		padding: 0;
		margin-bottom: 1rem;
	}
	dl#evolutions, .drafts-recall, form {
		padding: 0 0 1em 0;
	}
}

div#header {
	#top {
		min-height: 120px;
		h1 {
			min-height: 120px;
			font-size: 1rem;
			a {
				padding-left: 160px;
				height: 120px;
				line-height: 120px;
				display: inline-block;
				text-decoration: none;
				color: $grey-800;
				background: url(rf.png) left center no-repeat;
				background-size: 120px auto;
			}
			&.has-logo {
				a {
					background-image: url(/assets/header:logo);
					text-indent: 0;
				}
			}
			@media screen and ($max-mobile-viewport) {
				padding-left: 0;
				min-height: 140px;
				a {
					margin-left: 10px;
					padding-left: 0;
					padding-top: 60px;
				}
			}
		}
	}
	#toplinks {
		box-shadow: none;
		border: none;
		height: 120px;
		background: transparent;
		line-height: 120px;
		padding: 0;
		word-spacing: calc(15px - 0.33em);
		a {
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
			&:last-child {
				border-left: 1px solid $grey-400;
				margin-left: 15px;
				padding-left: 15px;
			}
		}
	}
}

#nav-button {
	position: absolute;
	top: 0;
	right: 0;
}

#header-wrapper {
	border-bottom: 1px solid $grey-200;
}

#nav-wrapper {
	box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px -16px rgba(0, 0, 0, 0.32);
	margin-bottom: 1em;
	@media screen and ($max-mobile-viewport) {
		margin-top: 0em;
	}
}

div.gru-nav > ul {
	margin: 0;
	> li a {
		font-weight: normal;
		&:focus {
			background: $navigation-focus-hover-color;
		}
	}
	> li {
		a {
			background: white;
			&:hover {
				background: $navigation-focus-hover-color;
			}
		}
	}
	li ul li {
		border: 1px solid $grey-200;
		&:not(:first-child) {
			margin-top: -1px;
		}
		a {
			border-color: transparent;
			&:hover {
				border-color: transparent;
			}
		}
	}
}

#nav-skip:focus-within {
	position: static;
	width: auto;
	background: $grey-200;
	li {
		margin: 1rem;
		display: inline-block;
	}
	a {
		position: static;
		background: transparent;
		&:focus {
			outline: 2px solid $color-focus;
			outline-offset: 2px;
		}
	}
}

%custom-radio-checkbox-widget {
	input:focus + span {
		outline: none;
		&::before {
			outline: 2px solid $color-focus;
			outline-offset: 2px;
		}
	}
	input + span {
		line-height: 2rem;
		padding-left: 2.4rem;
		&::before {
			height: 1.33rem;
			width: 1.33rem;
		}
		&::after {
			top: calc(0.61rem + 1px);
			left: calc(0.29rem + 1px);
			height: calc(0.76rem);
			width: calc(0.76rem);
		}
	}
	input[type=checkbox] + span {
		&::before {
			border-radius: 3px;
		}
		&::after {
			background-position: center center;
			background-repeat: no-repeat;
			top: calc(0.33rem + 1px);
			left: 1px;
			height: calc(1.33rem);
			width: calc(1.33rem);
		}
	}
	input[type=checkbox]:checked + span {
		&::after {
			background-image: url(check.svg);
		}
	}
	input[disabled][type=checkbox]:checked + span {
		&::after {
			background-position: center center;
			background-repeat: no-repeat;
		}
	}
}

.CheckboxWidget div.content label {
	display: inline-block;
}

div.textcell,
div.gru-content div#rub_service {
	h1, h3, h4, h5, h6 {
		margin-left: 0;
		margin-right: 0;
		color: $grey-800;
	}
	h1, h1.fr-h1, h2.fr-h1, h3.fr-h1, h4.fr-h1, h5.fr-h1, h6.fr-h1 {
		font-size: 2.5rem;
		line-height: 3rem;
		@media screen and ($max-mobile-viewport) {
			font-size: 2rem;
			line-height: 2.5rem;
		}
	}

	h1.fr-h2, h2.fr-h2, h3.fr-h2, h4.fr-h2, h5.fr-h2, h6.fr-h2 {
		font-size: 2rem;
		line-height: 2.5rem;
		@media screen and ($max-mobile-viewport) {
			font-size: 1.75rem;
			line-height: 2.25rem;
		}
	}

	h3, h1.fr-h3, h2.fr-h3, h3.fr-h3, h4.fr-h3, h5.fr-h3, h6.fr-h3 { // title field
		font-size: 1.75rem;
		line-height: 2.25rem;
		@media screen and ($max-mobile-viewport) {
			font-size: 1.5rem;
			line-height: 2rem;
		}
	}
	[type=hidden] + h3 { // 1st field
		margin-top: 0;
	}
	h4, h1.fr-h4, h2.fr-h4, h3.fr-h4, h4.fr-h4, h5.fr-h4, h6.fr-h4 { // subtitle field
		font-size: 1.5rem;
		line-height: 2rem;
		@media screen and ($max-mobile-viewport) {
			font-size: 1.375rem;
			line-height: 1.75rem;
		}
	}
	h5, h1.fr-h5, h2.fr-h5, h3.fr-h5, h4.fr-h5, h5.fr-h5, h6.fr-h5 {
		font-size: 1.375rem;
		line-height: 1.75rem;
		@media screen and ($max-mobile-viewport) {
			font-size: 1.25rem;
			line-height: 1.75rem;
		}
	}
	h6, h1.fr-h6, h2.fr-h6, h3.fr-h6, h4.fr-h6, h5.fr-h6, h6.fr-h6 {
		font-size: 1.25rem;
		line-height: 1.75rem;
		@media screen and ($max-mobile-viewport) {
			font-size: 1.125rem;
			line-height: 1.75rem;
		}
	}
	h1, h3, h4, h5, h6 {
		&.fr-display-xl {
			font-size: 5rem;
			line-height: 5.5rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 4.5rem;
				line-height: 5rem;
			}
		}
		&.fr-display-lg {
			font-size: 4.5rem;
			line-height: 5rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 4rem;
				line-height: 4.5rem;
			}
		}
		&.fr-display-md {
			font-size: 4rem;
			line-height: 4.5rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 3.5rem;
				line-height: 4rem;
			}
		}
		&.fr-display-sm {
			font-size: 3.5rem;
			line-height: 4rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 3rem;
				line-height: 3.5rem;
			}
		}
		&.fr-display-xs {
			font-size: 3rem;
			line-height: 3.5rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 2.5rem;
				line-height: 3rem;
			}
		}
	}

	.fr-callout {
		color: $font-color;
		background-color: $background-contrast-grey;
		box-shadow: inset .25rem 0 0 $border-default-blue-france;
		@each $name, $colours in $dsfr-colours {
			&.fr-callout--#{$name} {
				background: map_get($colours, "background-contrast");
				box-shadow: inset 0.25rem 0 0 0 map_get($colours, "border-default");
			}
		}
		padding: 2rem 3rem;
		@media screen and ($max-mobile-viewport) {
			padding: 1.5rem;
		}
		&__title {
			color: $font-color;
			font-weight: 700;
			font-size: 1.5rem;
			line-height: 2rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 1.375rem;
				line-height: 1.75rem;
			}
		}
		&__text {
			font-size: 1.25rem;
			line-height: 2rem;
			@media screen and ($max-mobile-viewport) {
				font-size: 1.125rem;
				line-height: 1.75rem;
			}
			margin: 0;
		}
		p + p {
			/* may be a small deviation from dsfr but useful
			   for multiparagraphs callouts */
			margin-top: 0.5rem;
		}
		&.fr-fi-information-line::before {
			display: block;
			content: "";
			height: 1.5rem;
			margin: -1rem 0 -1rem -2rem;
			@media screen and ($max-mobile-viewport) {
				margin: -1rem 0;
				margin: -.5rem 0 .5rem;
			}
			background: url(information-line.svg) left center no-repeat;
		}
	}
}

div.comment-field,
div.textcell {
	p, table, ul, ol {
		line-height: 1.5rem;
	}
	p {
		&.fr-text--lead {
			font-size: 1.375rem;
			line-height: 2.25rem;
			color: $grey-700;
			@media screen and ($max-mobile-viewport) {
				font-size: 1.25rem;
				line-height: 2rem;
			}
		}
		&.fr-text--lg {
			font-size: 1.25rem;
			line-height: 2rem;
			color: $grey-700;
			@media screen and ($max-mobile-viewport) {
				font-size: 1.125rem;
				line-height: 1.75rem;
			}
		}
		&.fr-text--sm {
			font-size: 0.875rem;
			line-height: 1.5rem;
			color: $grey-700;
		}
		&.fr-text--xs {
			font-size: 0.75em;
			line-height: 1.25rem;
			color: $grey-600;
		}
	}
	.fr-text--alt {
		font-family: Spectral, Georgia, serif;
	}
}

div.cell {
	&.foldable {
		> div > h2:first-child {
			&::after {
				font-weight: normal;
				font-size: 1rem;
				line-height: 2.25rem;
			}
		}
	}
}

a.add-more-items--button {
	text-decoration: none;
}

#sidebar + div .a2-block {
	margin-top: 0;
}

.widget div.error {
	color: $error-525;
	margin-left: 0;
	font-weight: normal;
	padding-left: 1.5rem;
	background: url(error-fill-red.svg) left 0.4rem no-repeat;
	background-size: 1rem;
}

#footer {
	.fr-footer__content {
		p {
			margin: 0 0 0.5rem;
			font-size: 0.875rem;
			line-height: 1.5rem;
			@media screen and ($max-mobile-viewport) {
				margin-left: 1rem;
				margin-right: 1rem;
			}
		}
		ul {
			display: flex;
			flex-direction: row;
			align-self: center;
			justify-content: space-between;
			@media screen and ($max-mobile-viewport) {
				flex-direction: column;
				margin-left: 1rem;
			}
			flex-wrap: wrap;
			padding: 0;
			padding-bottom: 0.5rem;
			list-style: none;
			li {
				margin: 0;
				padding: 0;
			}
			a {
				font-weight: bold;
				font-size: 0.875rem;
				line-height: 1.5rem;
				text-decoration: none;
			}
		}
	}
	.links-list {
		border-top: 1px solid $grey-400;
		ul {
			display: flex;
			@media screen and ($max-mobile-viewport) {
				margin-left: 1rem;
				flex-direction: column;
			}
			li {
				border: none;
				a {
					display: inline-block;
					font-size: .75rem;
					color: $grey-600;
					text-decoration: none;
					&:hover {
						background: none;
					}
				}
				&:first-child {
					a {
						padding-left: 0;
					}
				}
				@media screen and ($max-mobile-viewport) {
					a {
						margin: 0;
						padding: 0;
					}
				}
				&:not(:first-child)::before {
					background: $grey-400;
					display: inline-block;
					content: "";
					vertical-align: middle;
					position: relative;
					width: 1px;
					height: 1rem;
					@media screen and ($max-mobile-viewport) {
						content: none;
					}
				}
			}
		}
	}
}

a[target="_blank" i]::after {
	font-family: FontAwesome;
	content: "  \f08e";  // external-link
	vertical-align: baseline;
	font-size: 80%;
}

div.textcell.pk-transparent {
	h4, h4, h5, p, table {
		margin-left: 0;
		margin-right: 0;
	}
}

div.fileinfo a.remove::before {
	color: $blue-france-500;
}

.successnotice,
.errornotice,
.warningnotice,
.infonotice,
#messages li.error,
#messages li.warning,
#messages li.info,
#messages li.success {
	&::before {
		content: "";
		background: none 0px 50% no-repeat;
	}
}

.errornotice, #messages li.error {
	&::before { background-image: url(error-fill.svg); }
}

.infonotice, #messages li.info {
	&::before { background-image: url(info-fill.svg); }
}

.warningnotice, #messages li.warning {
	&::before { background-image: url(warning-fill.svg); }
}

.successnotice, #messages li.success {
	&::before { background-image: url(success-fill.svg); }
}

@each $name, $colours in $dsfr-colours {
	.background-alt-#{$name} {
		background: map_get($colours, "background-alt");
	}
}

.background-padding {
	padding: 1rem;
}

form div.widget {
	&.no-top-margin {
		margin-top: 0;
	}
	&.no-bottom-margin {
		margin-bottom: 0;
	}
}

.comment-field {
	&.no-top-margin {
		p:first-child {
			margin-top: 0;
		}
	}
	&.no-bottom-margin {
		p:last-child {
			margin-bottom: 0;
		}
	}
}

div#tracking-code h3 {
	font-size: 1.375rem;
	line-height: 1.75rem;
	@media screen and ($max-mobile-viewport) {
		font-size: 1.375rem;
		line-height: 1.75rem;
	}
}

#toplinks a {
	display: inline;
}
