@import 'constants';

#WRAPPER > #CONTAINER{

	/* [1] Section (contenu)
	=========================================================*/
	& > section{
		display: none;
		flex-grow: 1;
	}

	// @active
	& > section.active{
		display: block;
	}

	// @active + .list
	& > section.active.list{
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		// flex-wrap: wrap;

		.inline-box{
			flex: 1 1 1;
		}
	}



	/* [2] INLINE-BOX pour afficher les listes de donnees
	=========================================================*/
	& > section > .inline-box{
		display: inline-block;
		position: relative;
			// width: calc( 100% - 2*1em - 2*1em );
			margin: .3em 0;
			padding: 1em;

			border-radius: 3px;
			box-shadow: 0 0 1px #b7b7b7;

			background-color: #fff;

			a{
				text-decoration: none;
				color: inherit;
			}

			/* (1) Titre de l'element */
			.title{
				display: inline-block;

				font-size: 1.15em;
				font-weight: bold;

				& > span{
					font-size: .8em;
					color: #333;
				}
			}

			/* (2) Code RFID */
			.code,
			.mail{
				display: inline-block;
				color: #333;
				
				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .8em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

					pointer-events: none;

					path{
						fill: #333 !important;
						
						pointer-events: none;
					}
				}

			}

			/* (3) Adresse mail */
			.mail{
				display: inline-block;
				color: #333;
				
				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .5em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

					pointer-events: none;

					path{
						fill: #333 !important;

						pointer-events: none;
					}
				}

			}


			/* (4) Groupes */
			.groups{
				display: block;
				margin: 1em;
				color: #333;
				
				// svg (icone)
				svg{
					display: inline-block;
					position: relative;
						margin-left: .5em;
						margin-right: .5em;
						margin-bottom: -.6em;
						width: 1.5em;
						height: 2em;

						pointer-events: none;

					path{
						fill: #333 !important;

						pointer-events: none;
					}
				}

				span{
					display: inline-block;
					padding: .1em .5em;
					margin-right: .2em;

					border-radius: 3px;
					border: 1px solid #bdbdbd;
					box-shadow: inset 0 0 2px #fafafa;

					background-color: #f9f9f9;

					color: #333;

					cursor: default;
				}

			}

			/* (5) Lien vers la modification */
			.link_edit,
			.link_remove{
				display: inline-block;
				position: absolute;
					top: 0;
					left: calc( 100% - 1.2em - 2*1em );
					width: 1.2em;
					height: 1.2em;
				margin: 1em;

				cursor: pointer;

				& > svg{
					width: 100%;
					height: 100%;
					fill: #ddd !important;

					transition: fill .4s ease-in-out;

					pointer-events: none;
				}

				&:hover{
					& > svg{
						fill: $form-neutral-color !important;
					}
				}
			}

			/* (6) Lien vers la suppression */
			.link_remove{
				top: calc( 100% - 1.2em - 2*1em );

				&:hover{
					& > svg{
						fill: $form-invalid-color !important;
					}
				}
			}
			
	}

	/* [3] Formulaires
	=========================================================*/
	& > section > form{
		display: inline-block;
		position: relative;
			left: 50%;
			margin: .3em 0;
			padding: 1em;

		border-radius: 3px;
		border-color: $form-invalid-color;
		box-shadow: 0 0 1px #b7b7b7;

		background-color: #fff;

		transform: translateX(-50%);
		


		&.valid{
			border-color: $form-valid-color;
		}

		&.neutral{
			border-color: $form-neutral-color;
		}


		/* (1) Champs de texte */
		input[type=text],
		input[type=mail],
		input[type=password],
		&.invalid > input[type=text],
		&.invalid > input[type=mail],
		&.invalid > input[type=password],
		input.invalid[type=text],
		input.invalid[type=mail],
		input.invalid[type=password]{
			display: inline-block;
			margin: 1em 0;
			padding: .5em 1em;

			border-radius: 3px;
			border: 1px solid #d7dde8;

			color: #2f3033;

			transition: border .4s ease-in-out;

			&:focus,
			&:hover{
				border-color: $form-invalid-color;
			}
		}

		// Champs valides
		&.valid > input[type=text],
		&.valid > input[type=mail],
		&.valid > input[type=password],
		input.valid[type=text],
		input.valid[type=mail],
		input.valid[type=password]{
			&:focus,
			&:hover{
				border-color: $form-valid-color;
			}
		}

		// Champs neutres
		&.neutral > input[type=text],
		&.neutral > input[type=mail],
		&.neutral > input[type=password],
		input.neutral[type=text],
		input.neutral[type=mail],
		input.neutral[type=password]{
			&:focus,
			&:hover{
				border-color: $form-neutral-color;
			}
		}



		/* (2) Boutons */
		button,
		button.invalid,
		&.invalid > button{
			display: inline-block;
			position: relative;
				left: 50%;

			padding: .5em 1em;

			border-radius: 2px;
			border: 1px solid $form-invalid-color;

			background-color: #fff;

			color: $form-invalid-color;

			transition: background .4s ease-in-out;

			transform: translateX(-50%);

			&:hover,
			&:focus{
				background-color: $form-invalid-color;
				color: #fff;
			}
		}


		// Boutons valides
		button.valid,
		&.valid > button{			
			border-color: $form-valid-color;

			color: $form-valid-color;

			&:hover,
			&:focus{
				background-color: $form-valid-color;
				color: #fff;
			}
		}

		// Boutons neutres
		button.neutral,
		&.neutral > button{			
			border-color: $form-neutral-color;

			color: $form-neutral-color;

			&:hover,
			&:focus{
				background-color: $form-neutral-color;
				color: #fff;
			}
		}

		// "OU" separant les boutons
		hr.OR{
			display: block;
			position: relative;
				width: 100%;
				height: 0;

			border: 0;
			border-bottom: 1px dashed $form-invalid-color;

			&:before{
				content: 'OU';
				display: inline-block;
				position: relative;
					top: 50%;
					left: 50%;
					padding: 0 1em;
	
				background-color: #fff;

				color: $form-invalid-color;

				transform: translateX(-50%) translatey(-50%);
			}

		}

		// "OU" valide
		.valid > hr.OR,
		hr.OR.valid{
			border-bottom: 1px dashed $form-valid-color;
			&:before{
				color: $form-valid-color;
			}

		}

		// "OU" neutre
		.neutral > hr.OR,
		hr.OR.neutral{
			border-bottom: 1px dashed $form-neutral-color;
			&:before{
				color: $form-neutral-color;
			}

		}
	}

}