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

.s_phone {
	// 响应规则 - 合并
	.l_col-phone-merge {
		display:block; height:auto;
		.l_colItem {
			width:auto !important; height:auto;
			> .c_scroll { height:auto;}
		}
		> .l_colItem,
		.l_colContent > .l_colItem {
			margin:0;
			&:first-child { margin-left:0;}
			&:last-child { margin-right:0;}
		}
		&-line {
			>.l_colContent >.l_colItem,
			>.l_colItem { border: none;}
		}
	}

 

	// 响应规则 - 侧滑进入
	.l_col-phone-sidebar {
		.l_colItem-phone-float {
			position:fixed; left:0; top:0; height:100%; width:100% !important; z-index:2; visibility:hidden; transition:visibility 0.3s ease-out; z-index:10;
			> .bg { background:rgba(0,0,0,0); width:100%; height:100%; position:absolute; left:0; top:0; transition:background 0.3s ease-out;}
			> .content { width:65%; height:100%; position:absolute; left:0; top:0; background:#fff; transform:translateX(-100%); transition:transform 0.3s ease-out;}
		}
		.l_colItem-show {
			visibility:visible;
			> .bg { background:rgba(0,0,0,0.5);}
			> .content { transform:translateX(0%);}
		}
	}



	// 响应规则 - 中间弹出
	.l_col-phone-dialog {
		.l_colItem-phone-float {
			position:fixed; left:0; top:0; height:100%; width:100% !important; z-index:2; visibility:hidden; transition:visibility 0.3s ease-out; z-index:10; text-align:center;
			> .bg { background:rgba(0,0,0,0); width:100%; height:100%; position:absolute; left:0; top:0; transition:background 0.3s ease-out;}
			&:before { content:""; height:100%; width:1px; margin-right:-0.5em; display:inline-block; vertical-align:middle;}
			> .content { width:90%; display:inline-block; vertical-align:middle; height:auto; text-align:left; transform:scale(0); transition:transform 0.2s ease-out;}
		}
		.l_colItem-show {
			visibility:visible;
			> .bg { background:rgba(0,0,0,0.5);}
			> .content { transform:scale(1);}
		}
	}
	


	// 响应规则 - 弹出
	.l_col-phone-popup {
		position:relative; overflow:visible;
		.l_colItem { width:100% !important;}
		.l_colItem-phone-float  {
			position:fixed; background:@bg-dark-0-7; left:0; top:0; height:100%; width:100% !important; z-index:100; visibility:hidden; z-index:0; transition:visibility 0.3s ease-out, transform 0.3s ease-out; transform:translateX(100%);
		}
		.l_colItem-show {
			visibility:visible; transform:translateX(0%);
		}
	}
	.l_col-phone-popup.l_col-space {
		> .l_colItem { margin:0;}
	}


	// 响应规则 - 浮动
	.l_col-phone-float {
		.l_colItem-phone-float {
			position:fixed; left:0; top:0; height:100%; width:100% !important; z-index:2; visibility:hidden; transition:visibility 0.3s ease-out; z-index:10;
			> .bg { background:rgba(0,0,0,0); width:100%; height:100%; position:absolute; left:0; top:0; transition:background 0.3s ease-out;}
			> .content { width:100%; position:absolute; height:auto; left:0; bottom:0; top:auto; transform:translateY(100%); transition:transform 0.3s ease-out;}
		}
		.l_colItem-show {
			visibility:visible;
			> .bg { background:rgba(0,0,0,0.5);}
			> .content { transform:translateY(0%);}
		}
	}



	// 响应规则 - 分割（类似 tabset 形式切换）
	[class*="l_col-phone-split"],
	[class*="l_col-split"] {
		display:block;
		.c_header {
			.text {
				padding-right:@gap; padding-left:1+2*@gap; position:relative;
				&:after { position:absolute; height:1+2*@gap; width:1+2*@gap; text-align:center; left:0; top:0; font-family:"ico"; content:"\e009";}
				&.active { background:@primary-dark-3;}
			}
		}
		.c_header-white {
			.text {
				&.active { background:@bg-dark-0-6;}
			}
		}
		> .l_colContent {
			.x_animate(transform,0.3);
		}
		> .l_colContent > .l_colItem {
			width:1px !important; flex:1 !important; margin:0;
			&:first-child { margin-left:0;}
			&:last-child { margin-right:0;}
		}
	}
	.l_col-phone-split-2 .l_colContent,
	.l_col-split-2 .l_colContent {
		width:200%;
	}
	.l_col-phone-split-2.l_col-cur-2,
	.l_col-split-2.l_col-cur-2 {
		> .l_colContent { transform:translate3d(-50%,0,0);}
	}
	.l_col-phone-split-3 .l_colContent,
	.l_col-split-3 .l_colContent {
		width:300%;
	}
	.l_col-phone-split-3.l_col-cur-2,
	.l_col-split-3.l_col-cur-2 {
		> .l_colContent { transform:translate3d(-33.33333333%,0,0);}
	}
	.l_col-phone-split-3.l_col-cur-3,
	.l_col-split-3.l_col-cur-3 {
		> .l_colContent { transform:translate3d(-66.66666666%,0,0);}
	}
}