@import "notification-button";

.tm-notification-page {
	display: flex;
	width: 80%;
	margin: auto;

	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;

	.bloc-filters {
		width: 20%;
		margin-right: 50px;

		.filters {
			width: 100%;
			padding: 10px;


			a {
				display: list-item;
				list-style: none;
				text-decoration: none;
				color: #000;
				padding: 10px;
				color: #000;
				transition: background-color 0.2s;

				&.active {
					background-color: $color__primary-light;
				}

				&:hover {
					cursor: pointer;
					background-color: rgb(245, 248, 250);
				}

				.count {
					float: right;
					font-weight: bold;
				}
			}
		}
	}
}

.tm-wrap {
	.notification-container {
		width: 76%;

		.notification-content:first-child {
			border: solid rgb(230, 236, 240) 1px;
		}

		.notification-close {
			position: absolute;
			top: 0.5em;
			right: 0.5em;
			padding: 0.4em;
			color: rgba(0,0,0,0.4);
			display: inline-block;
			font-size: 16px;
			@include transition;

			&:hover {
				color: rgba(0,0,0,0.9);
			}
		}

		.notification-content {
			position: relative;
			display: flex;
			border: solid rgb(230, 236, 240) 1px;
			background-color: rgb(255, 255, 255);
			border-top: none;
			padding: 0.8em;
			transition: background-color 0.2s;
			text-decoration: none;

			&:hover:not(.wpeo-grid) {
				cursor: pointer;
				background-color: rgb(245,248,250 );
			}

			.avatars {
				.avatar {
					margin-bottom: 0.4em;
				}
				.avatar.action {
					margin-bottom: 1.4em;
				}
				.tm-avatar, img {
					border-radius: 50%;
				}
			}

			.content {
				margin-left: 2em;
				color: rgba(0,0,0,0.8);
				font-size: 15px;

				.project {
					font-weight: 700;
				}

				.main-content {
					margin-bottom: 10px;

					strong {
						font-weight: 700;
					}
				}

				.subject {
					color: rgba(0,0,0,0.5);
					color: rgba(0,0,0,0.5);
				}

				.time {
					font-size: 13px;
					color: $color__primary;
				}
			}
		}
	}
}

.tm-wrap .dropdown-content.notification-container {
	width: 700px;

	.notification-content {
		border: 0;
		border-bottom: solid rgb(230, 236, 240) 1px;

		&.wpeo-grid {
			a {
				color: black;
				text-decoration: none;
				text-align: center;
				transition: background-color 0.2s;

				&:hover {
					cursor: pointer;
					background-color: rgb( 245, 248, 250 );
				}
			}
		}
	}
}