@import "../../../../css/partials/base";

#main_topbar_alerts {
	#main_topbar_alerts_container {
		// Transition to hide
		visibility: hidden;
		opacity: 0;
		transition: visibility 0.25s, opacity 0.25s ease-in-out;

		// Rest of styles
		width: 440px;
		margin-top: 8px;
		margin-left: -356px;
		background-color: $woodsmoke;
		font-size: 14px;

		&::before {
			display: block;
			float: right;
			width: 1px;
			margin-top: -5px;
			margin-right: 48px;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-bottom: 5px solid $woodsmoke;
			content: '';
		}

		.dropdown-header {
 	 		box-sizing: border-box;
			height: 36px;
			border-radius: 2px 2px 0 0;
			box-shadow: 0 1px 0 0 $midgray2;
			color: $french-gray2;
			padding: 12px 16px;
			font-weight: 600;
			line-height: 14px;
		}

		.dropdown-body {
			color: $manatee;
			overflow-y: auto;

			.alert-group{
				&:last-child .alert-item  {
					border-radius: 0 0 2px 2px;
				}

				.alert-header {
					padding: 4px 16px;
					font-size: 12px;
					font-weight: 600;
					letter-spacing: 0.4px;
					text-transform: uppercase;
				}

				.alert-item {
					background-color: $shark2;
					box-shadow: inset 0 -1px 0 0 $woodsmoke,
					inset 0 1px 0 0 $woodsmoke;
					padding: 12px 16px;
					display: flex;

					&.actionable:hover {
						background-color: $tuna2;
						cursor: pointer;
					}

					.item-icon {
						width: 32px;
						height: 32px;
						margin-top: 2px;
						background-repeat: no-repeat;
						background-position: center;
						background-size: contain;
						flex: initial;
					}

					.item-body {
						padding-left: 16px;
						flex: 1;

						.title, .subtitle, .message, .button-clear {
							color: $white;
							font-weight: normal;
							line-height: 12px;
						}

						.title {
							font-size: 14px;
							font-weight: 600;
							line-height: 18px;
						}

						.subtitle, .message {
							font-size: 12px;
							letter-spacing: 0;
						}

						.subtitle {
							margin-top: 4px;
							color: $french-gray2;
						}

						.message {
							margin-top: 12px;
						}

						.button-clear {
							margin-top: 12px;
							background-color: $midgray2;
							border:none;
							border-radius: 2px;
							padding: 8px 12px;
							font-size: 12px;

							&:hover, &:focus {
								background: $manatee;
								color: $woodsmoke;
								transform: translateY(-1px);
								box-shadow: 0 2px 8px rgba(32,32,32,0.24);
							}
						}
					}
				}
			}

			.alert-group-empty {
				display: none;
				box-sizing: border-box;
				height: 50px;
				background-color: $shark2;
				border-radius: 0 0 2px 2px;
				padding: 18px 16px;
				font-style: italic;
				line-height: 14px;

				&:first-child {
					display: block;
				}
			}
		}
	}

	&.open {
		#main_topbar_alerts_container {
			// Transition to show
			visibility: visible;
			opacity: 1;
			transition: opacity 0.15s ease-in-out;
		}
	}
}

@media (min-width: 768px) {
	#main_topbar_alerts {
		#main_topbar_alerts_container {
			margin-left: -380px;

			&::before {
				margin-right: 36px;
			}
		}
	}
}

@media (min-width: 1200px) {
	#main_topbar_alerts {
		#main_topbar_alerts_container {
			margin-left: -354px;

			&::before {
				margin-right: 50px;
			}
		}
	}
}
