@import '~heading.less';
@import '../../resources/fontawesome/fontawesome.less';
@import '../../resources/fontawesome/regular.less';
@import '../../resources/fontawesome/solid.less';

.SidebarNotifications {
	padding: 20px;

	:global(.menu.secondary) {
		margin: 0 !important;
		background: @primary;
		border: 0 !important;
		
		> a {
			flex: 1 1 auto;
			padding: 10px 20px !important;
			justify-content: flex-start;
			font-weight: 700 !important;
			color: @white !important;
			margin: 0 !important;
			align-self: center !important;

			&:global(.active) {
				border: 0 !important;
			}
		}
	}

	:global(.tab) {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border: 0 !important;
		background: none !important;
		padding: 0 !important;
	}

	.List {
		box-shadow: @shadow !important;

		.Notification {
			flex-direction: column !important;
			padding: 0 !important;
			margin: 0 !important;
			background: @white !important;
			border-left: 3px solid @secondary;
			border-top: 1px solid @greyLight;

			&:first-child {
				border-top: 0;
			}

			&:global(.read) {
				border-left: 3px solid transparent;
			}

			> :global(.content) {
				margin: 0 !important;
				padding: 15px 20px 0 17px !important;

				> :global(.summary) {
					display: flex;
					flex-flow: wrap;

					h5 {
						flex: 1 1 1px;
						margin: 0;
						line-height: 19px;
					}

					i {
						.fa-icon();
						.fas();
						flex: 0 0 auto;
						margin: 0 0 5px 10px !important;
						line-height: 19px;
						color: @greyMedium;
						cursor: pointer;
					}

					> :global(.date) {
						flex: 1 0 100%;
						color: @greyMedium !important;
						margin: 5px 0 !important;
						display: block !important;
					}
				}

				> :global(.text) {
					margin: 0 !important;

					p {
						margin-top: 0 !important;
					}
				}
			}
		}

		.Empty {
			color: fadeout(@greyMedium, 25%);
			text-align: center;
			background: @white;
			padding: 15px 20px;
			font-style: italic;
		}
	}
}