// Admin notification styles.

@import "variables";

#wp-mail-smtp-notifications {
	position: relative;
	background: #FFFFFF 0 0 no-repeat padding-box;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
	border-radius: 6px;
	opacity: 1;
	min-height: 48px;
	margin: 0 0 14px 0;

	* {
		box-sizing: border-box;
	}

	.wp-mail-smtp-notifications-header {
		display: flex;
		align-items: center;
		padding: 8px 16px;
		border-bottom: 1px solid rgba(204, 208, 212, 0.5);

		.wp-mail-smtp-notifications-bell {
			position: relative;
			top: 2px;
			margin-right: 10px;
		}

		.wp-mail-smtp-notifications-title {
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 17px;
			color: #23282D;
		}
	}

	.wp-mail-smtp-notifications-body {
		position: relative;
	}

	.wp-mail-smtp-notifications-messages {
		padding: 16px 100px 16px 16px;

		.wp-mail-smtp-notifications-message {
			display: none;

			&.current {
				display: block;
			}
		}

		.wp-mail-smtp-notifications-title {
			font-weight: 600;
			font-size: 17px;
			line-height: 17px;
			margin: 0;
			color: $primary-text;
		}

		.wp-mail-smtp-notifications-content {
			font-weight: normal;
			font-size: 14px;
			line-height: 18px;
			margin: 8px 0 41px 0;
			color: $secondary-text;

			p {
				font-size: inherit;
				line-height: inherit;
				margin: 0 0 5px;
			}
		}

		.wp-mail-smtp-notifications-buttons {
			margin: -30px 80px 0 0;

			a {
				margin: 0 10px 0 0;
				padding: 8px 10px;
				line-height: 13px;
				font-size: 13px;
				min-height: unset;
			}

			.button-secondary {
				border: 1px solid #0071A1;
			}
		}
	}

	.dismiss {
		position: absolute;
		top: 15px;
		right: 16px;
		width: 16px;
		height: 16px;
		color: #A0A5AA;
		font-size: 16px;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
		line-height: 16px;

		&:hover {
			color: $negative;
		}

		i {
			width: 100%;
			height: 100%;
			font-size: inherit;
		}
	}

	.navigation {
		position: absolute;
		bottom: 20px;
		right: 16px;
		width: 63px;
		height: 30px;

		a {
			display: block;
			width: 30px;
			height: 30px;
			border: 1px solid #7E8993;
			border-radius: 3px;
			font-size: 16px;
			line-height: 1.625;
			text-align: center;
			cursor: pointer;
			background-color: #ffffff;
			color: #41454A;

			&:hover {
				background-color: #f1f1f1;
			}

			.dashicons {
				margin-top: 8px;
				font-size: 12px;
			}
		}

		.prev {
			float: left;
		}

		.next {
			float: right;
		}

		.disabled {
			border-color: #dddddd;
			color: #A0A5AA;
			cursor: default;

			&:hover {
				background-color: #ffffff;
			}
		}
	}
}

@media screen and (max-width: 768px) {

	#wp-mail-smtp-notifications {

		.wp-mail-smtp-notifications-messages {
			padding: 15px 50px 20px 16px;

			.wp-mail-smtp-notifications-title {
				margin: 0 30px 0 0;
				line-height: 22px;
			}

			.wp-mail-smtp-notifications-content {
				font-size: 16px;
				line-height: 22px;
			}

			.wp-mail-smtp-notifications-buttons {
				margin: -30px 80px 0 0;

				a {
					margin: 0;
					display: table;
				}

				.button-secondary {
					margin-top: 6px;
				}
			}
		}
	}
}
