/**
 * Table design
 * .table -> classe principale
 * .media
 * .cotation-container
 * .categorie-container
 * .comment-container
 * .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
 */


.table {
	width: 100%;
	border: 1px solid rgba(0,0,0,0.1);
	td, th, tr {
		height: 50px;
		text-align: left;
		vertical-align: middle;
		white-space: nowrap;
	}
	> thead {
		background: $color__secondary;
		color: #fff;
		th {
			font-weight: 600;
		}
		tr {
			background: $color__secondary !important;
		}
		.icon {
			padding-right: 4px;
		}
		input {
			color: rgba(0,0,0,0.8);
		}
	}
	> tbody {
		tr {
			&:nth-child(odd) {
				background: #fff;
			}
			&:nth-child(even) {
				background: rgba(0,0,0,0.1);
			}
		}
	}
	.row-title, .row-subtitle {
		display: block;
	}
	.row-title {
		font-size: 18px !important;
		font-weight: 400;
	}
	.media {
		background: rgba(0,0,0,0.1);
		&.no-file .add {
			color: rgba(0,0,0,0.6);
		}
		.default-image {
			color: rgba(0,0,0,0.3);
		}
	}
	strong {
		font-weight: 700;
		color: $color__primary;
	}
	.cotation-container {
		&.tooltip {
			&:hover {
				cursor: pointer;
			}
		}
		.dropdown-content {
			background: #2b2b2b;
			border: 4px solid #2b2b2b;
			width: auto !important;
		}
	}
	.wpeo-dropdown {
		.dropdown-toggle {
			font-size: 14px;
			line-height: 44px;
			padding: 0 2px;
			color: rgba(0,0,0,0.8);

			[data-icon] {
				margin-left: 2px;
			}
			img {
				float: left;
				max-width: 44px;
			}
		}
		.wpeo-button {
			&:hover {
				box-shadow: inset 0 -3em rgba(0, 0, 0, 0.1);
			}
		}
	}
	.user {
		background: none;
		color: rgba(0,0,0,0.7);
		font-weight: 700;
	}
	.comment-container {
		padding-top: 6px;
		padding-bottom: 6px;
		.avatar {
			border-radius: 50%;
			width: 30px;
			height: 30px;
			min-width: 30px;
			span {
				line-height: 30px;
			}
		}
		.comment {
			display: flex;
			flex: 0 1 auto;
			line-height: 1.8;
			margin-top: 4px;
			input, textarea {
				height: 28px;
			}
			> * {
				margin: auto 0;
			}
			.date {
				font-weight: 700;
				width: 84px;
				margin: auto 4px;
				font-size: 13px;
			}
			.content {
				white-space: normal;
				line-height: 1.3;
			}
			input {
				color: rgba(0,0,0,0.7);
			}
			.delete, .add {
				width: 30px;
				height: 30px;
				line-height: 24px;
				min-width: 30px;
				i {
					transition: all 0.2s ease-out;
				}
			}
			.delete {
				margin-left: 4px;
				&:hover {
					color: $color__red;
				}
			}
			.add {
				color: #fff;
			}
		}
		.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;
				}
			}
		}
	}
	.action {
		flex-wrap: nowrap;

		.wpeo-button {
			.button-icon {
				color: rgba(0,0,0,0.6);
			}
		}
		.task:hover .button-icon {
			color: rgba(0,0,0,0.6);
		}
		.edit:hover .button-icon {
			color: $color__primary;
		}
		.delete {
			background: rgba(0,0,0,0.05);
			&:hover .button-icon {
				color: $color__red;
			}
		}
		.add, .save {
			margin-left: auto;
			.button-icon {
				color: #fff !important;
			}
		}
	}
	.avatar {
		width: 50px;
		height: 50px;
		min-width: 50px;
		text-align: center;
		span {
			line-height: 50px;
			color: #fff !important;
			font-size: 16px;
			font-weight: 300;
			text-transform: uppercase;
		}
	}
	input.affect {
		width: 50px;
	}
	tfoot {
		border-top: 1px solid rgba(0,0,0,0.05);
	}
	input[type="text"], textarea {
		width: 100%;
	}

	td.w50, th.w50 {
		width: 50px;
	}
	td.w70, th.w70 {
		width: 70px;
	}
	td.w100, th.w100 {
		width: 100px;
	}
	td.wm130, th.wm130 {
		min-width: 130px;
	}
	td.wm40, th.wm40 {
		min-width: 40px;
	}

	td.wmax70 {
		max-width: 70px;
	}
	td.w150, th.w150 {
		width: 150px;
	}
	td.full, th.full {
		width: 100%;
		input[type="text"], textarea {
			width: 100%;
		}
	}
	td.padding, th.padding {
		padding-left: 8px;
		padding-right: 8px;
	}

	tr.edit {
		.categorie-container:hover {
			.action {
				background: rgba(0,0,0,0.1);
				&:hover {
					cursor: pointer;
				}
				span, .icon {
					color: #000;
				}
				.icon {
					animation-duration: 0.6s;
					animation-name: downAndUp;
				}
			}
		}
		.action {
			text-align: right;
		}
	}
	tr:not(.edit) {
		.cotation {
			pointer-events: none;
		}
	}
}

@media screen and (max-width: 1280px) {
	th, tr, td {
		padding: 0 !important;
	}
}
// @media screen and (max-width: 680px) {
// 	table, tr, thead, tbody, tfoot, td, th {
// 		display: block;
// 		width: 100% !important;
// 		height: auto !important;
// 	}
// 	thead tr {
// 		display: none;
// 	}
// 	td {
// 		position: relative;
// 		border: 0px solid transparent;
// 		padding-left: 50% !important;
// 		white-space: normal;
// 		text-align: right;
// 		height: 50px !important;
// 		line-height: 50px;
// 		&:before {
// 			position: absolute;
// 			top: 0;
// 			left: 0;
// 			width: 35%;
// 			padding: 2px 15px;
// 			height: 100%;
// 			white-space: nowrap;
// 			text-overflow: ellipsis !important;
// 			overflow: hidden !important;
// 			text-align: left;
// 			background: #f8f8f8;
// 			content: attr(data-title);
// 			font-weight: 800;
// 			color: rgba(0,0,0,0.3);
// 		}
// 	}
// }

@import "table-risk";
@import "table-evaluateur";
@import "table-flex";
@import "wpeo-table";
@import "table-causerie";