// Combo page header
.arm-page-header {
	background: url('/assets/page-header:background');
	background-size: cover;
	background-position: center;
	color: white;

	&--default {
		display: none;
	}

	&--content {
		.cell {
			padding: 2rem 5rem 2rem 5rem;
		}

		.text-cell {
			h1, h2, h3, p {
				margin-bottom: 0;
			}
		}
	}

	@media ($max-mobile-viewport) {
		display: none;
	}
}

// Carrousel
.carrousel {
	&.cell {
		padding: 0
	}

	&-item {
		padding: 0.5rem 4rem !important;
	}

	&-item-content {
		margin-bottom: 0 !important;
	}

	&-nav label {
		background-color: white;
	}

	&-item-title {
		@extend h1;
		line-height: 1 !important;
	}

	&-item-description {
		max-width: 100% !important; // too complex selector in core
		font-family: 'Archivo Black', sans-serif;
		margin-bottom: 0;
	}
}


// Sidebar
div#sidebar {
	div.cell h2:first-child {
		display: flex;
		align-items: center;
		color: $red;
		font-size: $title-font-size;
		&::after {
			content: '';
			background: $gray-light;
			flex-grow: 1;
			height: 1px;
			margin-left: 8px;
		}
	}

	@media($max-mobile-viewport) {
		display: none;
	}
}

// Cells 
%title {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.gru-content div.cell {
	h2:first-child:not(:only-child) {
		border-bottom-left-radius: $border-radius;
		border-bottom-right-radius: $border-radius;
	}

	&.foldable > div > h2:first-child {
		min-height: 50px;
		margin: 0;
		padding-left: 30px;

		display: flex;
		align-items: center;

		background: $yellow;
		border: $yellow solid $gray;
		color: black;
		text-transform: none;
		font-size: $fz-5;

		&:hover {
			box-shadow: $widget-focus-box-shadow;
		}

		&::after {
			right: 30px;
			@media($max-mobile-viewport) {
				right: 20px;
			}
		}
	}

	&.folded > div > h2:first-child {
		border: 1px solid $gray-light;
		background: transparent;

		&::after {
			color: $gray;
		}
	}

	&.has-asset-picture {
		position: relative;

		> div > h2:first-child {
			padding-left: 70px;

			@media($max-mobile-viewport) {
				padding-left: 40px;
			}
		}

		picture {
			position: absolute;
			top: 0;
			left: 10px;
			height: 50px;
			width: 60px;

			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.5rem;

			@media($max-mobile-viewport) {
				left: 5px;
				width: 35px;
			}

			img {
				margin: 0;
				padding: 0;
				max-height: 100%;
			}
		}
	}
}

//Link lists
%cell-links-list {
	> li > a {
		padding: 0.8rem 1rem;
		color: $gray-dark;
		&:hover {
			text-decoration: underline;
		}
	}
}

@mixin link-list-item-icon($icon) {
	a {
		padding-right: 2rem;

		&::after {
			position: absolute;
			top: calc(50% - 16px / 2);
			right: 25px;
			height: 16px;
			width: 16px;

			background: center / contain no-repeat url(#{$icon});

			content: '';

			@media($max-mobile-viewport) {
				right: 20px;
			}
		}
	}
}

div.links-list > ul > li.external-link {
	@include link-list-item-icon('/assets/external-link:icon')
}

div#rub_service div.category,
div#account-management,
#columns div.cell:not(.pk-button,.pk-big-button),
#columns div.menucell,
div.wcsformcell,
div.wcsformsofcategorycell,
div.wcscurrentdraftscell,
div.wcscurrentformscell {
	 .links-list {
		 display: flex;
		 justify-content: center;

		 > ul {
			 flex-basis: 764px;
			 margin-top: 5px;
			 display: flex;
			 flex-direction: column;
			 align-items: stretch;

			 > li {
				margin: 5px 0;
				padding: 0;

				display: flex;
				align-items: center;

				border: 1px solid $gray-light;
				border-radius: $border-radius;
				height: 50px;

				@media($max-mobile-viewport) {
					height: 70px;
				}

				a {
					flex-grow: 1;
					text-decoration: none;
				}

				&:hover {
					box-shadow: $widget-focus-box-shadow;
				}

				&.required-authentication {
					@include link-list-item-icon('/assets/authentication-required:icon')
				}

				.description {
					display: none;
				}

				&:not(:last-child) {
					border-bottom: 1px solid $gray-light;
				}
			}
		}
	}

	&.folded .links-list {
		display: none;
	}
}

// Search cell
.gru-content div.searchcell {
	.combo-search {
		&--button {
			display: none;
		}
	}

	form {
		padding: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

		input[type="search"] {
			position: relative;
			padding-left: 2rem;
			margin-right: 0;
			background: $gray-xlight;
			border: none;

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

		&::before {
			position: absolute;
			top: 0.2rem;
			left: 0.5rem;
			z-index: 1;

			background: transparent;
			font-family: FontAwesome;
			font-size: 1.2rem;
			color: $gray;
			content: "\f002";
		}
	}

	.links-list ul li {
		border-bottom: 1px solid $gray;
	}
}

// Tracking code input cell
.gru-content div.tracking-code-input-cell {
	background: right / cover url('/assets/tracking-code-input:background');
	div.wcs-tracking-code-input {
		padding: 1rem;

		h2:first-child {
			color: black;
			background: transparent;
			font-size: $title-font-size;
			margin: 0;
			padding: 0;

			@media($max-mobile-viewport) {
				text-align: center;
			}
		}

		div {
			padding: 0;

			form {
				display: flex;
				flex-wrap: wrap;

				p {
					padding: 0;
					margin: 0.5rem 0 1rem 0;
				}

				input {
					width: 4rem;
					margin: 0;
					flex-grow: 99999;

					border: transparent;
					box-shadow: none;

					@media ($min-desktop-viewport) {
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
					}

					@media ($max-mobile-viewport) {
						width: 11rem;
						margin-bottom: 0.5rem;
					}
				}

				button {
					@extend %black-button;

					min-width: 10rem;
					flex-grow: 1;
					margin-right: 0;

					@media ($min-desktop-viewport) {
						height: 35px !important;
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
					}

					@media ($max-mobile-viewport) {
						width: 100%;
					}

					&, &:hover {
						color: white;
					}
				}
			}
		}
	}
}

// Custom elements
.arm-red {
	color: $red;
}

@mixin custom-background-cell($background, $button-color) {
	border: 1px solid transparent;
	background: right / cover no-repeat url($background);
	.pk-button, .pk-big-button {
		@extend %black-button;
		&, &:hover {
			color: $button-color;
		}
	}
}

.gru-content .cell {
	&.arm-report {
		@include custom-background-cell('/assets/report:background', $secondary-color);
		padding: 1rem 1rem;
	}

	&.arm-suggest {
		@include custom-background-cell('/assets/suggest:background', $primary-color)
	}

	&.arm-register {
		@include custom-background-cell('/assets/register:background', $primary-color)
	}
}

.arm-report {
	> div, &--content {
		width: 100%;
		height: 100%;
	}

	&--content {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-auto-columns: auto;
		justify-items: stretch;
		align-items: center;
	}

	&--picture {
		grid-area: 1 / 1 / 3 / 2;

		@media ($max-mobile-viewport) {
			grid-area: 1 / 1 / 2 / 2;
		}

		width: 60px;
		height: 60px;
	}

	&--hint {
		grid-area: 1 / 2 / 2 / 3;
		margin: 0 0 0 1rem !important;
		font-weight: bold;
	}

	&--button {
		@extend %black-button;

		margin: 0.5rem 0;

		@media($min-desktop-viewport) {
			height: 35px !important;
			margin: 0;
		}

		grid-area: 2 / 2 / 3 / 3;
		@media ($max-mobile-viewport) {
			grid-area: 2 / 1 / 3 / 3;
		}
	}
}

.arm-suggest {
	&--content {
		min-height: 80px;
		padding: 1rem;

		display: grid;
		grid-template-columns: 1fr auto;
		grid-auto-rows: auto;
		align-items: center;

		@media($max-mobile-viewport) {
			justify-items: stretch;
			align-items: center;
		}
	}

	&--title {
		margin: 0 !important;
		grid-area: 1 / 1 / 2 / 2;

		@media($max-mobile-viewport) {
			grid-area: 1 / 1 / 3 / 3;
		}
	}

	&--text {
		margin: 0 !important;
		grid-area: 2 / 1 / 3 / 2;

		@media($max-mobile-viewport) {
			display: none;
		}
	}

	&--button {
		@extend %black-button;
		height: 40px;
		margin: 0;

		grid-area: 1 / 2 / 3 / 3;

		@media($max-mobile-viewport) {
			height: 100%;
			display: flex;
			justify-content: end !important;

			grid-area: 1 / 1 / 3 / 3;

			background: transparent !important;
			color: transparent !important;
		}

		&:hover {
			background: white;
		}

		&::after {
			margin-left: 1rem;
			font-family: FontAwesome;
			font-size: $fz-small;
			color: white;
			content: "\f054";

			@media($max-mobile-viewport) {
				font-size: $fz-3;
				color: black;
			}
		}
	}
}

.gru-content .arm-register {
	margin-top: 1rem !important;

	&--content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	&--buttons {
		display: flex;

		@media($max-mobile-viewport) {
			flex-direction: column;
		}
	}

	.pk-button {
		height: 45px !important;
		padding: 10px 1rem !important;
		background: white !important;
		color: $gray-dark !important;

		@media($max-mobile-viewport) {
			margin-bottom: 1rem;
		}

		&::after {
			content: "\f054";
			font-family: FontAwesome;
			font-size: $fz-small;
			margin-left: 1rem;
		}

		&:hover {
			background: $yellow !important;
		}
	}
}

@mixin arm-link-icon($name) {
	& > li.arm-icon-#{$name} {
		display: flex;
		align-items: center;

		&::before {
			width: 28px;
			height: 28px;
			background: center / cover no-repeat url(img/icon-#{$name}.png);
			content: '';
		}
	}
}

%cell-links-list {
	@include arm-link-icon('user');
	@include arm-link-icon('form');
}
