%cancel-button {
	background-color: $gray-light;
	&:hover {
		background-color: $gray-light;
	}
}

body {
	line-height: 1.4;
}
// forms
input, select, textarea {
	&[readonly] {
		border-bottom-color: $font-color;
		background-color: transparent;
	}
}

//
//	HEADER
//
// hide default site-header logo
// if user use headerLogo placeholder
.site-header--logo > .cell + #logo {
	display: none;
}
// hide default site-header title
// if user use headerTitle placeholder
.site-header--title > .cell + h1 {
	display: none;
}
#logo {
	padding-left: 0;
	background-position: 0;
}
#top {
	display: flex;
	align-items: center;
	padding: .7rem;
	padding-top: 2.5rem;

	@media ($max-mobile-viewport) {
		padding-left: $nav-menu-side + 10;
		flex-wrap: wrap;
	}
}

.site-header--logo {
	margin-right: 2em;
	@media ($min-desktop-viewport) {
		flex: 1 0 auto;
	}
}
//hide #logo if no image defined
#logo a:not(.has-logo) {
	display: none;
}

// logo size
#logo a,
.site-header--logo img {
	height: 100px !important;
	width: auto !important;
	display: block;
}
.site-header--logo .text-cell {
	*:not(img) {
		margin: 0;
		padding: 0;
	}
}

// title
.site-header--title {
	@media ($min-desktop-viewport) {
		flex: 1 1 100%;
		text-align: center;
	}
	h1 {
		font-size: 1.5rem;
		font-weight: 600;
		padding: .5em 0;
		@media ($min-desktop-viewport) {
			font-size: 2rem;
		}
	}
}

//
//	USER LINKS
//
#toplinks {
	//reset
	border: none;
	box-shadow: none;
	border-radius: 0;
	line-height: 1;
	word-spacing: 0;

	padding: .33em;
	@media ($min-desktop-viewport) {
		padding: .5em;
	}

	a {
		color: #6e6e6e;
		// sep
		&:not(:last-child) {
			&::after {
				content: "";
				width: 1px;
				height: 1.5em;
				background-color: $red;
				display: inline-block;
				margin: 0 .66em;
				vertical-align: middle;
			}
		}
	}
}

//
//	NAV
//
@media ($min-desktop-viewport) {
	div.gru-nav {
		line-height: $nav-height;
	}
}

//
//	MAIN
//
main {
	margin-top: 1.5rem;
}

//
// CELLS
//

// Forms of category & link-list
.gru-content div.link-list-cell,
.gru-content div.wcsformsofcategorycell {
	// Picture position
	&.has-asset-picture {
		$picture-width: 120px;
		> div {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			> * {
				flex: 0 0 100%;
			}

			> h2:first-child {
				flex: 1 0 50%;
			}

			> picture {
				display: block;
				order: -1;
				flex: 0 0 $picture-width;
				z-index: 1;
				img {
					padding: 0;
				}
			}
		}
	}
}

//
// WCS
//
div#rub_service, #gauche {
	background-color: $cell-background;
	padding: 1em;
}

div#tracking-code {
	text-align: center;

	h3 {
		font-size: 1rem;
		margin: 0.33em;
		padding: 0;
		> a {
			padding: 0.5em 0;
			font-size: 1.4em;
		}
	}
	// delet draft button
	button {
		margin-right: 0;
	}
}

.wcs-steps--list {
	justify-content: center;
	@media ($mq-min--wcs-steps-horizontal-layout) {
		text-align: center;
	}
	@include desktop-vertical-steps() {
		text-align: left;
	}
}
.wcs-step {
	justify-content: center;
}
.wcs-step--label {
	text-align: inherit;
}

div#rub_service {
	h2 {
		font-size: 2em;
		padding-left: 0.5rem;
	}
	h3 {
		font-size: 1.5em;
		font-weight: normal;
	}

	div.error {
		@extend .errornotice;
		font-weight: normal;
		min-height: 1.5em;
		margin-bottom: 0;
		&::before {
			font-size: 30px;
			top: 0;
		}
	}
	.previous-button button {
		@extend %cancel-button;
	}
}
ul#evolutions div.evolution-metadata,
ul#evolutions li div.msg {
	background-color: $gray-light;
}

// Footer
// hide hautes-alpes-cd05-2020 default footer logo
.footer-logo {
	display: none;
}
