/* styles for customized GLC accounts page */

.highlight {
	font-size: 1.45em !important;
}

.nodata {
	font-style: italic;
}

a.support-link, .hint a {
	border-bottom: 2px solid $link-color;
}

a.button {
	@extend %button;
	margin-right: 0;
}

div#profile {
	p {
		text-align: left;
	}
	ul {
		margin: 5ex 0;
		padding: 0;
		li {
			&:first-child {
				border-top: 2px solid #ccc;
			}
			list-style-type: none;
			padding: 2.5ex 0;
			border-bottom: 2px solid #ccc;
			margin-left: 1em;
			&.nodata {
				border: 0;
				padding: 0;
				margin-left: 0;
			}
			span.field-value {
				float: right;
				color: #000;
				font-weight: bold;
				@media screen and ($max-mobile-viewport) {
					float: none;
					display: block;
				}
			}
		}
	}
	div.edit {
		max-width: 30em;
		margin: 5ex auto;
	}
}

#cut-nav {
	float: left;
	width: 22%;
	@media screen and ($max-mobile-viewport) {
		width: auto;
		float: none;
		margin: 0 0.5em;
	}
	a:hover {
		text-decoration: none;
	}
	div.cut-back {
		text-align: right;
		margin: 5ex 3em;
		@media screen and ($max-mobile-viewport) {
			text-align: left;
			margin: 0 0 5ex 0;
		}
		a::after {
			content: '';
			background: url(images/fast-back.png) no-repeat;
			background-size: contain;
			display: inline-block;
			width: 0.8em;
			height: 0.8em;
			vertical-align: middle;
			margin-left: 0.5em;
		}
	}
	ul {
		margin: 0 5%;
		@media screen and ($max-mobile-viewport) {
			display: none;
		}
		li {
			list-style-type: none;
			margin: 5ex 0;
			a {
				padding: 0.3ex 0;
				&:hover {
					border-bottom: 4px solid $link-color;
				}
			}
		}
	}
}

div.cut-edit {
	> div {
		column-count: 2;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-gap: 3em;
		@media screen and ($max-mobile-viewport) {
			column-count: 1;
			-moz-column-count: 1;
			-webkit-column-count: 1;
		}
		> div {
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;
			break-inside: avoid-column;
			margin-bottom: 2ex;
			height: 14ex;
		}
	}
	h2 {
		color: #808080;
		border-bottom: 3px solid #ccc;
	}
}

#cut-account {
	position: relative;
	float: left;
	width: 70%;
	border-left: 1px solid #ccc;
	margin: 3ex 0;
	padding-left: 5%;
	@media screen and ($max-mobile-viewport) {
		float: none;
		width: auto;
		padding: 0;
		margin: 0 0.5em;
		border: 0;
	}
	.associated-email {
		color: $link-color;
		span {
			display: block;
			color: #000;
			font-weight: bold;
		}
	}
	div.progress {
		padding-right: 10%;
		border-right: 1px solid #ccc;
		width: 60%;
		margin-bottom: 10ex;
		&.validated {
			margin-bottom: 1ex;
		}
		@media screen and ($max-mobile-viewport) {
			border: 0;
			border-bottom: 1px solid #ccc;
			float: none;
			padding: 0;
			width: auto;
			padding-bottom: 3ex;
		}
		ul.profile {
			padding: 2.5ex 5em 2.5ex 14em;
			@media screen and ($max-mobile-viewport) {
				padding: 0;
			}
			li {
				list-style-type: none;
				background: url(images/check-nok.png) no-repeat;
				background-size: contain;
				margin: 3ex 0;
				padding: 0 0 0 2.3em;
				white-space: nowrap;
			}
			@each $status in (completed, fc-validated, guichet-validated) {
				@each $i in (1, 2, 3) {
					&.profile-#{$status}-#{$i}-3 {
						background: url(images/profile-#{$status}-#{$i}-3.png) no-repeat;
						@media screen and (max-width: $mobile-limit) {
							background-image: none;
						}
						background-size: contain;
						@for $j from 1 through $i {
							li:nth-child(#{$j}) {
								background-image: url(images/check-ok.png);
								color: #000;
							}
						}
					}
				}
			}
		}
		div.fc-validated, div.guichet-validated {
			background: #034ea2;
			color: #fff;
			padding: 1ex 1em;
			border-radius: 0.3em;
			margin: 4ex 0 0 0;
			> div {
				display: flex;
				flex-wrap: wrap;
				> div {
					width: 50%;
					@media screen and ($max-mobile-viewport) {
						width: auto;
					}
				}
			}
			div.info {
				p {
					text-align: left;
				}
			}
			div.fc-block {
				a {
					color: #fff;
				}
				p.more-info {
					text-align: right;
					@media screen and ($max-mobile-viewport) {
						display: none;
					}
					a {
						background: url(images/more.png) top right no-repeat;
						background-size: 65%;
						padding-top: 6ex;
					}
				}
			}
			&::before {
				background: #034ea2;
				content: "";
				display: block;
				width: 2em;
				height: 2em;
				transform: rotate(45deg);
				margin: -1em 4em;
				@media screen and ($max-mobile-viewport) {
					display: none;
				}
			}
		}
		div.guichet-validated {
			background: #00a8a7;
			&::before {
				background: #00a8a7;
			}
		}
	}
	div#account-management {
		position: absolute;
		top: 0;
		right: 0;
		width: 25%;
		@media screen and ($max-mobile-viewport) {
			float: none;
			width: auto;
			position: relative;
		}
		.block {
			ul {
				margin: 3ex 0;
				li {
					margin: 1ex 0;
					border: 0;
					a {
						color: #fff;
						@extend button;
						justify-content: center;
					}
				}
			}
		}
	}
}
