//tooltip
#{$V}tips {
	position: relative;
	display: inline-block;

	&:before,
	&:after {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(-50%, #{rem(10)}, 0);
		transform-origin: top;
		transition: all .18s ease-in-out;
		position: absolute;
		left: 50%;
		bottom: 100%;
		z-index: 10;
	}
	&:before {
		content: '';
		background: $--tp;
		border: rem(6) $border-style-solid $--tp;
		border-top-color: rgba($--black, .9);
		margin-bottom: - rem(7);
	}
	&:after {
		max-width: rem(260);
		line-height: $line-height-xs;
		content: attr(vus-tips);
		font-size: rem($font-size-xs);
		padding: rem(6) rem(7);
		border-radius: rem(3);
		color: $--white;
		background-color: rgba($--black, .9);
		white-space: nowrap;
		margin-bottom: rem(5);
	}
	&:hover {
		&:before,
		&:after {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			transform: translate3d(-50%, 0, 0);
		}
	}
	//bottom
	&.v-bottom {
		&:before,
		&:after {
			left: 50%;
			top: 100%;
			bottom: auto;
			transform: translate3d(-50%, - #{rem(10)}, 0);
		}
		&:before {
			margin: 0;
			margin-top: - rem(7);
			border-color: $--tp;
			border-bottom-color: rgba($--black, .9);
		}
		&:after {
			margin: 0;
			margin-top: rem(5);
		}
		&:hover {
			&:before,
			&:after {
				transform: translate3d(-50%, 0, 0);
			}
		}
	}
	//left
	&.v-left {
		&:before,
		&:after {
			top: 50%;
			left: auto;
			right: 100%;
			bottom: auto;
			transform: translate3d(#{rem(10)}, -50%, 0);
		}
		&:before {
			margin: 0;
			margin-right: - rem(3);
			border-color: transparent;
			border-left-color: rgba($--black, .9);
		}
		&:after {
			margin: 0;
			margin-right: rem(9);
		}
		&:hover {
			&:before,
			&:after {
				transform: translate3d(0, -50%, 0);
			}
		}
	}
	//right
	&.v-right {
		&:before,
		&:after {
			top: 50%;
			left: 100%;
			bottom: auto;
			transform: translate3d(- #{rem(10)}, -50%, 0);
		}
		&:before {
			margin: 0;
			margin-left: - rem(3);
			border-color: transparent;
			border-right-color: rgba($--black, .9);
		}
		&:after {
			margin: 0;
			margin-left: rem(9);
		}
		&:hover {
			&:before,
			&:after {
				transform: translate3d(0, -50%, 0);
			}
		}
	}
	//尺寸
	@at-root {
		%tipsSLA {
			line-height: $line-height-xl;
			white-space: normal;
			@include word-wrap;
		}
	}
	&.v-small:after {
		@extend %tipsSLA;
		width: rem(100);
	}
	&.v-large:after {
		@extend %tipsSLA;
		width: rem(260);
	}
	//主题颜色
	@each $key, $value in $theme-color {
		@include tips-color($key, $value);
	}
}