.wpconsent-help-tooltip {
	cursor: help;
	display: inline-block;
	position: relative;
	vertical-align: middle;

	.wpconsent-help-tooltip-text {
		background-color: var(--wpconsent-color-primary);
		border-radius: 6px;
		bottom: 100%;
		color: #fff;
		font-size: var(--wpconsent-font-size-s);
		font-weight: 400;
		left: 50%;
		margin-bottom: 12px;
		margin-left: -90px;
		padding: 12px 12px;
		position: absolute;
		text-align: center;
		visibility: hidden;
		width: 180px;
		z-index: 500;

		&:after {
			border-color: var(--wpconsent-color-primary) transparent transparent transparent;
			border-style: solid;
			border-width: 10px 9px 0 9px;
			content: '';
			height: 0;
			left: 50%;
			margin-left: -9px;
			position: absolute;
			top: 100%;
			width: 0;
		}

		/* This makes it easier to get the mouse over the tooltip when it's already visible.*/
		&:before {
			content: '';
			top: 100%;
			height: 20px;
			left: 0;
			right: 0;
			position: absolute;
			background: transparent;
		}

		a {
			color: #fff;
		}
	}

	&:hover {
		.wpconsent-help-tooltip-text {
			visibility: visible;
		}
	}

	.wpconsent-icon-help {
		margin-top: 1px;

		path {
			fill: #8A8A8A;
		}
	}
}