.neos-modified,
.neos-error {
	.neos-inspector-datetime-editor {
		position: relative;

		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			z-index: 1;
		}

		&:after {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: $unit - 2;
			left: 0;
			z-index: 1;
		}

		.neos-add-on + span {
			&:before {
				content: "";
				position: absolute;
				width: 2px;
				height: $unit;
				top: 0;
				left: 0;
				z-index: 1;
			}

			&:after {
				content: "";
				position: absolute;
				width: 2px;
				height: $unit;
				top: 0;
				right: 0;
				z-index: 1;
			}
		}
	}
}

.neos-modified .neos-inspector-datetime-editor {
	&:before,
	&:after,
	.neos-add-on + span:before,
	.neos-add-on + span:after {
		background-color: $green;
	}
}

.neos-error .neos-inspector-datetime-editor {
	&:before,
	&:after,
	.neos-add-on + span:before,
	.neos-add-on + span:after {
		background-color: $warning;
	}
}

.neos-inspector-datetime-editor {
	color: #fff;
	width: $inspectorWidth - $defaultMargin * 2;
	display: table;

	.neos-add-on {
		cursor: pointer;
	}

	a.neos-add-on {
		&:hover,
		&:focus {
			background-color: $blue;
			text-decoration: none;
			outline: none;
		}
	}

	input {
		cursor: pointer;
		opacity: 1;
	}
}

.neos-datetimepicker {
	direction: ltr;

	* {
		@include user-select(none);
	}

	&.neos-datetimepicker-rtl {
		direction: rtl;

		table tr td span {
			float: right;
		}
	}

	& > div {
		display: none;
	}

	&.neos-minutes div.neos-datetimepicker-minutes,
	&.neos-hours div.neos-datetimepicker-hours,
	&.neos-days div.neos-datetimepicker-days,
	&.neos-months div.neos-datetimepicker-months,
	&.neos-years div.neos-datetimepicker-years {
		display: block;
	}

	div.neos-datetimepicker-minutes,
	div.neos-datetimepicker-hours,
	div.neos-datetimepicker-months,
	div.neos-datetimepicker-years {
		table tbody tr td {
			border-bottom: none;
		}

		table tfoot tr th {
			border-top: none;
		}
	}

	table {
		margin: 0;
		width: $inspectorWidth - $defaultMargin * 2;;

		td,
		th {
			text-align: center;
			width: $unit;
			height: $unit;
			line-height: $unit;
			border: 1px solid $grayMedium;
			padding: 0;
			background-color: $grayDark;
		}

		tr {
			td {
				&.neos-minute:hover,
				&.neos-hour:hover,
				&.neos-day:hover {
					background-color: $blue;
					cursor: pointer;
				}

				&.neos-old,
				&.neos-new {
					color: $textSubtle;
				}

				&.neos-disabled,
				&.neos-disabled:hover {
					background-color: transparent;
					color: $textSubtle;
					cursor: default;
				}

				&.neos-today,
				&.neos-today.neos-disabled {
					background-color: $grayMedium;
				}

				&.neos-active,
				&.neos-active:hover,
				&.neos-active.neos-disabled,
				&.neos-active.neos-disabled:hover {
					background-color: $blue;
				}

				&.neos-active:hover,
				&.neos-active.neos-disabled:hover,
				&.neos-active:active,
				&.neos-active:hover:active,
				&.neos-active.neos-disabled:active,
				&.neos-active.neos-disabled:hover:active,
				&.neos-active.neos-active,
				&.neos-active:hover.neos-active,
				&.neos-active.neos-disabled.neos-active,
				&.neos-active.neos-disabled:hover.neos-active,
				&.neos-active.neos-disabled,
				&.neos-active:hover.neos-disabled,
				&.neos-active.neos-disabled.neos-disabled,
				&.neos-active.neos-disabled:hover.neos-disabled,
				&.neos-active[disabled],
				&.neos-active:hover[disabled],
				&.neos-active.neos-disabled[disabled],
				&.neos-active.neos-disabled:hover[disabled] {
					background-color: $blue;
				}

				&.neos-active:active,
				&.neos-active:hover:active,
				&.neos-active.neos-disabled:active,
				&.neos-active.neos-disabled:hover:active,
				&.neos-active.neos-active,
				&.neos-active:hover.neos-active,
				&.neos-active.neos-disabled.neos-active,
				&.neos-active.neos-disabled:hover.neos-active {
					background-color: $blue;
				}

				span {
					display: block;
					width: 25%;
					height: $unit;
					line-height: $unit;
					float: left;
					cursor: pointer;
					border-right: 1px solid $grayMedium;
					border-bottom: 1px solid $grayMedium;
					margin-right: -1px;

					&:hover {
						background-color: $blue;
						color: #fff;
					}

					&.neos-disabled,
					&.neos-disabled:hover {
						background-color: transparent;
						color: $textSubtle;
						cursor: default;
					}

					&.neos-active,
					&.neos-active:hover,
					&.neos-active.neos-disabled,
					&.neos-active.neos-disabled:hover {
						background-color: $blue;
						color: $textOnGray;
					}

					&.neos-active:hover,
					&.neos-active.neos-disabled:hover,
					&.neos-active:active,
					&.neos-active:hover:active,
					&.neos-active.neos-disabled:active,
					&.neos-active.neos-disabled:hover:active,
					&.neos-active.neos-active,
					&.neos-active:hover.neos-active,
					&.neos-active.neos-disabled.neos-active,
					&.neos-active.neos-disabled:hover.neos-active,
					&.neos-active.neos-disabled,
					&.neos-active:hover.neos-disabled,
					&.neos-active.neos-disabled.neos-disabled,
					&.neos-active.neos-disabled:hover.neos-disabled,
					&.neos-active[disabled],
					&.neos-active:hover[disabled],
					&.neos-active.neos-disabled[disabled],
					&.neos-active.neos-disabled:hover[disabled] {
						background-color: $blue;
					}

					&.neos-active:active,
					&.neos-active:hover:active,
					&.neos-active.neos-disabled:active,
					&.neos-active.neos-disabled:hover:active,
					&.neos-active.neos-active,
					&.neos-active:hover.neos-active,
					&.neos-active.neos-disabled.neos-active,
					&.neos-active.neos-disabled:hover.neos-active {
						background-color: $blue;
					}

					&.neos-old {
						color: $textSubtle;
					}
				}
			}
		}
	}

	.neos-datetimepicker-hours span {
		height: 26px;
		line-height: 26px;
	}

	.neos-datetimepicker-hours table tr td span.neos-hour_am,
	.neos-datetimepicker-hours table tr td span.neos-hour_pm {
		width: 14.6%;
	}

	.neos-datetimepicker-hours fieldset legend,
	.neos-datetimepicker-minutes fieldset legend {
		margin-bottom: inherit;
		line-height: 30px;
	}

	.neos-datetimepicker-minutes span {
		height: 26px;
		line-height: 26px;
	}

	th.neos-switch {
		width: 145px;
	}

	thead tr:first-child th,
	tfoot tr:first-child th {
		cursor: pointer;
		border-top: none;
	}

	thead tr:first-child th:hover,
	tfoot tr:first-child th:hover {
		background-color: $blue;
	}

	thead tr + tr th {
		background-color: $grayMedium;
	}
}

.neos-datetimepicker-inline {
	width: $inspectorWidth - $defaultMargin * 2;;
}
