@import "../common/md_colors";
@import "../common/variables_mixins";

$drp-width:             210px;
$drp-range-width:       140px;

.date-picker {
	width: 170px;
	height: 25px;
	padding: 0;
	border: 0;
	line-height: 25px;
	padding-left: 10px;
	font-size: 12px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	color: $text-color-primary;
	position: relative;
	z-index: $z-index;
	@include respond-below(medium) {
		width: 25%
	}
}

.date-picker-wrapper {
	position: absolute;
	box-sizing: initial;
	background-color: $white;
	padding: 4px 12px;
	border-radius: $border-radius;
	@include font-size(12px);
	line-height: 20px;
	color: $text-color-secondary;
	font-family: inherit;
	@include box-shadow(2);
	z-index: $z-index-sidebar - 50;
	transition: transform 280ms $easing;
	@include respond-below(medium) {
		left: 16px !important;
		right: 16px !important;
	}
	&.inline-wrapper {
		z-index: 1;
	}
}

.dp-clearfix {
	clear: both;
	height: 0;
	font-size: 0;
}

.date-picker-wrapper {
	&.inline-wrapper {
		position: relative;
		box-shadow: none;
		display: block;
		@include respond-below('medium') {
			left: auto !important;
			right: auto !important;
		}
		@include respond-below('large') {
			.gap {
				display: none;
				+ table {
					margin-top: 20px;
				}
			}
		}
	}
	&.single-date {
		width: auto;
	}
	&.no-shortcuts {
		padding-bottom: 12px;
	}
	&.no-topbar {
		padding-top: 12px;
	}
	.footer {
		@include font-size(12px);
		b {
			display: none;
		}
		.shortcuts {
			padding: 4px 0 4px;
			font-size: 0;
			line-height: 1;
			> span {
				display: block;
				@include font-size(12px);
				line-height: 1.5;
				padding: 4px 0 0;
			}
		}
	}
	b {
		color: $text-color-secondary;
		font-weight: 700;
	}
	a {
		color: $link-color;
		text-decoration: underline;
	}
	.month-name {
		text-transform: uppercase;
	}
	.select-wrapper {
		position: relative;
		overflow: hidden;
		display: inline-block;
		vertical-align: middle;
		&:hover {
			text-decoration: underline;
		}
	}
	.month-element {
		display: inline-block;
		vertical-align: middle;
	}
	.select-wrapper select {
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		top: -1px;
		font-size: inherit;
		font-style: inherit;
		font-weight: inherit;
		text-transform: inherit;
		color: inherit;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: transparent;
		border: 0;
		outline: 0;
		opacity: 0.01;
	}
	.month-wrapper {
		border: 1px solid $border-color;
		border-radius: $border-radius;
		background-color: $white;
		padding: 8px;
		cursor: default;
		position: relative;
		_overflow: hidden;
		max-width: 100%;
		box-sizing: border-box;
		table {
			width: $drp-width;
			float: left;
			@include respond-below('medium') {
				width: 100%;
				float: none;
			}
			&.month2 {
				width: $drp-width;
				float: left;
			}
			th, td {
				vertical-align: middle;
				text-align: center;
				line-height: 14px;
				margin: 0;
				padding: 0;
				width: calc(100%/7);
			}
			.day {
				border-radius: $border-radius;
				border: 1px solid transparent;
				padding: 8px;
				@include respond-below(medium) {
					padding: 4px;
				}
				@include font-size(12px);
				margin-bottom: 1px;
				color: $text-color-primary;
				cursor: default;
				&.invalid {
					color: $muted-color;
				}
			}
			div.day {
				&.lastMonth, &.nextMonth {
					color: #999;
					cursor: default;
				}
			}
			.day.checked {
				background: $hover-color-hex;
				border-radius: 0;
			}
			.week-name {
				height: 20px;
				line-height: 20px;
				font-weight: 100;
				text-transform: uppercase;
				th {
					padding: 8px 0;
				}
			}
			.day.has-tooltip {
				cursor: help !important;
				.tooltip {
					white-space: nowrap;
				}
			}
		}
	}
	.time {
		label {
			white-space: nowrap;
			@include font-size(12px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 4px 0;
		}
	}
	.month-wrapper table .day {
		&.toMonth {
			&.valid {
				color: $text-color-primary;
				cursor: pointer;
			}
			&.hovering {
				background-color: $hover-color-hex;
				border-radius: 0 !important;
			}
		}
		&.nextMonth, &.lastMonth {
			display: none;
		}
		&.real-today {
			background-color: transparent;
			border-color: material-color('amber','900');
			&.invalid {
				border-color: material-color('amber','500');
			}
			&.checked,
			&.hovering {
				background-color: $hover-color-hex;
			}
		}
	}
	table .caption {
		height: 36px;
		background: $theme-color;
		color: $white;
		> th {
			vertical-align: middle;
			width: 36px !important;
			padding: 0;
			&:first-of-type,
			&:last-of-type {
				//width: 27px;
			}
		}
		.next,
		.prev {
			display: block;
			margin-top: 2px;
			padding: 0 4px;
			cursor: pointer;
			color: white;
			opacity: 0.6;
			@include font-size(24px);
			line-height: 26px;
		}
		.next:hover,
		.prev:hover {
			opacity: 1;
		}
	}
	.gap {
		position: relative;
		z-index: 1;
		width: 15px;
		height: 100%;
		background-color: transparent;
		font-size: 0;
		line-height: 0;
		float: left;
		top: -5px;
		margin: 0 10px -10px;
		visibility: hidden;
		overflow: hidden;
		@include respond-below('medium') {
			display: none;
			+ table {
				margin-top: 20px;
			}
		}
		.gap-lines {
			min-height: 100%;
			overflow: hidden;
		}
		.gap-line {
			height: 15px;
			width: 15px;
			position: relative;
			.gap-1 {
				z-index: 1;
				height: 0;
				border-left: 8px solid white;
				border-top: 8px solid $border-color-hex;
				border-bottom: 8px solid $border-color-hex;
			}
			.gap-2 {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				height: 0;
				border-left: 8px solid transparent;
				border-top: 8px solid white;
			}
			.gap-3 {
				position: absolute;
				right: 0;
				top: 8px;
				z-index: 2;
				height: 0;
				border-left: 8px solid transparent;
				border-bottom: 8px solid white;
			}
		}
		.gap-top-mask {
			width: 6px;
			height: 1px;
			position: absolute;
			top: -1px;
			left: 1px;
			background-color: $border-color-hex;
			z-index: 3;
		}
		.gap-bottom-mask {
			width: 6px;
			height: 1px;
			position: absolute;
			bottom: -1px;
			left: 7px;
			background-color: $border-color-hex;
			z-index: 3;
		}
	}
	.selected-days {
		display: none;
	}
	.drp_top-bar {
		position: relative;
		padding: 10px 40px 10px 0;
		@include respond-below(medium) {
			padding-right: 64px;
		}
		.error-top, .normal-top {
			display: none;
		}
		.default-top {
			display: block;
		}
		&.error {
			.default-top {
				display: none;
			}
			.error-top {
				display: block;
				color: $danger-color;
			}
		}
		&.normal {
			.default-top {
				display: none;
			}
			.normal-top {
				display: block;
				.selection-top {
					color: #333;
				}
			}
		}
		.apply-btn {
			position: absolute;
			right: 0;
			top: 8px;
			padding: 4px;
			margin: 0;
			@include font-size(10px);
			border-radius: $border-radius;
			cursor: pointer;
			color: $text-color-primary;
			border: solid 1px $theme-color;
			line-height: initial;
			background: transparent;
			text-transform: uppercase;
			font-weight: 500;
			&.disabled {
				cursor: pointer;
				color: #606060;
				border: solid 1px #b7b7b7;
				background: #fff;
			}
		}
	}
	.time {
		position: relative;
	}
	&.single-month .time {
		display: block;
	}
	.time input[type=range] {
		vertical-align: middle;
		padding: 0;
		margin: 0 0 0 4px;
		width: $drp-range-width;
	}
	.time1 {
		width: $drp-width;
		padding: 0 4px;
		text-align: center;
		> div {
			&:first-child {
				@include font-size(13px);
				color: $text-color-primary;
			}
		}
	}
}

/*time styling*/
.time2 {
	width: $drp-width;
	padding: 0 4px;
	text-align: center;
	> div {
		&:first-child {
			@include font-size(13px);
			color: $text-color-primary;
		}
	}
}

.date-picker-wrapper {
	.time1 {
		float: left;
	}
	.time2 {
		float: right;
	}
	@include respond-below(medium) {
		.time1,
		.time2 {
			float: none;
		}
	}
	.hour {
		text-align: right;
	}
}

.minute {
	text-align: right;
}

.date-picker-wrapper {
	.hide {
		display: none;
	}
	.first-date-selected,
	.last-date-selected {
		background-color: $theme-color !important;
		border-color: $theme-color !important;
		color: $white !important;
		* {
			color: $white !important;
		}
	}
	.first-date-selected {
		border-radius: 4px 0 0 4px !important;
	}
	.last-date-selected {
		border-radius: 0 4px 4px 0 !important;
	}
	.first-date-selected.last-date-selected {
		border-radius: 4px !important;
	}
	.date-range-length-tip {
		position: absolute;
		margin-top: -4px;
		margin-left: 0;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
		display: none;
		background: rgba(0,0,0,.75);
		border-radius: 4px;
		padding: 2px 8px;
		@include font-size(12px);
		line-height: 16px;
		color: $white;
		&:after {
			content: '';
			position: absolute;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid rgba(0,0,0,.75);
			left: 50%;
			transform: translate3d(-50%,0,0);
			bottom: -4px;
		}
	}
	&.two-months.no-gap {
		.month1 .next, .month2 .prev {
			display: none;
		}
	}
	.week-number {
		padding: 5px 0;
		line-height: 1;
		font-size: 12px;
		margin-bottom: 1px;
		color: #999;
		cursor: pointer;
		&.week-number-selected {
			color: #49e;
			font-weight: bold;
		}
	}
}

.date-picker-custom {
	&.no-top-bar {
		.drp_top-bar {
			display: none !important;
		}
	}
	&.no-padding {
		.date-picker-wrapper {
			padding: 0;
		}
	}
	&.large-picker {
		.date-picker-wrapper .month-wrapper {
			padding: 16px;
			@include respond-below('medium') {
				padding: 4px;
			}
			table {
				width: 360px;
				@include respond-below('large') {
				    width: 100%;
				}
			}
		}
	}
}