@import "../default-skin.less";
@import "../../global/mixin.less";

// 工具提示组件
.c_tooltip {
	border-radius:0.25em; background:@fg-light-3; color:@bg; position:absolute; z-index:1100; pointer-events:none; word-wrap:break-word;
	a { color:@bright; text-decoration:underline;}
	.content { padding:0.5*@gap @gap; line-height:1+0.5*@gap; position:relative;}
	.content:after { color:@fg-light-3; position:absolute; top:-0.5em; left:50%; margin-left:-0.5em; line-height:1.2; font-family:"ico"; content:"\e06c";}
	.close,
	.config { width:1em; height:1em; line-height:1em; .x_round; position:absolute; top:-0.5em; right:-0.5em; text-align:center; cursor:default; background:@fg-light-4; color:@bg; display:none; cursor:pointer;}
	.close:after { font-family:"ico"; content:"\e01b";}
	.config:after { font-family:"ico"; content:"\e01e";}
	.close:after,
	.config:after { font-size:50%; vertical-align:top; display:inline-block;}
}



// 方向
.c_tooltip-top {
	.content:after { bottom:-0.5em; top:auto;}
}
.c_tooltip-top-right {
	.content:after { top:auto; bottom:-0.5em; left:0.5em; margin:0; right:auto;}
}
.c_tooltip-top-left {
	.content:after { top:auto; bottom:-0.5em; left:auto; right:0.5em; margin:0;}
}
.c_tooltip-left {
	.content:after { top:0; bottom:0; left:auto; right:-0.5em; margin:0.5em 0 0 0;}
}
.c_tooltip-right {
	.content:after { top:0; bottom:0; left:-0.5em; right:auto; margin:0.5em 0 0 0;}
}
.c_tooltip-bottom-right {
	.content:after { top:-0.5em; bottom:auto; left:0.5em; right:auto; margin:0;}
}
.c_tooltip-bottom-left {
	.content:after { top:-0.5em; bottom:auto; left:auto; right:0.5em; margin:0;}
}



// 色彩
.c_tooltip-blue {
	background:@primary;
	.content:after { color:@primary;}
	.close { background:@primary}
}
.c_tooltip-red {
	background:@danger;
	.content:after { color:@danger;}
	.close { background:@danger}
}
.c_tooltip-green {
	background:@success;
	.content:after { color:@success;}
	.close { background:@success}
}
.c_tooltip-orange {
	background:@warning;
	.content:after { color:@warning;}
	.close { background:@warning}
}




// 帮助模式
.c_tooltip-help {
	border-radius:0.5em; background:@warning-light-3; color:@danger-dark-5;  width:20em; font-size:133.33%; padding:0.25*@gap; pointer-events:auto;
	.content { padding:0.75*@gap @gap; border:2px @warning-dark-1 dotted; border-radius:0.25em; line-height:1+0.5*@gap;}
	.content:after { top:-0.75em; margin-top:-2px; color:@warning-light-3;}
	.content:before { content:""; background:url(../../img/emote/04.png) no-repeat; display:block; width:3em; height:3.5em; background-size:100%; position:absolute; bottom:-0.25*@gap*1.33; right:-0.25*@gap*1.33-1; margin:auto; z-index:2;}
	.fn {
		clear:both; text-align:right; margin-top:0.5*@gap;
		> button { font-size:85.71%; background:linear-gradient(@warning-light-6 1%,@warning-light-3 15%); border-radius:0.86em; color:@danger-dark-4; border-top:1px @warning solid; border-left:2px @warning solid; border-right:2px @warning solid; border-bottom:3px @warning solid;}
		> button:hover { background:@warning-light-4; border-width:2px; border-top-color:@warning-dark-1;}
	}
}
.c_tooltip-help.c_tooltip-top {
	.content:after { bottom:-0.75em; margin-top:0; margin-bottom:-2px; top:auto;}
}
.c_tooltip-help.c_tooltip-top-right {
	.content:after { bottom:-0.75em; margin-top:0; margin-bottom:-2px; top:auto;}
}
.c_tooltip-help.c_tooltip-top-left {
	.content:after { bottom:-0.75em; margin-top:0; margin-bottom:-2px; top:auto;}
}
.c_tooltip-help.c_tooltip-left {
	.content:after { top:0; bottom:0; left:auto; right:-0.75em; margin:0.5em auto auto 0;}
}
.c_tooltip-help.c_tooltip-right {
	.content:after { top:0; bottom:0; right:auto; left:-0.75em; margin:0.5em 0 auto auto;}
}
.c_tooltip-help.c_tooltip-bottom-right {
	.content:after { top:-0.75em; margin-bottom:0; margin-top:-2px; bottom:auto;}
}
.c_tooltip-help.c_tooltip-bottom-left {
	.content:after { top:-0.75em; margin-bottom:0; margin-top:-2px; bottom:auto;}
}
.c_tooltip-help-l {
	.content { min-height:5.71em; padding:1.22em 1.99em 1.22em 2.27em; }
	.content:before { width:5.71em; height:6.71em; right:-2.86em;}
}
.c_tooltip-help-l.c_tooltip-top-left,
.c_tooltip-help-l.c_tooltip-bottom-left,
.c_tooltip-help-l.c_tooltip-left {
	.content:before { right:auto; left:-2.86em;}
}



// 曲线箭头
.c_tooltip-arrow-curve {
	.content:after { content:""; width:14.29em; height:10em; background:url(../../img/curve/curve-top.png) no-repeat; background-size:100%; margin:0 auto; position:absolute; top:-10.5em; bottom:auto; left:0; right:0; border:none;  transform:rotate(0);}
}
.c_tooltip-arrow-curve.c_tooltip-top {
	.content:after{ border:none; bottom:-10.5em; top:auto; transform:rotate(180deg);}
}
.c_tooltip-arrow-curve.c_tooltip-left {
	.content:after { border:none; background:url(../../img/curve/curve-left.png) no-repeat; background-size:100%; top:50%; margin-top:-5em; bottom:auto; left:auto; right:-14.29em; transform:rotate(180deg);}
}
.c_tooltip-arrow-curve.c_tooltip-right {
	.content:after { border:none; background:url(../../img/curve/curve-left.png) no-repeat; background-size:100%; top:50%; margin-top:-5em; bottom:auto; left:-14.29em; right:auto;}
}
.c_tooltip-arrow-curve.c_tooltip-top-left {
	.content:after { border:none; background:url(../../img/curve/curve-left-top.png) no-repeat; background-size:100%; top:2.86em; bottom:auto; left:auto; right:-14.29em;}
}
.c_tooltip-arrow-curve.c_tooltip-top-right {
	.content:after { border:none; background:url(../../img/curve/curve-left-bottom.png) no-repeat; background-size:100%; top:2.86em; bottom:auto; left:-14.29em; right:auto;}
}
.c_tooltip-arrow-curve.c_tooltip-bottom-left {
	.content:after { border:none; background:url(../../img/curve/curve-left-bottom.png) no-repeat; background-size:100%; top:-6em; bottom:auto; left:auto; right:-14.29em; transform:rotate(180deg);}
}
.c_tooltip-arrow-curve.c_tooltip-bottom-right {
	.content:after { border:none; background:url(../../img/curve/curve-left-top.png) no-repeat; background-size:100%; top:-6em; bottom:auto; left:-14.29em; right:auto; transform:rotate(180deg);}
}