@import '../includes/fonts/lato';
@import '../includes/fonts/montserrat';

@media ($max-mobile-viewport) {
	body {
		border: 0;
	}
}

div#page {
	background: url('img/body-bg.png') center left no-repeat;;
}

%button, %inverted-button {
	border: 2px solid $primary-color;
	text-transform: uppercase;
	box-shadow: none;
	&:hover {
		box-shadow: none;
	}
}

%cell-links-list {
	> li {
		> a {
			color: $font-color;
			text-transform: uppercase;
			&:hover {
				color: $primary-color;
			}
		}
		&.required-authentication, &.is-redirection, &.external-link {
			> a {
				display: block;
			}
		}
	}
}

/* HEADER */

div#header {
	max-width: 100%;
	padding-left: 1rem;
}

.mel-link-wrapper {
	margin-left: 1rem;
}

#toplinks {
	top: 7px;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	right: 1rem;
	text-transform: uppercase;
	.toplinks--list {
		display: flex;
		align-items: center;
		&-item {
			margin-left: 1em;
		}
	}
	a {
		color: white;
	}
	@media ($max-mobile-viewport) {
		top: -$nav-menu-side + 5px;
	}
}

.site-title {
	@media (max-width: 1200px) {
		font-size: 90%;
	}
}

div#header {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

#header-wrapper {
	background: $primary-color;
	@media ($max-mobile-viewport) {
		background: white;
		border-top: $nav-menu-side + 10px solid $primary-color;
		background-position: center;
	}
}

h1#logo {
	@media ($max-mobile-viewport) {
		padding-left: 0;
	}
	a {
		color: white;
		text-transform: uppercase;
		@media ($max-mobile-viewport) {
			color: $font-color;
			padding-left: 0;
		}
	}
}


/* NAV */

#nav-wrapper {
	background-image: url('img/header-bg.png');
	background-color: #FBFAF7;
}

div.gru-nav {
	li {
		&:hover, &.selected {
			a {
				color: $primary-color;
			}
		}
	}
	a {
		font-size: 130%;
		&::after {
			content: '';
			border-top: 0.4rem solid $primary-color;
			display: block;
			width: 3.15rem;
			@media ($max-mobile-viewport) {
				display: none;
			}
		}
	}
	.gru-nav-button {
		position: absolute;
		+ ul {
			@media ($max-mobile-viewport) {
				width: 75%;
			}
		}
		&.toggled {
			position: fixed;
			background: transparent;
			.icon-bar {
				background: $primary-color;
			}
		}
	}
	&-wrapper {
		@media ($max-mobile-viewport) {
			margin: 0;
		}
	}
}

.gru-nav-button.toggled + ul {
	position: fixed;
	border-top: 0;
	top: 0;
	bottom: 0;
	z-index: 2001;
	padding: $nav-mobile-bottom-bar-height 1rem 1rem 2rem;
	a {
		&::before {
			content: '';
			border-top: 0.4rem solid $primary-color;
			display: inline-block;
			width: 1.15rem;
			margin-right: 1rem;
			margin-bottom:0.25rem;
		}
	}
}

.pwa-navigation div > ul li {
	a {
		background-size: auto 25px;
		background-position-y: 12%;
	}
	&.selected a, &:hover a {
		box-shadow: 1px 1px 10px 0px #202020 inset;
	}
	&[data-include-user-name] a {
		color: #e9bcbf;
	}
}

div.previous-button button {
	border: 2px solid $gray;
	background: $gray;
	color: white;
	&:hover {
		color: $gray;
		background: white;
	}
}

.form-content--body {
	border: $cell-border;
	padding: 1rem;
}

.wcs-step {
	position: relative;
	&:not(.current) &--marker {
		border: $cell-border;
	}
	@media ($min-desktop-viewport) {
		&::after {
			position: absolute;
			bottom: 0;
			content: '';
			border-top: 0.4rem solid $primary-color;
			width: 5rem;
		}
	}
}

/* CELLS */

div.cell {
	&.tracking-code-input-cell {
		h2:first-child {
			color: white;
		}
	}
	&.searchcell {
		border: 2px solid $primary-color;
		background: transparent;
		form {
			background: url('img/search-cell-bg.svg') 1em top no-repeat;
			background-size: auto 95%;
		}
	}
	&.textcell {
		padding: 1rem;
		h2, h3 {
			color: $primary-color;
		}
	}
	&.wcs-forms-of-category-cell, &.link-list-cell {
		background: transparent;
		border: 0;
		&.foldable {
			h2:first-child {
				padding-top: 1.25rem;
				padding-bottom: 1.25rem;
				&::after {
					right: -2px;
					bottom: 0;
					height: 24px;
					width: 24px;
				}
			}
		}
		&.has-asset-picture h2:first-child {
			padding-left: 6rem;
			margin-left: -4rem;
		}
		> div {
			display: flex;
			align-items: baseline;
			flex-wrap: wrap;
			padding: 5px 2px 0 2px;
			border: 2px solid $font-color;
			background: $cell-background;
			> * {
				flex: 0 0 100%;
			}
			> picture {
				display: block;
				order: -1;
				flex: 0 0 4.5rem;
				align-self: stretch;
				margin-left: 1rem;
				position: relative;
				z-index: 1;
			}
			&:hover {
				border-color: $primary-color;
				box-shadow: inset 0px 0px 0px 2px $primary-color;
				transition: box-shadow 0.2s ease-in-out;
			}
		}
		h2:first-child {
			flex: 1 0 50%;
			padding-left: 1rem;
			&::before {
				content: '';
				border-top: 0.4rem solid $primary-color;
				display: block;
				width: 3rem;
				margin-bottom: 0.75rem;
			}
		}
		&.most-popular {
			border: 0;
			padding-bottom: 0;
			&:hover {
				border: 0;
				box-shadow: none;
			}
			ul > li {
				> a {
					color: $primary-color;
					&:hover {
						background: $font-color;
						color: white;
						transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
					}
				}
			}
		}
	}
}

div.wcs-tracking-code-input, div.searchcell {
	button {
		background: white;
		color: $primary-color;
		border: 0;
		margin-top: 0.5rem;
		margin-right: 0;
		&:hover {
			background: $primary-color;
			color: white;
		}
	}
	p {
		margin-top: 0;
	}
	form {
		text-align: right;
	}
}

div.searchcell input[type="search"] {
	&, &:focus {
		border: 0;
		border-bottom: 2px solid $primary-color;
		outline: none;
	}
}

div.wcs-tracking-code-input {
	background: #4c4c4c;
	color: white;
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	input {
		width: 100%;
	}
}

div#sidebar div.cell {
	h2:first-child {
		padding-left: 1rem;
	}
}

div.searchcell {
	border: 2px solid $primary-color;
}

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

div.title {
	font-weight: bold;
}

li.required-authentication, li.external-link, li.is-redirection {
	a::after {
		color: unset;
		position: relative;
		margin-left: 1rem;
		right: initial;
	}
}

li.required-authentication a::after {
	content: '\f023'; /* fa-lock */
}

li.external-link, li.is-redirection {
	a::after {
		content: '\f08e'; /* fa-external-link */
		font-family: FontAwesome;
	}
}

@media ($max-mobile-viewport) {
	#toplinks a.account-link {
		display: none;
	}
}

/* customize upload color */
div.file-upload-widget div.file-button div.widget-message.upload-done::after {
	color: green;
}

@if ($field-on-error-style == custom) {
	div.error {
		color: $primary-color;
		background: url('img/error.svg') center left no-repeat;
		padding-left: 22px;
		&::before {
			content: none;
		}
	}

	div.widget-with-error .content {
		input, select, textarea, .select2, .file-button {
			border: 1px solid $primary-color;
			&:focus {
				border: $widget-focus-border;
			}
		}
	}
}


/* FOOTER */
#footer-wrapper {
	background: url('/assets/footer:background'), linear-gradient(to right, #303030, #303030);
	a {
		&:hover {
			color: $primary-color;
		}
		img:hover {
			filter: brightness(0) saturate(100%) invert(40%) sepia(85%) saturate(7470%) hue-rotate(347deg) brightness(84%) contrast(119%);
		}
	}
}

#footer a {
	color: white;
}
