/*
Header
*/
#toplinks {
	box-shadow: $imio-box-shadow-style;
	border: 0;
	padding: 0.4em 1em 0.35em 1em;
	right: 7em;
	border-radius: 0 0 1em 1em;
}

body.has-header-background {
	.site-header {
		box-sizing: content-box;
		min-height: 160px;
		#header {
			height: $imio-header-height;
			border-radius: 0 0 $border-radius $border-radius;
		}
		#logo {
			padding-top: $imio-header-logo-padding-top;
			padding-left: $imio-header-logo-padding-left;
		}
	}
}

div#nav {
	margin-bottom: ($nav-height / 4) * 3;
}

div.gru-nav > ul > li a {
	transition: none;
	text-transform: uppercase;
}

div.gru-nav > ul li ul {
	box-shadow: 0px 13px 24px 0px rgba(0, 0, 0, 0.34);
	padding: 10px;
	@media screen and ($max-mobile-viewport) {
		padding: 0 20px;
		box-shadow: none;
	}
}

div.gru-nav > ul > li li a {
	padding: 0.5rem 0.5rem 0.15rem 0.5rem;
}

div.gru-nav li li a::after {
	margin: 0;
}

div.gru-nav li:hover > a,
div.gru-nav li.selected > a {
	border-bottom-color: transparent;
	&:after {
		width: calc(100% - 50px);
	}
}

/*
Cells
*/
@if $imio-box-shadow-turned-on {
	.cell, .block, .a2-block, #nav, #header {
		box-shadow: $imio-box-shadow-style;
	}
}

.column div.a2-block,
.gru-content div.cell,
.block {
	margin-bottom: 1.7rem;
}

div.textcell {
	h3, h4, h5, p, table {
		margin: 1.386em 1.618rem;
	}
	p, table, ul, ol {
		line-height: 1.4;
	}
}

p.empty-dashboard,
div.deliberations-communales p {
	margin: 1.386em 1.618rem;
}

.link-list-cell .links-list {
    border-radius: $border-radius;
    li {
        border-bottom: 1px dashed #ccc;
        a {
            background-image: linear-gradient(#F4F4F4 0, #F4F4F4 100%);
            &:hover {
                background-image: linear-gradient(#F4F4F4 0, #F4F4F4 100%);
                color: $link-color;
            }
        }
    }
    li:last-child {
        border-bottom: none;
    }
}

#footer .cell {
	box-shadow: none;
}

/*
Links
*/
div.cell p > a:not(.pk-button),picture
.link-cell:not(.has-asset-picture) a {
	text-decoration: underline;
	text-decoration-thickness: 0.09em;
	text-decoration-style: dotted;
	transition: all linear .1s;
	text-underline-offset: 0.35em;
	&:hover {
		text-decoration: none;
		color: darken($link-color, 10%);
	}
}

.link-cell:not(.has-asset-picture) {
    div {
		margin: 1.386em 1.618rem;
    }
}

div.link-cell.has-asset-picture {
	div {
		position: relative;
	}
	border: none;
	box-shadow: none;
	picture img {
		border-radius: $border-radius $border-radius 0 $border-radius;
		max-width: 100%;
		min-height: 100%;
		max-height: none;
	}
	picture {
		overflow: hidden;
		height: 138px;
		max-width: 100%;
		position: relative;
		display: block;
		&::before {
			border-radius: $border-radius $border-radius 0 $border-radius;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #333;
			opacity: 0.2;
			transition: opacity cubic-bezier(.79,.14,.15,.86) .1s;
		}
	}
	&:hover picture {
		&::before {
			opacity: 0.7;
		}
	}
	a.asset-link {
		padding: 0;
	}
	a:not(.asset-link) {
		position: absolute;
		display: block;
		bottom: 47px;
		padding-left: 10px;
		color: white;
		font-weight: bold;
		&:hover {
			text-decoration: none;
		}
		span {
			background-color: $darkened-primary-color;
			padding-left: 0.2em;
			&::after {
				content: "→";
			}
		}

	}
	a {
		padding-top: 0;
		padding-left: 0;
		&::after {
			content: none;
		}
	}
}

/*
Forms
*/
.wcs-step:not(:last-child)::after {
	z-index: -1
}

/*
Footer
*/
#footer a {
	color: $link-color-footer;
}

a.back-top--link:hover {
	text-decoration: none;
}

/* hotfix meal calendar for PP */
tbody > tr > td.jour {
    height: 100px; // cell will grow since height function like min-height in table cells
}

/* iA.Citizen related (Dashboard & others)*/
@if $imio-is-iacitizen {

	#content div.profile-cell {
		div.profile {
			padding-top: 0;
			padding-bottom: 0;
		}
		p.edit-link {
			margin-left: 1em;
		}
	}

	.dashboardcell .cell {
		border: 0;
	}

	.column:last-child .cell {
		margin-right: 1ex;
	}

	.dashboardcell .categories button {
		padding: 0.1em 0.7em;
		margin-right: 0.3em;
		margin-bottom: 0.2em;
		&::after {
			content: " \002714";
		}
		&.off {
			border: 1px solid $primary-color;
			color: $darkened-primary-color;
			background: white;
			&::after {
				color: white;
			}
		}
	}

	.loading {
		display: none;
	}

	.eventitems,
	.newsitems,
	.deliberations-communales {
		margin: 0 1ex;
		border: 0;
		box-shadow: none;
	}

	div.deliberations-communales {
		h2:first-child {
			padding-left: 0;
		}
		p {
			margin-top: 0;
		}
	}

	.delib,
	.eventitem,
	.newsitem {
		display: flex;
		margin: 1ex;
		@media screen and (max-width: $nav-mobile-limit) {
			flex-direction: column;
		}
		img {
			border-radius: $border-radius;
			flex: 0;
			width: 160px;
			height: 160px;
			@media screen and (max-width: $nav-mobile-limit) {
				margin: auto;
			}
		}
		div {
			flex: 1;
			margin-left: 1em;
			h3 {
				margin-top: 1ex;
				margin-bottom: 0;
			}
			h4 {
				margin: 0;
			}
			p {
				margin-top: 0.2em;
			}
		}
	}

	.dashboard-settings {
		display: flex;
		.dashboard-meta {
			flex: 1;
		}
		.dashboard-switch {
			margin-top: 1em;
			input {
				box-shadow: none;
				background: 0;
				-webkit-appearance: none;
				-webkit-tap-highlight-color: transparent;
				padding: 0;
				position: relative;
				border: 0;
				outline: 0;
				cursor: pointer;
				overflow: initial;
				$switch-width: 3.5em;
				$switch-height: 1.5em;
				$switch-slider-diameter: 1.75em;
				&::after {
					content: '';
					width: $switch-width;
					height: $switch-height;
					display: inline-block;
					background: rgba(196, 195, 195, .55);
					border-radius: 1em;
					clear: both;
					transition: ease .3s;
				}
				&:checked::after {
					background: $darkened-primary-color;
				}
				&::before {
					content: '';
					width: $switch-slider-diameter;
					height: $switch-slider-diameter;
					display: block;
					position: absolute;
					left: 0;
					top: #{($switch-height - $switch-slider-diameter) / 2};
					border-radius: 50%;
					background: #fff;
					box-shadow: 1px 1px 3px rgba(0, 0, 0, .6);
					transition: ease .3s;
				}
				&:checked::before {
					left: #{$switch-width - $switch-slider-diameter};
					box-shadow: -1px 1px 3px rgba(0,0,0,.6)
				}
			}
		}
	}
}