/**
 * Table design
 * .table -> classe principale
 * .media
 * .action -> Boite contenant les actions sur une ligne
 * 		.task
 * 		.edit
 * 		.delete
 * .w50 -> cellule de 50px
 * .w100 -> cellule de 100px
 * .wm130 -> cellule de 130px minimum
 * .w150 -> cellule de 150px
 * .full -> cellule de 100%
 * .padding -> Ajoute un padding à la cellule de 8px sur les côtés
 */
.flex-table {
	width: 100%;
	border: 1px solid rgba(0,0,0,0.1);
	background: #fff;

	/* table general */
	.col, .header-cell, .cell {
		height: auto;
		text-align: left;
	}
	.col {
		display: flex;
		min-height: 50px;
		flex-wrap: nowrap;
	}
	.col.advanced {
		display: block;
		height: auto;

		.col {
			width: 100%;
			background: transparent !important;
		}
		.advanced {
			padding: 8px;
		}
	}
	.cell, .header-cell {
		width: 100%;
		margin: auto 0;
	}
	strong {
		font-weight: 700;
		color: $color__primary;
	}

	/* table header */
	> .table-header {
		background: $color__secondary;
		color: #fff;
		.header-cell {
			font-weight: 600;
		}
		.col {
			background: $color__secondary !important;
		}
		.icon {
			padding-right: 4px;
		}
	}

	/* table body */
	> .table-body {
		.col {
			&:nth-child(odd) {
				background: #fff;
			}
			&:nth-child(even) {
				background: rgba(0,0,0,0.1);
			}
		}
		.advanced {
			width: 100%;
			min-width: 100%;
			&::after {
				display: block;
				content: '';
				clear: both;
			}

			.comment-container {
				.comment {
					margin: 0.2em 0;

					&.new {
						border-top: 0 !important;
						padding-top: 1em !important;
					}
				}
				.comment textarea, .comment input {
					padding: 0.6em;
					line-height: 1;
					background: #ececec;
					box-shadow: none;
					@include transition();

					&:hover {
						background: #dfdfdf;
					}
				}
			}
		}

		.comment-container {
			width: 100%;

			.comment {
				display: flex;
				flex: 0 1 auto;
				> * {
					margin: auto 0;
				}
				.content {
					white-space: normal;
					line-height: 1.3;
				}
				span, input, textarea {
					color: rgba(0,0,0,0.7);

				}
				.delete, .add {
					width: 20px;
					min-width: 20px;
					height: 20px;
					line-height: 20px;
					padding: 0 !important;
					text-align: center;
					border-radius: 50%;
					font-size: 10px;
					i {
						transition: all 0.2s ease-out;
					}
				}
				.delete {
					margin-left: 4px;
					background: rgba(0,0,0,0.1);
					i {
						color: rgba(0,0,0,0.2);
					}
					&:hover i {
						color: $color__red;
					}
				}
			}
			.comment ~ .new.comment {
				padding-top: 4px;
				border-top: 1px solid rgba(0,0,0,0.1);
			}
			.new.comment {
				line-height: 2;
				.date {
					font-weight: 400;
				}
				.add {
					margin-left: 4px;
					background: $color__primary;
					.svg-inline--fa {
						color: #fff !important;
					}
					&:hover {
						background: $color__primary_dark;
					}
				}
			}
		}

		canvas {
			background: #fff;
			border: 1px solid rgba(0,0,0,.2);
			width: 100%;
		}
		.canvas-eraser {
			pointer-events: auto;
			float: right;

			.fa-circle {
				color: rgba(0,0,0,0.4);
				transition: all 0.2s ease-out;
			}
			&:hover .fa-circle {
				color: $color__red;
			}
		}
	}

	/* table body */
	> .table-footer {
		border-top: 1px solid rgba(0,0,0,0.05);
	}

	/* media */
	.media {
		margin: auto 0.6em !important;
		background: rgba(0,0,0,0.1);
		width: 36px;
		height: 36px;
		min-width: 36px;

		&.no-file .button-add {
			color: rgba(0,0,0,0.6);
			top: 4px;
			right: 4px;
		}
		.default-icon-container {
			line-height: 36px;
		}
		.default-image {
			color: rgba(0,0,0,0.3);
		}
	}

	/* mysql date */
	.mysql-date {
		position: absolute;
	}

	/* action */
	.action {
		flex-wrap: nowrap;
		text-align: right;

		.task:hover .icon {
			color: rgba(0,0,0,0.6);
		}
		.edit:hover .icon {
			color: $color__primary;
		}
		.delete {
			background: rgba(0,0,0,0.05);
			&:hover .icon {
				color: $color__red;
			}
		}
		.add, .save {
			margin-left: auto;
			.icon {
				color: #fff !important;
			}
		}
	}
}

.flex-table {
	input.affect {
		width: 50px;
	}
	input[type="text"], textarea {
		width: 100%;
	}

	/* cell manual width */
	.cell.w50, .header-cell.w50 {
		width: 50px;
		min-width: 50px;
	}
	.cell.w70, .header-cell.w70 {
		width: 70px;
		min-width: 70px;
	}
	.cell.w100, .header-cell.w100 {
		width: 100px;
		min-width: 100px;
	}
	.cell.w150, .header-cell.w150 {
		width: 150px;
		min-width: 150px;
	}
	.cell.w200, .header-cell.w200 {
		width: 200px;
		min-width: 200px;
	}

	/* cell manual min width */
	.cell.wm130, .header-cell.wm130 {
		min-width: 130px;
	}
	.cell.wm40, .header-cell.wm40 {
		min-width: 40px;
	}

	/* cell manual max width */
	.cell.wmax70 {
		max-width: 70px;
	}

	.cell.full, .header-cell.full {
		width: 100%;
		input[type="text"], textarea {
			width: 100%;
		}
	}
	.cell.padding, .header-cell.padding {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/** Autocompelte */
.flex-table .table-footer .wpeo-autocomplete {
	.autocomplete-label {
		padding: 0.6em;
		background: #fff;
		box-shadow: none;
		border: 1px solid rgba(0,0,0,0.1);

		.autocomplete-search-list {
			background: #fff;
		}
	}
}

.flex-table {
	@media ( max-width: 1200px ) {
		.cell[class*="w"], .header-cell[class*="w"] {
			min-width: 50px;
		}
	}
}

.flex-table {
	@media ( max-width: 480px ) {
		.col {
			height: auto;
			min-height: 50px;
			flex-wrap: wrap;
		}
		.cell, .header-cell {
			line-height: 1;
		}
	}
}