a:hover {
	color: $accent-color;
}

.carrousel {
	&-item-content {
		padding: $space-xlarge;
	}

	&-previous, &-next {
		width: auto !important;
		&:after {
			font-size: 2rem;
		}
	}

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

%cell-links-list {
	li > a {
		font-weight: 700;
		padding: $space-xsmall $space-xsmall;
	}

	li:not(.add-more-items) {
		display: grid;
		grid-auto-rows: auto auto;
		grid-template-columns: auto 1fr;
		align-items: center;
		padding: $space-xsmall $space-small;

		> a {
			grid-row: 1 / 2;
			grid-column: 2 / 3;
			&:hover {
				color: $accent-color;
				&::before {
					color: $primary-color;
				}
			}

		}

		> .description {
			grid-row: 2 / 3;
			grid-column: 1 / 3;
		}

		&::before {
			grid-row: 1 / 2;
			grid-column: 1 / 2;
			content: "\f0da"; // caret-right
			font-family: FontAwesome;
			margin-right: $space-small;
		}
	}

	.add-more-items--button {
		color: $secondary-color;
		font-size: 1.5rem;
		&:hover {
			color: $accent-color;
		}
	}
}

.gru-content div.cell,
.theme-page-bottom div.cell {
	--cell-color: #{$primary-color};

	color: var(--cell-color);
	margin-bottom: 20px;

	> div {
		position: relative;
	}

	h2:first-child {
		text-transform: uppercase;
		border-bottom: 1px solid var(--cell-color);
		color: var(--cell-color);
		padding: $space-xsmall 0;
		margin-bottom: $space-small;
		border-radius: 0;
	}

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

		h2:first-child {
			padding: $space-xsmall 0 $space-xsmall calc(#{$cell-image-size} + #{$space-small});
		}

		picture {
			position: absolute;
			top: -5px;
			padding: $space-xsmall 0;
		}

		img {
			width: $cell-image-size;
			height: $cell-image-size;
		}
	}

	&.theme-secondary-cell {
		--cell-color: #{$secondary-color};
	}

	&.theme-gray-cell {
		--cell-color: black;
		background: $gray-1;
		padding: $space-medium $space-medium;

		h2:first-child {
			border-bottom-style: dotted;
		}
	}

	&.theme-gradient-cell {
		--cell-color: white;
		background: linear-gradient(180deg, $primary-color 0%, $secondary-color 100%);
		padding: $space-medium $space-medium;

		h2:first-child {
			border-bottom-style: dotted;
		}
	}

	&.theme-profile-cell {
		font-size: 1.2em;
		div.links-list > ul > li {
			border-bottom: none;
			> a {
				color: black;
				font-weight: normal;
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}

.theme-page-bottom {
	margin: $space-large $space-small;
	div.cell {
		@extend %cell;
	}
}

// Search cell
#sidebar div.searchcell {
	.combo-search {
		&--hint {
			padding: 0;
			margin-bottom: 1rem;
		}
	}

	form {
		padding: $space-small 0;
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;

		input[type="search"] {
			margin-right: 0;
			margin-bottom: 0;
			border: none;

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

		button {
			font-family: FontAwesome;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}

div.cell.tracking-code-input-cell {
	h2 + div {
		padding: 0;
	}

	form {
		display: grid;
		grid-auto-rows: auto;
		grid-template-columns: 1fr auto;
		margin-bottom: $space-small;

		p {
			margin: $space-xsmall 0;
			grid-column: 1 / 3;
		}

		input {
			margin-top: 0;
			border: none;

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

		button {
			font-family: FontAwesome;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			margin-right: 0;
		}
	}
}

.theme-icon {
	display: flex;
	align-items: center;

	&::before {
		content: "" !important;
		bacground-size: cover;
		background-repeat: no-repeat;
		width: 1.4em;
		height: 1.4em;
		display: inline-block;
		margin-right: $space-small;
	}
}

.theme-suggest {
	&--content {
		padding: $space-medium $space-small;

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

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

	&--icon {
		width: 32px;
		height: 32px;
		grid-area: 1 / 1 / 3 / 2;
		margin-right: $space-large;
	}

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

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

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

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

	&--button {
		@extend %button;

		margin: 0;
		background: white;
		color: $primary-color;

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

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

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

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

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

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

		&:hover {
			text-decoration: none;
			&::after {
				color: white;
			}
		}

	}
}

@mixin icon($name) {
	.theme-icon.#{$name}::before {
		background-image: url("img/icons/" + $name + ".svg");
		width: 1.2em;
		height: 1.2em;
	}
}

@include icon("address");
@include icon("external");
@include icon("link");
@include icon("phone");
@include icon("staff");
@include icon("student");
