//@import "../../../abstracts/abstracts";

$notification-center-navbar-height: 60px;

#dbq-notification-center {
	overflow: hidden; 
	border-left: 1px solid $navbar-dropdown-border-color;
	background: none;
	background-color: $color-layer-2;

	#dbq-notification-center-navbar-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: color(background-color-default);
		border-bottom: 1px solid $global-border-color;

		.dbqnc-navbar {
			&:not(:empty) {
				height: $notification-center-navbar-height !important;
			}
			display: flex;
			align-items: center;
	
			.dbqnc-navbar-item {
				@include border-radius($sidebar-tile-border-radius);
				color: $sidebar-tile-text-color;
				float: left;
				cursor: pointer;
				width: auto !important;
				font-weight: 600;
				text-align: center;
				font-size: $font-size-small !important;
				line-height: 12px !important;
				padding: 10px 15px;
				margin: 9px 0 9px 10px;
				background: $sidebar-tile-background;
				text-shadow: $sidebar-tile-text-shadow;
				border: $sidebar-tile-border;
				box-shadow: $sidebar-tile-drop-shadow;
	
				&:hover {
					background: $sidebar-tile-background-hover;
					.dbqnc-navbar-item-title {
						color: $sidebar-tile-text-color-hover;
					}
				}
			}
			.dbqnc-navbar-item.dbqnc-active {
				border-bottom: 0 !important;
				background: $color-subtle;
	
				.dbqnc-navbar-item-title {
					color: $color-primary;
				}
				// &:hover {
				// 	background: color(gray-7);
				// 	.dbqnc-navbar-item-title {
				// 		color: $text-color-default;
				// 	}
				// }
			}
		}

		.dbqnc-navbar-close-button-container {
			.dbqnc-navbar-close-button {
				background: none;
				border: none;
				outline: none;

				// Size is increased to make it easier to click
				height: $notification-center-navbar-height;
				width: 50px;
				
				svg {
					fill: $text-color-default;
				}

				&:hover {
					svg {
						fill: $color-primary;
					}
				}
			}
		}
	}
	
	#dbq-notification-center-thread-items-container {
		height: calc(100% - 50px);

		.dbq-notification-center-news-feed-content-container {
			
			// Newsfeed styling
			.dbqnf-container {
				background: $global-background-color-default;

				.dbqnf-item {
					margin: 15px;
					padding: 0;
					border-color: $global-border-color;

					.dbqnf-title-container {
						margin-bottom: 5px;
					}

					.dbqnf-publish-time-container {
						margin-bottom: 15px;
					}

					&:last-of-type {
						border: none;
					}
				}
			}	
		}
	}

	.dbqnc-item-list {
		@include scrollbar;

		.dbqnc-item {
			@include border-radius($sidebar-tile-border-radius);
			background: $sidebar-tile-background;
			text-shadow: $sidebar-tile-text-shadow;
			color: $sidebar-tile-text-color;
			font-size: $sidebar-tile-font-size;
			font-weight: $sidebar-tile-font-weight;
			border: $sidebar-tile-border;
			box-shadow: $sidebar-tile-drop-shadow;

			.dbqnc-item-image-container {
				float: left;
				position: relative;
				margin: 15px;
				width: 64px;
    			height: 64px;

				.dbqnc-badge.dbqnc-badge-thread-item-new {
					position: absolute;
                    top: 0;
                    right: 0;
					z-index: 1;
					width: 22px;
					height: 22px;
					background-color: color(color-notification);
					color: white;
					border: 3px solid color(gray-8);
					border-radius: 10px;
				}
    			
				.dbqnc-item-image {
					position: relative;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
					object-position: center;

					img {
						//border: 4px solid color(gray-8);
						// height: auto;
						// width: auto;
						// min-height: 100%;
						// min-width: 100%;
						// position: absolute;
						// top: 50%;
						// left: 50%;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}	
			}

			.dbqnc-item-message {
				width: calc(100% - 102px);
				padding: 15px 15px 15px 0;
				.dbqnc-name {
					color: $sidebar-tile-text-color;
				}
				.dbqnc-message-expander {
					text-decoration: none;
					font-weight: 500;
					color: $color-primary;
					&:hover {
						color: $color-primary;
					}
				}
				.max-lines-2 {
					color: $sidebar-tile-text-color;
				}
				.dbqnc-message-text {
					color: $sidebar-tile-text-color;
				}
				.dbqnc-create-time {
					color: $sidebar-tile-text-color !important;
				}
			}
		}
		.dbqnc-button {
			@include border-radius($sidebar-tile-border-radius);
			background: $sidebar-tile-background !important;
			text-shadow: $sidebar-tile-text-shadow !important;
			color: $sidebar-tile-text-color !important;
			border: $sidebar-tile-border !important;
			box-shadow: $sidebar-tile-drop-shadow !important;
		}
		.dbqnc-items-empty {
			@include border-radius($sidebar-tile-border-radius);
			background: $sidebar-tile-background;
			text-shadow: $sidebar-tile-text-shadow;
			color: $sidebar-tile-text-color;
			border: $sidebar-tile-border;
			box-shadow: $sidebar-tile-drop-shadow;
		}
	}
	.dbqnc-badge-red {
		background-color: #e81625 !important;
		border: 2px solid #f5f7f9 !important;
	}
}