.pf-cloud {
	position: relative;
	&::before {
		background: url('img/cloud.svg');
		bottom: -120px;
		content: "";
		height: 264px;
		position: absolute;
		right: 50px;
		width: 342px;
		z-index: -1;
	}
}

.gray-cell {
	.gru-content &.cell {
		background-color: $gray-light;
		padding-bottom: 1rem;
	}
}

.green-cell {
	.gru-content &.cell {
		background-color: $green-light;
		padding-bottom: 1rem;
	}
}

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

	background: bottom 30% left / 1.8rem no-repeat url(img/bubble.svg);
	transition: all 0.2s ease-out;

	&:hover {
		background-size: 2.5rem;
		background-position: bottom 40% left;
	}

	a {
		padding-left: 3rem !important;

		&::before {
			position: absolute;
			left: 0;
			width: 2rem;
			height: 2rem;
			margin: 0 0.5rem;

			background-repeat: no-repeat;
			background-position: bottom left;
			background-size: contain;

			content: "";
		}
	}
}

.pf-icon-button {
	@extend %inverted-button;
	position: relative;
	padding: 0.8rem 4rem 0.8rem 1rem;

	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none !important;
	text-transform: uppercase;

	&::after {
		position: absolute;

		width: 2rem;
		top: calc((100% - 2rem) / 2);
		right: 1rem;
		height: 2rem;

		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: contain;

		content: "";
	}

	&:hover {
		text-decoration: underline !important;
	}
}

@mixin icon($name) {
	.pf-icon.#{$name} a::before {
		background-image: url("img/icons/" + $name + ".svg")
	}

	.pf-icon-button.#{$name}::after {
		background-image: url("img/icons/" + $name + ".svg")
	}
}

@include icon("admin");
@include icon("agent");
@include icon("assmat");
@include icon("calendrier");
@include icon("cloche");
@include icon("creche");
@include icon("demandes");
@include icon("dsi");
@include icon("facture");
@include icon("gestionnaire");
@include icon("incsriptions");
@include icon("left");
@include icon("loisirs");
@include icon("nuage");
@include icon("periscolaire");
@include icon("restauration");
@include icon("right");
@include icon("scolarisation");
@include icon("tribu");
@include icon("warning");

div.card.pf-card-detail {
	h2:first-child {
		border-bottom: 2px solid $gray;
		padding: 1rem 0;
		border-radius: 0;
	}

	.label {
		color: $gray-dark;
		font-size: $fz-3;
		font-weight: 700;
		margin-bottom: 0.3rem;
		margin-top: 0.3rem;
		text-align: right;
	}

	.value {
		@extend %pf-field;
		margin-bottom: 0.3rem;
		margin-top: 0.3rem;
	}
}
