.wcpay-tooltip {
	&__content-wrapper {
		// ensures that the element needed for position calculations isn't included in the DOM layout
		display: contents;

		// Ensure that the tooltip doesn't shift neighboring elements when it appears.
		> div {
			display: inline;
		}

		// Styles for buttonIcon
		[role='button'] {
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			color: $gray-600;
			transition: all 0.3s ease;
			fill: currentColor;
			margin: 0 0.4em;
			vertical-align: text-bottom;

			&:focus,
			&:hover,
			&:active {
				outline: none;
				color: var( --wp-admin-theme-color, $gutenberg-blue );
			}
		}
	}

	&__tooltip-wrapper {
		visibility: hidden;
		position: fixed;
		opacity: 0;
		transition: opacity 150ms ease-in;
		// gotta do it a bit higher than the modal used in Gutenberg, to ensure the tooltip appears on top 😅
		z-index: 100010;
		// Initial left position is set to 0 to fix a positioning bug in mobile Safari.
		left: 0;
		white-space: normal;
		font-size: 12px;
		font-weight: 400;

		&.is-hiding {
			opacity: 0 !important;
			transition: opacity 200ms ease-out 300ms;
		}
	}

	&__tooltip {
		position: relative;

		// Default tooltip styles have a dark background and light text.
		color: $white;
		background-color: $gray-900;
		padding: 10px;
		text-align: center;

		// Links inside default tooltips should have a light color against the dark background.
		a {
			color: var( --wp-admin-theme-color-background-25, $wp-blue-5 );
			text-decoration: underline;
		}

		ul {
			list-style: inherit;
			margin-left: 20px;
		}
	}

	&--click {
		&__content-wrapper {
			cursor: pointer;
		}

		&__tooltip {
			// Click tooltips have a light background and dark text.
			position: relative;
			padding: 12px;
			color: $gray-900;
			text-align: left;
			border-radius: 2px;
			border: 1px solid $gray-400;
			background-color: $white;
			box-shadow: 0 2px 6px 0 rgba( 0, 0, 0, 0.05 );

			// Links inside click tooltips should have a dark color against the light background.
			a {
				color: var( --wp-admin-theme-color, $gutenberg-blue );
			}

			&::after {
				// Remove the arrow from the click tooltip variant.
				display: none;
			}
		}
	}
}
