.wp-mail-smtp-tooltip {
	position: relative;
	display: inline-block;
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: help;
	color: $secondary-text;
	margin-top: 15px !important;

	&-with-icon {
		margin-top: 2px !important;
		margin-left: 10px;

		.wp-mail-smtp-tooltip-text {
			bottom: 130%;
		}
	}

	&-text {
		visibility: hidden;
		position: absolute;
		z-index: 9999;
		width: 360px;
		background-color: #2D4F60;
		color: #fff;
		text-align: center;
		padding: 16px 20px;
		font-size: 14px;
		border-radius: 5px;
		bottom: 100%;
		left: 50%;
		margin-left: -180px;

		&::after {
			content: " ";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #2D4F60 transparent transparent transparent;
		}
	}

	&-small-text {
		font-size: 12px;
		line-height: 140%;
		text-align: left;

		code, kbd {
			font-size: 12px;
		}
	}

	&:hover .wp-mail-smtp-tooltip-text {
		visibility: visible;
	}
}

.wp-mail-smtp-page {
	label.wp-mail-smtp-setting-label-with-tooltip {
		.wp-mail-smtp-tooltip-with-icon {
			margin-left: 0;
			position: relative;
			left: 0;
			top: 0;
			vertical-align: top;
		}
	}

	.wp-mail-smtp-tooltip {
		&-text {
			a {
				color: #fff;

				&:active,
				&:hover {
					color: #fff;
				}
			}
		}
	}
}
