/* WPJobster Notifications page SASS file */

.wpj-notifications-page-wrapper {
	max-width: 1080px;
	margin: 0 auto;
}

.wpj-notifications-page-header {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;

	.actions {
		margin-left: auto;
		display: flex;

		@include tablet {
			flex: 1 1 100%;
			margin-top: 10px;
			flex-direction: row-reverse;
			justify-content: flex-end;
		}

		> * {
			margin-left: 5px;

			@include tablet {
				margin-right: 5px;
			}
		}
	}
}

.all-notifications-list-wrapper {
	list-style-type: none;
	margin: 0;
	padding: 0;

	li {
		margin-bottom: 10px;
		padding: 0;
		position: relative;
	}

	.mark-notification-as-read {
		color: $redColor;
		font-size: 16px;
	}

	.mark-as-read-action {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 20px;
		z-index: 2;
		cursor: pointer;
		padding: 10px;

		@include tablet {
			right: 10px;
		}
	}

	.notification-item {
		@include default-shape();

		display: flex;
		border: 1px solid $borderColor;
		padding: 20px;
		align-items: center;

		@include tablet {
			padding: 15px;
		}

		.wpj-notification-icon {
			width: 50px;
			height: 50px;
			margin-right: 20px;
			flex-shrink: 0;

			@include small-desktop {
				margin-right: 15px;
			}

			@include mobile {
				margin-right: 10px;
			}
		}

		.wpj-notification-title {
			font-size: 18px;
			font-weight: 600;
			line-height: 1.2;

			@include small-desktop {
				font-size: 16px;
			}

			@include mobile {
				font-size: 15px;
			}
		}

		.wpj-notification-date {
			font-size: 14px;
			font-weight: 400;
			color: $mainTextColor;

			@include tablet {
				font-size: 13px;
			}
		}
	}

	li.wpj-notification-unread {
		a {
			background: $grayBackground;
			padding-right: 50px;

			@include tablet {
				padding-right: 40px;
			}
		}
	}
}