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

.s_phone {
	.c_list {
		> ul > li > .op {
			color:@secondary-op-7;
			> ul { background:@bg-dark-0-2; border-top: 1px solid @bg-dark-0-7;}
			li.active { background:@bg-dark-0-7;}
		}
		> ul > li > .op-show-phone {
			ul { transform:translateY(0%);}
		}
		.link:not(.checked):not(.on).active {
			background:@bg-dark-0-7;
			.pic { opacity:0.6;}
		}
		> ul > li > .content > .fn,
		> ul > li > .group > .fn,
		> ul > li > .sub > .fn,
		> ul > li > .fn {
			&.active { background:rgba(0,0,0,0.05);}
		}
		> ul > li > label .fn.active { background:transparent;}
		> ul > li > .group > .value,
		> ul > li > .content > .value,
		> ul > li > .sub > .value,
		> ul > li > .value .e_mix {
			.e_select {
				&.active { background:@bg-dark-0-7;}
			}
		}
		> ul > .blue.link.active { background:@primary-dark-2 !important;}
		> ul > .red.link.active { background:@danger-dark-2 !important;}
		> ul > .green.link.active { background:@success-dark-2 !important;}
		> ul > .orange.link.active { background:@warning-dark-2 !important;}
		> ul > .gray.link.active { background:@bg !important;}
	}
	.c_list-blue {
		> ul .link:not(.checked):not(.on).active { background:@primary-dark-2;}
	}
	.c_list-red {
		> ul .link:not(.checked):not(.on).active { background:@danger-dark-2;}
	}
	.c_list-green {
		> ul .link:not(.checked):not(.on).active { background:@success-dark-2;}
	}
	.c_list-orange {
		> ul .link:not(.checked):not(.on).active { background:@warning-dark-2;}
	}
	.c_list-gray {
		> ul .link:not(.checked):not(.on).active { background:@bg;}
	}
	.c_list-space {
		> ul .link:not(.checked):not(.on).active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @bg-dark-0-7 0.43em, @bg-dark-0-7 100%);}
		> ul > .blue.link.active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @primary-dark-2 0.43em, @primary-dark-2 100%) !important;}
		> ul > .red.link.active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @danger-dark-2 0.43em, @danger-dark-2 100%) !important;}
		> ul > .orange.link.active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @warning-dark-2 0.43em, @warning-dark-2 100%) !important;}
		> ul > .green.link.active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @success-dark-2 0.43em, @success-dark-2 100%) !important;}
		> ul > .gray.link.active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @bg 0.43em, @bg 100%) !important;}
	}
	.c_list-blue.c_list-space {
		> ul .link:not(.checked):not(.on).active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @primary-dark-2 0.43em, @primary-dark-2 100%);}
	}
	.c_list-red.c_list-space {
		> ul .link:not(.checked):not(.on).active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @danger-dark-2 0.43em, @danger-dark-2 100%);}
	}
	.c_list-orange.c_list-space {
		> ul .link:not(.checked):not(.on).active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @warning-dark-2 0.43em, @warning-dark-2 100%);}
	}
	.c_list-green.c_list-space {
		> ul .link:not(.checked):not(.on).active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @success-dark-2 0.43em, @success-dark-2 100%);}
	}
	.c_list-gray.c_list-space {
		> ul .link:not(.checked):not(.on).active { background:linear-gradient(90deg,rgba(0,0,0,0) 0, rgba(0,0,0,0) 0.43em, @bg 0.43em, @bg 100%);}
	}
	.c_list-submit {
		position:relative; background:none;
		> ul {
			&:after { display:none;}
		}
		.submit {
			position:relative; display:flex; margin-top:0.71*@gap;
			button { flex:1;}
			button [class*="e_ico"] { display:none;}
		}
	}
	.c_list-submit.c_list-border {
		border:0 none;
		> ul {
			border:1px solid @fg-light-8;
		}
	}
}