//@import "../../../abstracts/abstracts";

.dbq-form {
	.input-group {
		.form-control.datetimepicker,
		.form-control.datepicker {
			border-radius: 0 0 $border-radius-default 0;
		}

		.form-control.datepicker {
			border: $field-border-width solid $modal-border-color !important;
			&:disabled {
				border: 0px solid $modal-disabled-color !important;
				border-left: 0 !important;
			}
		}
	}
}
form[data-view-mode="View"] {
	.dbq-form {
		.input-group {
			.form-control.datepicker {
				border: 0px solid $modal-disabled-color !important;
				border-left: 0 !important;
			}
		}
	}
}
.modal,
.dbq-popup {
	.dbq-form {
		.row[data-element-type="InputProperty"] {
			.datepicker {
				table {
					border: 0 !important;
				}
			}
			.timepicker-picker {
				table {
					border: none !important;
				}
			}
		}
	}
}
.bootstrap-datetimepicker-widget {
	background-color: unset !important;
	background: $popup-menu-background !important;
    border: 2px solid $popup-menu-border-color !important;
    border-radius: $border-radius-default !important;
	-webkit-box-shadow: $popup-menu-box-shadow;
	-moz-box-shadow: $popup-menu-box-shadow;
	box-shadow: $popup-menu-box-shadow;
	color: color(text-color-default);
	z-index: 1200;
	position: absolute;
	//overflow-y: visible;
	height: min-content;

	&.dropdown-menu {
		&:before, &:after {
			display: none; // To-do: remove this code and fix the arrow
		}
	}

	.row {
		margin: 0;
	}

	table {
		th {
			height: 20px;
			line-height: 20px;
			width: 20px !important;
			padding: 10px 0;
			margin: 0;
			&.dow {
				color: $color-primary !important;
			}
			&.picker-switch {
				width: 100% !important;
			}
		}
		thead {
			tr {
				&:first-child {
					th {
						padding: 10px 3px;
						&:hover {
							background: $popup-menu-hover-background;
						}
					}
				}
			}
		}
		tr {
			background: none;
			color: color(text-color-default);
			border-bottom: none;
			&:hover {
				border-bottom: none !important;
			}
		}
		td {
			&.day {
				padding: 8px;
				&:hover {
					background: $color-primary !important;
					color: $color-white !important;
				}
			}
			&.active {
				background-color: $color-primary !important;
				color: $color-white !important;
			}
			&.new,
			&.old {
				color: #aeb4c1;
			}
			&.today {
				&:before {
					border-bottom-color: $color-primary;
				}
			}
			&.day,
			&.hour,
			&.minute,
			&.second {
				&:hover {
					background: rgba(0, 0, 0, 0.05);
				}
			}

			span {
				float: left;
				display: inline-block;
				width: calc(25% - 10px);
				height: 54px;
				line-height: 54px;
				margin: 5px;
				padding: 0;
				cursor: pointer;
				border-radius: 4px;
				&.active {
					background-color: $color-primary;
					color: #fff;
					text-shadow: none;
				}

			}
		}
	}

	.prev,
	.next {
		color: $color-primary !important;
	}

	.timepicker-hour {
		width: 100px;
	}
	.timepicker-minute {
		width: 100px;
	}
	.timepicker-second {
		width: 100px;
	}

	a[data-action] {
		color: color(text-color-default) !important;
		padding: 10px !important;
		&:hover {
			color: $color-primary !important;
			background: $popup-menu-hover-background;
		}
	}

	.datepicker {
		/*padding: 0 5px 0 0 !important; <-- for the datepicker in WSP this isnt working..*/
		padding: 0 !important;
		/*date-time picker needs this..*/
	}

	.timepicker-picker {
		height: 100%;
		width: 100%;
		float: left;
		table {
			height: 100%;
			tr {
				height: 100px;
				td {
					span {
						&:hover {
							background: $color-primary;
							color: #fff;
						}
					}

					a.btn {
						float: none;
					}
				}
			}
		}
	}

	.datepicker-decades {
		.decade {
			line-height: 30px !important;
			width: calc(50% - 10px);
			margin: 5px;
			padding: 0;
			height: 30px;
		}
	}

	&.dropdown-menu {
		margin: 0 !important;
		padding: 4px !important;
		&.bottom,
		&.top {
			border-left: 6px solid #ffffff;
			border-right: 6px solid #ffffff;
			border-bottom: 6px solid #ffffff;
		}
	}
}

.dropdown-menu {
	.datepicker {
		svg {
			fill: $color-primary;
		}
	}
}

// Due to limited sidepanel space we force the time and date under each other
.dbqdcltg-has-sidepanel:not(.dbqdcltg-sidepanel-is-fullscreen) {
	.dbqdcltg-sidepanel {
		.bootstrap-datetimepicker-widget {
			.datepicker.col-md-6 {
				width: 100% !important;
				max-width: 100% !important;
			}
			.timepicker.col-md-6 {
				width: 100% !important;
				max-width: 100% !important;
			}
		}
	}
}