@font-size: 14px;
@day-padding: .5em;
@border-color: #C5D3E2;
@disabled-color: #C5D3E2;
@hover-color: #BCCAD9;
@text-color: #1C2A39;
@selected-background-color: #3498DB;
@selected-text-color: #C5D3E2;

.datepicker {
	position: relative;

	* {
		box-sizing: border-box;
	}

	>.header {
		display: block;
		width: 100%;
		border: thin solid @border-color;
		text-align: center;
		padding: @day-padding;
		&.inline {
			cursor: pointer;
		}
	}

	.calendar {
		width: 100%;
		border: thin solid @border-color;
  		border-collapse: collapse;
    	border-spacing: 0;
		background: white;
		* {
			background: white;
		}

		.controls {

			>div {
				border-left: thin solid @border-color;
				border-right: thin solid @border-color;
				border-top: thin solid @border-color;
				position: relative;
				padding: @day-padding;

				&:first-of-type {
					border-top: none;
				}

				>div {
					background: white;
					position: absolute;
					height: 100%;
					width: auto;
					top: 0; 
					cursor: pointer;
					padding: @day-padding;

					&.prev {
						left: 0;
						border-right: thin solid @border-color;
					}

					&.next {
						right: 0;
						border-left: thin solid @border-color;
					}

				}
			}
		}

		.dayLabel {
			border: thin solid @border-color;
			padding: @day-padding;
		}

		.week {
			width: 100%;

			.day {
				font-size: @font-size;
				width: 100% / 7;
				text-align: center;
				padding: @day-padding;
				border: thin solid @border-color;
				color: @text-color;

				&.selected {
					color: @selected-background-color;
					// background: @selected-background-color;
					border-bottom: 2px solid @selected-background-color;
				}

				&.disabled {
					color: @disabled-color;
				}

				&:not(.disabled):not(.selected):hover {
					cursor: pointer;
					background: @hover-color;
				}
			}
		}
	}
}