@import "config";
@import "mixin/all";

.protip {
	&-container {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 50;
		line-height: 1;
		opacity: 0;
		pointer-events: none;
		box-sizing: border-box;

		> i {
			position: absolute;
			left: 10px;

			// If there is an icon in the tooltip (warning, ok, etc.) the content has different style
			+ div {
				padding-left: 20px;
			}
		}
	}

	&-arrow {
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent;
	}

	&-show {
		opacity: 1;
		pointer-events: auto;
	}
}

@import "skin/all";