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

// 日历组件
.c_calendar { 
	height:9*(1+2*@gap)+@gap; position:relative; background:@bg; font-size:116.67%; text-align:center; user-select:none;
	.header {
		height:1+2*@gap; line-height:1+2*@gap; background:@primary; display:flex; width:100%; color:@bg; vertical-align:top;
		.prevYear,
		.nextYear,
		.prev,
		.next { width:1+2*@gap; cursor:pointer;}
		.prev:after { font-family:"ico"; content:"\e009";}
		.next:after { font-family:"ico"; content:"\e05a";}
		.prevYear:after { font-family:"ico"; content:"\e035";}
		.nextYear:after { font-family:"ico"; content:"\e046";}
		.info {
			flex:1; cursor:pointer;
			span { padding:0 0.5em; display:inline-block;}
			&:after { color:@primary-light-3; font-size:75%; font-family:"ico"; content:"\e081";}
		}
	}
	.week {
		background:@primary; height:1+2*@gap; line-height:1+2*@gap; color:@bg;
		> ul > li { width:14.2%; float:left;}
		> ul > li:nth-child(7n) { float:none; width:auto;}
	}
	.day {
		position:absolute; top:(1+2*@gap)*2; width:100%; bottom:1+2*@gap; overflow:auto;
		> ul { overflow:hidden; padding:0.5*@gap 0;}
		> ul > li { width:14.2%; float:left; padding:0; height:1+2*@gap; text-align:center; position:relative; cursor:pointer;}
		> ul > li:nth-child(7n) { float:none; width:auto; overflow:hidden;}
		> ul > li.sat { color:@danger;}
		> ul > li.sun { color:@danger;}
		> ul > li:not(:empty):after { content:""; width:1+2*@gap; height:1+2*@gap; display:block; .x_round; margin:auto;}
		> ul > li.on:after { background:@warning;}
		> ul > li > span.solar { position:absolute; margin:0; top:0; bottom:0; left:0; right:0; line-height:1+2*@gap;}
		> ul > li > span.lunar { display:none;}
		> ul > li.dis span { cursor:not-allowed; color:@fg-light-8;}
		> ul > li.on { color:@bg;}
		> ul > li.cur:after { background:@primary-light-9;}
		> ul > li.on.cur:after { background:@warning;}
		> ul > li.on:nth-child(7n) > span,
		> ul > li.on:nth-child(7n+1) > span { color:@bg;}
	}
	.fn {
		display:flex; position:absolute; bottom:0; width:100%;
		button { width:100%; font-size:100% !important;}
	}
	.shortcut {
		background:@bg; position:absolute; bottom:1+2*@gap; left:0; width:100%; line-height:1+2*@gap; color:@fg-light-1; border-top:1px @fg-light-9-3 solid; box-shadow:0 -3px 10px @fg-light-9-3; z-index:2;
		li { float:left; width:25%; text-align:center; cursor:pointer; .x_bs;}
		li:nth-child(4n) { border-right:0 none;}
	}
	.select {
		position:absolute; width:100%; height:auto; top:1+2*@gap; background:@bg; color:@bg; bottom:1+2*@gap; z-index:12;
		ul { overflow:hidden;}
		ul li { width:20%; float:left; text-align:center; height:1+2*@gap; z-index:14; position:relative; line-height:1+2*@gap; cursor:pointer;}
		ul li:after { content:""; width:1+2*@gap; height:1+2*@gap; .x_round; z-index:-1; position:absolute; margin:0 auto; top:0; left:0; right:0; bottom:0;}
		ul li.on:after { background:@warning;}
		ul li.on { color:@bg;}
		ul li.dis { cursor:not-allowed; color:@fg-light-7;}
		ul li.cur { color:@fg-light-1;}
		ul li.cur:after { background:@primary-light-9;}
		ul li.on.cur { color:@bg;}
		ul li.on.cur:after { background:@warning;}
		.year {
			width:100%; margin:0 auto; overflow:hidden; display:table; table-layout:fixed; background:@primary;
			> ul { display:table-cell; vertical-align:middle; padding-bottom:0.5em;}
			.prev,
			.next { display:table-cell; vertical-align:middle; width:1+2*@gap; cursor:pointer; color:@primary-light-3;}
			.prev:after { font-family:"ico"; content:"\e009";}
			.next:after { font-family:"ico"; content:"\e05a";}
		}
		.month {
			color:@fg-light-1; margin-top:0.5em;
			> ul > li { width:16.66%; overflow:hidden;}
			> ul > li:nth-child(6n) { width:auto; float:none;}
		}
	}
	.time {
		background:@bg-dark-0-7; position:absolute; bottom:1+2*@gap; width:100%; display:flex;
		> div { flex:1;}
		.input { padding-right:0.5*@gap; display:block; margin-right:1+0.5*@gap;}
		.input input { position:relative; width:100%; height:1+2*@gap; line-height:1+2*@gap; background:transparent; padding:0 0.25*@gap; border:none; text-align:center; color:@fg-light-5;}
		.text { display:block; margin-top:-(1+2*@gap); height:1+2*@gap; padding-right:0.5*@gap; text-align:right; color:@fg-light-6; line-height:1+2*@gap;}
		.option {
			background:@bg; position:absolute; bottom:1+2*@gap; left:0; width:100%; padding:0.5*@gap 0; border-top:1px @fg-light-8-5 solid; box-shadow:0 -3px 10px @fg-op-2;
			> ul > li { float:left; width:16.6%; height:1+2*@gap; position:relative; z-index:13; overflow:hidden; line-height:1+2*@gap; cursor:pointer;}
			> ul > li:nth-child(6n) { float:none; width:auto;}
			> ul > li:after { content:""; width:1+2*@gap; height:1+2*@gap; .x_round; z-index:-1; position:absolute; margin:0 auto; top:0; left:0; right:0; bottom:0;}
			> ul > li.on:after { background:@warning !important;}
			> ul > li.on { color:@bg;}
			> ul > li.dis { cursor:not-allowed; color:@fg-light-7;}
		}
		> .on {
			background:@bg;
			.text { color:@fg-light-1;}
		}
		> .on .option { display:block;}
	}
}



// 农历
.c_calendar-lunar {
	.day {
		> ul > li > span.solar { line-height:1.2; font-size:85.71%; top:((1+2*@gap)-(1.2*0.875)-(1.2*0.75))/0.875/2;}
		> ul > li > span.lunar { line-height:1.2; position:absolute; margin:0; font-size:75%; bottom:((1+2*@gap)-(1.2*0.875)-(1.2*0.75))/0.75/2; left:0; right:0; text-align:center; width:100%; overflow:hidden; color:@fg-light-6; display:inline-block; margin:auto; white-space:nowrap;}
		> ul > li > span.lunar-month { color:@primary;}
		> ul > li.on > span.lunar { color:@bg;}
	}
}
.c_calendar-lunar.c_calendar-s {
	.day {
		> ul > li > span.solar { line-height:1+2*@gap;}
		> ul > li > span.lunar { display:none;}
	}
}



// 全屏高度/自动全屏高度
.c_calendar-full,
.c_scrollContent > .c_calendar,
.l_float > .c_calendar,
.c_scroll > .c_calendar { height:100%;}



// 大小
.c_calendar-s { font-size:85.71%;}
.c_calendar-m { font-size:100%;}



// 含有时间
.c_calendar-hasTime {
	height:10*(1+2*@gap)+@gap;
}



// 渐变
.c_calendar-gd {
	background:linear-gradient(to right, @primary, @success);
	.header {
		background-color:transparent;
		.info {
			&:after { color:@bg;}
		}
	}
	.week { background-color:transparent;}
	.select {
		.year {
			background:linear-gradient(to right, @primary, @success);
			.prev { color:@bg;}
			.next { color:@bg;}
		}
	}
	.day { background:@bg;}
}



// 强制下拉日历的宽度
.s_pad #_Wade_DropDownCalendar_float,
.s_pc #_Wade_DropDownCalendar_float { width:(7*(1+2*@gap))*0.8751 !important;}
.c_float > .content > .c_calendar:first-child { top:-1px;}