@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";

$bs-datetimepicker-timepicker-font-size: 1.2em !default;
$bs-datetimepicker-active-bg: $primary !default;
$bs-datetimepicker-active-color: $white !default;
$bs-datetimepicker-border-radius: $input-border-radius !default;
$bs-datetimepicker-btn-hover-bg: $gray-100 !default;
$bs-datetimepicker-day-color: $gray-800 !default;
$bs-datetimepicker-disabled-color: $gray-300 !default;
$bs-datetimepicker-alternate-color: $gray-500 !default;
$bs-datetimepicker-secondary-border-color: #ccc !default;
$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
$bs-datetimepicker-primary-border-color: white !default;
$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;

$bs-datetimepicker-action-btn-color: $gray-900;
$bs-datetimepicker-action-btn-bg: $light;
$bs-datetimepicker-action-hover-btn-color: $white;
$bs-datetimepicker-action-hover-btn-bg: $secondary;

$bs-datetimepicker-th-color: $gray-900;
$dropdown-border-color: $gray-400;

// Datetimepicker base styles
%sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.datetimepicker-group {
	position: relative;
}

.bootstrap-datetimepicker-widget {
	font-size: $font-size-sm;
	list-style: none;

	&.dropdown-menu {
		margin: 5px 0;
		padding: 4px;

		&.timepicker-sbs {
			@include media-breakpoint-up( md ) {
				width: 38em;
			}

			@include media-breakpoint-up( lg ) {
				width: 38em;
			}

			@include media-breakpoint-up( xl ){
				width: 38em;
			}
		}

		&:before, &:after {
			content: '';
			display: inline-block;
			position: absolute;
		}

		&.bottom {
			&:before {
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
				border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
				top: -7px;
				left: 7px;
			}

			&:after {
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
				top: -6px;
				left: 8px;
			}
		}

		&.top {
			&:before {
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-top: 7px solid $bs-datetimepicker-secondary-border-color;
				border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
				bottom: -7px;
				left: 6px;
			}

			&:after {
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid $bs-datetimepicker-primary-border-color;
				bottom: -6px;
				left: 7px;
			}
		}

		&.pull-right {
			&:before {
				left: auto;
				right: 6px;
			}

			&:after {
				left: auto;
				right: 7px;
			}
		}
	}

	.list-unstyled {
		margin: 0;
	}

	a[data-action] {
		display: block;
		padding: 6px;
		&.btn:active {
			box-shadow: none;
		}

		i {
			margin: 0;
		}
	}

	a[data-action]:active {
		box-shadow: none;
	}

	.timepicker-hour, .timepicker-minute, .timepicker-second {
		width: 54px;
		font-weight: bold;
		font-size: $bs-datetimepicker-timepicker-font-size;
		margin: 0;
	}

	button[data-action] {
		padding: 6px;
	}

	.btn[data-action="incrementHours"]::after {
		@extend %sr-only;
		content: "Increment Hours";
	}

	.btn[data-action="incrementMinutes"]::after {
		@extend %sr-only;
		content: "Increment Minutes";
	}

	.btn[data-action="decrementHours"]::after {
		@extend %sr-only;
		content: "Decrement Hours";
	}

	.btn[data-action="decrementMinutes"]::after {
		@extend %sr-only;
		content: "Decrement Minutes";
	}

	.btn[data-action="showHours"]::after {
		@extend %sr-only;
		content: "Show Hours";
	}

	.btn[data-action="showMinutes"]::after {
		@extend %sr-only;
		content: "Show Minutes";
	}

	.btn[data-action="togglePeriod"]::after {
		@extend %sr-only;
		content: "Toggle AM/PM";
	}

	.btn[data-action="clear"]::after {
		@extend %sr-only;
		content: "Clear the picker";
	}

	.btn[data-action="today"]::after {
		@extend %sr-only;
		content: "Set the date to today";
	}

	.picker-switch {
		text-align: center;

		&::after {
			@extend %sr-only;
			content: "Toggle Date and Time Screens";
		}

		td {
			padding: 0;
			margin: 0;
			height: auto;
			width: auto;
			line-height: inherit;

			span, i, svg {
				line-height: 2.5;
				height: 2.5em;
				width: 100%;
			}
		}
	}

	table {
		width: 100%;
		margin: 0;


		& td,
		& th {
			text-align: center;
			border-radius: $bs-datetimepicker-border-radius;
			padding: 0.5em;
		}

		& th {
			height: 20px;
			line-height: 20px;
			width: 20px;

			&.dow {
				font-size: px-to-rem( 12px );
				color: $bs-datetimepicker-th-color;
				text-transform: uppercase;
			}

			&.picker-switch {
				font-weight: 400;
				font-size: $font-size-base;
				text-transform: capitalize;
				color: $gray-800;
			}

			&.picker-switch {
				width: 145px;
			}

			&.disabled,
			&.disabled:hover {
				background: none;
				color: $bs-datetimepicker-disabled-color;
				cursor: not-allowed;
			}

			&.prev::after {
				@extend %sr-only;
				content: "Previous Month";
			}

			&.next::after {
				@extend %sr-only;
				content: "Next Month";
			}
		}

		& thead tr:first-child th {
			cursor: pointer;

			&:hover {
				background: $bs-datetimepicker-btn-hover-bg;
			}
		}

		& td {
			height: 34px;
			line-height: 34px;
			width: 34px;

			.year,
			.month {
				width: auto;
				padding: 0 4px;
			}

			&.cw {
				font-size: .8em;
				height: 20px;
				line-height: 20px;
				color: $bs-datetimepicker-alternate-color;
			}

			&.day {
				height: 20px;
				line-height: 20px;
				width: 20px;
				color: $bs-datetimepicker-day-color;
			}

			&.day:hover,
			&.hour:hover,
			&.minute:hover,
			&.second:hover {
				background: $bs-datetimepicker-btn-hover-bg;
				cursor: pointer;
			}

			&.old,
			&.new {
				color: $bs-datetimepicker-alternate-color;
			}

			&.today {
				position: relative;

				&:before {
					content: '';
					display: inline-block;
					border: solid transparent;
					border-width: 0 0 7px 7px;
					border-bottom-color: $bs-datetimepicker-active-bg;
					border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
					position: absolute;
					bottom: 4px;
					right: 4px;
				}
			}

			&.active,
			&.active:hover {
				background-color: $bs-datetimepicker-active-bg;
				color: $bs-datetimepicker-active-color;
				text-shadow: $bs-datetimepicker-text-shadow;
			}

			&.active.today:before {
				border-bottom-color: #fff;
			}

			&.disabled,
			&.disabled:hover {
				background: none;
				color: $bs-datetimepicker-disabled-color;
				cursor: not-allowed;
			}

			span, i, svg {
				display: inline-block;
				width: 34px;
				height: 34px;
				margin: 4px;
				line-height: 34px;
				cursor: pointer;
				border-radius: $bs-datetimepicker-border-radius;

				&:hover {
					background: $bs-datetimepicker-btn-hover-bg;
				}

				&.active {
					background-color: $bs-datetimepicker-active-bg;
					color: $bs-datetimepicker-active-color;
					text-shadow: $bs-datetimepicker-text-shadow;
				}

				&.old {
					color: $bs-datetimepicker-alternate-color;
				}

				&.disabled,
				&.disabled:hover {
					background: none;
					color: $bs-datetimepicker-disabled-color;
					cursor: not-allowed;
				}

				&.decade {
					padding: 0 4px;
					width: initial;
				}
			}

			a.btn {
				padding: 0;
				color: $bs-datetimepicker-action-btn-color;
				background-color: $bs-datetimepicker-action-btn-bg;

				span, i, svg {
					color: inherit;
					background-color: transparent;
				}

				&:hover,
				&:focus {
					color: $bs-datetimepicker-action-hover-btn-color;
					background-color: $bs-datetimepicker-action-hover-btn-bg;
				}
			}

			span:empty {
				display: none;
			}
		}
	}

	&.usetwentyfour {
		td.hour {
			height: 27px;
			line-height: 27px;
		}
	}
	i {
		font-style: normal;
	}
}

.input-group.date {
	& .input-group-addon {
		cursor: pointer;
	}
}

// medias
//@include media-breakpoint-up( md ) {
//	.bootstrap-datetimepicker-widget {
//		&.dropdown-menu {
//			width: px-to-rem( 270px );
//		}
//	}
//}