%red-caret {
	padding-left: nth($title-padding, 2) * 2;
	&::before {
		content: "\f0da";
		font-family: "fontawesome";
		color: $red;
		font-size: $fz-3;
		position: absolute;
		left: nth($title-padding, 2);
		width: 1em;
	}
}

%button {
	display: inline-block;
	text-transform: uppercase;
	font-weight: bold;
	box-shadow: none;

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

%red-caret-button {
	@extend %button;
	@extend %red-caret;
	margin-right: 0;
	text-align: left;
	&:hover {
		background-color: $blue;
		color: $blue-xdark;
	}
}

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

%blue-button {
	background-color: $blue;
}

%white-button {

}


.page-title {
	font-family: $serif;
	font-size: 35em / $base-font;
	line-height: 1;
	font-style: italic;
	@media ($min-desktop-viewport) {
		font-size: 40em / $base-font;
	}
}

h1 {
	@extend .page-title;
}

h2 {
	@extend h1;
	color: $blue;
}

h3 {
	font-size: $fz-3;
	color: $blue;
	text-transform: uppercase;
}

h4 {
	font-size: $fz-4;
	text-transform: uppercase;
}

label {
	font-weight: bold;
}

%title {
	line-height: 1.1;
}

#page {
	padding-top: 2em;
	/* big M background */
	background: url(img/big-m.svg) no-repeat transparent;
	background-size: 500px auto;
	background-position: top -50px center;

	@media ($min-desktop-viewport) {
		background-size: 900px auto;
		background-position: top -50px right -250px;
	}
}

//
//	HEADER
//

.site-header {
	padding-bottom: 1.5em;
}

#logo.has-logo {
	@extend .page-title;
	> a {
		min-height: $logo-height;
		min-width: $logo-width;
		max-width: 15em;
		padding-left: calc(#{$logo-width} + 2rem);
		background-size: $logo-width $logo-height;
		@media ($min-desktop-viewport) {
			text-indent: 0;
		}
	}
}

#toplinks {
	a {
		color: $font-color;
		font-size: $fz-small;
		text-transform: uppercase;
		text-decoration: underline;

		&:hover {
			color: $red;
		}
	}

	@media ($max-mobile-viewport) {
		max-width: calc(100vw - #{$logo-width} - 2.4em - #{$nav-menu-side})
	}
}

//
//	NAV
//

div.gru-nav {
	padding: 0 0.7rem ;
	> ul {
		margin: 0;

		> li {
			> a {
				@extend %button;
				margin-right: 0;
			}
		}
		//subnav
		ul {
			@media ($min-desktop-viewport) {
			    // add space between item menu & submenu
				&::before {
					content: "";
					display: block;
					height: 1em;
					background: transparent;
				}
				li {
					background-color: $blue-xdark;
					&:first-child {
						border-top-left-radius: $button-border-radius;
						border-top-right-radius: $button-border-radius;
					}
					&:last-child {
						border-bottom-left-radius: $button-border-radius;
						border-bottom-right-radius: $button-border-radius;
					}
				}
			}
			li a {
				text-transform: lowercase;
				font-weight: normal;
				text-align: left;
				&:hover {
					background-color: $blue-xdark;
					color: $blue;
				}
			}
		}
	}
}

// right-to-left adaptation
@if $responsive-menu == left-to-right {
	@media ($max-mobile-viewport) {
		body {
			border-left: none;
		}
		div#header {
			width: auto;
			margin-right: calc(#{$nav-menu-side} + 1em);

			h1 {
				padding-left: 0;
			}
		}
		div.gru-nav .gru-nav-button {
			border: 5px solid transparent;
			left: auto;
			right: 0;
			top: 0;

			+ ul {
				transform: translateX(100%);
				left: auto;
				right: 0;
				width: auto;

				a {
					text-align: left;
				}
				ul a {
					padding-top: 0;
					padding-bottom: 0.5em;
				}
			}
		}
	}
}

//
//	MAIN
//

main {
	padding-top: 1.75em;
	background-color: $blue-fade;
}

#main-content {
	padding: 0 0.7rem;
}

//
//	cells
//

// ajust cell padding on $title-padding
.column div.a2-block,
.gru-content div.cell,
.block {
    & h2 + div,
    .cell--body {
        padding: $title-padding;
    }
}
.gru-content .cell.wcsformsofcategorycell {
    h2 ~ div.intro {
        padding: $title-padding;
    }
}
.a2-block {
    & form, & p {
        padding: $title-padding;
        margin: 0;
    }
}
%cell-links-list {
    & > li {
        > a {
            padding: $title-padding;
        }
        div.description {
            padding-left: nth($title-padding, 2);
            padding-right: nth($title-padding, 2);
        }
    }
}
div.textcell {
    p, h1, h2, h3, h4, h5 {
        margin-left: nth($title-padding, 2);
        margin-right: nth($title-padding, 2);
    }
}
div.searchcell {
    form {
        padding: $title-padding;
    }
    .search-service-label {
            padding-left: nth($title-padding, 2);
            padding-right: nth($title-padding, 2);
    }
}

// default cell
%cell {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	div.gru-content & {
		margin-bottom: 2rem;
	}
}

// cell image
.cell-img {
	display: block;
	margin-top: nth($title-padding, 1);
	width: $cell-img-width;
	height: $cell-img-height;
	// if img is img tag
	object-fit: scale-down;
	object-position: left center;
	// if img is bg image
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.gru-content div.link-list-cell.has-asset-picture,
.gru-content div.wcsformsofcategorycell.has-asset-picture {
	picture {
		img {
			@extend .cell-img;
		}
	}
}

// Foldable option
div.cell.foldable > div > h2:first-child {
	&:hover {
		color: $blue;
	}
	&::after {
		color: $red;
	}
}

// Links list
%cell-links-list {
	.gru-content & > li:not(.add-more-items) > a {
		text-transform: uppercase;
		@extend %red-caret;
	}
}

// Custom cells
.dark-cell {
	.gru-content &.cell {
		background-color: $blue-xdark;
		color: white;
		.links-list {
			ul > li a {
				color: inherit;
				padding-left: nth($title-padding, 2);
				&::before {
					content: "";
				}
				&:hover {
					color: $blue-light;
				}
			}
		}
	}
}

.blue-light-cell {
	.gru-content &.cell {
		background-color: $blue-light;
		border: 1px solid;
		.links-list {
			ul > li {
				border-color: $blue-xdark;
				a {
					&::before {
						color: $blue;
					}
				}
			}
		}
	}
}

.link-cell,
.wcs-form-cell {
	.gru-content &.cell {
		background-color: transparent;
		padding-top: 0;
		padding-bottom: 0;

		a {
			@extend %red-caret-button;
			display: block;
		}
	}
}

// link-cell template option
.btn-with-icon {
	.gru-content &.cell {
		.btn-with-icon {
			&--link {
				padding-left: 0;
				padding-right: 0;
				background-color: $blue;
				&:hover {
					background-color: $blue-xdark;
					color: $blue;
				}
				&::before {
					content: none;
				}
			}
			&--icon {
				@extend .cell-img;
			}
			&--label {
				@extend %title;
				display: block;
			}
		}
	}
}

.tracking-code-input-cell {
	.gru-content &.cell {
		background-color: $red;
		color: white;

		input {
			width: 100%;
			margin-bottom: 0.5em;
		}
		button {
			@extend %inverted-button;
		}
	}
}

//
//	WCS
//

div#tracking-code {
	color: $red;
	h3 {
		padding-bottom: 0;
		padding-left: 0;
	}
	a {
		padding-left: 0;
		text-decoration: underline;
		color: inherit;
	}

}

div#rub_service {
	padding: 1rem;
	border-radius: 5px;
	margin-bottom: 4rem !important;
	@media ($min-desktop-viewport) {
		padding: 3rem;
	}
}

.wcs-steps {
	font-weight: bold;
}

.wcs-step {
	&--label {
		font-size: 1rem;
	}
	&--marker {
		border: 2px solid;
		span {
			@mixin desktop-vertical-steps() {
				transform: translateY(-0.05em);
			}
		}
	}
	&.current {
		.wcs-step--marker {
			border: none;
		}
	}
}

.form-content--title {
	@extend .page-title;
	padding-left: 0;
	@media ($min-desktop-viewport) {
		padding-left: calc(#{$form-sidebar-width} + #{$form-sidebar-gutter});
		background: url(img/vague.svg) no-repeat left bottom 0.5em;
	}
}

.widget-with-error .error {
	color: $red;
	background-position: center left;
}

.form-content--body .form-previous{
	@extend %blue-button;
}

@media (max-width: $very-small-limit) {
	.form-content--body .buttons {
		column-gap: 1.5rem;
		> * {
			flex: 1 0 30%;
			.content, .content button {
				width: 100%;
				margin-right: 0;
			}
			&.submit-button {
				flex-basis: 100%;
			}
		}
	}
}

//
//	PWA
//

.pwa-navigation div > ul li a {
	background-size: auto 40%;
	display: flex;
	span {
		font-size: $fz-xsmall;
		margin: auto;
		height: auto;
	}
}

//
//	FOOTER
//

#footer-wrapper {
	padding-top: 3.5em;
	margin-top: 0;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 20px;
		background: url(img/vague-footer.svg) repeat-x left bottom;
		background-size: auto 20px;
	}
}

#footer .menucell li a {
	color: $font-color;
}
