/*!
 * Admin Inputs - Tooltips.
 *
 * Style for modifications to jQuery UI Tooltips.
 *
 * @since 1.0.0
 */

@import "../_abstracts/variables";

// Info Icon.
.gofer-seo-tooltip {
	text-align: left;
	float: left;
	max-width: 23px;
	min-width: 20px;
	outline: none;
	color: $tooltip-icon-color;
	font-family: sans-serif;
	line-height: 17px;

	&::before {
		content: "\f223";
		font-size: 22px;
		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- Dashicons is required. */
		font-family: dashicons;
		vertical-align: middle;
		margin-right: 4px;
	}

	&:active {
		color: $tooltip-icon-color-active;
	}

	&:hover,
	&:focus {
		color: $tooltip-icon-color-hover;
		box-shadow: unset;
	}

	span {
		font-size: 14px;
	}
}

// JS.
// ui-tooltip ui-corner-all ui-widget-content gofer-seo-ui-tooltip ui-widget
// ui-tooltip-content
.ui-tooltip.gofer-seo-ui-tooltip {
	font-family: "Open Sans", sans-serif;
	-webkit-box-shadow: 0 0 5px $tooltip-ui-box-shadow;
	box-shadow: 0 0 5px $tooltip-ui-box-shadow;
	border: 0;
	border-radius: 9px;
	background: $tooltip-ui-bg-color;
	max-width: 300px;
	padding: 8px;
	position: absolute;
	z-index: 9999;

	div.ui-tooltip-content {
		a {
			color: $text-link;
			text-decoration: none;
		}

		dt {
			font-weight: 700;
		}
	}
}
