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

.c_avatarEditor {
 	width:30em; position:relative;
	> .header {
		height:1+2*@gap; position:absolute; top:0; width:100%; z-index:5; font-size:116.67%; line-height:1+2*@gap;
		> .text { padding:0 @gap; color:#fff; float:left;}
		> .fn {
			float:right; color:#fff; padding:0.5*@gap;
			span { display:inline-block; width:1em; height:1em; padding:0.5*@gap; border-radius:55%; line-height:1em; cursor:pointer;}
		}
	}
	> .content {
		.main {
			position:relative; width:30em; height:30em; overflow:hidden;
			.pic {
				position:absolute; z-index:2; left:0; top:0;
				img { max-width:none; width:auto;}
			}
			.mask {
				position:absolute; top:0; bottom:0; left:0; right:0; z-index:3;
				.top { position:absolute; top:0; left:0; right:0; height:(1+2*@gap)*1.1667; background:@fg-op-5;}
				.left { position:absolute; top:(1+2*@gap)*1.1667; left:0; width:(1+2*@gap)*1.1667; bottom:(1+2*@gap)*1.1667; background:@fg-op-5;}
				.right { position:absolute; top:(1+2*@gap)*1.1667; right:0; width:(1+2*@gap)*1.1667; bottom:(1+2*@gap)*1.1667; background:@fg-op-5;}
				.bottom { position:absolute; bottom:0; left:0; right:0; height:(1+2*@gap)*1.1667; background:@fg-op-5;}
				// .bottom { position:absolute; top:50%; left:0; right:0; bottom:0; margin-top:7em; background:rgba(0, 0, 0, 0.5);}
				// .left { position:absolute; top:50%; left:0; right:50%; bottom:0; background:rgba(0, 0, 0, 0.5); height:14em; margin-right:7em; margin-top:-7em;}
				// .right { position:absolute; top:50%; left:50%; right:0; bottom:0; background:rgba(0, 0, 0, 0.5); height:14em; margin-left:7em; margin-top:-7em;}
			}
		}
	}
	> .fn {
		display:flex;
		button { flex:1; margin:0; display:block;}
	}
	&-r {
		> .content .main .mask .center { position:absolute;top:(1+2*@gap)*1.1667; left:(1+2*@gap)*1.1667; right:(1+2*@gap)*1.1667; bottom:(1+2*@gap)*1.1667; background:url(../../img/avatarEditor.png); background-size:100%;}
	}

}