@import 'constants';

#WRAPPER > #CONTAINER{

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


	// @active + .list
	& > section.active{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;

		&.contain-check-table{
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: center;
		}

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

		.inline-row{
			flex: 3em 0 0;
		}

		// Barre de recherche
		.searchbar{
			display: inline-block;
			position: relative;
				// width: calc( 100% - 2*1em - 2*1em );
				flex: calc( 100% - 2*1em - 2*1em );
				// height: 1em;
			margin: 1em;
			padding: .5em 1em;
			padding-left: 2em;

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

				background: #fff url('/src/static/sub-menu-side/search@b1b1b1.svg') .5em center no-repeat;
				background-size: 1em;

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

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

		// Erreur
		.error, .in-dev{
			display: inline-block;
			position: relative;
				width: calc( 100% - 2*1em - 2*1em );
				height: 1em;
			margin: 1em;
			padding: 1em;

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

			background: $form-invalid-color;

			color: #fff;
			text-shadow: 1px 1px darken($form-invalid-color, 10);
		}


		.in-dev{
			border-color: $form-search-color;

			background: $form-search-color;

			text-shadow: 1px 1px darken($form-search-color, 10);
		}
	}



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

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

			background-color: #fff;

			// Lors de la recherche, quand on veut en masquer
			&.hidden{
				display: none;
			}

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


			&.selected{
				border: 1px solid #7362ff;

				transition: box-shadow .2s ease-in-out;

				&:hover{
					box-shadow: 2px 2px 7px #aaa;
				}
			}

			/* (0) Etat des machines */
			.state{
				display: inline-block;

				width: .7em;
				height: .7em;

				margin-right: .3em;

				border-radius: 50% / 50%;

				background-color: #ddd;

				&[data-state='stopped']{ background-color: #ddd; }
				&[data-state='started']{ background-color: #22E07B; }
				&[data-state='signaled']{ background-color: #2E50C0; }
				&[data-state='locked']{ background-color: #EA460A; }
				&[data-state='detached']{
					background: url('/src/static/sub-menu-side/sync@aaaaaa.svg') center center no-repeat;
					background-size: auto 100%;
				}

			}

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

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

				color: darken($theme-color, 2);
				white-space: nowrap;

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

			/* (2) Code RFID */
			/* (3) Adresse mail */
			.motheure,
			.code,
			.option,
			.mail{
				display: block;
				margin: 1em;
				color: #333;
				white-space: nowrap;

				// 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#stylisable{
						fill: #333 !important;

						pointer-events: none;
					}

					path#stroke-stylisable{
						stroke: #333 !important;

						pointer-events: none;
					}
				}

			}



			/* (4) Groupes */
			.groups,
			.option{
				display: block;
				margin: 1em;
				color: #333;
				// white-space: nowrap;

				// 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:not(.ignore),
				& > span.ignore > span{
					display: inline-block;
					position: relative;
					padding: .1em .5em;
					margin-right: calc( .4em + 2em );
					margin-bottom: .5em;

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

					background-color: #f9f9f9;

					color: #333;

					cursor: default;

					&.add-permission,
					&.add-group,
					&.add-member,
					&.add-extension{
						border-radius: 3px;

						cursor: pointer;


						& > div.dropdown{

							display: flex;
							flex-direction: column;
							flex-wrap: nowrap;
							flex: 100%;
							justify-content: space-between;


							position: absolute;
								top: calc( 100% + 5px );
								left: 0;
								width: 12em;
								height: 500%;


							border-radius: 3px;

							overflow: hidden;
							overflow-y: auto;

							background: #fff;

							box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);

							z-index: 100;


							& > span{

								padding: .5em;
								padding-left: 1em;

								flex: 2em 1 1;
								cursor: pointer;

								&:hover{

									background-color: #F8F8F8;

								}
							}

						}
					}

					& > span.rem-group,
					& > span.icon-permission,
					& > span.rem-permission,
					& > span.rem-member,
					& > span.rem-extension{
						display: block;
						position: absolute;
							top: -1px;
							left: 100%;
							width: 1em;
							height: calc( 100% - .1em - 2px );
							padding: .12em .5em;

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

						background: url('/src/static/sub-menu-side/remove.svg') center center no-repeat;
						background-size: auto 70%;
						background-color: #f9f9f9;

						color: inherit;

						cursor: pointer;

						&:hover{
							background-image: url('/src/static/sub-menu-side/remove@#{$rd-form-invalid-color}.svg');
						}


					}

					& > span.icon-permission,
					& > span.icon-permission:hover{
						border-color: #ddd;
						background-color: #eee;
						cursor: default;
						background-image: url('/src/static/sub-menu-side/permission.svg');
					}
				}

			}

			.option > span.ignore > span{
				border-radius: 3px;
				margin-right: .4em;
			}

			/* (5) Lien vers la modification */
			.link_edit,
			.link_remove{
				display: inline-block;
				float: right;
				position: relative;
					width: 1em;
					height: 1em;
				margin-left: 1em;

				cursor: pointer;

				// if in a list like history/view
				&.list{
					float: none;
					margin-left: 50%;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
				}

				& > 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{

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

	}


	/* [2-2] INLINE-ROW pour afficher des lignes
	=========================================================*/
	& > section.fstart{
		flex-direction: column;
		flex-wrap: nowrap;

		justify-content: flex-start;
		align-items: center;

		.searchbar{
			flex: 0 0 0;
			width: calc( 100% - 2*2em );
		}
	}

	& > section > .inline-row{

		width: calc( 100% - 4em - 2*1em );

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;

		overflow: hidden;


		// Sur la même ligne répartis équitablement
		& > span{
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			flex: 100% 1 1;

			border-left: 1px solid #ddd;
			text-align: center;

			&:first-child{
				border-left: 0;
			}
		}

		button{
			flex: auto;
			width: 5em;
		}

	}





}

/* [4] Tableau à cocher
=========================================================*/
article.check-table{

	display: flex;

	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

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


	& > div{
		display: flex;

		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;

		flex: 100%;
		padding: .8em 0;

		color: #333;

		background: #f8f8f8;
		border-bottom: 1px solid #eee;

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

		&:nth-child(2n){
			background: #fdfdfd;
		}

		overflow: hidden;


		& > span{
			flex: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;


			/* (1) Gestion du checkbox hack */
			input[type='checkbox']{ display: none; }

			input[type='checkbox'] + label[for]{
				display: inline-block;
				position: absolute;
					width: 1.2em;
					height: 1.2em;

				// border-radius: 50% / 50%;

				background: url('/src/static/container/checkbox@999999.svg') center center no-repeat;
				background-size: 100% auto;;

				transition: box-shadow .2s ease-in-out;

				cursor: pointer;
			}

			input[type='checkbox']:checked + label[for]{
				background-image: url('/src/static/container/checkbox@checked@007dd8.svg');
			}

		}

	}

}




/* [4] Timeline SVG
=========================================================*/
/* (1) svg circles -> set right transform-origin */
svg > circle[class^=svg_]{

	-webkit-transform-origin: 50% 50% 0;
	transform-origin: 50% 50% 0;

	transition: transform .2s ease-in-out;

}

/* (2) Set cursor to pointer */
svg > circle[class^=svg_]:not(.op_svg){
	cursor: pointer;
}

/* (3) Middle circles -> scale+ on hover */
svg > circle[class^=svg_]:not(.op_svg):hover{

	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

/* (4) Avoid icons inside middle circles to block :hover */
svg > circle[class^=svg_]:not(.op_svg) + image{
	-webkit-pionter-events: none;
	pointer-events: none;
}

/* (5) Make around circles a bit transparent */
svg > circle.op_svg{
	opacity: .6;
}

/* (6) Set circle colors according to action type */
svg > circle.svg_start{    fill: #2cde8b; }
svg > circle.svg_stop{     fill: #3a3a3a; }
svg > circle.svg_lock{     fill: #e04343; }
svg > circle.svg_unlock{   fill: #af1c1c; }
svg > circle.svg_signal{   fill: #3258d8; }
svg > circle.svg_unsignal{ fill: #2041ab; }