/**
 * CSS spécifique
 * Responsive Table Risk
 */
@media ( max-width: 680px ) {
	// Uniquement pour le tableau des risques
	.table.risk {
		display: block;
		width: 100% !important;
		height: auto !important;
		tr, thead, tbody, tfoot, td, th {
			display: block;
			width: 100% !important;
			height: auto !important;
		}
		> thead {
			display: none;
		}
		.risk-row {
			display: flex;
			flex-wrap: wrap;
			padding: 1em !important;
			> td {
				width: 100%;
			}
			> td:nth-of-type(1) {
				width: 40% !important;
				display: flex;
				padding: 1em 0 !important;
				> span {
					width: 30%;
					font-size: 10px;
				}
			}
			> td:nth-of-type(2), > td:nth-of-type(3), > td:nth-of-type(4) {
				width: 33.333333% !important;
				max-width: 33.333333%;
				padding-top: 0.4em !important;
				text-align: center;
				min-width: 0;
				.cotation, .media {
					margin: auto;
				}
				.categorie-container {
					.action {
						text-align: center;
					}
					.tooltip, .tooltip img {
						display: inline-block;
					}
					.content {
						width: 230px;
					}
				}
				&:before {
					display: block;
					content: attr(data-title);
					color: rgba(0,0,0,0.4);
					padding-bottom: 0.4em;
				}
			}
			> td:nth-of-type(6) {
				width: 60% !important;
				margin: auto 0;
				.action {
					display: block !important;
					text-align: right;
				}
				.wpeo-button {
					width: 30px !important;
					border-radius: 50%;
					min-width: 30px;
					background: $color__grey;
					padding: 0 !important;
					height: 30px !important;
					display: inline-block;
					text-align: center;
					line-height: 24px;
					font-size: 14px;

					.button-icon {
						line-height: 26px !important;
					}
					&.button-green {
						background: $color__green;
					}
					&.button-main, &.add {
						background: $color__primary;
					}
				}
			}
			.comment-container {
				.comment {
					flex-wrap: wrap;
					position: relative;
					margin-top: 10px;
				}
				.content {
					width: 100%;
					font-size: 16px;
				}
				.wpeo-button {
					position: absolute;
					right: 0;
					top: 0;
				}
				.comment ~ .new.comment {
					padding-top: 10px;
				}
			}
			.wpeo-dropdown.dropdown-large .dropdown-content {
				width: 200px;

				.dropdown-item {
					width: 33.333333%
				}
			}
			> td:nth-of-type(1) { order: 1 }
			> td:nth-of-type(2) { order: 3 }
			> td:nth-of-type(3) { order: 4 }
			> td:nth-of-type(4) { order: 5 }
			> td:nth-of-type(5) { order: 5 }
			> td:nth-of-type(6) { order: 2 }
		}
		> tfoot {
			background: #f1f1f1;
			padding-top: 4em;
			> tr {
				background: #fff;
			}
		}
		// Seul le dernier commentaire est affiché en mode lecture
		.risk-row:not(.edit) {
			.comment-container .comment {
				display: none;
				&:nth-of-type(1) {
					display: flex;
				}
			}
		}
	}
}

@media ( max-width: $media__medium ) {
	.table {
		.comment-container {
			.comment textarea {
				min-width: 100px;
				height: 150px;
			}
		}
	}
}