.regexr-tooltip {
	font-size: 0.875rem;
	font-family: $monospace;
	max-width: 30em;
	background: rgba(30, 30, 30, .95);
	color: lighten($grey, 25%);
	padding: $pad;
	border-radius: 3px;
	word-wrap: break-word;


	hr {
		height: 0;
		border: 0;
		border-bottom: solid 1px rgba(255, 255, 255, 0.08);
		margin-top: 0.3em;
		margin-bottom: 0.3em;
	}

	b {
		color: lighten($grey, 40%);
	}

	.error-title {
		font-weight: bold;
		color: $error-color;
	}

	&.save {
		max-width: 11.6rem;
	}

    &.expr {
      max-width: 20rem;
    }
}

.regexr-tooltip-tip {
	width: 19px;
	height: 10px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAYAAABWiWWfAAAANUlEQVR42o3MMQ0AAAzDsCEp1jFvKfjIF/mSSC+fQhVQoQpIkIIAOQiQgwA5CJCDADkIkIMD+gmc/LP+8KQAAAAASUVORK5CYII=);
}

.regexr-tooltip, .regexr-tooltip-tip {
	opacity: 0.0;
	@include vendor-prefix(transition, opacity $default-transition-duration);
	position: fixed;
	z-index: $z-index-tip;
}

.regexr-tooltip-visible {
	opacity: 1.0;
}