@import "_variables";

.mk-dp-root {
	display: inline-block;
	position: relative;

	&[data-popup="false"] {
		display: block;
	}
}

.mk-dp-shadow {
	position: relative;
}

.mk-dp {
	color: @mk-gray-1;
	display: none;
}

.mk-dp-inputs:after {
	clear: both;
	content: "";
	display: table;
}

.mk-dp-input-container {
	float: left;
}

.mk-dp-root[data-inputs="false"] .mk-dp-input-container {
	display: none;
}

.mk-dp-input-container + .mk-dp-input-container {
	margin-left: 10px;
}

.mk-dp-input {
	border: 1px solid @mk-gray-3;
	color: @mk-gray-1;
	display: inline-block;
	padding: 5px 30px 5px 10px;
	position: relative;
	transition: all 0.5s;
}

.mk-dp-trap {
	position: absolute;
	left: -9999px;
}

.mk-dp-label {
	display: block;
}

.mk-dp-description {
	position: absolute;
	left: -9999px;
	visibility: hidden;
}

.mk-dp-entry:focus,
.mk-dp-table:focus,
.mk-dp-trigger:focus,
.mk-dp-control:focus {
	outline: 0;
}

.mk-dp-trigger {
	background: transparent;
	border: 1px solid @mk-gray-5;
	width: @mk-dp-trigger-width;
	position: absolute;
	right: @mk-dp-trigger-pos;
	top: @mk-dp-trigger-pos;
	bottom: @mk-dp-trigger-pos;
	border: 1px solid @mk-gray-5;
	font-size: @mk-dp-trigger-font-size;
	line-height: @mk-dp-trigger-font-size;
}

.mk-dp-root[data-popup="false"] .mk-dp-trigger {
	display: none;
}

.mk-dp-trigger:before {
	content: @mk-dp-trigger-char;
	position: absolute;
	transform: rotate(90deg);
	top: 2px;
	left: 8px;
}

.mk-dp-trigger:focus,
.mk-dp-trigger:hover {
	background: @mk-gray-4;
	border-color: @mk-gray-3;
	color: @mk-secondary;
}

.mk-dp-entry {
	-webkit-appearance: none;
    -moz-appearance: none;
	font-size: @mk-dp-entry-font-size;
	line-height: @mk-dp-entry-font-size;
	margin: 0;
	padding: 0;
	border-width: 0;
	text-align: right;
	width: @mk-dp-entry-width-default;
    text-indent: 0;
	transition: @mk-dp-transition;
}

.mk-dp-entry option {
	background: @mk-gray-5;
}

.mk-dp-entry:focus {
	background: @mk-dp-entry-bg-focus;
}

.mk-dp-entry:invalid {
	color: @mk-gray-3;
}

.mk-dp-entry::-ms-expand {
    display: none;
}

.mk-dp-entry[data-format="mm"]:invalid {
	width: @mk-dp-entry-width-mm;
}

.mk-dp-entry[data-format="dd"]:invalid {
	width: @mk-dp-entry-width-dd;
}

.mk-dp-entry[data-format="d"],
.mk-dp-entry[data-format="m"] {
	width: @mk-dp-entry-width-m-d;
}

.mk-dp-entry[data-format="yyyy"] {
	text-align: left;
}

.mk-dp-entry[data-format="yyyy"],
.mk-dp-entry[data-format="mmm"] {
	width: @mk-dp-entry-width-mmm-yyyy;
}

.mk-dp-entry[data-format="mmmm"] {
	width: @mk-dp-entry-width-mmmm;
}

.mk-dp-entry.disabled,
.mk-dp-entry.disabled + .spacer {
	background: @mk-gray-5;
	color: @mk-gray-3;
}

.mk-dp-table:focus {
	outline: 1px solid @mk-secondary;
}

.mk-dp-control:focus,
.mk-dp-control:hover {
	border-color: @mk-secondary;
}

.mk-dp-control:disabled:focus,
.mk-dp-control:disabled:hover {
	border-color: @mk-gray-5;
}

.mk-dp-calendar {
	background: @mk-gray-5;
	min-width: 100%;
	border: 1px solid @mk-gray-3;
	position: relative;
}

.mk-dp-calendar.popup {
	box-shadow: 1px 1px 10px rgba(0, 0, 0, .4);
	display: none;
	min-width: @mk-dp-calendar-width;
	opacity: 0;
	position: absolute;
	z-index: 2;
}

.mk-dp-calendar.popup.transition {
	 display: block;
	 transition: all @mk-sm-transition-speed;
	-webkit-transition: all @mk-sm-transition-speed;
}

.mk-dp-calendar.popup[aria-hidden="false"] {
	display: block;
	opacity: 1;
}

.mk-dp-calendar.disabled:after {
	background: @mk-gray-5;
	content: "";
	opacity: 0.5;
	top: 0;
	left:0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 1;
}

.mk-dp-control {
	background: transparent;
	border-width: 0;
	color: @mk-gray-2;
	font-size: @mk-dp-control-font-size;
	letter-spacing: -4px;
	line-height: @mk-dp-control-font-size;
	position: absolute;
	top: 10px;

	&:disabled {
		color: @mk-gray-3;
		cursor: default;
	}

	&:focus {
		color: @mk-secondary;
	}
}

.mk-dp-control.prev-yr {
	left: 10px;

	&:before {
		content: @mk-dp-control-char-prev-yr;
		left: 0;
	}
}

.mk-dp-control.prev-mo {
	left: 40px;

	&:before {
		content: @mk-dp-control-char-prev-mo;
		left: 0;
	}
}

.mk-dp-control.next-yr {
	right: 10px;

	&:before {
		content: @mk-dp-control-char-next-yr;
		right: 0;
	}
}

.mk-dp-control.next-mo {
	right: 40px;

	&:before {
		content: @mk-dp-control-char-next-mo;
		right: 0;
	}
}

.mk-dp-table {
	width: 100%;
}

.mk-dp-table .mk-dp-heading {
	background: @mk-gray-5;
	color: @mk-gray-1;
	text-align: center;
	text-transform: capitalize;
	padding: 10px 0;
}

.mk-dp-table th,
.mk-dp-table td {
	border-bottom: 1px solid @mk-gray-3;
	padding: 5px;
	text-align: center;
	width: 14.28%;
}

.mk-dp-table th {
	text-transform: uppercase;
}

.mk-dp-table .mk-dp-day span {
	display: block;
	position: relative;
	transition: @mk-dp-transition;
	z-index: 1;
}

.mk-dp-table .mk-dp-day span:before {
	background: transparent;
	border-radius: 80%;
	color: @mk-gray-5;
	content: "";
	display: block;
	width: @mk-dp-active-before-size;
	height: @mk-dp-active-before-size;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: (@mk-dp-active-before-size / 2) * -1;
	margin-top: (@mk-dp-active-before-size / 2) * -1;
	z-index: -1;
	transition: @mk-dp-transition;
}

.mk-dp-table .mk-dp-day {
	color: @mk-gray-3;
}

.mk-dp-table .sunday,
.mk-dp-table .saturday {
	background: @mk-gray-4;
}

.mk-dp-table .selectable {
	cursor: pointer;
	color: @mk-gray-1;
}

.mk-dp-table .disabled span:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	width: 30px;
	border-bottom: 1px solid @mk-gray-3;
	transform: rotate(145deg);
	top: 9px;
	left: 2px;
}

.mk-dp-table .today {
	color: @mk-primary;
}

.mk-dp-table  .active span {
	color: @mk-gray-5;
}

.mk-dp-table .active span:before {
	background: @mk-primary;
}